💁 CRA 초기 세팅
Westagram 팀플의 시작을 알리는 CRA 초기 세팅! 마스터가 진행하면 git repo에 푸시하고, 이를 나머지 조원들이 클론 받아 브랜치 생성 후 작업하는 과정을 거쳤다.
📍 CRA 설치
- CRA 설치를 위해서는 아래와 같은 명령어를 터미널에 입력하면 된다.
- 원하는 폴더로 이동 ->
npx create-react-app을 통해 프로젝트 설치
// 1. Desktop - wecode 폴더 진입
cd Desktop/wecode
// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react✔️ npx? npm?
왜 CRA를 설치할 때는 npm이 아닌 npx를 사용할까?
npm
- npm은 node.js의 의존성과 패키지 관리를 위한 패키지 매니저이다.
npm install을 실행함으로써package.json파일에 패키지를 지정할 수 있다.- 또한 버전관리를 지원한다.
- 그러나 이는 몇가지 문제점이 있는데...
1. 모듈이 업데이트가 되었는지 여부를 확인 할 수 없다.
2. 업데이트를 진행했을 때 변동사항이 생겨 다른 프로젝트에도 영향을 끼칠 수 있다.
3. CRA같은 보일러 플레이트에는 치명적이다.(항상 업데이트를 해줘야 하기 때문)
npx
-
한편, npx는 패키지를 실행시키는 하나의 도구이고, npm5.2버전부터 생겨났다!
-
npx는 다음과 같은 역할을 한다.
1. 기본적으로 실행되어야할 패키지가 경로에 있는지 먼저 확인한다.
2. 경로에 있다면 그대로 실행한다.
3. 그렇지 않다면 npx가 최신 버전의 패키지를 설치한 후에 실행한다. -
즉, 모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 그 파일은 없어지는 방식으로 진행된다.
-
create-react-app같은 보일러 플레이트 모듈에 효과적이다. npx를 통해 create-react-app을 설치할 경우에는 매번 최신 버전만을 가져와서 설치해 주기 때문에 지금 어떤 버전을 사용하고 있는 지 신경쓸 필요가 없어진다. 어차피 최신 버전만을 사용하니까!!!!!(큰 깨달음)
📍 React Router 설치
- react router는 SPA인 react가 한개의 웹페이지 안에서 경로지정을 통해 여러 페이지를 보여주기 위한 라이브러리이다.
- 이를 설치하기 위해 아래와 같이 명령어를 쓴다.
// 원하는 directory 이동 후 CRA 프로젝트를 설치 해주세요.
// ex. cd Desktop/wecode > npx create-react-app westagram-project
$ npx create-react-app westagram-project📍 Sass 설치
- SASS는 CSS 전처리기, 즉 CSS가 동작하기 전에 사용하는 기능이다.
- CSS를 보다 편리하게 이용하기 위해 만든 라이브러리이다.
- 물론 웹에서는 동작하지 않으므로 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일 한다.
- 이러한 컴파일에는 몇가지 방법이 있는데 그 중 하나인 node-sass를 설치했다.
npm install node-sass@4.14.1 --save- 연욱님의 경우 상위버전을 설치했을 때 에러가 나서 위와 같이 작성했으나, 필자의 경우 그냥 깔아도 실행됐었다. 다만 모든 팀원이 낮은 버전을 깔았기에 나도 오류를 방지하기 위해서 하위버전 설치!
📍 .eslintcache 파일 .gitignore에 추가
// .gitignore
.eslintcache- .exlintcache가 프로젝트 최상위 경로에 자동으로 생성되는 문제를 해결하기 위함이다.
- exlint란?: ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미한다.
- .exlintcache란?: eslint는 파일을 저장할 때마다 적용되는데, 이때 eslintcache파일이 있으면 변경된 파일에 대해서만 린트를 적용할 수 있다.
💁 CRA 폴더 및 파일구성
- 깃에 푸시하기 전에 폴더를 구성해야 한다.
- 다만, 깃은 파일 기반의 프로그램이기 때문에 빈 폴더로 pr을 올리면 파일이 보이지 않는다.
- 이에 아무 파일이라도 넣어 빈폴더를 방지해야한다.
📍 개개인의 폴더 생성
- 각자의 결과물을 올릴거라서 각자 이름으로 된 폴더를 생성후
- 그 폴더 안에 login, main 폴더를 생성하고, js/scss 파일을 추가 했다.
📍 공통 component 생성
- nav는 공통으로 들어갈 것이라서 컴포넌트 폴더에 해당 폴더 및 파일을 추가 했다.
📍 styles 폴더
- styles 폴더안에는 공통으로 사용할 reset.scss, common.scss를 추가했다.
📍 Routes.js
- 각자의 결과물에 경로를 부여하는 작업을 진행했다.
- login, main 두가지 페이지가 있어 각각 다른 이름으로 부여한다!
📍 public폴더
- data, images폴더를 생성했다.
- data에는 mock data가 들어가고, images에는 각자의 폴더를 생성했다.
💁 git git git
위와 같이 작업을 완료했다면 깃의 repo에 push 해준다!
// add > commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."
// 설치한 CRA 프로젝트와 github repo를 연동시켜줍니다.
git remote add origin https://github.com/(해당 repo 주소 입력)
// 연동된 repository로 push 해주세요.
git push origin master
// remote master에 초기세팅 코드가 merge 되면 다른 분들도 clone 받고, branch 생성해서 작업 시작
git clone https://github.com/(해당 repo 주소 입력)
npm install > node-modules 폴더 생성(패키지 소스코드 생성)
git branch feature/name🙈 초기 세팅 시 주의할 점
- 불필요한 주석, 파일 제거
- index.html파일의 불필요한 태그 제거
