[React #13] Node.js

    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) : 기초부터 실전까지'

    댓글