[포스코x코딩온] 풀스택 부트캠프 5주차 정리 -1 (node.js, express.js)

Node.js란?

크롬의 자바스크립트 엔진에 기반해 만들어진 js런타임

npm: node pakage manager, 노드 패키지를 관리해주는 틀

 

pakage.json:

 

패키지들이 서로 의존되어 있어, 문제가 발생할 수 있는데 이를 관리하기 위해서 필요한 것. 프로젝트에 대한 정보와 사용중인 패키지 이름. 정보가 담겨있는 파일.

// 프로젝트를 시작할 때 사용. package.json 파일을 만든다.
npm init

// pakage.json에 default 값 삽입
npm init --yes


// project에서 사용할 패키지를 설치하는 명령어 (프로젝트 별로 따로)
npm install 패키지 이름

 

 

Node.js의 특징

 

single Thread라서 주어진 일을 하나밖에 처리 못한다. 그래서 에러를 이해하지 못하는 경우 멈춤. (에러 처리가 중요하다.)

js의 default가 single thread라서 주어진 일을 하나만 처리 가능하다.

동시에 처리하는 것을 제공하는 부분은 async 등을 사용하면 된다. ex)파일 시스템 접근 (읽기, 쓰기, 만들기), 네트워크 요청

 

Module

특정한 기능을 하는 함수나 변수 등의 집합

import (require) 해서 사용하는 것(클래스보다 큰 개념)이라고 생각하면 될듯. ex) pxpress모듈

 

모듈을 import하는 defalult는 require(); 인데 

pakage.json에 "type": "module"을 추가한다면 import와 export로 문법을 바꿀 수 있다.

하지만 동시에 사용하지는 못한다.

pakage.json에 "type":"commonjs"를 추가한다면 require()로 문법 사용 가능하다. (defalult값)

 

deconstructuring, (다음 포트에 추가 게시)

// 객체의 경우는 key-value를 -> 변수-value의 구조로 선언한다. 
const obj = {name1 : '멍멍', name2: '야용', name3:"꿀꿀"}
const {name2, name3, name1} = obj;
console.log(name2, name1, name3) // 야용, 멍멍, 꿀꿀

// 배열은 인덱스별로 상수를 생성해서 넣기 때문에 순서가 중요함.
const arr = ['김', '이', '박'];
const [fir, sec, trd] = arr;
console.log(fir, trd, sec); // 김 박 이

 

 

 

Port란?

서버 내에서 데이터를 주고받는 프로세스를 구분하기 위한 번호

기본적으로 http 서버는 80 (default), https는 443     ex) 80번 포트를 통해서 데이터를 주고 받는다.

 

 

Express

웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크

http의 경우 너무 복잡해서 더 사용하기 쉽게 쉽게 만들어주는 프레임워크이다.

const express = require('express'); // express 모듈 import
const app = express(); // express 모듈의 최상위 함수로 app 이라는 express application을 만듦

// html 안에서 js 문법을 쓰기 위해서 html을 ejs파일로 만들어서 사용
app.set('view engine', 'ejs') // view engine으로 ejs파일을 사용하겠다.라고 설정
app.set('views', './views'); // 템플릿 엔진 파일을(.ejs) 저장할 위치 등록 ./view 폴더에 ejs파일을 넣겠다.
// 상대경로 기준은 app.js가 속한 폴더에서 시작. 경로를 미리 정해놔서 render할 때 파일 이름만 적으면 됨.

//미들웨어 함수: 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것
// 서버와 클라이언트를 이어주는 중간 작업
// 왜?? -> 브라우저에서는 서버에 있는 파일에 접근할 수 없다.
// 그래서 요청, 응답의 프로세스로 분리한 것 같다.
app.use('/public', express.static(__dirname + '/views'));
//들어오는 모든 요청에 대해서 /public이라는 요청이 들어오면  __dirname + '/views'라는 실제 경로를
'/views'라는 경로로 인식해서 이용하겠다.
// use()는 들어오는 모든 요청에 대해서 response하는 함수


!line 13 (app.use('/public', express.static(__dirname + '/views'));)에 대해서 보충설명!

app.use('/asdf', express.static(__dirname + '/public'))
// 2번째 파라미터의 경로를 첫번째 파라미터로 인식해서 사용하겠다.

// 고로 ejs파일에서 public 폴더에 있는 css/index.css에 접근하려면 아래와 같다.
<link rel="stylesheet" href="/asdf/css/index.css">

 

제대로 이해한건지 모르겠다.