풀스택 웹개발 부트캠프 4주차 (1)

syxxne·2023년 8월 20일
JavaScriptnode.js
0

부트캠프

목록 보기
8/42

Node.js

  • 크롬 Javascript 엔진 기반으로 만들어진 Javascript 런타임
  • 이벤트 기반, 비동기 I/O 모델을 이용해 가볍고 효율적
  • npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리

런타임

  • 프로그래밍 언어가 구동되는 환경
  • Javascript의 런타임 환경은 웹 브라우저만 존재했음
    → Javascript를 서버단 언어로 사용하기 위해 나온 것이 Node.js
    → 웹 브라우저 없이 실행 가능

npm

  • Node Package Manager (https://www.npmjs.com)
  • 노드 패키지를 관리해주는 틀
  • Javascript로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동화하여 관리해주는 기능

패키지

  • npm에 업로드된 노드 모듈
  • 패키지들 간 의존 관계 존재

package.json

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

Node.js 특징

  • Javascript 언어 사용
  • Single Thread
  • Non-blocking I/O
  • 비동기적 Event-Driven

Thread & Process

◼ Process

  • 실행 중인 프로그램
  • 운영체제에서 할당하는 작업의 단위

◼ Thread

  • 프로세스 내에서 실행되는 흐름의 단위
  • 하나의 프로세스에는 n개의 스레드가 존재하며 동시에 작동할 수 있음

Single Thread

  • Node.js에서 사용자가 직접 제어할 수 있는 스레드는 하나
  • 싱글 스레드이므로 주어진 일을 하나만 처리할 수 있음
  • Non-blocking I/O 기능으로 일부 코드는 백그라운드(다른 프로세스)에서 실행 가능
  • 에러를 처리하지 못하면, 프로그램 중단 → 예외 처리의 중요성 ↑
  • 프로그래밍 난이도가 쉽고, cpu와 메모리 자원을 적게 사용함

Non-blocking I/O

  • I/O 작업 : 파일 시스템 접근, 네트워크 요청
  • Node.js는 표준 라이브러리의 모든 I/O 메서드를 비동기 방식으로 제공함

Event-Driven

  • 이벤트가 발생할 때, 미리 지정해둔 작업을 수행
    ex) 클릭, 네트워크 요청, 타이머 등
  • 이벤트 리스너 (Event Listner) : 이벤트 등록 함수
  • 콜백 함수 (Callback Function) : 이벤트가 발생했을 때, 실행되는 함수

Call stack

  • 메서드를 호출하면, call stack에 메서드가 쌓이고 스택에 쌓인 순서대로 실행됨
  • LIFO 방식

Event Loop

function run() {
  console.log("3초 뒤 실행");
}

console.log("시작");
setTimeOut(run, 3000);
console.log("끝");

/* 
시작
끝
3초 후 실행
*/
  1. 호출 스택에 setTimeOut() 쌓임
  2. setTimeOut 실행 시, 콜백 run을 백그라운드로 보냄
  3. 백그라운드에서 3초 후, run을 태스크 큐로 보냄
  4. 호출 스택 실행이 끝나 스택이 비워짐
  5. 이벤트 루프가 태스크 큐의 콜백 run을 호출 스택으로 올림
  6. run이 호출 스택에서 실행되고 스택이 비워짐
  7. 이벤트 루프는 태스크 큐에 콜백이 들어올 때까지 대기

Node.js의 역할

  • 간단한 로직
  • 대량의 클라이언트가 접속하는 서비스 (입출력이 많은 서비스)
  • 빠른 개발 요구
  • 빠른 응답 시간 요구
  • 비동기 방식에 어울리는 서비스 (스트리밍 서비스, 채팅 서비스 등)

Module

  • 특정한 기능을 하는 함수나 변수들의 집합
  • 재사용 가능한 코드 조각

Module의 장점

  • 코드 추상화
  • 코드 캡슐화
  • 코드 재사용
  • 의존성 관리

Module 내보내기

  • module.exports = 모듈명;
  • export {모듈명};
  • export default 모듈명;

Module 가져오기

  • const 변수명 = require("./모듈 정의한 파일명.js");
  • import {모듈명} from "./모듈 정의한 파일명.js";
  • import 모듈명 from "./모듈 정의한 파일명.js";

export vs export default

export

  • export {}
  • named export라고 부름
  • 여러 개의 객체, 함수를 한꺼번에 내보낼 수 있음
  • export한 객체 또는 함수의 이름과 import한 이름이 동일해야 함
  • export한 이름을 그대로 import하므로 관련 정보를 파악하기 쉬움

export default

  • 한 모듈에 한 번만 export default로 내보낼 수 있음
  • 개발자가 원하는 이름으로 import할 수 있음
  • 자동으로 실행해야 할 때에는 default export 사용해야 함 (ex. api를 생성할 때)
  • 이름이 달라질 수 있으므로 import한 것이 정확히 어떤 것인지에 대해 혼동이 올 수 있음

출처

서버 만들기

http 모듈

  • Node.js를 통해 서버를 구축하는 방법 : http / express
  • http 모듈
    • 웹 서버를 구동하기 위한 node.js 내장 웹 모듈
    • server 객체 : 웹 서버를 생성할 때 사용하는 객체
    • request 객체 : 응답 메시지를 작성할 때, 첫 번째 매개변수로 전달되는 객체
    • response 객체 : 응답 메시지를 작성할 때, 두 번째 매개변수로 전달되는 객체

localhost & port

localhost

  • 컴퓨터 내부 주소 (127.0.0.1)
  • 자신의 컴퓨터를 가리키는 호스트 이름 (hostname)

port

  • 서버 내에서 데이터를 주고받는 프로세스를 구분하기 위한 번호
  • 기본적으로 http 서버는 80번 포트 사용 (생략 가능, https는 443번 포트)

http 응답

  • 1XX : 처리중
    • 100 : Continue
    • 102 : Processing
  • 2XX : 성공
    • 200 : OK
    • 201 : Created
    • 202 : Accepted
  • 3XX : 리다이렉트 (다른 페이지로 이동)
  • 4XX : 요청 오류
    • 400 : 잘못된 요청
    • 401 : 권한 없음
    • 403 : 금지됨
    • 404 : 찾을 수 없음 (Page not found)
  • 5XX : 서버 오류

Express

  • 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크
  • 웹 애플리케이션을 만들기 위한 각종 메서드와 미들웨어 등이 내장되어 있음
  • http 모듈은 코드의 가독성과 확장성이 떨어짐 → 이를 해결하기 위한 것이 express 프레임워크

미들웨어

  • 응용 소프트웨어가 운영체제로부터 제공받는 서비스 이외에 추가적으로 이용할 수 있는 서비스를 제공하는 컴퓨터 소프트웨어
  • 양쪽을 연결하여 데이터를 주고받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어
  • 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것
  • 서버와 클라이언트를 이어주는 중간 작업
  • express에서는 app.use()를 통해 미들웨어를 등록할 수 있음

장점

  • 표준화된 인터페이스 제공 가능
  • 다양한 환경 지원, 체계가 다른 업무와 상호 연동이 가능
  • 분산된 업무를 동시에 처리 가능하여 자료의 일관성 유지
  • 부하의 분산이 가능

출처

Express 사용

  • express() : Express 모듈이 export하는 최상위 함수로, express application을 만듦
  • app 객체 : Express() 함수를 호출함으로써 만들어진 express application
const express = require("express");
const app = express();

미들웨어 - static

  • 이미지, css 파일 및 javascript 파일과 같은 정적 파일 제공
  • Express에 있는 static 메서드를 이용해 미들웨어로 로드
app.use("/static", express.static(__dirname + "/static"));

ejs 템플릿

app.set("view engine", "ejs");
// views라는 설정을 다른 폴더로 바꿀 때 사용하는 옵션
// views라는 폴더를 기본으로 사용할 때에는 생략 가능
// package.json과 views 폴더의 경로가 같다면, 등록 과정 생략 가능 
app.use("/views", express.static(__dirname + "/views"));

패키지 지역 설치 vs 전역 설치

지역 설치

  • 해당 프로젝트의 node_modules/ 폴더 안에 패키지 설치
  • 해당 프로젝트 내에서만 사용 가능

전역 설치

  • -g 옵션 (global)으로 전역 node_modules/ 폴더 안에 패키지 설치
  • 모든 프로젝트가 공통으로 사용 가능
npm install [패키지명]  // 지역 설치
npm install -g [패키지명] // 전역 설치
profile
syxxne
이전 포스트

풀스택 웹개발 부트캠프 3주차 (2)

다음 포스트

풀스택 웹개발 부트캠프 4주차 (2)

0개의 댓글