Node.js와 환경설정
Node.js 구조
node .js 코어 라이브러리 (자바스크립트) |
---|
node.js 바인딩 |
V8 (자바스크립트 엔진) / 비동기 I/O (C언어) |
- 서버사이드 자바스크립트 실행환경
- 비동기 처리를 표준 api로 제공하여 실행 효율이 좋은 웹 앱플리케이션을 쉽게 만들고 사용할 수 있음
편한 라이브러리와 간단한 사용
npm을 이용하면 간단하게 라이브러리를 설치 할 수 있음
패키지 매니저 npm
간단하게 라이브러리 설치와 제거를 할 수 있음
npm으로 설지하는 각 라이브러리
로컬모듈설치
npm 표준 설정으로 현재 디렉터리에 라이브러리가 설치되는데 이렇게 설치되는 모듈을 "로컬모듈"
이라고 한다.
npm install requset
설치를 하고 실행한 디렉터리를 열어보면 node_modules;라는 이름의 디렉터리가 생성되어있으며, 해당 디렉터리 내부에 설치된 모듈이 다운되어있음
전역설치
머신 전체에 공유할 수 있는 도구 또는 라이브러리 설치
npm root -g
어떤 디렉토리에 설치되었는지 확인할 때
npm install -g coffee-script
전역으로 설치
npm을 사용한 프로젝트 생성
npm init
package.json이 만들어진다.
package.json 는 npm으로 프로젝트를 관리하기 위한 전용 설정 파일이라고 할수있음
프로젝트에서 사용할 라이브러리를 npm에서 설치할때 "--save" 또는 "-S"옵션을 붙여서 설치하면 package.json의존 모듈로써 설치한 모듈과 버전이 기록된다.
"dependencies" 항목이 추가되어있고, 모듈과 버전이 적혀있음
npm을 사용해 스크립트 실행하기
"scripts": {
"start": "node index.js",
"check": "node-v"
}
start 엔트리 추가 후 npm run start
명령어 실행하면 package.json의 scripts/start에 작성된 셀 명령어가 실행된다.(node index.js
)
웹 어플리케이션 구조
웹서버는 인터넷으로 연결된 수많은 웹 클라이언트(브라우저) 에서 접속을 받고 통신을 시작한다. 이때 통신에서 사용되는 규약이 바로 HTTP이다.
- HTTP통신은 웹 브라우저가 웹서버에 요청하면 웹서버가 웹 브라우저에게 응답해주는 구조
- HTTP 통신은 stateless통신으로 응답하는 순간 접속이 종료된다. > 누가 접속했는지 , 이전사이트 어떤페이지 봤는지 식별 불가능 하다.===>>> 그래서 쿠키 기능이 등장 (웹 브라우저 내에 쿠키를 저장한다.)
바벨
모던자바스크립트 코드를 기존의 자바스크립트로 변환해주는 트랜스 다목적 컴파일러
바벨설치
바벨 기본세트와 ES2015 프리셋 전역설치
npm install --global babel-cli babel-preset-es2015
바벨 전용 설정파일 만들기
매번 실행할때마다 명령어가 치기 귀찮으므로 .babelrc라는 파일을 만들어 해당파일에서 옵션 설정을 참조할 수 있다.
- 프로젝트 초기화
바벨의 다양한 기능
변환 결과를 dest(특정 디렉터리)에 저장하려면
a.js / b.js
babel src -d dest // 실행
//결과
src/a.js -> det/a.js
src/b.js -> det/b.js
주석 제거하여 간결하게 만드려면
--conpact=true
라는 옵션을 추가
babel src --conpact=true -d dest
디버깅 편리하게 하기
소스맵 기능 지원
바벨로 변환하기 전의 소스 위치를 빠르게 파악할 수 있음
--source-maps
옵션을 붙인다.
babel aa.js -o aa.out.js --source-maps
모듈 구조 이해
- require 이해calaculator_module.jsmain.js
'개발(라이브러리,프레임워크) > react.js & react native' 카테고리의 다른 글
자동빌드, 웹팩 (0) | 2021.05.16 |
---|---|
컴포넌트, 이벤트 (0) | 2021.05.15 |
가상 DOM (0) | 2021.05.14 |
리액트와 JSX의 관계 (0) | 2021.05.13 |
리액트입문 (0) | 2021.04.26 |