💡 'psql' command not found

📌 문제 상황 인지

Postgres.app의 업그레이드(to ver.2.6.8) 이 후 잘 사용하던 psql 명령어를 찾지 못하겠다고 한다.

으레 그렇듯 경로 문제겠거니 했다.

📌 원인을 찾자

~/.zshrc에는 기존 경로는 다음과 같이 설정 했었다.

export PATH="/Applications/Postgres.app/Contents/Versions/latest/bin:$PATH"

또한 Postgres.app 의 Server Settings 을 통해서도 알 수 있다.

Version에서 변경이 된 것 같아 /Applications/Postgres.app/Contents/Versions로 이동해봤다.

해당 경로에는 기존 PostgreSQL 버전인 15 경로만 남아있었다.

현재 PostgreSQL의 최신 버전이 16버전이기 때문에 이런 문제가 발생한 것 같다.

📌 해결 하기

15버전 경로를 ~/.zshrc에 추가해줬다.

export PATH="/Applications/Postgres.app/Contents/Versions/15/bin:$PATH" # PostgreSQL ver.15

💡 Array 순회 하기

📌 순회

순회란 데이터를 하나 하나 살펴보는 것을 의미 합니다.

단순히 조회만 해볼 수도 있고, 하나 하나 살펴보며 데이터를 조작하기도 합니다.

📌 Array 순회 방법

코드 상에서 사용할 변수는 다음과 같습니다.

let sampleArr = [1,2,3,4,5,6,7,8,9,10];

👉 for 문

for (let index = 0; index < sampleArr.length; index++) {
    sampleArr[index].value += 2; // index: [INDEX], sampleArr[index]: [VALUE]
}
// sampleArr: [3,4,5,6,7,8,9,10,11,12];

👉 for...of 문을 사용한 순회

for (const sample of sampleArr) {
    sample.value += 2;
}
// sampleArr: [3,4,5,6,7,8,9,10,11,12];

for...of 문은 배열의 원소를 하나 하나 반환합니다.

👉 for...in 문을 사용한 순회

for (const property in sampleArr) {
    sampleArr[property].value += 2; // property: [INDEX], sampleArr[property]: sampleClass { value: [VALUE] }
}
// sampleArr: [3,4,5,6,7,8,9,10,11,12];

for...in 문은 배열 객체의 키를 반환합니다. 원소 자체를 반환하는 것이 아니기 때문에 유의해서 사용해야합니다.

👉 while 문

let whileIndex = 0;
while (whileIndex < sampleArr.length) {
    sampleArr[whileIndex].value += 2; // whileIndex: [whileINDEX], sampleArr[whileIndex]: [VALUE]
    whileIndex++;
}
// sampleArr: [3,4,5,6,7,8,9,10,11,12];

👉 do...while 문

let doWhileIndex = 0;
do {
    sampleArr[doWhileIndex].value += 2; // doWhileIndex: [Index], sampleArr[doWhileIndex]: [VALUE]
    doWhileIndex++;
} while (doWhileIndex < sampleArr.length);
// sampleArr: [3,4,5,6,7,8,9,10,11,12];

do...while 문을 이용한 순회는 무조건 한번은 수행합니다.

💡 Array stack & queue 로 사용하기

📌 Stack With JS Array

Stack 은 Last In First Out 의 특징을 지닌 자료구조로 가장 마지막에 추가된 데이터가 가장 먼저 반출됩니다.

Stack에는 두 가지 주요 기능이 있는데, 데이터를 입력하는 기능인 PUSH와 데이터를 출력하는 기능인 POP입니다.

JS의 Array를 이용해 PUSH와 POP을 다루는 것은 Array의 메소드를 이용한 두 가지 조합이 가능합니다.

1. push 와 pop을 사용하는 조합 => 배열의 끝에서 데이터의 입출이 진행됩니다.
2. unshift와 shift를 사용하는 조합 => 배열의 앞에서 데이터의 입출이 진행됩니다.

👉 push & pop

const stack = [];

console.log("PUSH ------------------------------");
for (let i = 1; i <= 5; i++) {
    console.log(i);
    stack.push(i);
}

console.log("POP ------------------------------");
for (let i = 1; i <= 5; i++) {
    let popped = stack.pop();
    console.log(popped);
}

/*
    OUTPUT
    PUSH ------------------------------
    1
    2
    3
    4
    5
    POP ------------------------------
    5
    4
    3
    2
    1
*/

👉 unshift와shift`

const stack = [];

console.log("PUSH ------------------------------");
for (let i = 1; i <= 5; i++) {
    console.log(i);
    stack.unshift(i);
}

console.log("POP ------------------------------");
for (let i = 1; i <= 5; i++) {
    let popped = stack.shift();
    console.log(popped);
}

📌 Queue With JS Array

Queue 는 First In First Out 의 특징을 갖는 자료구조로 가장 처음에 들어온 데이터가 가장 처음으로 반출됩니다.

Queue에는 두 가지 주요 기능이 있는데, 데이터를 입력하는 기능인 Enqueue와 데이터를 출력하는 기능인 Dequeue입니다.

JS의 Array를 이용해 Enqueue와 Dequeue를 다루는 것은, Stack에서와 마찬가지로 2가지의 조합이 가능합니다.

1. push 와 shift를 사용하는 조합 => 데이터의 입력은 배열의 끝에서, 데이터의 출력은 배열의 앞에서 진행됩니다.
2. unshift 와 pop을 사용하는 조합 => 데이터의 입력은 배열의 앞에서, 데이터의 출력은 배열의 뒤에서 진행됩니다.

👉 push & shift

const queue = [];

console.log("Enqueue ------------------------------");
for (let i = 1; i <= 5; i++) {
    console.log(i);
    queue.push(i);
}

console.log("Dequeue ------------------------------");
for (let i = 1; i <= 5; i++) {
    let dequeued = queue.shift();
    console.log(dequeued);
}

/*
    OUTPUT
    Enqueue ------------------------------
    1
    2
    3
    4
    5
    Dequeue ------------------------------
    1
    2
    3
    4
    5
*/

👉 unshift & pop

const queue = [];

console.log("Enqueue ------------------------------");
for (let i = 1; i <= 5; i++) {
    console.log(i);
    queue.unshift(i);
}

console.log("Dequeue ------------------------------");
for (let i = 1; i <= 5; i++) {
    let dequeued = queue.pop();
    console.log(dequeued);
}

/*
    OUTPUT
    Enqueue ------------------------------
    1
    2
    3
    4
    5
    Dequeue ------------------------------
    1
    2
    3
    4
    5
*/

💡 Array sort & filter

📌 Array.prototype.sort

배열 내의 원소를 정렬 시키는 함수 입니다.

정렬된 새로운 배열을 반환하는 것이 아닌, 원본 배열을 정렬 시키는 함수 입니다.

📌 Array.prototype.sort([compareFunction])

// file: typescript/lib/lib.es5.d.ts
interface Array<T> {
    ...

    /**
     * Sorts an array in place.
     * This method mutates the array and returns a reference to the same array.
     * @param compareFn Function used to determine the order of the elements. It is expected to return
     * a negative value if the first argument is less than the second argument, zero if they're equal, and a positive
     * value otherwise. If omitted, the elements are sorted in ascending, ASCII character order.
     * ```ts
     * [11,2,22,1].sort((a, b) => a - b)
     * ```
     */
    sort(compareFn?: (a: T, b: T) => number): this;

    ...
}

compareFunction은 두 개의 인자를 받아 서로 비교해 순서를 정하는 함수로,
일관성 있게 0보다 작은 수, 0, 0보다 큰 수 중 하나를 반환 해야합니다.

👉 compareFunction이 주어지지 않은 경우

원소를 문자열 변환 시켜, 문자열 유니코드를 오름차순으로 정렬시킵니다.

    [10, 9, 8, 7, 6, 5, 4, 3, 2, 1].sort(); // [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
    ['하', '파', '타', '카', '차', '자', '아', '사', '바', '마', '라', '다', '나', '가'].sort();
    // ['가', '나', '다','라', '마', '바','사', '아', '자','차', '카', '타','파', '하']

👉 compareFunction이 주어진 경우

• compareFunction(a, b) > 0 : a가 b보다 먼저 위치합니다.
• compareFunction(a, b) = 0 : a와 b의 순서가 바뀌지 않습니다.
• compareFunction(a, b) < 0 : b가 a보다 먼저 위치합니다.

[10, 9, 8, 7, 6, 5, 4, 3, 2, 1].sort((a, b) => a - b); // [1, 2, 3, 4,  5, 6, 7, 8, 9, 10]

['하', '파', '타', '카', '차', '자', '아', '사', '바', '마', '라', '다', '나', '가'].sort((a, b) => a > b ? 1 : -1);
// ['가', '나', '다','라', '마', '바','사', '아', '자','차', '카', '타','파', '하']

[10, 9, 8, 7, 6, 5, 4, 3, 2, 1].sort((a, b) => b - a); // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

['하', '파', '타', '카', '차', '자', '아', '사', '바', '마', '라', '다', '나', '가'].sort((a, b) => b > a ? 1 : -1);
// ['하', '파', '타', '카', '차', '자', '아', '사', '바', '마', '라', '다', '나', '가']

객체를 정렬하는 예제를 작성 해보겠습니다.

이름을 기준으로 오름차순 정렬을 진행하고, 이름이 같은 경우 가격을 기준으로 오름차순 정렬을 진행하는 예제 입니다.

let items = [
    { 'name': 'd', price: 121 },
    { 'name': 'c', price: 150 },
    { 'name': 'a', price: 103 },
    { 'name': 'a', price: 107 },
    { 'name': 'd', price: 87 },
    { 'name': 'b', price: 99 },
];

items.sort((a, b) => {
    if (a.name == b.name) {
        return a.price - b.price;
    }

    return a.name > b.name ? 1 : -1;
}); 
/*
items: [
  { name: 'a', price: 103 },
  { name: 'a', price: 107 },
  { name: 'b', price: 99 },
  { name: 'c', price: 150 },
  { name: 'd', price: 87 },
  { name: 'd', price: 121 }
]
*/

📌 Array.prototype.filter([predicate])

// file: typescript/lib/lib.es5.d.ts
interface Array<T> {
    ...

    /**
     * Returns the elements of an array that meet the condition specified in a callback function.
     * @param predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
     * @param thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
     */
    filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
    /**
     * Returns the elements of an array that meet the condition specified in a callback function.
     * @param predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
     * @param thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
     */
    filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];

    ...
}

filter 는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 인수로 전달된 함수 predicate 에서 통과한 요소들만을 포함 시킵니다.

predicate 는 결과 배열에서 원소가 포함 되었으면 하는 경우 true를 반환하고, 포함 되지 않았으면 하는 경우 false를 반환 해야합니다.

let numberArr = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

let oddArr = numberArr.filter(function (v, i, arr) {
    return v % 2;
}); // [ 9, 7, 5, 3, 1 ]

let evenArr = numberArr.filter((v, i, arr) => {
    return v % 2 === 0;
}); // [ 10, 8, 6, 4, 2 ]

새로운 Array를 생성 합니다. Array를 생성할 때는 대괄호([ ])를 이용하거나, 생성자를 이용할 수 있습니다.

[]

let array = []; // [], length: 0

대괄호를 이용해 생성한 배열로, 길이 0의 배열이 생성됩니다.

Array() constructor

ArrayConstructor Interface

// file: node_modules/typescript/lib/lib.es5.d.ts
interface ArrayConstructor {
    new (arrayLength?: number): any[];
    new <T>(arrayLength: number): T[];
    new <T>(...items: T[]): T[];
    (arrayLength?: number): any[];
    <T>(arrayLength: number): T[];
    <T>(...items: T[]): T[];
    isArray(arg: any): arg is any[];
    readonly prototype: any[];
}

declare var Array: ArrayConstructor;

TypeScript에 정의된 Array 생성자 Interface를 참고하면 다음과 같이 정리할 수 있습니다.

• Array() 생성자를 사용할 때 인자로 숫자 1개를 넣는 경우 해당 수를 길이로 갖는 배열을 생성합니다.
• 1개의 숫자가 아닌 값을 넣는 경우, 해당 값을 포함한 길이 1의 배열을 생성합니다.
• 1개 이상의 값을 넣는 경우, 해당 값들을 원소로 하는 배열을 생성합니다.
• new 키워드는 생략 가능 합니다.

Code of ArrayConstructor

위에서 살펴본 Interface와 특징들을 이용해 실제 코드 상에서 배열을 생성하면 어떤 원소들과 길이를 갖는지 확인해봤습니다.

let array;

array = Array(); // [], length: 0

array = new Array(); // [], length: 0

array = Array(10); // [ <10 empty items> ], length: 10

array = new Array(10); // [ <10 empty items> ], length: 10

array = Array('a'); // [ 'a' ], length: 1

array = new Array('a'); // [ 'a' ], length: 1

array = Array(10, 20, 30); // [ 10, 20, 30 ], length: 3

array = new Array(10, 20, 30); // [ 10, 20, 30 ], length: 3

array = Array([10, 20, 30]); // [ [ 10, 20, 30 ] ], length: 1

array = new Array([10, 20, 30]); // [ [ 10, 20, 30 ] ], length: 1

array = Array(...[10, 20, 30]); // [ 10, 20, 30 ], length: 3

array = new Array(...[10, 20, 30]); // [ 10, 20, 30 ], length: 3

위에서 살펴 본대로, 아무것도 주어지지 않은 경우 빈 배열을 생성합니다. 숫자 1개만 주어진 경우 해당 숫자 만큼의 길이를 갖는 배열을 생성합니다. 1개 이상의 데이터가 주어지면 해당 데이터들을 원소로 갖는 배열을 생성합니다.

Array.from() & Array.of()

ArrayLike & ArrayConstructor Interface

// file: node_modules/typescript/lib/lib.es5.d.ts
interface ArrayLike<T> {
    readonly length: number;
    readonly [n: number]: T;
}

// file: node_modules/typescript/lib/lib.es2015.iterable.d.ts
interface ArrayConstructor {
    /**
     * Creates an array from an array-like object.
     * @param arrayLike An array-like object to convert to an array.
     */
    from<T>(arrayLike: ArrayLike<T>): T[];

    /**
     * Creates an array from an iterable object.
     * @param arrayLike An array-like object to convert to an array.
     * @param mapfn A mapping function to call on every element of the array.
     * @param thisArg Value of 'this' used to invoke the mapfn.
     */
    from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];

    /**
     * Returns a new array from a set of elements.
     * @param items A set of elements to include in the new array object.
     */
    of<T>(...items: T[]): T[];
}

TypeScript에 정의된 Array.from & Array.of 생성자 Interface를 참고하면 다음과 같이 정리할 수 있습니다.

• from 메소드를 이용하면, ArrayLike, 즉 길이 정보와, 인덱스에 대한 값을 갖는 객체를 이용해 배열을 생성할 수 있습니다. 또한, 원소의 각 값마다 생성시에 적용될 함수를 부여해 값 생성을 진행 시킬 수 있습니다.
• of 메소드를 사용한 생성자는 주어진 인수들을 모두 배열의 원소로 사용합니다.

Array.from()

from 메소드를 통해 배열을 생성하는 코드들 입니다.

let array;

// array = Array.from(); // TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

array = Array.from(10); // [], length: 0

array = Array.from([10, 20, 30]); // [ 10, 20, 30 ] , length: 3

array = Array.from({ length: 5 }); // [ undefined, undefined, undefined, undefined, undefined ], length: 5

array = Array.from({ length: 5, 0: 0, 1: 1, 2: 2, 4: 4 }); // [ 0, 1, 2, undefined, 4 ], length: 5

array = Array.from({ length: 5 }, (v, k) => v); // [ undefined, undefined, undefined, undefined, undefined ], length: 5

array = Array.from({ length: 5 }, (v, k) => k); // [ 0, 1, 2, 3, 4 ], length: 5

array = Array.from({ length: 5, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4 }, (v, k) => v + k); // [0, 2, 4, 6, 8], length: 5

array = Array.from([1, 2, 3, 4, 5], (v, k) => v + k); // [ 1, 3, 5, 7, 9 ] , length: 5

Array.of()

of 메소드를 통해 배열을 생성하는 코드들 입니다.

let array;

array = Array.of(); // [], length: 0

array = Array.of(1); // [ 1 ], length: 1

array = Array.of(10, 20, 30); // [ 10, 20, 30 ], length: 3

array = Array.of([10, 20, 30]); // [ [ 10, 20, 30 ] ], length: 1

array = Array.of(...[10, 20, 30]); // [ 10, 20, 30 ], length: 3

JavaScript의 Array는 기본적인 자료 구조로, 다수의 데이터를 다루기에 적절합니다. 또한 Array를 선언할 때 길이를 정해줄 수도, 정해주지 않을 수도 있고 push, pop, shift, unshift와 같은 메서드들 덕분에 스택 혹은 큐처럼 활용도 가능합니다.

이러한 특징들 덕에 알고리즘 스터디를 진행하며 Array와 그 메서드들을 자주 사용하게 되는데, 종류가 다양하여 헷갈리는 부분들이 많아 정리의 필요를 느꼈습니다.

MDN Array 문서 의 순서와는 무관하게, 개인적으로 사용 빈도가 높은 순으로 정리했습니다.

1. 배열의 생성자
2. 배열의 sort & filter
3. 배열을 스택 & 큐로 사용하기
4. 배열의 순회
5. [그외 유용한 배열의 함수]: 포스팅 예정

참고 자료

• MDN JavaScript Array : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

이글은 블로그를 다시 시작하는 첫글이기에 좀 더 의미 있게 포스팅 하고 싶었습니다....만,

크게 의미를 두고 무슨 내용으로 채워야할까를 고민하니, 계속해서 이 핑계 저 핑계 대며 시간을 끌게 되더라구요...

💡 해야할 일이 정해졌다면 가볍게 시작해서 알차게 끝내는게 역시 가장 좋은 것 같습니다.

그래서 일단 just-gomin 이라 지은 제 별칭에 맞게 저지르고 보려고 첫글을 작성 해버리겠습니다.

이렇게 시작을 하니 제겐 마음이 가볍고 조금 신선한 느낌입니다.

이번 블로그는 개발 얘기, 제가 가끔 만드는 노션 템플릿 소개와 공유, 개인적인 생각정리 얘기들을 주로 올릴 것 같습니다. 아마 카테고리는 제가 다양한 경험을 할 수록 점점 늘어나겠죠...? 관심있는게 많으니까!

지금 그리고 앞으로 제 블로그를 방문하시는 분들 환영하고 잘 부탁드리겠습니다🥳