node -v 로 노드 설치되어있는지 미리 확인
npm : package 관리
npx: package 설치
npm 으로 글로벌 모듈 설치 시 문제점 :
- 모듈 업데이트 확인이 어렵다.
- 프로젝트마다 다른 버전의 모듈이 필요할 때는 버전 문제가 발생할 수 있다.
- create-react-app 같은 보일러플레이트(여러 군데에서 반복되는 코드)는 매번 최신 버전을 설치해야해서 불편하다.
npx 실행과정
- 실행시킬 패키지가 로컬에 저장되어 있는지 확인한다.
- 존재하면 실행시킨다.
- 존재하지 않는다면 npx가 가장 최신 버전을 설치하고 실행시킨다.
- 이후 해당 패키지를 제거하여 오염 걱정이 없다.
create-react-app(CRA)
: 초기 환경을 일일히 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업하는것.(webpack, babel 등의 라이브러리 설치)
npx create-react-app 프로젝트명App.js, index.js 제외하고 모두 삭제해주기(필요하면 사용)
npm start 입력해서 :3000 서버로 열어주기
모듈 import,export
import Button from "./Button" export default Button;public 폴더에 html을 찾아볼 수 있고, 나머지 파일들은 src 폴더에 넣어주면 된다.
css inport 해주면 모든 페이지에 적용.
-> css 를 모듈화 가능.
++) 레포지토리 만들때 가능하면 readme 페이지를 추가하지 말자.
로컬 브랜치에 있는 변경 사항과 원격 저장소의 변경 사항이 충돌한다는 에러가 계속 떠서 해결하기 어렵다.
'* branch main -> FETCH_HEAD
fatal: Not possible to fast-forward, aborting.
npx 관련 레퍼런스
https://seizemymoment.tistory.com/106
https://ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx
CRA 분석 레퍼런스
https://velog.io/@devsaza/cra
