CRA 설치

터미널을 열고 작업할 폴더로 이동 후 npx create-react-app 폴더명 명령어를 입력한다

이 때 CRA 설치될 폴더가 Git 으로 관리되고 있다면 CRA는 자동으로 Git을 init 하는 과정을 거치지 않는다.
create-react-app 은 깃으로 관리되고 있지 않은 폴더에서 실행해야한다

Git으로 관리되고 있는 폴더인지 확인 하는 방법

• git status 명령어를 입력하여 출력되는 메세지를 확인하고
• ls -a 명령어를 입력하여 .git 이라는 디렉토리가 없다고 하면 Git으로 관리되고 있지 않은 폴더라는 의미이다

실제 Git 으로 관리되는 폴더에서 CRA 설치해보면?

• create-react-app 명령어를 실행
• 설치후 ls -a 명령어를 입력해 보면 .git 디렉토리가 없는 것을 확인
  즉 해당 디렉토리는 Git으로 관리되고 있지 않다는 의미이다
• 하지만 git status 명령어를 입력하면 on branch master 라는 메세지가 출력
  Git으로 동작하고 있다라는 의미와 같다

  왜 이러한 현상이 생기는가?
  파일 경로가 이상하게 잡혀있음 >> 여기서 CRA로 생성한 폴더가 Git으로 관리되고 있는것이 아니라
  이미 Git으로 관리되고 있는 상위 폴더에서 하위에 생성된 폴더를 모두 관리하고 있기 때문이다

• CRA실행한 폴더의 상위폴더에서 git status 실행해보면 방금 CRA로 생성한 폴더가 상위폴더의 체이지로 잡혀 있는 것을 확인할 수 있다

---

Git으로 관리되고 있지 않은 폴더에서 CRA를 해준 후 생성한 CRA 폴더로 이동 후 code . 명령어를 실행해 바로 vsCode 편집기를 해당 폴더로 열 수 있다

VS Code 패키지 설치

기본적으로 처음부터 사용하게 될 패키지들은 초기세팅 때 설치해 두는 것이 좋다

• react-router-dom
• sass

npm install react-router-dom sass 명령어를 터미널로 실행
잘 설치 되었는지 확인하려면 package.json 파일의 dependencies항목에서 확인 가능

폴더 구조 정리

정답은 없다

기본예시

1. 필수적인 파일을 제외한 나머지 파일들 삭제

• public 폴더에서는 index.html favicon.ico 제외한 모든 파일 삭제
• src 폴더에서는 index.js 제외한 모든 파일 삭제
• index.html 파일 내 지운 파일들을 활용하고 있는 부분 삭제 (logo, mainfest)
• 불필요한 주석 삭제
• index.js 파일 내 삭제한 파일들을 import 하고 있는 부분, 사용하는 부분 삭제
• <StrictMode></StrictMode> 지금 당장 사용하지 않으면 삭제

2. 기본적으로 필요한 파일들만 남기고 커밋 해주기

• 커밋하기전 git add . 실행해 커밋할 준비
• git commit -m "Delete Unnecessary Files"실행

3. 원하는 형태로 필요한 파일 추가

   Git은 폴더를 추적하지 않고 파일을 추적한다
   빈폴더를 생성하면 Git은 추적할 수 없으므로 빈 파일을 하나 만들어 둔다

• public 폴더 내 생성
  - images 폴더 추가하고 폴더 내 임의의 파일 생성
  git status 를 실행해 보면 Git이 images폴더를 추적하고 있음이 확인됨
  - data 폴더 추가하고 폴더 내 임의의 파일 sample.json 생성
  mock data로 활용할 json 파일들을 위치시켜놓는 폴더이다
  

• src 폴더 내 생성
  - assets 폴더 추가하고 하위에 images폴더 추가
  asset>images : css에서 사용될 이미지들을 관리하는 폴더이다
  - components 폴더를 추가
  여러 페이지에서 함께 사용될 컴포넌트들을 관리하는 폴더이다
  - pages 폴더를 추가하고 하위에 영역별로 폴더 추가 (Main)하고 컴포넌트파일과 css파일을 추가 (Main.js , Main.scss)
  하나의 페이지들을 구성하는 컴포넌트들을 위치시켜놓는 폴더이다
  만약 여러페이지에서 공통적으로 사용될 컴포넌트는 아니지만 메인 페이지 안에서는 여러번 공통적으로 사용되는 컴포넌트가 있다면 Main 폴더 하위에 components 폴더를 생성해서 넣어준다
  - styles 폴더를 추가하고 파일 생성 (reset.scss, common.scss, variable.scss)
  공통적으로 사용될 스타일들을 모아놓는 폴더이다
  - Router.js 파일 생성후 Router 컴포넌트를 만들고 이를 export 해줌

  public 폴더 내에 images 있는데 src에서 images를 생성한 이유
  자바스크립트 컴포넌트 내에서는 public폴더에 접근할 수 있지만 css 에서는 public 폴더에 접근이 불가능하기 때문이다 (background image는 src 내 images 폴더에 추가)

  src 폴더 하위 components폴더 : 여러 페이지에서 같이 사용될 컴포넌트들을 위치시킴
  pages > Main 하위 components 폴더 : 메인페이지 안에서만 사용될 컴포넌트들을 위치시킴

생성한 파일 내 필요한 문법 작성

1. 생성한 Router.js 파일에 router 기본 템플릿을 작성한다
   Main.js 를 리액트 컴포넌트로 보여지기 위해 임의의 컴포넌트를 만들어준다

   //Router.js 컴포넌트 기본공식
    import React from "react";
    import {BrowserRouter, Routes, Route} from "react-router-dom";
    import Main from "./pages/Main/Main";
   
    function Router(){
        return (
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Main />} />
                </Routes>
            </BrowserRouter>
        )
    }

2. Router.js를 작성 후 보여지는 화면이 Main 컴포넌트로 설정을 해뒀으므로
   Main.js 를 리액트 컴포넌트로 보여지기 위해 임의의 컴포넌트를 만들어준다

   //Router.js 작성 후 npm start를 하게되면 
   //<Main />컴포넌트에 내용이 없기 때문에 에러가 발생
   //Main.js 에 임의로 컴포넌트를 만들어 준다
    import React from "react"
   
    function Main(){
    	return <h1>Hello world</h1>
    }
    export default Main;

3. index.js 파일에 Router.js를 연결해 준다

   import React from "react";
   import ReactDOM from "react-dom/client";
   import Router from "./Router";
   import "./styles/common.scss";
   import "./styles/reset.scss";
   //variable.scss는 index.js에서 import 할 필요가 없다
   const root = ReactDOM.createReact(document.getElementsById("root"));
   root.render(<Router />);