CRA 초기 세팅
Westagram 팀 프로젝트에 앞서, React CRA 세팅을 재현님, 경민님과 함께 했다.
먼저 한 사람이 초기 세팅을 진행하고, 완료되면 각 팀의 github repository에 push 하고, 팀원들은 push한 주소를 clone해서 각자의 이름을 딴 branch에 초기 세팅을 마치는 과정을 진행하였다.
1. 초기 세팅 시, 에러 발생
📍 초기 세팅에서 다양한 이유로 에러가 발생할 수 있다.
- CRA/React의 버전
- window/mac OS 차이
- 개인별로 상이한 VSCode settings
따라서 이러한 에러 사항을 팀원들과 함께 해결해 나가는 것이 이번 프로젝트의 목표가 아닐까 하는 생각을 했다 !
2. CRA 초기 세팅
2-1. CRA 설치
- 원하는 directory 이동
- CRA 프로젝트 설치
터미널 명령어에 익숙해지고자 직접 터미널로 파일을 만들어서 설치해봤다..!
✔️ cd change directory 폴더 이동 cd (경로)
✔️ mkdir make directory 디렉토리 생성
2-2. React Router 설치
$ npm install react-router-dom --save✔️ --save를 해주어야 pakage.json의 "dependencies"에 목록이 추가되어 node_modules가 .gitignore에 들어 있어도 master에서 push된 파일들을 clone을 할 때, 다른 팀원들에게도 적용할 수 있다 ...!
2-3. SASS 설치
npm install node-sass@4.14.1 --save✔️ 위와 같은 이유로 sass도 --save
✔️ sass에서 버전을 적어주지 않으니 node.js 와 호환의 문제가 생겨서 다운 그레이드한 버전을 설치하였다.
2-4. eslintcache 파일 .gitignore에 추가
// .gitignore
.eslintcache✔️ .eslintcache가 프로젝트 최상위 경로에 자동으로 생성되는 문제를 해결하기 위함이다.
✔️ .eslintcashe 란?
- eslint를 일반적으로 vscode와 함께 사용하며 저장할 때마다 lint를 적용시키는데, 이 때 eslintcache 파일이 있다면 변경된 파일에 대해서만 린트를 적용시킬 수 있다.
- 즉, eslint가 적용되는 총 시간이 줄어들어 보다 빠른 작업이 가능하다는 뜻이다.
- 다만 계속 캐시 파일이 업로드 되면서 필요하다.
3. 폴더 및 파일 구성
실제 프로젝트가 아닌 하나의 repository에 개인이 작업한 Westagram을 업로드 하는 것이지만, 공통으로 관리할 수 있는 것들에 대하여 찾아내어 효율적으로 팀 프로젝트를 하는 방법에 대하여 배우는 시간이었다.
3-1. 개인의 이름으로 된 폴더 구성
✔️ 먼저, 개인의 이름으로 된 폴더를 구성하여 서로 작업하는 내용에 대하여 구분 한다.
3-2. 공통 Component 사용
✔️ 공통으로 적용될 수 있는 Main 페이지의 Nav를 컴포넌트 요소로 분리하여 팀원들과 함께 사용할 수 있도록 만들었다.
✔️ 이렇게 공통 컴포넌트를 만들면 팀원들은 각자의 Main 페이지에서 Nav 컴포넌트만 가져오면 사용할 수 있는 것이다. 정말 신세계...! 😲
❗️ 컴포넌트를 먼저 Master 에서 만들지 않아도 괜찮다. Nav feature/Nave 브랜치를 따서 관리할 수 있다.
3-3. Styles 폴더 관리
✔️ reset.scss : default css 초기화
✔️ common.scss : 함께 쓰는 공통 css 속성
✔️ variables.scss : sass에서 변수로 적용할 수 있는 스타일 작성
아무래도 각자의 작업한 결과를 공통으로 빼내어 관리해야한다고 하니 조금 걱정이 앞섰다. 하지만 팀원들과 함께 reset, common, 개별 스타일 파일에 넣을 것들을 구분하였다. 또한 @mixin 을 따로 관리하기 위해서 만들어둔 파일이 요긴하게 쓰일 것 같다.
3-4. Routes.js
✔️ 하나의 html에서 페이지들을 관리할 것이기 때문에 Routes.js를 생성하여 Routes 컴포넌트를 만들었다.
✔️ Routes 컴포넌트 안에는, Router >Switch >Route 로 감싸여 있고 Route 안에 각자의 컴포넌트를 경로와 함께 지정해 준다.
✔️ 이러한 Routes.js에서 만들어진 Routes 컴포넌트를 index.js에서 렌더하여 연결된 index.html에 그려주는 것이다.
4. github repo 연동 및 push
초기 세팅이 완료되면 github에 push !
// add ➡️ commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."
// 설치한 CRA 프로젝트와 github repo를 연동
git remote add origin (해당 repo 주소 입력)
// 연동된 repository로 push
git push origin master
// remote master에 초기세팅 코드가 merge된다.
// master 는 pull을 하고
git pull origin master
//다른 분들은 clone 받고,
git clone (해당 repo 주소 입력)
// node-modules 폴더 생성(패키지 소스코드 생성)
npm install
// 팀원 모두 각자의 branch 생성
git branch feature/soojeong.lee5. 초기 세팅 시, 주의할 점
멘토님들께서 초기 세팅을 한 후, 세팅이 잘 되었는지 확인해주셨다. 우리 팀이 받은 Feedback은 아래와 같..다.. 7차만에 통과한 우리팀.. 장하다..!
그리고 정말 디테일하게 세팅 파일들 봐주시는 멘토님들.. 존경 🔥
- 필요없는 App.js 관련파일들이 남아있네요, index.js도 수정해주세요( + css파일 필요없어보입니다.)
➡️ CRA 세팅 시, 자동으로 생성되었지만 실제 작업 시 필요 없는 것들을 지워내는 작업을 진행하였다. - Nav안에 1이란 불필요한 파일이 있네요 삭제해주세요.
➡️ VSC에서 파일 생성 시 겹치는 상황이 발생하여 임의로 생성한 1파일...ㅎㅎ 지우는 것을 깜빡했다. - .vscode/settings.json 파일이 안보이네요 추가해주세요.
➡️ .vscode에서 업데이트 되는 내용을 계속 github에 올리고 싶지 않아서 .gitignore에 .vscode를 넣어두었더니 .vscode/settings.json이 보이지 않아서 삭제해주었다. - README.md 간략하게작성해주세요 팀원, 팀이름등 들어가면 좋겠네요.
➡️ markdown 파일에 익숙하지 않아서 가독성 좋게 md 파일을 만들진 못했지만, 다음번엔 가독성 좋게 적어봐야지 ㅎㅎ - .vscode/extensions.json은 필요없어보입니다.
➡️ 필요 없는 것은..깔끔하게 삭제 🗑 - Routes에 연결한 컴포넌트들이 실제 컴포넌트가 아니면 에러 발생합니다 각자 Login Main 페이지 간단하게 컴포넌트 만들어주세요.
➡️ 잘 몰랐던 사실이면서, 세션 때 강조해주신 내용인데 내가 미쳐 놓쳤던 부분이다. CRA 초기 세팅을 하면서 구조를 만들면서도 이런 사소한 것들을 놓쳐서 당황하는 일이 없도록 해야겠다. - 각 Main.js 에서 common.scss 랑 reset.scss import 하고 계신데, 각각 하실 필요 없이, index.js 에서 한번만 해주시면 될 것 같습니다!
➡️ 중복되는 import들 제거하였다. React의 전달 방식에 대해 더 이해하고 나면 자연스럽게 중복이 줄어들겠지...? 🙏 - Nav.scss 는 전체적인 스타일이 아니고, Nav 컴포넌트에 적용되어야 하는 스타일이기 때문에, Nav.js 에서 import 하시는게 맞는거 같습니다.
➡️ 이 역시도 서로 어떤 유기적인 관계로 렌더링이 되는지 명확하게 이해를 한다면 고쳐나갈 수 있는 부분이다.
6. CRA 초기 세팅을 마치며
Git + Gitbut + React 세션이 종합선물로 온..! 프로젝트이다. 커리큘럼이 이렇게 유기적으로 연결되다니 신기하기도 하면서 앞으로 기존 html + css + Vanilla JS 를 React로 구현해내는 과정이 순탄치 많은 않을 것이라는 생각이 든다. 그래도 오늘 이 복잡한 과정도 팀원들과 함께여서 해결해나갈 수 있었다. 🙌🏻
