PJ . CRA Setting Guidelines

초기 세팅은 팀원중 한명이 진행한다.
이는 Main이고 Master 라는 나무가 되고
다른 팀원들은 Master를 clone 을 진행 후에
branch 라는 나뭇가지를 생성해 내용 추가를 진행해준다 .

초기세팅에서 여러 원인에 따라 다양한 에러가 발생할 수 있다는 것을 반드시 유의하자 .

다양한 에러 발생 원인**
- CRA/React의 버전
- window/mac OS 차이
- 개인별로 상이한 VSCode settings

CRA 설치

// 원하는 directory 이동 후 CRA 프로젝트를 설치 해주세요.
// ex. cd Desktop/wecode > npx create-react-app westagram-project  

$ npx create-react-app westagram-project

React Router 설치

$ npm install react-router-dom --save

Sass 설치

npm install sass --save

.eslintcache 파일 .gitignore에 추가

// .gitignore

.eslintcache

CRA 폴더 및 파일 구성

로컬에서 폴더만 생성하고 빈 폴더로 두고 PR을 올릴 경우 폴더가 GitHub에 올라가지 않는다.
반드시 폴더 안에 아무 파일이나 하나 생성해서 올리자
비어있는 .js 파일이든 .md파일이든 상관없다.

아래 이미지를 참고하여 구성해보자

여기서 components 폴더는 ?

pages 폴더에 있는 컴포넌트와 components 폴더에 있는 컴포넌트의 차이는 components 폴더에서는 모든 페이지에서 사용되는 컴포넌트(ex. Header, Footer)를 관리한다.
이번 프로젝트에서는 Main 페이지에서 사용할 공통의 Nav Component를 하나 만들어서 import해서 사용하자.

styles 폴더

- reset.scss - default css 속성 초기화
- common.scss - 모든 페이지에 공통적으로 적용될 css 속성들
- variables.scss - 함께 쓰는 공통 css 속성(ex. theme color)

 // variables.scss 파일
    @mixin flexCenter {
    	display: flex;
    	align-items: center;
    	justify-content: center;
 }

    // variables.scss 파일에서 정의한 변수들을 사용하는 scss 파일
    @import '../variables.scss'
    
    .logo {
    	@include flexCenter;
    }

Router.js

 팀원 당 컴포넌트 두 개(Login, Main)에 대한 경로를 따로 따로 설정.
 현재는 Login, Main 컴포넌트 두개만 있기 때문에 ..

ex.

// 준식's 컴포넌트
import LoginJoon from './pages/joonsikyang/Login/Login';
import MainJoon from './pages/joonsikyang/Main/Main';

// 종택's 컴포넌트
import LoginJongTaek from './pages/jongtaekoh/Login/Login';
import MainJongTaek from './pages/jongtaekoh/Main/Main';

// import 한 컴포넌트에 대한 경로를 각각 설정.
<Route path='/login-joonsik' element={<LoginJoon />} />
<Route path='/main-joonsik' element={<MainJoon />} />
<Route path='/login-jongtaek' element={<LoginJongTaek />} />
<Route path='/main-jongtaek' element={<MainJongTaek />} />

assets/images 폴더

다음과 같이 css 에서 background-image 속성을 사용해서 이미지를 삽입하는 경우가 있다.

  .feedImage {
     background-image: url('/images/feedImage.jpg');
     // 에러! url은 public 폴더에 접근하는 게 불가능.
    }

css 에서는 public 폴더에 접근하는 것이 불가능 하므로, 위와 같은 경우엔 이미지 파일들을 `src/assets/images` 디렉토리에서 관리하자.

.feedImage {
      background-image: url('../../assets/images/feedImage.jpg');
  }

public 폴더

• data 폴더

data 폴더는 추후에 mock data를 만들어서 불러올 때 사용한다. 우선은 참고만 하자.

• images 폴더

• images 폴더 하위에 본인의 이름으로 각각의 폴더를 생성
• 필요한 이미지들은 그 폴더 하위에서 관리
• 폴더 안에서도 Main 폴더, Login 폴더를 만들어서 페이지 별로 깔끔하게 관리해주는 것도 좋다.

github repo 연동 및 push

초기 세팅이 완료되면 github에 올려 준다.
그러고 나면 다른 팀원들이 해당 repo를 clone 받고, master에서 바로 작업 하는게 아니라 반드시 branch 새로 생성하고 시작하자.

⭐️ 아래의 작업은 기초 세팅이 끝난 후 한명만 진행하고
⭐️ 남은 사람들은 git clone 을 이용하자 .

// 초기세팅 작업 완료 후

// add > commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."

// 설치한 CRA 프로젝트와 github repo를 연동시켜줍니다.
git remote add origin https://github.com/wecode-bootcamp-korea/10-React-Westagram-5.git(해당 repo 주소 입력)

// 연동된 repository로 push 해주세요.
git push origin master

// remote master에 초기세팅 코드가 merge 되면 다른 분들도 clone 받고, branch 생성해서 작업 시작해주세요.
// "초기세팅 완료 > push 후에 멘토 검사가 진행됩니다. Ok 사인 받은 후 다른 분들 git clone 진행해주세요"
git clone https://github.com/wecode-bootcamp-korea/10-React-Westagram-5.git
npm install > node-modules 폴더 생성(패키지 소스코드 생성)
git branch feature/joonsikyang

ESLint + Prettier 세팅 가이드

아래 링크 참조
ESLing + Prettier