slack 클론코딩 2 // 20210429

김지민·2021년 4월 30일

slackClone

목록 보기

2/3

slack 클론 2탄 프론트엔드 세팅하기~!

1. 세팅 전 알아두기

세팅하는데 원래 좀 걸린다
그래서 강좌 소스코드에 같이 동봉되어있는데 직접 세팅해보면서 익히는게 중요함

1) create-react-app 을 안쓰는 이유?

그걸 쓰면 기본 세팅이 다 포함되어있기 때문에 뭐가 문제인지 모르는 경우가 생길 수 있음. 그래서 없이 연습을 하는게 좋다.

2) git bash? cmd? powershell?

git bash 쓰는걸 추천. git 설치하면 동봉되어 설치되는데, git bash로 명령어를 입력해야 오류가 안나는 경우가 많다. 맥이 편한 이유가 명령어 사용시 에러가 덜나는데(윈도우보다) git bash가 맥(리눅스)과 비슷해서 오류가 덜남.
터미널을 두개 띄워서 하나는 백엔드 서버 구동, 하나는 git bash로 명령어 사용하기

2. 세팅하기

sleact는 타입스크립트+리액트 프로젝트임
하지만 결국 노드 환경에서 구동된다.
노드 환경 프로젝트의 시작은 항상 npm init임. 내가 프로젝트를 하길 원하는 폴더에서 npm init 입력.
그러면 package.json 작성부터 시작.
package.json 작성시 다른건 별로 중요하지 않은데 name작성시엔 주의할것.
왜냐? npm에 있는 패키지 명과 겹치면 에러가 뜰 수 있음. 근데 npm에는 170만개의 패키지가 있는데 어케 안겹침? 내가 설치해서 사용할 패키지랑만 겹치지 않으면 된다.
예를 들어 name을 alecture로 지었는데 alecture 패키지를 설치하려고 npm i alecture 를 입력하면 에러.
다음은 npm i react react-dom 입력
리액트 프로젝트니 리액트 설치 + 리액트를 웹에서 그려줄 리액트 돔 설치.
타입스크립트를 사용할 경우

- npm i typescript

npm i @types/react @types/react-dom 추가 설치
위와 같이 실행하면 node_modules, package.json, package-lock.json이 생김.
node_modules는 내가 설치한 노드 패키지가 들어가있는 폴더. 근데 용량이 커서 github에는 올리지 않고 package.json만 깃헙에 업로드함. 어차피 npm i 하면 package따라서 모듈도 다 설치됨. package-lock.json은 package의 버전 정보 등이 추가로 들어가있음.

4) 개발 시작 전 추가로 세팅하면 좋은거

eslint, prettier
npm i -D eslint
eslint는 코드 검사도구임. 코드에서 안쓰는 변수나 오타 있으면 잡아주는 도구.
npm i -D prettier eslint-plugin-prettier eslint-config-prettier
prettier는 코드 정렬 도구. eslint와 연결해주면 좋음.
prettier 사용시 주의할 것은 지맘대로 정렬하기 때문에 본인 스타일과 맞지 않으면 적응하는데 좀 걸림. 하지만 협업 등을 진행할때 나와 다른 사람의 코딩스타일과 맞추려면 공통 기준으로 prettier를 사용하는게 좋다.
eslint-plugin-prettier로 eslint와 prettier를 연결하면 좋은 이유? 내가 코딩할때 prettier 정렬 기준과 다르게 코딩했을 경우 eslint가 빨간줄로 표시해줌.
.prettierrc 만들기. .env처럼 확장자가 없고 앞에 . 붙은 파일들은 설정파일이라고 보면됨. 리눅스에서는 . 붙으면 숨김파일 처리됨.
.eslintrc도 위와 같은 의미로 제작. 사실 뒤에 .json 붙여도됨.

{

    "extends": ["plugin:prettier/recomended"]

}

prettier가 추천해주는대로 따르겠다는 뜻.

.prettierrc 세팅

{

    "printWidth": 120, // 한줄에 최대 글자수

    "tabWidth": 2, //tab의 공백조절

    "singleQuote": true, //따옴표는 홑따옴표

    "trailingComma": "all", //항상 콤마 뒤에붙이겠다

    "semi": true // 세미콜론은 항상 붙이겠다

}

타입스크립트 세팅(tsconfig.json)
타입스크립트도 결국은 자바스크립트로 바뀌는데, tsconfig.json 설정을 보고 자바스크립트로 바꿈.

{

    "compilerOptions": {

      "esModuleInterop": true, // 원래 react가져오려면 import * as React from 'react'; 이렇게 가져오는데 이거 true면 import React from 'react';로 가져옴.

      "sourceMap": true, // 에러났을때 에러난 위치 찾아가기 편함.

      "lib": ["ES2020", "DOM"], // 라이브러리. 최신문법 가져옴.

      "jsx": "react", // jsx가 다른데에서도 쓰이기때문에 리액트용이라고 명시

      "module": "esnext", // 최신 모듈 쓰겠다 정도 뜻.

      "moduleResolution": "Node", // import, export 도 node가 해석할수 있게 하겠다.

      "target": "es5", // 소스코드를 es2020으로 작성하더라도 es5로 변환하겠다.

      "strict": true, // 타입 체크를 엄격히 하겠다. 타입스크립트 할거면 반드시 strict true로 개발할것.

      "resolveJsonModule": true, // import json파일하는거 허락하겠다.

      "baseUrl": ".",

      "paths": { // 편하게 import하려고 미리 지정. 절대경로처럼 import할 수 있음.

        "@hooks/*": ["hooks/*"],

        "@components/*": ["components/*"],

        "@layouts/*": ["layouts/*"],

        "@pages/*": ["pages/*"],

        "@utils/*": ["utils/*"],

        "@typings/*": ["typings/*"]

      }

    }

  }