React With Typescript Slack Clone Project Section0 - 셋팅

프론트엔드 초기 셋팅 관련

Front

package.json을 만들때 name이 제일 중요 (다른 package의 name과 겹치면 오류가 발생함)

package

• 노드 프로젝트를 시작하기 위해 최초에 사용되는 파일 (npm install)

package.json

{
    "name": "sleact-ts-front",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        ...
    },
    "author": "dw",
    "license": "MIT",
    "dependencies": {
        ...
    },
    "devDependencies": {
        ...
    }
}

dependencies

• 패키지가 다른 패키지를 의존(사용)하고 있다는 의미

package.json

..
...
"dependencies": {
	"react": "^17.0.1",
},
...
..

node_modules

의존하고 있는 패키지가 모두 다운로드 되는 폴더

package-lock

dependencies에서 의존하고 있는 패키지의 정확한 버전을 관리하기 위한 파일

.이 붙은 파일

확장자가 없으면서 맨 앞에 .이 붙어있으면 설정파일
ex) .prettierrc, .eslintrc 등등

tsconfig

• typescript를 사용하기 위한 설정파일
• 옵션 중 strict는 무조건 true로 설정 - any남발 방지

코드스플리팅

스플리팅 기준 : 페이지별, 서버사이드 랜더링이 필요없는 경우(텍스트 에디터 등)
loadable를 사용하여 구현 가능

import loadable from '@loadable/component';

const App = loadable(() => import('@layout/Header'));