초기 세팅 가이드라인은 Node.js 와 Visual Studio Code 에디터는 이미 설치되어있다는 상황에 맞추어 작성된 글입니다.

1. CRA 및 Third-Party Library 설치

1-1. CRA를 통한 프로젝트 설치

1-1-1. 작업용 폴더 생성

• 프로젝트를 보관할 폴더를 먼저 생성합니다. 위치는 어느 곳이나 상관없지만 경로를 쉽게 찾을 수 있는 곳에 생성하는 것이 좋습니다.

1-1-2. Git Bash Here

• 폴더를 오른쪽 클릭해보면 Git Bash Here 라는 것이 있습니다. 선택해줍니다. ( Git 이 컴퓨터에 설치가 되어있어야 보입니다. )
  ![[Pasted image 20230902094510.png]]

• 폴더를 오른쪽 클릭하고 터미널(Git Bash Here)을 키면 해당 폴더로 위치지정이 된 채로 터미널이 켜지게 됩니다.

1.2. Third-Party Library Setting

1-2-1. npx create-react-app [프로젝트명] 입력하기

• npx create-react-app [프로젝트명] 을 입력하게 되면 react에 관련된 프로젝트 생성이 끝납니다.

$ npx create-react-app weread

• 프로젝트 이름은 대문자로 작성하거나 ~'!()*^' 등의 일부 특수문자를 포함하면 에러가 생기기 떄문에 소문자 (kebab-case)로 작성하는 것이 일반적입니다.
  ![[Pasted image 20230902094938.png]]
• 해당 명령어를 입력하면 위와 같이 해당 폴더에 프로젝트를 생성하기 시작합니다.
• 이후 설치가 완료되면 아래와 같이 프로젝트 폴더가 생성됩니다.
  ![[Pasted image 20230902095131.png]]

1-2-2. Routing

• 이제 Third-Party Library 설치를 위해 생성한 프로젝트 폴더에 진입합니다.

$ cd [프로젝트명]

• 이미 터미널 상에서는 현재 폴더 위치로 위치해 있는 상태이기 때문에 위 명령어를 입력하면 바로 이번에 생성된 폴더로 경로를 변경합니다.

• 라우팅 기능을 추가하기 위해, 많이 사용되고 있는 react-router-dom을 설치합니다.

$ npm install react-router-dom

![[Pasted image 20230902095733.png]]

1-2-2. Styling

• 이 외에도 스타일링을 위해 Sass와, components 등 각 프로젝트에서 필요한 라이브러리를 설치합니다.

$ npm install sass

$ npm install styled-components styled-reset

2. CRA 추가 폴더 및 파일 구성

Git은 파일을 기준으로 추적하기 때문에 폴더를 생성하고 빈 파일을 생성해야 Git으로 해당 파일과 폴더를 관리할 수 있습니다.

• 이제 visual studio Code 에디터에서 만든 프로젝트를 열어봅시다.
  • 에디터를 켠 다음에 File -> Open Folder를 누른 다음 만들었던 weread 폴더를 열어주거나, 아니면 drag & drop 으로 vsCode 에디터에 해당 폴더를 던져주면 됩니다.
  • ![[Pasted image 20230902100338.png]]

폴더 선택이 잘못되면 npm start 같은 동작들이 에러가 발생할 수 있습니다. 꼭 폴더가 제대로 열렸는지 확인합시다.

2-1. public/

2-1-1. public/data/

• Mock Data를 관리하는 폴더 입니다.

2-1-2. public/images/

• js파일 안에서 이미지를 관리하는 폴더 입니다.
• images 폴더 하위에 바로 이미지 파일을 넣는 것 보다는 폴더 안에서도 Nav 폴더, productDetail 폴더 등의 각 페이지에서 사용하는 이미지를 폴더화 시켜서 페이지별로 깔끔하게 관리해주는 것이 좋습니다.
• js 파일에서 public/images로 접근할 때는 절대경로로 접근합니다.

// ProductDetail.js

import React from 'react';

const ProductDetail = () => {
  return <img src="/images/PruductDetail/product1.jpg" alt="프로덕트1" />;
};

export default ProductDetail;

2-1-3. public/favicon.ico

• 웹 브라우저의 상단 탭에 표시되는 아이콘 입니다.

2-2. src/

• 폴더 이름은 리액트에서 생성한 컴포넌트가 바로 들어있는 폴더라면 폴더 이름을 PascalCase로 작성하고, 간접적인 관계의 폴더라면 camelCase로 표기합니다.

2-2-1. src/assets/images/

• background-image 속성처럼 css에서 이미지를 삽입하는 경우도 있습니다. js파일은 절대 경로로 public 폴더에 접근할 수 있지만, css에서는 접근할 수 없습니다.
• 그래서 background-image 등 css에서 필요한 이미지들은 이미지 파일을 src/assets/images 에서 관리해서 절대경로 혹은 상대경로로 사용할 필요가 있습니다.

  css 파일에서 절대경로는 src를 의미합니다.

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

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

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

2-2-2. src/components/

• components 폴더는 Nav, Footer 등 여러 페이지에서 공통으로 사용되는 컴포넌트를 관리하는 폴더입니다.
• Component = UI를 구성하는 최소단위, 재활용 가능

2-2-3. src/pages/

• pages 폴더는 하나의 페이지를 구성하는 컴포넌트들을 관리하는 폴더입니다.

2-2-4. src/components/ 와 src/pages/../components의 차이

• components 폴더는 하나의 페이지 안에서만 여러 번 공통으로 사용되는 컴포넌트들을 관리하는 폴더 입니다.
• 즉, 여러 페이지에서 공통으로 사용되는 컴포넌트 인지, 하나의 페이지 안에서 여러 번 공통으로 사용되는 컴포넌트 인지에 따른 차이가 있습니다.

2-2-5. src/styles/

• 프로젝트에서 공통적으로 적용될 부분의 스타일 파일을 생성합니다.

2-2-6. src/Router.js

• 프로젝트에 사용할 Router 파일을 구성합니다.

// src/Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

1. 프로젝트를 새로 만들어서 작성할 때 retrun 은 { } 가 아닌 () 입니다.
   만약 return 구간을 {} 로 작성할 시에는 <> 태그가 먹질 않으니 만약 태그를 인식못하 는 에러가 발생 헀을 때는 return이 소괄호로 잘 묶였는지 확인합시다.
2. export default Router; 는 꼭 해줘야 합니다.
   위의 저 코드를 안짜면 다른 곳에서 import를 할 수가 없습니다.

2-2-7. src/index.js

• render() 메서드를 통해 그려주는 컴포넌트를 Router로 설정합니다.

2-3. .eslintcache

• eslint는 lint 검사를 할 때마다 .selintcache 파일을 생성하고 업데이트 합니다.
• 파일 안에 기존에 lint 검사를 한 내역을 저장해두어서 매번 전체 파일을 검사하는 것이 아니라 변경된 파일에 대해서만 lint 검사를 할 수 있습니다.
• 이 파일의 목적상, git으로 관리할 필요가 없으므로 .gitignore에 추가해주어야 합니다.

if(IsEmpty) return Null
InEmpty = Boolean(Array.length); == 변수의 추상화 Early Return