[리액트 React] 리액트 시작하기

npm | Yarn

 
JavaScript 언어를 위한 패키지 매니저로, 프로젝트에서 필요한 패키지들을 관리하고 설치하는 데 사용된다.
이전에는 둘이 속도 부분에서도 차이가 있었다고 하지만, 이제는 거의 차이가 없다고 한다
npm은 의존관계를 (한 요소가 다른 요소에게서 필요한 것을 얻거나, 다른 요소에 영향을 받아 기능을 수행하는 상태) 가지는 다른 패키지들도 자동으로 설치됨으로 보안 문제가 발생할 수 있다 Yarn은 yarn.lock이나 package.json 파일에 있는 것들만 설치를 하기 때문에 보안이 더 안전하다.
Yarn이 npm보다 용량이 더 큰 편이다.

 

리액트 첫 프로젝트 

 

• 꼭 Node.js는 LTS 버전으로 설치할 것 
• 프로젝트 폴더를 미리 만들어 준 후 폴더 내에서 Shift + 마우스 오른쪽 버튼을 클릭하면 PowerShell창을 열 수 있다.

 

 

 

• 파워쉘에 node -v 를 입력하여 노드 설치 확인
• npm은 node를 설치하면 자동으로 설치가 된다
• 패키지 생성 명령어 npx create-react-app week-1
• 패키지 시작 명령어 npm start

 

 

 

• 이제 vs코드로 패키지 폴더를 열어 import의 상대 경로를 절대 경로로 지정해 주자
• jsconfig.json 파일을 만들어 아래 이미지와 같이 입력하면 컴파일 옵션 설정 완료
• src 아래 파일은 모두 src에 절대 경로로 연결하는 것
• 주석을 허용하지않는다(주석을 입력할 경우 프로젝트 연결이 안 됨)

 

 

• 이제 App.js에서 프로젝트를 시작하면 된다.