프로젝트 진행을 위한 초기셋팅 정리!✌🏼
아직 React 초보 이기 때문에, 필요한 package가 기본으로 설치되어 있는 Create-React-App을 다운받아 사용한다!
terminal에서 파일을 설치할 경로로 이동한다 (cd 이동하고싶은경로, 혹은 ls로 경로에 잇는 파일확인 후 이동 이동 !! 🏃💃🏼
npx create-react-app 파일이름
명령어를 입력해 설치한다!
여기서 잠깐!!!!✋🏼 왜 npm이 아니라 npx를 실행할까? create-react-app같은 리액트 프로젝트 생성도구 모듈의 경우 변경사항이 꽤 잦은 모델이기 때문에 npx 명령어를 통해 항상 최신버전으로 유지해 준다. (npx를 사용한다면 매번 최신 파일을 불러와 실행시키기 때문에 버전관리를 신경쓰지 않아도 된다) 도움받은 블로그
처음 create-react-app을 설치한 후 열면 여러 폴더들이 설치 되어있다.
src 폴더에 index.js 파일 외에 다른 파일은 모두 지운다.
src 폴더의 바깥 경로(프로젝트의 root파일)에 .env
라는 이름의 파일을 만들고 NODE_PATH = src
라고 작성한다. 라고 경로설정해주는 파일을 만들어 준다.
NODE_PATH=src 라는 뜻은 모든파일이 src로 부터 시작한다는 의미이고, 나중에 경로 기준을 src로 보기때문에 ../..
이러한 수 많은 닷 파티~~💃🏼를 막을 수 있다.
Router를 통해 원하는 페이지로 이동이 가능하다.
현재 셋팅 중인 CRA app의 VScode terminal에 npm install --save react-router-dom
명령어를 입력하여 패키지를 실행한다.
*npm 명령어를 정리한 블로그
src 폴더 내에 Routes.js
파일을 만든다.
index.js에서 불러오는 파일이<App />
이 아니라 <Routes />
가 되도록 설정한다.
src 폴더 내에 Components
Pages
Styles
Images
파일을 만들어 준다
Component 파일에는 재사용 하는 컴포넌트 파일들.js
를 만들어 주고
Pages에는 각각의 페이지들을 js, css 파일과 함께 만들어 준다.
Router 설정은 이전에 작성한 블로그 포스트에서 자세히다루었다. 이전 Router설정 블로그 글
terminal에 npm install --save node-sass
명령어를 입력해 파일을 설치해 준다.
Styles 폴더 안에 media.scss
파일(반응형 웹 구현 용) 과, reset.scss
파일을 만들어 준다.
파일 확장자명이 sass가 아니라 scss
인데, 둘 다 확장자로 쓸 수 있지만 scss 가 더 업데이트 된 버전이다.
reset.scss
는 다양한 브라우저의 기본 값을 취소시킨다는 의미이다. 각각의 브라우저(chrome,safari,opera,등등) 는 스타일 default값이 있기 때문에 그걸 무력화 시킨다는 의미로 보면 된다.
프로젝트의 꽃 🌷 eslint 는 코드의 에러를 잡아주고, prettier와 함께 코드를 정리해 준다.
src 폴더의 바깥 경로(프로젝트의 root파일)에 .eslintrc.json
라는 이름의 파일을 만든다.
파일 내부에 아래와 같이 입력한다.
{
"extends" : ["react-app","plugin:prettier/recommended"]
}
extension 에서 prettier-Code formatter
를 찾아 설치한다.
아래 명령어를 npm i prettier eslint-config-prettier eslint plugin-prettier -D
terminal에 입력하여 eslint와 prettier를 연동한다.
잘못된 코드를 입력해서 아래 빨간 squiggly underline
이 생기는 걸 확인한다.
Setting으로 이동해,setting.json
안에 아래와 같이 세팅을 완료해준다.
{"window.zoomLevel": 0,
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {"source.fixAll.eslint": true },
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange",
"workbench.settings.openDefaultKeybindings": true,
}