코린이[코딩 어린이]

typescript로 nodeJS 시작하기

typescript를 이용하여 NodeJS를 실행시키는 방법입니다.

global npm

$ npm install -g typescript
$ npm install -g nodemon

nodemon은 있으면 편합니다.

npm

$ npm init -y

$ npm install -D express ts-node @types/node @types/express

/* Express용 Typescript 정의입니다. */
$ npm install @types/express-serve-static-core

tsconfig.json 작성하기

$ npx tsc --init

위 명령어를 실행하면 아래 json 파일이 생성됩니다.

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6", // 컴파일 할 버전
        "jsx": "react", // 생성할 JSX 코드 지정
        "module": "commonjs", // 어떤 모듈 방식으로 컴파일할지 설정
        "rootDir": ".", // 루트 디렉토리
        "moduleResolution": "node", // 모듈 해석 방법
        "outDir": "./dist", // 컴파일 후 JS파일이 생성되는 디렉토리
        "esModuleInterop": true, // 가져오기를 용이하게 하기 위해 추가 Javascript를 내보냅니다.
        "forceConsistentCasingInFileNames": true, // 케이스가 올바른지 확인합니다.
        "strict": true, // strict Option 활성화
        "skipLibCheck": true // 모든 .d.ts파일들 건너뛰기
    }
}

tsconfig.json 파일을 열어보면 주석처리된 내용들이 나옵니다. 그 중에서 위 내용들을 풀어줍니다.

package.json 내용 추가하기

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node dist/app.js",
    "build": "tsc -p .",
    "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/app.ts"
},

• start: node dist/app.js로 컴파일된 JS파일로 시작합니다.
• build: "tsc -p ." 타입스크립트를 자바스크립트로 빌드를 시작합니다.

app.ts 작성하기

app.ts

import express, { Request, Response, NextFunction } from "express";

const app = express();

app.get("/", (req: Request, res: Response, next: NextFunction) => {
    res.send("성공 !");
});

const PORT = 4000;
app.listen(PORT, () => {
    const message = `
        [ TEST PROJECT ]
        Running PORT: localhost:${PORT}
    `;

    console.log(message);
});

기본 틀입니다.

Server 실행하기

$ npm run dev

// yarn을 사용했을 경우
$ yarn dev

편지

문제 설명

function solution(message) {
    var answer = 0;

    for(let i = 0; i < message.length; i++) {
        answer = answer + 2;
    }
    return answer;
}

console.log(solution("happy birthday!")); // 30
console.log(solution("I love you~")); // 22

한글자를 적을 떄마다 answer에 2씩 더해줍니다.

문자열 나누기

문제 설명

function solution(s) {
    var answer = 0;
    let letter = "";
    let cnt1 = 0;
    let cnt2 = 0;
    
    for (let i = 0; i < s.length; i++) {
        if (letter === "") letter = s[i];
        
        if (letter === s[i]) cnt1++;
        else cnt2++;
        
        if (cnt1 === cnt2) {
            answer++;
            letter = "";
            cnt1 = 0;
            cnt2 = 0;
        }
    }
    if (cnt1 !== 0 || cnt2 !== 0) answer++;
    
    return answer;
}

console.log(solution("banana")); // 3
console.log(solution("abracadabra")); // 6
console.log(solution("aaabbaccccabba")); // 3

먼저 첫 번째 문자열을 비교하기 위해서 첫 번째 문자열을 letter에 넣어줍니다.

이후, 만약에 첫 번째 들어온 문자와 s[i]번째 들어온 문자가 같으면 cnt1번에 점수를 넣어주고, 다르면 cnt2번에 점수를 넣어줍니다.

for문을 계속 돌리던 중 cnt1과 cnt2의 점수가 같아지면 answer에 점수를 추가하고 나머지는 모두 초기화시켜줍니다.

ex ) banana => b === b = cnt1++ / b === a = cnt2++ => 초기화 n === n = cnt1++ / n === a = cnt2++ => 초기화 이런 식으로 가줍니다.

그런데, 2번 abr~부분은 a가 혼자 남으면서 cnt1과 cnt2가 같은 상황으로 끝나지 않았기 때문에 cnt1 or cnt2가 남거나 letter에 글자가 남아있으면 answer에 점수를 추가해 줍니다.

1단계부터는 문제 설명을 읽고 헷갈리는 부분이 많은 것 같습니다..ㅠ 문제만 10 ~ 20번 정도 읽은 것 같습니다...

가장 큰 수 찾기

문제 설명

function solution(array) {
    var answer = [];

    answer.push(Math.max(...array));

    answer.push(array.indexOf(answer[0]));

    return answer;
}

console.log(solution([1, 8, 3])); // [8, 1]
console.log(solution([9, 10, 11, 8])); // [11, 2]

먼저 Math.max() 함수로 가장 큰 값을 추출하여 첫번째 인덱스에 넣어줍니다.

다음으로 indexOf() 메서드로 주어진 값과 일치하는 첫 번째 인덱스를 반환하여 추가해줍니다.

• Math.max() 함수 : 입력값으로 받은 0개 잉상의 숫자 중 가장 큰 숫자를 반환합니다.
• indexOf() 메서드 : 호출한 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.

가장 가까운 같은 글자

문제 설명

function solution(s) {
    var answer = [];
    let arr = [];

    for(let i = 0; i < s.length; i++) {

        if (arr.length === 0) answer.push(-1);

        else {
            if (arr.includes(s[i])) answer.push(arr.length - arr.lastIndexOf(s[i]));
            else answer.push(-1);
        }

        arr.push(s[i]);
    }
    return answer;
}

console.log(solution("banana")); // [-1, -1, -1, 2, 2, 2]
console.log(solution("foobar")); // [-1, -1, 1, -1, -1, -1]

먼저 첫번째 글자는 같은 내용이 있을수 없기 때문에 -1을 기본적으로 넣어주고 시작합니다.

이후 두번째부터 includes() 메서드로 같은 글자가 있는지 없는지를 판단해줍니다.

없으면 -1을 넣어주고 있으면, 현재 arr의 총 길이( arr.length )와 현재 발견된 같은 글자의 마지막 인덱스 값( arr.lastIndexOf(s[i] )을 빼서 넣어줍니다.

• includes() 메서드 : 배열이 특정 요소를 포함하고 있는지 판별합니다 ( boolean 값 )
• lastIndexOf() 메서드 : 배열에서 주어진 값을 발견할 수 있는 마지막 인덱스를 반환합니다.

forEach() 메서드

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

구문

arr.forEach(callback(currentValue[, index[, array]])[, thisArg]);

매개변수

• callback: 각 요소에 대해 실행할 함수입니다. 아래 세 가지 매개변수를 받습니다.
• currentValue: 처리할 현재 요소입니다.
• index: 처리할 현재 요소의 인덱스입니다.
• array: forEach() 메서드를 호출한 배열입니다.
• tihsArg: callback을 실행할 때 this로 사용할 값입니다.

반환 값

undefined입니다.

예제

const arr = ["a", "b", "c"];

arr.forEach(el => console.log(el));
// "a"
// "b"
// "c"

for() 반복문을 forEach() 반복문으로 바꾸기

const arr = ["item", "section", "div", "for", "forEach"];
const newArr = [];

// for() 반복문
for(let i = 0; i < arr.length; i++) {
  newArr.push(arr[i]);
};
console.log(newArr); // ['item', 'section', 'div', 'for', 'forEach']

// forEach() 반복문
arr.forEach((item) => {
  newArr.push(item);
});
console.log(newArr); // ['item', 'section', 'div', 'for', 'forEach']

배열 콘텐츠 출력하기

const arr = ["item", , "div", "for", "forEach"];

function record(el, index, array) {
  console.log("A[" + index + "] = " + el);
}

arr.forEach(record);
/*
  A[0] = item
  A[2] = div
  A[3] = for
  A[4] = forEach
*/

A[1]은 배열의 위치에 항목이 없기 때문에 건너뛰기 됩니다.

문자열 계산하기

문제 설명

function solution(my_string) {
    var answer = 0;

    let arr = my_string.split(" ");

    for (let i = 0; i < arr.length; i++) {
        if(arr[i] === "+") {

          if (i === 1) answer = Number(arr[i - 1]) + Number(arr[i + 1]);
          else answer = answer + Number(arr[i + 1]);

        } else if (arr[i] === "-") {

          if (i === 1) answer = Number(arr[i - 1]) - Number(arr[i + 1]);
          else answer = answer - Number(arr[i + 1]);

        }
    }
    return answer;
}

console.log(solution("3 + 4 + 3")); // 10
console.log(solution("3 + 4 + 2 - 5")); // 4

연산자가 여러개가 있다고 가정하고, +가 나오면 첫번째 계산일 때 +의 앞뒤로 더해주고, 이후로는 뒤쪽 숫자만 더해줍니다. -도 마찬가지로 해줍니다.

eval()을 사용하면 간단하게 해결되지만 eval()은 사용하지 않는것이 좋기 때문에 빼고 진행했습니다.

:: 처음에 연산자가 하나만 있는줄 알고 그에 맞추어 풀었는데, 자꾸 10퍼센트만 맞다고해서 당황했습니다.. 중간에 잘 읽어보니 연산자가 적어도 하나 포함되어 있다는 문구가 있었습니다..ㅠㅠ

flatMap() 메서드

flatMap() 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map() 메서드를 수행 후, 결과를 새로운 배열로 평탄화해줍니다. 이는 깊이 1의 flat()이 뒤따르는 map()과 동일하지만, flatMap()은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.

구문

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg]);

매개변수

• callback: 새로운 배열의 엘리먼트를 생성하는 함수입니다. 3개의 인자를 받습니다.
• index: 배열에서 처리되고 있는 현재 엘리먼트의 인덱스입니다.
• array: map()이 호출된 배열입니다.
• thisArg: callback실행에서 this로 사용할 값입니다.

반환 값

각 엘리먼트가 callback함수의 결과이고, 깊이 1로 평탄화된 새로운 배열입니다.

예제

map()과 flatMap()

let arr = [1, 2, 3, 4];

console.log(arr.map(x => [x * 2])); // [[2], [4], [6], [8]]

console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]

console.log(arr.flatMap(x => [[x * 2]])); // [[2], [4], [6], [8]]

단어의 리스트를 생성합니다.

let arr1 = ["it's Sunny in", "", "California"];

console.log(arr1.map(x => x.split(" "))); // [["it's","Sunny","in"],[""],["California"]]

console.log(arr1.flatMap(x => x.split(" "))); // ["it's","Sunny","in","California"]

reduce + concat vs flatMap

var arr1 = [1, 2, 3, 4];

console.log(arr1.flatMap(x => [x * 2])); // [2, 4, 6, 8]

console.log(arr1.reduce((acc, x) => acc.concat([x * 2]), [])); // [2, 4, 6, 8]

배열의 유사도

문제 설명

1번 방법

function solution(s1, s2) {
    var answer = 0;

    for(let i = 0; i < s1.length; i++) {
        for (let j = 0; j < s2.length; j++) {
            if (s1[i] === s2[j]) answer++;
        }
    }
    return answer;
}

console.log(solution(["a", "b", "c"], ["com", "b", "d", "p", "c"])); // 2
console.log(solution(["n", "omg"], ["m", "dot"])); // 0

2중 for문으로 하나씩 검사해줍니다.

2번 방법

function solution(s1, s2) {
    var answer = 0;
    
    for (let i = 0; i < s1.length; i++) {
        s2.filter(s => {
            if (s === s1[i]) answer++;
        })
    }
    return answer;
}

console.log(solution(["a", "b", "c"], ["com", "b", "d", "p", "c"])); // 2
console.log(solution(["n", "omg"], ["m", "dot"])); // 0

flat() 메서드

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.

구문

const newArr = arr.flat([depth]);

매개변수

• depth: 중첩 배열 구조를 평탄화할 때 사용할 깊이 값입니다. [ 기본값 = 1 ]

반환 값

하위 배열을 이어붙인 새로운 배열입니다.

예제

중첩 배열 평탄화

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

배열 구멍 제거 ( flat() 메서드는 배열의 빈 공간도 제거해줍니다. )

const arr5 = [1, 2, , 4, 5];
arr5.flat(); // [1, 2, 4, 5]