1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

enum TestStatus {
  PENDING,
  ACCEPTED,
  WRONG_ANSWER,
}
console.log(Object.values(TestStatus));
// [ 'PENDING', 'ACCEPTED', 'WRONG_ANSWER', 0, 1, 2 ]

export enum Actor {
  USER = 'USER',
  HOST = 'HOST',
  ADMIN = 'ADMIN',
}

console.log(Object.values(Actor));
// [ 'USER', 'HOST', 'ADMIN' ]

• 일반 Numeric enums의 경우 멤버 이름과 값이 나온다
• String enums의 경우 값만 나온다
• es2017 이상에서 사용할 수 있다

참고

• https://github.com/microsoft/TypeScript/issues/31268

1
2
3
4
5
6
7

// https://stackoverflow.com/a/33457557
const range = (start: number, end: number) =>
  new Array(end - start).fill(0).map((_, idx) => start + idx);

// https://stackoverflow.com/a/10050831
const range = (start: number, end: number) =>
  [...new Array(end - start).keys()].map((idx) => start + idx);

• keys() 같은 걸 활용할 수도 있다니…

참고

• https://stackoverflow.com/a/33457557
• https://stackoverflow.com/a/10050831

• eslint(react-hooks/exhaustive-deps)
• useEffect, useCallback 등 종속성을 가지는 훅에서 누락된 종속성을 알려준다

auto fix

• 이전 버전에서는 autofix를 지원했는데,
• 최신 버전은 지원하지 않는다
• 나는 이전 버전을 사용해서 자동으로 종속성 업데이트해주는 것에 익숙하고 좋았었다
• 그래서 autofix 활성화하는 법을 찾아보았다
• auto fix를 활성화하려면 eslint config에 설정을 추가해준다

1
2
3
4
5
6
7
8
9
10
11
12

{
  // ...
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "enableDangerousAutofixThisMayCauseInfiniteLoops": true
      }
    ]
  }
}

• enableDangerousAutofixThisMayCauseInfiniteLoops를 활성화한다

참고

• ‘exhaustive-deps’ lint rule; https://github.com/facebook/react/issues/14920
• autofix 사라짐
  • https://github.com/facebook/react/issues/16313#issuecomment-587149109
  • https://github.com/facebook/react/issues/18235
• autofix 다시 사용하기 ; https://github.com/facebook/react/issues/18235

gif를 활용하면 멋진 문서 만들 수 있다
동영상을 gif로 변환해주는 cli도구를 설치해보자

• 비디오를 gif로 만들어주는 gifify라는 cli 도구가 있다
• npm을 통해 설치할 수 있어서 얼른 설치해서 실행해 보았다

1

npm i -g gifify

필요 종속성 설치

• 나는 윈도우를 사용하고 있다
• npm 설치로, 너무 반가운 마음에 바로 설치하고 실행해봤는데 동작하지 않았다…
• https://github.com/vvo/gifify#requirements
• 위 링크에 어떤 종속성이 설치되어야 하는지 알려주고 있다
• 맥에서 사용할 수 있는 brew 패키지 매니저를 통해 필요 종속성 설치를 안내하고 있다
• 필요한 종속성은 nodejs, ffmpeg, convert, gifsicle 이 있다
• 나는 윈도우라서 각 종속성 설치를 수동으로 해주었다
• 나는 ffmpeg, gifsicle, convert 순으로 설치했다
• 근데 전부 설치하고 보니까 ffmpeg와 convert는 ImageMagick 인스톨러를 통해 함께 설치할 수 있다

ImageMagick : ffmpeg, convert

convert는 이미지매직에 포함되어있다. 그래서 이미지매직 인스톨러를 사용해서 설치해야 한다

• http://www.imagemagick.org/script/download.php
• 스크롤을 아래로 내려서 Windows Binary Release 부분을 확인하여 다운로드한다

• 이미지매직 인스톨러에서 ffmpeg, convert, 환경변수 추가에 체크하고 인스톨한다
• 이렇게 convert, ffmpeg를 설치했다

gifsicle

• https://eternallybored.org/misc/gifsicle/
• gifsicle는 여기서 받을 수 있다
• 나는 64비트를 받았다

gifify 사용하기

1
2

# gifify {인풋 파일 경로} -o {아웃풋 파일 이름}
gifify input.mp4 -o output.gif

• https://github.com/vvo/gifify#command-line-usage
• 더 디테일한 변환 옵션은 위 링크를 참고한다

후기

• npm에서 설치할 수 있어서 간단하게 사용할 수 있을 거라 생각했다
• 그런데 필요한 종속성이 많이 있었고, 윈도우에서 사용하려면 수동으로 설치해줘야 했다
• 이렇게 여기저기서 설치하는 것이 귀찮고, 익숙하지 않은 사람은
• 곰플레이어같은 동영상 플레이어에서 제공하는 gif 변환을 사용하는 게 정신건강에 좋을 것 같다

참고

• https://github.com/vvo/gifify#requirements
• http://www.imagemagick.org/script/download.php
• https://eternallybored.org/misc/gifsicle/

tsconfig에 baseUrl을 ./src로 설정했다
그런데 eslint가 못 알아먹는다
알아먹도록 해보자

상황

• 타입스크립트 프로젝트에서 npx eslint --init을 통해 eslint 환경을 구성했다
• 그런데 tsconfig에 설정한 baseUrl을 eslint가 알아먹지 못했다

eslint-import-resolver-typescript 설치

1

yarn add -D eslint-import-resolver-typescript

• eslint-import-resolver-typescript는 tsconfig에서 path alias를 사용할 수 있도록 해주는 패키지다
• https://www.npmjs.com/package/eslint-import-resolver-typescript

eslintrc 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  // ...
  "parserOptions": {
    // ...
    "project": "./tsconfig.json"
  },
  // ...
  // https://github.com/import-js/eslint-plugin-import/issues/1485#issuecomment-535351922
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

• parserOptions.project와 settings.import/resolver.typescript에 위 내용처럼 추가한다
• eslint config를 수정하면 항상 ESLint: Restart ESLint Server 또는 Developer: Reload Window을 꼭 해주자

참고

• https://stackoverflow.com/questions/57032522/eslint-complains-about-typescripts-path-aliasing
• https://github.com/import-js/eslint-plugin-import/issues/1485#issuecomment-535351922
• https://www.npmjs.com/package/eslint-import-resolver-typescript

1
2
3
4
5
6
7
8
9

const user = {
  username: 'sung',
  password: '1234',
};

delete user.password;

console.log(user);
// { username: 'sung' }

• 객체의 속성을 제거한다

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/delete

일반 터미널에서 실행이 안 되는 명령어가 있다
글로벌로 설치되지 않았는데, 왜 package.json의 script에 들어 있는 cli 도구들이 동작하는 걸까?

package.json script vs 일반 터미널의 명령

1
2
3
4
5
6
7

{
  // ...
  "scripts": {
    "build": "tsc --init"
  }
  // ...
}

• package.json에 tsc --init을 실행하는 build 스크립트가 있다고 하자

1
2
3
4
5
6
7

### without script
tsc --init

### with script
npm run build
# or
yarn build

• 그냥 tsc --init 명령을 실행했을 때

  • 타입스크립트가 전역 설치되어 있지 않으면 실행되지 않는다
  • 전역 설치되어있다면 전역으로 설치된 타입스크립트 컴파일러(tsc)가 실행된다

• npm 또는 yarn을 통해 실행했을 때

  • 현재 워크스페이스에 설치된 tsc가 실행된다
  • 현재 워크스페이스에 타입스크립트가 설치되어 있지 않으면 전역으로 설치된 tsc가 실행된다
  • 전역 설치되어있지 않으면 실행되지 않는다

• 전역으로 설치된 명령과 package.json script를 통해 실행되는 cli 도구가 다르다

• script를 통해 실행하면 워크스페이스에 설치된 도구를 우선적으로 사용하는 것을 알 수 있다

• 그러면 이 도구들은 어디 존재하는 걸까?

위치

package.json script

• node_modules/.bin

전역 패키지

• %appdata%/npm

yarn 꿀팁?

• 위에서 확인한 것처럼 node_modules/.bin에서 사용 가능한 cli도구를 확인할 수 있다
• 이 도구들을 꼭 script에 작성해야지만 사용 가능한 것은 아니다
• package.json에 스크립트를 작성하지 않고도, 현재 워크스페이스에 설치된 cli 도구들을 사용할 수 있다

1

yarn tsc --init

• 이렇게 yarn으로 시작하는 경우 script에 작성한 것과 동일한 효과를 가져올 수 있다
• 한 번만 명령어를 쓰는 경우 스크립트에 등록하지 않고 쉽게 실행시켜 볼 수있다

더 알아보기

• yarn node index.js 와 node index.js를 비교해보자

1
2

// console.log(process.env);
console.log(process.env.path);

• yarn or npm run 으로 실행하는 것과 그냥 node로 실행하는 것이 다른데, 환경 변수가 다르다
• yarn or npm run 으로 실행하면 훨씬 더 많은 환경을 가지는 것을 확인할 수 있고,
• 특히 path를 확인해보면 yarn, npm 을 통해 실행한 경우 path에 node_modules/.bin 경로가 들어있는 것을 확인할 수 있다

• 전통?의 데이터베이스 사용은 ERD를 작성(식별부터 정규화까지)하고,
• DDL로 테이블 생성 등 데이터베이스 사용을 위한 초기화를 하고,
• DML로 조회 쿼리를 작성하는 등 과정을 거쳐 사용했다
• 그런데 ORM, Object Relational Mapping 이 뭘까..?

• 위 영상을 보고 정리한 내용

ORM

• 오브젝트 기반의 ~
• 객체(클래스)를 만들면 테이블을 생성해주는 마법

장점

• data model을 한 곳에서 작성한다
• 백엔드에서 데이터베이스 테이블과 매핑되는 타입을 정의하는데, ORM을 쓰면 내가 정의한 모델 자체가 타이핑이 된다
• sql을 작성하지 않아도 된다 ; 모델을 정의하면 DDL을 알아서 생성한다. DML 작성 대신 메서드를 사용한다
• 데이터베이스 추상화 ; 보통의 ORM 라이브러리들은 여러 데이터베이스를 지원한다
• 오라클을 사용하다가 mysql로 데이터베이스를 바꿔도 전혀 문제가 없다
• OOP를 활용한다 ; OOP를 알고 있으면 친숙하다

단점

• ORM을 따로 배워야 한다
• ORM을 통해 데이터베이스를 다룬다는 것에서 레이어가 나뉘었다는 장점?이 있지만, 데이터베이스를 커스텀하기 힘들다 (성능)

ORM 예

• 자바에서는 hibernate,
• 노드에서는 sequelize, typeorm, prisma 등이 있다

참고

• https://youtu.be/4cy92zeVjmM

• 저번에 올린 글 ssh를 사용해 git clone 하기 에서는 ssh키를 생성할 때 비밀번호, passphrase를 따로 생성하지 않고 진행하는 것을 알아보았다
• 비밀번호 생성을 하지 않은 이유는 비밀번호를 추가로 요구하기 때문이다
• 하지만 ssh키와 비밀번호까지 사용한다면 더욱 안전하게 사용할 수 있다
• 이번에는 비밀번호와 함께 ssh키를 생성하고, ssh-agent를 이용해서 암호를 요구하지 않도록 만들어보자!

결과

• 최초 셸 실행 때 ssh 비밀번호를 입력하면, 앞으로 비밀번호를 묻지 않는다
• 컴퓨터를 다시 켜면 물어본다

방법

(공식문서) https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/working-with-ssh-key-passphrases

• 사용하는 터미널에 따라 다른 프로필을 설정해줘야 한다
• 윈도우와 리눅스 모두 동일한 방법이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

env=~/.ssh/agent.env

agent_load_env () { test -f "$env" && . "$env" >| /dev/null ; }

agent_start () {
    (umask 077; ssh-agent >| "$env")
    . "$env" >| /dev/null ; }

agent_load_env

# agent_run_state: 0=agent running w/ key; 1=agent w/o key; 2=agent not running
agent_run_state=$(ssh-add -l >| /dev/null 2>&1; echo $?)

if [ ! "$SSH_AUTH_SOCK" ] || [ $agent_run_state = 2 ]; then
    agent_start
    ssh-add
elif [ "$SSH_AUTH_SOCK" ] && [ $agent_run_state = 1 ]; then
    ssh-add
fi

unset env

• 윈도우에서는 git bash를 이용한다
• vi ~/.bashrc 명령해 vi 에디터로 위 내용을 추가해준다
• i키를 눌러 입력 모드로 가서 위 내용을 붙여 넣고,
• esc키를 눌러 입력 모드에서 나와서 :wq를 입력해 저장하고 나온다
• 터미널에 source ~/.bashrc 명령해 터미널을 새로고침 한다
• ssh 비밀번호를 요구하는데, 이때 한번 인증을 하면 이후에 비밀번호를 입력하지 않아도 된다

참고

• https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/working-with-ssh-key-passphrases

1일 1커밋하는데 무슨 내용을 커밋하는 걸까?

1일 1커밋 소스

• 블로그
• 코테 연습
• 공부용 프로젝트
• 영단어
• 리팩토링

• 매일 같인 커밋하기로 정해둔 하나의 레포가 있는 것은 아니다
• 주로 블로그 포스트, 코딩 테스트 연습할 때 사용하는 레포에 자주 커밋을 하고 있다
• 그 외에는 최근에 공부하는 nestjs, nextjs 공부용 프로젝트도 있다
• 1일 1커밋을 지켜온지 이제 거의 일 년이 되어간다
• 1일 1커밋 초기에는 영단어 외우는 레포에 매일 영단어 정리했었다
• 블로그를 시작하면서 매일 배우는 것들을 블로그 포스트로 올리고 있다
• 특히 블로그를 깃허브 블로그로 시작하면서 잔디 관리에 큰 도움이 되었다

깃허브 블로그

• 글을 쓸 때는 최대한 고민 안 하고 쓰는 편이다
• 뭔가 새로운 활동이 있으면 바로 블로그에 초안 작성을 시작한다
• 내 개발 기록을 내 나름대로 정리해서 블로그에 남겨놓으면,
• 나중에 관련 지식이 필요할 때, 구글에서 검색하는 게 아니라 내 블로그에서 검색을 할 수 있다
• 다른 사람도 아니라 내가 작성한 글이기 때문에 빠르게 이해하고 탈분극 시킬 수 있다