React
[React #13] Node.js
PEAZH
2024. 3. 2. 18:58
반응형
01. Node.js의 배경
- 자바스크립트는 웹 브라우저의 엔진 위에서 동작을 함
- 각 브라우저는 각자 자기들만의 엔진을 사용하는데, 크롬의 V8은 자바스크립트의 대표적인 엔진
- 자바스크립트는 내장된 엔진을 사용하기 때문에 웹 브라우저에서만 실행될 수 있는데 V8 엔진은 C++로 개발되어서 브라우저 내부가 아니더라도 어디서든 이 엔진을 사용할 수 있음
- 개발자들은 V8 엔진을 브라우저에서 떼어내서 자바스크립트를 어디서든 사용할 수 있는 node.js를 개발함
- 브라우저에서만 사용할 수 있던 자바스크립트의 한계를 극복함
02. Node.js란?
- 웹 브라우저가 아닌 환경에서도 자바스크립트 코드를 실행시켜주는 자바스크립트의 런타임 (= 자바스크립트의 실행 환경)
- Node.js는 자바스크립트로 웹 서버 뿐만 아니라 모바일 앱, 데스크톱 앱 등 만들 수 있음
💡 웹서버
더보기
- 서버는 클라이언트의 요청을 전달해주는 역할
- 요청하는 주체는 클라이언트, 요청을 받아서 데이터를 반환하는 주체는 서버
- 웹 서버는 클라이언트인 브라우저로부터 웹을 요청 받으면 웹을 반환해줌
- 웹 서버는 url 주소로 요청을 받아서 요청받은 주소에 알맞는 웹사이트를 HTML, CSS, JavaScript로 이루어진 웹 파일들을 브라우저한테 던져줌
- URL은 웹 서버의 주소
03. Node.js와 React와의 관계
- React.js는 Node.js를 기반으로 동작하는 기술이기 때문에 Node.js가 필수
- 리액트는 브라우저에서 동작하는 복잡하고 여러가지 기능을 자바스크립트 파일들을 쉽게 만들어냄
- 리액트를 사용해서 만들어 낸 자바스크립트 파일들은 웹 브라우저에 전달되어 프로그램처럼 동작을 함
- 리액트로 만든 웹 사이트를 웹 어플리케이션 또는 리액트 어플리케이션이라고 부름
04. Node.js 사용하기
- 패키지 : Node.js에서 사용하는 프로그램의 단위
01) 패키지의 루트 폴더 만들고 VS Code로 열기
02) 터미널에 npm init 입력
- npm init : 새로운 패키지 초기화 or 생성
다 입력하면 package.json 파일 생성 완료
💡npm?
더보기
Node Package Manager
Node.js의 프로젝트 단위인 패키지를 관리하는 도구
03) index.js 파일 생성하고 실행하기
- index.js 파일 생성
console.log('test');
- terminal에서 실행
node index.js
// test
- node 실행시킬 경로+파일 이름
ex) node src/index.js : src 폴더 안에 있는 index.js 파일 실행
04) 패키지 스크립트 작성
- package.json에 코드 추가
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node src/index.js"
},
- 일종의 매크로 역할로, 터미널에 경로를 다 명시해줄 필요 없이 스트립트의 이름인 'start'로만 명령을 수행할 수 있음
npm run start
참고자료
이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'
반응형