1 . 이론 정리
Node.js
- 브라우저 밖에서도 자바스크립트를 실행할 수 있도록 만든 서버 즉 자바스크립트 실행 환경
- 구글의 V8 엔진을 기반으로 동작함
- 웹 서버, API 서버, 실시간 채팅, 스트리밍 서비스 등 활용
- npm (Node Package Manager)을 통해 수많은 오픈 소스 패키지를 쉽게 사용할 수 있어 빠른 개발이 가능함
- 프론트엔트와 동일한 언어(JavaScript)를 사용한다는 점에서 풀스택 개발에 매우 유리한 환경
프론트엔드, 백엔드 역할 차이
- 프론트엔드는 사용자가 직접 보고 상호작용하는 화면(UI)을 구현하는 영역
- HTML/CSS.JavaScript를 사용해 버튼, 입력창, 화면 레이아웃, 애니메이션 등 사용자 경험을 담당
- 백엔드는 사용자의 요청을 받아 데이터를 처리하고 데이터베이스와 연결하여 저장/조회/수정/삭제 등의 로직을 수행하는 서버 측 영역
node.js 다운
- node.js공식 사이트 : nodejs.org/ko버전 :
- Latest LTS(안정성), Latest Release(최신 버전)
=> LTS로 다운(.msl) => 다 next 누르고 설치
- 설치 확인 여부 -> 터미널(파워쉘) -> node -v
패키지 매니저
- Node.js 환경에서 필요한 라이브러리(패키지)를 설치, 관리, 업데이트할 수 있게 도와주는 도구
- npm (Node Package Manager): node.js 설치 시 자동으로 같이 설치됨
Package.json
- Node.js 프로젝트의 정보를 담고 있는 핵심 파일
- 패키지에 대한 설명서(프로젝트 이름, 버전, 필요한 패키지 목록, 실행 스크립트 등 다양한 정보를 담고 있음)
Package.json 만드는 법
- 터미널(cmd) -> npm init -> 패키지 이름 작성(엔터 칠 경우 파일 이름으로 설정됨)
- 생성된 파일 내용
{
"name": "7_nodejs", : 프로젝트 이름(소문자로 작성, 공백 불가)
"version": "1.0.0", : 프로젝트 버전
"description": "", : 프로젝트 설명
"license": "ISC", : 사용하는 라이선스
"author": "", : 만든 사람 이름
"type": "commonjs", : 프로젝트 방식
"main": "index.js", : 진입점 파일
"scripts": { : 터미널에서 사용할 실행 명령어(ex: npm start, npm run dev)
"test": "echo \"Error: no test specified\" && exit 1"
}
}
웹 서버
- 사용자의 브라우저 요청을 받아 웹 페이지, 이미지, CSS, JavaScript 같은 파일을 전달해 주는 서버 프로그램 또는 시스템
- 사용자가 주소(URL)를 입력하면 웹서버는 해당 요청을 처리하고 필요한 파일이나 데이터를 응답으로 보내며 이 과정을 통해 브라우저에 웹사이트 화면이 표시됨
모듈
- 프로그램을 기능별로 나누어 독립적인 파일이나 단위로 구성한 것으로 코드의 재사용성과 유지보수를 쉽게 해주는 구조
- 특정 기능(계산, 인증, 데이터 처리 등)을 하나의 파일로 분리해 두면 다른 파일에서 필요할 때 불러와 사용할 수 있음
- require() 또는 import를 통해 모듈을 가져올 수 있음
CommomJS vs ES6 모듈 차이
- CommomJS
- node.js 기본 방식
- 모듈 가져오기 : require('파일')
- 모듈 내보내기 : module.exports 또는 exports.이름
- 확장자 : js
- ES6
- ES6를 지원하는 브라우저 또는 nodejs 환경
- 모듈 가져오기 : import (이름) from '파일명'
- 모듈 내보내기 : export, export default
- 확장자 : .mjs
- 터미널(cmd)에서 .js 파일 실행시키기 : node 파일명
- 실행 중지 : Ctrl + C
2. http 모듈
- 웹 서버를 만들 수 있게 해주는 핵심 내장 모듈
- 클라이언트의 요청을 받고 응답을 반환하는 기능을 제공
Content-Type
- 서버가 브라우저에게 "지금 보내는 데이터의 형식이 무엇인지 알려주는 HTTP 헤더"
- 브라우저는 이 값을 보고 데이터를 어떻게 해석할지 결정
Content-Type 종류
- text/html : html 문서
- text/plain : 일반 텍스트
- application/json : json 데이터
- text/css : css파일
- application/javascript : JavaScript 파일
- image/png : PNG 이미지
- image/jpeg : JPG 이미지
- multipart/form-data : 파일 업로드
Header
- 인터넷에서 데이터를 주고받을 때 본문(내용)보다 먼저 전달되는 추가 정보 영역
- "이 데이터가 무엇인지, 어떻게 처리해야 하는지"를 설명해 주는 안내문과 같음
- 브라우저가 서버에 요청을 보낼 때는 어떤 형식을 원하는지 로그인 정보가 있는지 같은 정보를 헤어에 담고 서버는 응답할 때 데이터 형식이 무엇인지 캐시 여부는 어떤지 등의 정보를 헤더에 담아 전달
3 . 요청 응답
3 - 1 . 경로 설정
- HTTP 모듈에서 경로 설정(라우팅)은 사용자의 요청 주소를 나타내는 req.url과 요청 방식인 req.method를 확인하여 조건문으로 분기 처리하는 방식으로 이루어짐
3 - 2 . GET과 POST
- GET
- 서버로부터 데이터를 조회할 때 사용하는 요청 방식
- 주로 게시글 목록 보기, 검색 결과 조회, 상세 페이지 열기처럼 데이터를 가져오는 데 사용
- GET 요청은 필요한 값을 URL 뒤에 ?key=value 형태의 쿼리 문자열로 함께 전달하며 주소창에 그대로 표시됨
- 요청이 POST에 비해 속도가 빠름
- URL를 입력해 실행 확인
- POST
- 서버에 데이터를 전송해서 새로운 데이터를 생성하거나 기존 데이터를 변경할 때 사용하는 요청 방식
- 주로 회원가입, 로그인, 글 작성, 파일 업로드 등에 사용
- POST 요청은 데이터를 URL이 아니라 요청 본문(body)에 담아 보내기 때문에 주소창에 내용이 보이지 않음
- GET보다 보안성이 조금 더 높고 전송할 수 있는 데이터 양에도 제한이 거의 없음
- 폼과 폼을 통해 데이터를 보냄
3 - 3 . 쿼리 문자열
- URL 뒤에 ?기호를 기준으로 붙는 추가 데이터 전달 방식
- 서버에 필요한 값을 함께 보내기 위해 사용
- key=value 형태로 작성, 여러 개의 값을 보낼 때는 & 기호로 연결 (?name=김사과&age=20)
- 주로 GET 요청에서 사용되며 검색조건, 페이지 번호, 필터 값 등을 전달할 때 사용
3 - 4 . JSON
- 자바스크립트 객체 표기법을 기반으로 한 데이터 교환 형식
- 일반적으로는 서버와 클라이언트 간에 데이터를 주고받을 때 사용
- 구조는 키-값 쌍으로 이루어진 객체 형태나 배열 형태를 사용
3 - 5 . Code Runner
- Extensions에서 다운
- 코드 러너 실행 : Ctrl + Alt + n
- vs code에서 코드를 바로 실행시켜 주는 확장 프로그램
3 - 6 . nodemon
- node.js 개발 시 자주 사용하는 유틸리티
- Extensions에서 다운
- 소스 코드가 변경될 때마다 자동으로 서버를 재시작해주는 도구(저장+기존 실행 코드 종료
- 코드 실행 : npm run dev
- nodemon 다운 시 버전
- npm install -g nodemon : 모든 프로젝트에서 사용 가능하나 권장하지 않음
- npm install --save-dev nodemon : 해당 프로젝트에서만 사용
- 기존에 있던 package.json 파일에 코드 추가
=> 11줄부터 15줄까지 작성
=> "dev" : "nodemon 파일명"
4 . 파일 입출력
- fs(File System) 모듈을 사용해서 파일을 읽고 쓰는 작업 수행
- 파일 입출력 종류
- 동기 : try ~ catch문을 사용해 에러 처리를 해줘야 함
- 비동기 : 기본적으로 에러 처리가 되어있음, 비동기이기 때문에 출력(결과) 순서가 달라질 수도 있음
- ex)
먼저 작성 : const fs = require("fs")
- 동기 방식으로 파일 읽기, 파일 쓰기
=> Sync가 들어가면 동기 방식
- 비동기 방식으로 파일 읽기, 파일 쓰기
=> 비동기 방식은 콜백 함수 사용
- 비동기 방식으로 파일에 내용 추가
- 비동기 방식으로 파일 삭제
5 . express
- node.js 환경에서 가장 널리 사용되는 웹 애플리케이션 프레임워크
- 서버를 쉽고 빠르게 구축할 수 있도록 다양한 기능을 제공
- 기본적인 HTTP 모듈보다 훨씬 간단하게 라우팅 처리, 요청/응답 객체 관리, 미들웨어 설정, 정적 파일 제공, 템플릿 엔진 연결 등을 할 수 있어 개발 생산성을 크게 높여줌
- 설치 : npm install express
npm i express
- const express = require("express")
=> 파이썬의 import와 같은 원리(express를 사용하기 위해 가져오는 코드)
- const app = express()
=> 변수를 지정해 express 서버(객체)를 만들어줌
5 - 1 . 라우팅
- 클라이언트가 어떤 URL과 HTTP 메서드(GET, POST)로 요청을 보냈을 때 그 요청을 어떤 코드가 처리할지 연결해 주는 규칙
- app.get("주소", (req, res) => { });
=> 라우터 기본 설정
5 - 2 . 미들웨어
- 요청(request)과 응답(response) 사이에서 중간에 실행되는 함수
- 클라이언트의 요청을 직접 처리하기보다는 가공/검사/추가 작업을 담당하는 역할을 함
- 요청 로그를 남기거나 JSON 데이터를 파싱 하거나 로그인 여부를 검사하거나 에러를 처리하는 기능들이 모두 미들웨어
- 정적 파일 미들웨어 등록
=> app.use(express.static("정적파일명"));
- post 미들웨어 등록
=>app.use(express.urlencoded({extended: true})
5 - 3 . 정적파일
- 서버에서 별도의 처리 없이 그대로 클라이언트에게 전달되는 파일
- CSS, HTML, JavaScript, 이미지, 폰트 파일 등이 대표적임
- 사용자의 요청이 들어오면 서버는 내용을 가공하지 않고 저장된 그대로 응답
5 - 4 . EJS
- EJS(Embedded JavaScript)는 HTML 안에 JavaScript 코드를 삽입해 서버 데이터를 동적으로 렌더링 할 수 있게 해주는 node.js용 템플릿 엔진
- <%=%>, <% %> 안에서 로직을 작성하여 사용
- EJS 다운 : npm i ejs
- 값 출력
=> <h1><%=username%></h1>
- 조건문
- 반복문
- forEach를 사용한 반복문
- const path = require("path")
=> 파일 경로를 다루는 기능
- app.set(설정이름, 설정값);
=> EJS 기본 설정
- app.set("view engine", "ejs");
=> express에서 정해놓은 설정 이름 : view engine
=> html을 자동으로 만들어주는 템플릿 엔진
- app.set("views", path.join(__dirname, "폴더명"));
=> views : express가 미리 정해둔 설정 이름(템플릿 파일)
=> __dirname : 현재 이 js 파일이 있는 폴더의 전체 경로
=> path.join : 안전하게 경로를 합쳐주는 함수
5 - 5 . 템플릿 엔진
- HTML과 데이터를 결합해 동적인 화면을 만들어주는 도구
- 서버에서 전달한 값을 HTML 안에 삽입해 최종 페이지를 생성하며 반복문/조건문 같은 로직도 템플릿 내부에서 처리할 수 있음
'Node.js' 카테고리의 다른 글
| 메모 앱 만들기 - frontend (0) | 2026.07.07 |
|---|---|
| 메모 앱 만들기 - backend (1) | 2026.07.07 |
| MongoDB (0) | 2026.07.06 |
| Node.js - 2 (0) | 2026.06.29 |