본문 바로가기
개발(라이브러리,프레임워크)/react.js & react native

Node.js 환경설정

by zieunee 2021. 4. 25.
반응형

 

 

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