Happy hacking!
CRA, 이것만 있어도 리액트를 구동할 수 있어! 기본 개발환경 세팅의 시작
싱글페이지 애플리케이션을 만들기 위한 리액트 설치 - CRA(Create React App) - 에는 여러 방법이 있다.
서버 렌더링(SSR) Node.js 웹사이트를 위해서 Next.js를 요즘 많이 사용하는 추세이긴 하다.
참고 : (번역) 2024년에 리액트 프로젝트를 시작하는 방법
리액트는 UI 그리는데만 필요한 라이브러리인데,
리액트를 자바스크립트로 변환하거나 배포를 쉽게하는 툴같은걸 사용가능하게 하는게 CRA
아무튼 CRA는 필요한 웹팩을 한꺼번에 설치해주는 것인데 종류는 아래와 같다.
💻 Create React App
1. npx
외부 라이브러리를 실행할 수 있게 도와줌
npm을 전역 설치하지 않아도 패키지를 불러올 수 있음
npx create-react-app 프로젝트명
2. npm(Node Package Manager)
말 그대로 node.js의 기본 패키지 매니저
전역 또는 특정 프로젝트 폴더 안에서 로컬 설치 가능
package.json 안에서 정의된 스크립트 관리
라우팅 기능 추가를 위해 아래와 같이 리액트라우터돔을 설치함
npm install react-router-dom
스타일링을 위해 아래와 같이 sass 또는 styled-components 등을 설치
npm install sass
npm install styled-components styled-reset
3. yarn
npm과 유사한 패키지 매니저. npm의 제한 사항을 해결하기 위해 Facebook, Google, Exponent, Tilde에서 개발함.
npm과 마찬가지로 Node.js 프로젝트의 종속성을 설치하고 관리하는 데 사용되며
yarn create react-app 프로젝트명 으로 설치함
4. npm과 yarn 중 어떤 것을 선택해야 할까요?
npm과 yarn은 Create React App과 상호 교환하여 사용할 수 있습니다. 더 편한 것이나 팀의 선호도에 따라 선택하면 됩니다.
Create React App을 사용하여 새로운 React 앱을 만들 때 npm 또는 yarn 중 하나를 선택하여 의존성을 설치하고 스크립트를 실행할 수 있습니다.
요약하면, npx는 실행 가능한 패키지를 실행하는 데 사용되며, npm은 Node.js의 기본 패키지 매니저이며, yarn은 Create React App과 자주 함께 사용되는 대안 패키지 매니저입니다. 이들은 모두 JavaScript 프로젝트의 종속성을 관리하고 스크립트를 실행하는 데에 역할을 합니다.
🧨 yarn 설치 과정에서 문제발생 및 해결
폴더 안에 .yarn 폴더를 비롯,
.pnp 파일들이 생성되지 않거나 git 연동도 안되는 문제가 발생했다.
아래는 해결 방법.
npx create-react-app basic
cd basic
touch yarn.lock
yarn
yarn start
🔧 Tools
- Babel : react를 자바스크립트로 바꿈
- node_modules : 용랑 매우 큼. 모든 소스들 들어있음. 파일 설치 삭제 history, 용량 커서 깃헙 통해서 공유안함. 2기가 넘음.
- .gitignore : 깃은 이 파일을 먼저 읽고 나머지를 읽음. 보안상 중요한 파일 여기다 넣음.
- package.json : 영수증같은 느낌. 내가 뭘 설치했는지 기록되는 파일.
- package-lock.json : 좀 더 세부적인 내용까지 기록.
⚠️ 초기구성 :
src 폴더에서 'app.js, index.js' 만 남겨놓고 모두 삭제
