React 프로젝트 시작하는 법

충동적으로 만들어보는 프로젝트... 평소처럼 예쁜 기계식 키보드 리뷰 보고 있다가 갑자기 타이핑 연습 사이트를 만들어보고 싶어서 만들어본당.. 뭔가 지금 1도 몰루겠는데 쉬울것 같기도 하고 어려울 것 같기도 하고.. 암튼간에 가볍게 할것이당 가볍게! 화잇힝

아캔두잇

 

---

 

리액트 프로젝트 시작 시 명령어

1) cd 폴더명/ (warp 또는 터미널에서 시작)

 

2) Node -v 

3) Nvm use 18.19.0 (회사 프로젝트 하려면 node를 16.18.0을 써야하는데 이게 디폴트라서 높은 버전으로 바꿔줘야 yarn 명령어 쓸 수 있음)

4) Yarn create react-app 프로젝트이름

 

5) Cd ~~~/ (프로젝트 폴더 안으로 들어가기)

6) Yarn set version berry (yarn은 npm보다 좀더 빠르고, yarn berry는 node_modules대신 Plug'n'Play를 사용해서 더 효율적)

7) Yarn install

 

<파일 수정>

8) .yarnrc.yml에서 node-modules -> pnp (숨김파일 보이기 해야 보임. 그래야 무거운 node_modules 디렉토리 없애고 프로젝트의 종속성 효율적으로 관리)

9) Package.json에서 eslintConfig 삭제 (그래야 나중에 프로젝트 커져도 유지보수 쉽다고 함!)

10) .git과 .gitignore 삭제 (나중에 다시 git init 하면됨)

11) Yarn install (수정사항 반영)

 

<해당 프로젝트를 vscode에서 열기. 이제 warp 꺼도 됨>

 

<src폴더>

12) App.js랑 Index.js 빼고 다 삭제

 

<App.js>

13) 다 삭제하고 my_rfc 자동완성 (code snippet 만들어놨음!)

 

14)  <index.js> 밑에꺼 복붙

—————————————————

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import { BrowserRouter } from 'react-router-dom';

 

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <BrowserRouter>

    <App />

  </BrowserRouter>

);

———————————————————

 

15) Nvm use 18.19.0 (프로젝트 안에서도 또 node 버전 올려주기)

16) 몇몇 라이브러리 미리 깔고 시작

Yarn add react-router-dom

Yarn add prop-types

Yarn add react-helmet-async

Yarn add styled-components

Yarn add styled-components-breakpoints

Yarn add styled-reset

 

17 )Yarn install (라이브러리 추가 반영)

18) Yarn start (시작)

 

그리고 잼나게 만들면 됨