프로젝트 진행을 위한 초기셋팅 정리!✌🏼

1. CRA 을 이용해 앱 만들기 🤹

• 아직 React 초보 이기 때문에, 필요한 package가 기본으로 설치되어 있는 Create-React-App을 다운받아 사용한다!

• terminal에서 파일을 설치할 경로로 이동한다 (cd 이동하고싶은경로, 혹은 ls로 경로에 잇는 파일확인 후 이동 이동 !! 🏃💃🏼

• npx create-react-app 파일이름 명령어를 입력해 설치한다!
  여기서 잠깐!!!!✋🏼 왜 npm이 아니라 npx를 실행할까? create-react-app같은 리액트 프로젝트 생성도구 모듈의 경우 변경사항이 꽤 잦은 모델이기 때문에 npx 명령어를 통해 항상 최신버전으로 유지해 준다. (npx를 사용한다면 매번 최신 파일을 불러와 실행시키기 때문에 버전관리를 신경쓰지 않아도 된다) 도움받은 블로그
  
  
  
  

2. 경로 설정🧗

• 처음 create-react-app을 설치한 후 열면 여러 폴더들이 설치 되어있다.

• src 폴더에 index.js 파일 외에 다른 파일은 모두 지운다.

• src 폴더의 바깥 경로(프로젝트의 root파일)에 .env 라는 이름의 파일을 만들고 NODE_PATH = src 라고 작성한다. 라고 경로설정해주는 파일을 만들어 준다.

• NODE_PATH=src 라는 뜻은 모든파일이 src로 부터 시작한다는 의미이고, 나중에 경로 기준을 src로 보기때문에 ../..이러한 수 많은 닷 파티~~💃🏼를 막을 수 있다.

3. Router 설정💁

• Router를 통해 원하는 페이지로 이동이 가능하다.

• 현재 셋팅 중인 CRA app의 VScode terminal에 npm install --save react-router-dom 명령어를 입력하여 패키지를 실행한다.
  *npm 명령어를 정리한 블로그

• src 폴더 내에 Routes.js 파일을 만든다.

• index.js에서 불러오는 파일이<App />이 아니라 <Routes />가 되도록 설정한다.

4. Router 세부 설명📁

• src 폴더 내에 Components Pages Styles Images 파일을 만들어 준다

• Component 파일에는 재사용 하는 컴포넌트 파일들.js를 만들어 주고

• Pages에는 각각의 페이지들을 js, css 파일과 함께 만들어 준다.

• Router 설정은 이전에 작성한 블로그 포스트에서 자세히다루었다. 이전 Router설정 블로그 글

5. styles 폴더 세팅🎭

• terminal에 npm install --save node-sass 명령어를 입력해 파일을 설치해 준다.

• Styles 폴더 안에 media.scss 파일(반응형 웹 구현 용) 과, reset.scss 파일을 만들어 준다.

• 파일 확장자명이 sass가 아니라 scss인데, 둘 다 확장자로 쓸 수 있지만 scss 가 더 업데이트 된 버전이다.

• reset.scss는 다양한 브라우저의 기본 값을 취소시킨다는 의미이다. 각각의 브라우저(chrome,safari,opera,등등) 는 스타일 default값이 있기 때문에 그걸 무력화 시킨다는 의미로 보면 된다.

6. eslint 세팅 ✅

• 프로젝트의 꽃 🌷 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,
  }

이렇게 하면 프로젝트를 위한 기본 셋팅이 완료된다 🙌🏼🙌🏼