React 프로젝트 시작 전 환경 세팅하기

😎 환경 설정은 중요합니다.

근데 라이브러리를 너무 많이 쓰다보니 처음 환경을 세팅할 때
설치할거나 설정해줘야할 게 너무 많아요

---

😎 루트 폴더에 .prettierrc파일 생성하기

{
  "singleQuote": true,
  "useTabs": false,
  "trailingComma": "all",
  "semi": true,
  "printWidth": 80,
  "tabWidth": 2
}

.prettierrc는 프리티어가 어떻게 동작할지를 지정해주는 역할을 수행합니다.
.prettierrc가 있는 폴더는 전역 프리티어 확장보다 우선되어 설정이 적용되는 특징이 있습니다.

쾌적한 개발을 위해서 자동으로 예쁘게 코드를 정렬해주는 프리티어는
작업 생산성을 크게 상승시켜줍니다.

제가 사용하는 prettierrc 설정은 다음과 같습니다.
사실 나중에 파일 찾아다니기 귀찮아서 여기에 적어두는 거임

개인 취향대로 커스텀해서 사용할 수 있다는 장점이 있습니다.
제 취향이 반영된 건 아니고 벨로퍼트님의 설정을 참고했습니다.

---

😎 리액트 설치하기 전에 yarn 설치하기

npm install yarn

전 yarn을 선호하는 편입니다. 제 취향이 반영된 건 아니구요 그냥 처음에 이렇게 배워서 계속 이렇게 씀
yarn은 Facebook에서 만든 신흥 패키지 매니저입니다.

다만 버전관리에 있어서는 yarn.lock 파일이 기존 모듈을 알아서 최신화해주어서
문제가 발생할 수 있다는 점...이 단점이라고 하네요

아무튼 취향입니다.
우선 yarn을 설치해줘야할 것입니다.

yarn을 설치해줍니다. 이 과정은 생략하고 npm으로 설치해도 무방합니다.

npm install --global yarn

이렇게 npm의 글로벌 설치 기능을 이용하면 한번만 설치해도 됩니다.

잘 설치 되었는지 확인하고 싶다면

yarn --version

을 이용해 확인합니다.

추가로 node.js같은 경우엔 버전 확인을

node -v

로 할 수 있습니다.

---

😎 create-react-app

yarn create react-app "짓고싶은폴더이름"

create-react-app은 리액트 프로젝트에 필요한 웹팩, 바벨의 설치 설정 과정을 생략하고
간편하게 프로젝트 작업 환경을 구축해줍니다. 사용법도 간단해요
위와 같은 양식으로 터미널에 작성해주면 됩니다.

만약 yarn을 사용하고 싶지 않다면 아래 대안을 이용할 수 있습니다.

npm init react-app <짓고싶은폴더이름>

---

😎잘 설치했다면

https://xionwcfm.tistory.com/22

react 실행오류 - npm ERR! errno -4058 해결방법

cd 명령어를 통해 프로젝트 디렉토리로 이동해주어야합니다.
그렇지 않는다면 이와 같은 에러를 마주칠 수 있습니다.
이제 보니 제가 정말 바보같네요 하하;;

---

😎 리액트 개발 전용 서버 구동하기

yarn start // or npm start

위 명령어를 통해 리액트 개발 전용 서버를 구동시킬 수 있습니다.

만약 서버 동작을 멈추고 싶다면 터미널에서
ctrl + c -> y를 해주면 됩니다.

---

😎 편리한 라이브러리를 설치해봅시다.

yarn add sass classnames react-icons

yarn add 명령어를 통해 원하는 라이브러리를 쉽게 설치할 수 있습니다.
위 명령어는
sass , react-icon , classnames를 한번에 설치합니다.

---

더욱 많은 세팅을 할 수도 있겠지만 일단은 이정도만...