[TIL] React 입문 - 개발 환경 세팅을 위한 필수 프로그램

 

 

 

개발 환경 세팅

 

 

필수 프로그램

 

크롬 브라우저

 

VScode

 

git

 

Node

설치 확인 : 터미널에 node -v 입력 후 버전 확인

 

* NPM(Node Package Manager)은 노드 설치 시 자동으로 같이 깔림. 

 : 노드 패키지 매니저. 마켓이면서 동시에 명령어이다.

 : 이것을 통해 리액트 패키지 등등을 설치할 수 있다.

 

* yarn

 : npm 패키지. npm 명령어로 설치해줘야 함.

 : 설치 후에는 npm 명령어, yarn 명령어 둘 다 사용하면서 패키지를 설치할 수 있다.

 : npm의 역할과 동일하지만 마켓은 아니고 명령어로서 동일한 역할을 한다.

 : npm보다 성능적으로 조금 개선됨

 

-g

= global

패키지 베이스(프로젝트 안에서만 쓰는 패키지)가 아니라 내 컴퓨터 전반에 사용할 수 있게끔 하는 명령어

 

npm install -g yarn

= npm 명령어로 yarn을 install 할 건데, 내 컴퓨터 전반에서 yarn 명령어를 쓸 수 있게 할 것이다.

(Password를 입력하라고 뜰 시 : 맥북 잠금해제 암호 입력 후 엔터)

 

yarn -v

yarn 설치 후 확인

 

 

npm으로 패키지 설치하는 방법

npm install [설치할 패키지 이름]
// 예시 : npm install yarn

 

 

yarn으로 패키지 설치하는 방법

yarn add [설치할 패키지 이름]
// 예시: yarn add react-router-dom

 

 

---

 

 

npm과 yarn

 

< 공통점 >

 : 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자.

 : 전 세계의 많은 개발자들이 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓음. 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자.

 ≒ 플레이스토어, 앱스토어

 

 

< 차이점 >

 

NPM

 - Node Package Manager의 약자

 - node.js를 설치할 때 자동으로 생성

 - NPM platform 자체

 - 넓은 커뮤니티 존재

 

YARN

 - 2016년에 페이스북에서 개발한 패키지 관리자

 - npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋다.

 

요약

 - 속도 : NPM < Yarn

 - 보안 : NPM < Yarn

 (하지만 최근 npm의 보안 업데이트도 크게 향상됨)

 

명령어

[출처 : Cracking Vue.js]

 

* 모든 프로젝트에는 package.json이라는 파일 존재. 

 이 파일 안에는 프로젝트에 담겨있는 dependency(해당 프로젝트가 의존하고 있는 패키지)가 있음.

 의존하고 있는 패키지들의 목록을 넣기 위해서

 - npm : 반드시 —save라는 명령어를 넣어줘야 함

 - yarn : save명령어가 내장되어 있어 —save를 입력하지 않아도 됨.

 

 

결론

사실 어떤 것을 사용해도 괜찮음.

 

 

---

 

yarn 설치 중 오류

에러 메시지

% npm install -g yarn
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/yarn
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/yarn'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jiwon/.npm/_logs/2023-06-14T01_56_24_159Z-debug-0.log

 

 

원인

권한 문제로 터미널을 통한 다운로드가 되지 않음

 

 

해결

sudo npm install -g yarn

관리자 권한으로 설치

 

---

 

 

javascript 런타임 환경의 종류

 

런타임이란?

 

프로그래밍 언어가 구동(running) 되는 환경(environment).

= JavaScript가 구동되는 환경.

 

자바스크립트의 대표적 런타임 환경은 2가지로 볼 수 있다

1. 브라우저(ex : Chrome, Microsoft Edge, Firefox, Internet Explorer)

2. node 환경

 

즉, javascript 파일을 실행할 수 있는 방법이 2가지가 있다는 이야기.

 

 

 

아래 파일을 node 환경에서 실행하면 오류가 발생한다.

 

// test.js 파일
function printAlert() {
	alert('이 함수는 브라우저 환경에서만 실행됩니다.');
}
printAlert();
// vscode 터미널에서 node test.js 입력 시 ReferenceError 발생
// ( = 런타임 환경이 노드 환경일때는 호출할 수 없음.)

// html 파일 <header>에 <sccript> 넣고  브라우저에서 확인 시
// > 개발자도구(opt + com + I)
// > Console 탭에서 확인
// > 알림창 뜸.
// ( = 런타임 환경이 브라우저 환경일때는 호출할 수 있음.)

 

// test.js 파일

function printAlert() {

alert('이 함수는 브라우저 환경에서만 실행됩니다.');

}

printAlert();

// vscode 터미널에서 node test.js 입력 시 ReferenceError 발생.( = 런타임 환경이 노드 환경일 때는 호출할 수 없음.)

// html 파일 <header>에 <sccript> 넣고  브라우저에서 열기 > 개발자도구(opt + com + I) > Console 탭에서 확인 > 알림 창 뜸. ( = 런타임 환경이 브라우저 환경일 때는 호출할 수 있음.)

 

 

리액트를 이용하여 웹 애플리케이션을 개발할 때는, 노드 환경이 아닌 브라우저 환경을 이용해 개발을 하는 것이 유용함.