[ 클론코딩 ] 2주차

우영제·2021년 10월 24일
1
post-thumbnail

달성 목표


클론 코딩 2주차에 접어들고 있습니다!


깃헙 리포지토리 링크


한 주에 많은 진도를 빼지는 못하고 있군요 ㅠ

좀 더 화이팅해야겠습니다.


1. ESLint 설정

1-1. eslint 설정


1-1-1. eslint 설치

먼저 eslint를 설치합니다.

$ npm i -D eslint

명령어 설명

  • i : install
  • -D : package.json의 devDependencies에 추가

devDependencies에 추가하는 이유는 eslint를 앱 런타임에

필요한 것이 아니라 코드 작성 단계에서 정적 분석(static analysis) 을 하기 위해

필요한 도구이기 때문에

eslint는 반드시 devDependencies에 추가하여 함께 퍼블리싱 되는 일이 없도록 합니다.


1-1-2. eslintrc.js 작성

eslint에 대한 설정 파일을 작성합니다.

eslintrc.js라는 이름으로 프로젝트의 최상위 디렉토리에 둡니다.

파일 이름 또는 경로 이름은 반드시 똑같이 갈 필요는 없지만,

그렇게 할 경우 eslint CLI를 실행하면서 config 파일의 위치를 반드시 함께 전달해줘야합니다.


1-1-3. package.json에 script 추가

쉽게 lint 관련 명령어를 실행할 수 있도록 package.json에

script를 추가합니다.

$ npm run lint

이제 위 명령어를 통해 src 하위에 있는 파일에 대해 lint 체크를 할 수 있습니다.


1-2. prettier 설정

1-2-1. prettier 관련 plugin 설치
$ npm i -D eslint-config-prettier eslint-plugin-prettier

설치 패키지 설명

  • eslint-config-prettier : ESLint 설정 중 Prettier와 충돌하는 부분을 비활성화
  • eslint-plugin-prettier : Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력

lint와 prettier 단계를 아예 분리하기도 하지만 prettier의 CLI가 제 개발 환경에서는 정상 동작하지 않아서 plugin을 설치하여 eslint 오류로 출력되도록 했습니다.

1-2-1. prettier 관련 plugin 세팅값 eslintrc에 추가

extends에 plugin:prettier/recommand를 추가합니다.

해당 설정을 추가할 경우 eslint 시 prettier를 체크하면서 오류를 검사합니다.

1-3. vscode 설정

1-3-1. 왼쪽 하단에 톱니바퀴 클릭

1-3-2. settings 선택

1-3-3. setting 검색 후 해당 버튼 클릭

1-3-4. settings.jon 편집

위와 같이 설정하면 Ctrl+s로 저장 시 자동으로 문법 오류를 찾아줍니다.

1-4. husky 설정


실제 npm husky 패키지와 이미지는 무관합니다 ㅋ


husky에 대해 말씀 드리려면 git hooks에 대해 먼저 말씀드려야 할 거 같습니다.


git hooks란?

commit, push 등의 동작이 일어날 때 실행할 수 있는 스크립트

husky란?

husky는 git 관련 hooks를 쉽게 관리해주는 패키지

git에서도 해당 기능을 제공하지만 굳이 husky를 사용하는 이유는

.git 폴더에 있는 pre-commit 스트립트는 git을 통해 수정 내역을 관리할 수 없습니다.


쉽게 이야기해서 파일을 수정하더라도 .gitignore에 추가한 것처럼

git status에 표시가 되지 않습니다.


2. tsconfig 설정


2-1. tsconfig 자동 생성

$ npx tsc --init 

위 커맨드를 통해 tsconfig.json 포맷을 주석과 함께 자동으로 생성할 수 있습니다.

2-2. tsconfig 세팅 설명

  • target : 타입스크립트 파일을 컴파일 했을 때 빌드 디렉토리에 생성되는 자바스크립트의 버전
  • module : 앱의 모듈 시스템 설정 (CommonJS, UDM, AMD, esnext 등이 가능)
  • moduleResolution : 모듈 해석 방식 설정 (node, classic, node12 등이 가능)
  • outDir : 타입 스트립트를 JS로 변환한 결과물이 저장되는 디렉토리
  • esmoduleInterop : ES6 모듈 형태로 commonJS 모듈 import 가능
  • forceConsistentCasingInFileNames : 파일 검색 시 대/소문자 비교 여부
  • strict : 결과물에 strict mode 적용 여부
  • skipLibCheck : 선언 파일에 대한 타입 체크

3. User DB 테이블 설계


3-1. HeidiSQL 설치

SQL이 익숙하지 않으므로 GUI 툴 설치

설치 링크 Heidisql 다운로드

3-2. HeidiSQL 세팅

Library 반드시 선택!

선택하지 않을 경우 요상한 에러들로 시간을 허비하게 됩니다.

3-3. velog 회원 정보를 보고 테이블 컬럼 설정

3-3-1. velog 설정 화면

3-3-2. DB TABLE

TODO

1. 테스트용 포스팅 서버에 추가 (html / DB ?)

2. USER 정보 API 설계 및 구현

3. 테스트 프레임 워크 도입

4. 에디터 기본 설계

profile
Front-end Developer

0개의 댓글