[Node.js] Node.js 기초 1

Node.js란?

• 브라우저 밖에서도 자바스크립트를 실행할 수 있도록 만든 서버 측 자바스크립트 실행 환경이다.
• 구글의 V8 엔진을 기반으로 동작하며, 웹 서버, API 서버, 실시간 채팅, 스트리밍 서비스 등에서 활용된다.
• npm (Node Package Manager)을 통해 수많은 오픈소스 패키지를 쉽게 사용할 수 있어 빠른 개발이 가능하다.
• 프론트엔드와 동일한 언어(JavaScript)를 사용한다는 점에서 풀스택 개발에 매우 유리한 환경이다.

프론트엔드와 백엔드

프론트엔드

• 사용자가 직접 보고 상호작용하는 화면(UI)을 구현하는 영역.
• HTML / CSS / JavaScript를 사용해 버튼, 입력창, 화면 레이아웃, 애니메이션 등 사용자 경험을 담당함.

백엔드

• 사용자의 요청을 받아 데이터를 처리하고, 데이터베이스와 연결하여 저장 / 조회 / 수정 / 삭제 등의 로직을 수행하는 서버 측 영역.

패키지 매니저

• Node.js 환경에서 필요한 라이브러리(패키지)를 설치, 관리, 업데이트 할 수 있게 도와주는 도구
• npm (Node Package Manager) : Node.js 설치 시 자동으로 같이 설치 됨.

package.json

• Node.js 프로젝트의 정보를 담고 있는 핵심 파일
• 패키지에 대한 설명서 (프로젝트 이름, 버전, 필요한 패키지 목록, 실행 스크립트 등 다양한 정보를 담고있다)

{
  "name": "7_nodejs",   / 프로젝트 이름(소문자로 작성, 공백 x)
  "version": "1.0.0",   / 프로젝트 버전
  "description": "",    / 간단한 설명
  "main": "index.js",   / 진입점 파일
  "author": "",         / 만든 사람 이름
  "license": "ISC",     / 사용 라이센스
  "type": "commonjs"    / 프로젝트 방식
  "scripts": {          / 터미널에서 사용할 실행 명령어 (예 : npm start, npm run dev)
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

웹서버

• 사용자의 브라우저 요청을 받아 웹 페이지, 이미지, CSS, JavaScript 같은 파일을 전달해주는 서버 프로그램 또는 시스템
• 사용자가 주소(URL)을 입력하면 웹서버는 해당 요청을 처리하고 필요한 파일이나 데이터를 응답으로 보내며, 이 과정을 통해 브라우저에 웹사이트 화면이 표시됨.

모듈

• 모듈은 프로그램을 기능별로 나누어 독립적인 파일이나 단위로 구성한 것으로, 코드의 재사용성과 유지보수를 쉽게 해주는 구조를 말한다.
• 특정 기능(계산, 인증, 데이터 처리 등)을 하나의 파일로 분리해두면, 다른 파일에서 필요할 때 불러와 사용할 수 있다.
• require() 또는 import를 통해 모듈을 가져올 수 있다.

CommonJS vs ES6

CommonJS

• node.js 기본 방식
• 모듈 가져오기: require('파일')
• 모듈 내보내기: module.exports 또는 exports.이름
• 확장자: .js

ES6

• ES6를 지원하는 브라우저 또는 node.js 환경
• 모듈 가져오기: import (이름) from '파일'
• 모듈 내보내기: export 또는 export default
• 확장자: .mjs

http 모듈

• 웹 서버를 만들 수 있게 해주는 핵심 내장 모듈
• 클라이언트의 요청을 받고 응답을 반환하는 기능을 제공한다.

Content-Type

• 서버가 브라우저에 "지금 보내는 데이터의 형식이 무엇인지 알려주는 HTTP 헤더"
• 브라우저는 이 값을 보고 데이터를 어떻게 해석할지 결정
  • text/html: html 문서
  • text/plain: 일반 텍스트
  • application/json: JSON 데이터
  • text/css: css 파일
  • application/javascript: JavaScript 파일
  • image/png: PNG 이미지
  • image/jpeg: JPEG 이미지
  • multipart/form-data: 파일 업로드

Header

• 인터넷에서 데이터를 주고받을 때 본문(내용)보다 먼저 전달되는 추가 정보 영역으로, "이 데이터가 무엇인지, 어떻게 처리해야하는지"를 설명해주는 안내문과 같다.
• 브라우저가 서버에 요청을 보낼 때는 어떤 형식을 원하는지, 로그인 정보가 있는지 같은 정보를 헤더에 담고, 서버는 응답할 때 데이터 형식이 무엇인지, 캐시 여부는 어떤지 등의 정보를 헤더에 담아서 전달한다.

요청 응답

경로 설정

http 모듈에서 경로 설정(라우팅)은 사용자의 요청 주소를 나타내는 req.url과 요청 방식인 req.method를 확인하여 조건문으로 분기 처리하는 방식으로 이루어진다.

GET과 POST

GET

• 서버로부터 데이터를 조회할 때 사용하는 요청 방식으로, 주로 게시글 목록 보기, 검색 결과 조회, 상세 페이지 열기 처럼 데이터를 가져오는데 사용된다.
• GET 요청은 필요한 값을 URL 뒤에 ?key=value 형태의 쿼리 문자열로 함께 전달하며, 브라우저 주소창에 그대로 표시된다.

POST

• 서버에 데이터를 전송하여 새로운 데이터를 생성하거나 기존 데이터를 변경할 때 사용하는 요청방식으로, 회원 가입, 로그인, 글 작성, 파일 업로드 등에 사용된다.
• POST 요청은 데이터를 URL이 아니라 요청 본문(body)에 담아 보내기 때문에 주소창에 내용이 보이지 않으며, GET보다 보안성이 조금 더 높고 전송할 수 있는 데이터의 양에 제한이 거의 없다.

쿼리 문자열

• 쿼리 문자열(Query String)은 URL 뒤에 ?기호를 기준으로 붙는 추가 데이터 전달 방식으로, 서버에 필요한 값을 함께 보내기 위해 사용된다.
• key=value 형태로 작성하며 여러 개의 값은 & 기호로 연결한다. (예: ?name=김사과&age=20)
• 주로 GET 요청에서 사용되며 검색 조건, 페이지 번호, 필터 값 등을 전달할 때 많이 활용한다.

nodemon

node.js 개발 시 주로 사용하는 유틸리티로, 소스 코드가 변경될 때마다 자동으로 서버를 재시작해주는 도구

npm install -g nodemon (모든 프로젝트에서 사용 가능)
npm install --save-dev nodemon (해당 프로젝트에서만 사용)

JSON

• 자바스크립트 객체 표기법을 기반으로 한 데이터 교환 형식이다.
• 일반적으로 서버와 클라이언트 간에 데이터를 주고 받을 때 사용한다.
• 구조는 키-값 쌍으로 이루어진 객체 형태나 배열 형태를 사용한다.

const user = { name: "김사과", age: 20 }
const jsonStr = JSON.stringify(user)  // 객체를 문자열로 변환

const jsonStr = "{ name: "김사과", age: 20 }"
const userObj = JSON.parse(jsonStr)   // 문자열을 객체로 변환

const http = require("http")
const url = require("url")

const server = http.createServer((req, res) => {

    if(req.url === "/"){    // 루트 경로로 접속 (127.0.0.1:3000)
        res.writeHead(200, {"content-type": "text/html"})
        res.end("<h2>Hello Node.js</h2>")
    }else if(req.url === "/about"){    // 127.0.0.1:3000/about
        res.writeHead(200, {"content-type": "text/html"})
        res.end("<h2>about page</h2>")
    }else if(req.url === "/api/user"){    // 127.0.0.1:3000/api/user
        const user = {
            userid: "apple",
            name: "김사과",
            age: 20,
            job: "AI개발자"
        }
        res.writeHead(200, {"Content-Type":"application/json"})
        res.end(JSON.stringify(user))
    }else{
        res.writeHead(404, {"content-type": "text/html"})
        res.end("<h2>error 🤢</h2>")
    }
})

server.listen(3000, () => {
    console.log("서버 실행 중...")
})

파일 입출력

fs (File system) 모듈을 사용해서 파일을 읽고 쓰는 작업을 수행한다.

const fs = require("fs")

파일 읽기

동기 방식 readFileSync

const data = fs.readFileSync("./example1.txt", "utf8")
console.log("파일 내용: ", data)
// (에러 처리를 갖고있지 않음 > 에러 처리를 위해선 try-catch문을 사용해야 함)

 

비동기 방식 readFile

fs.readFile("example2.txt", "utf8", (err, data) => {
    if(err) {
        console.log("파일 읽기 실패: ", err)
        return
    }
    console.log("파일 내용: ", data)
})
// (기본적으로 에러 처리 가능)

파일 쓰기

동기 방식 writeFileSync

fs.writeFileSync("output1.txt", "이 내용이 파일에 저장됩니다. 동기 방식")
console.log("파일 저장 완료 (동기)")

 

비동기 방식 writeFile

fs.writeFile("output2.txt", "비동기 방식으로 저장합니다.", (err) => {
    if (err) {
        console.log("저장 실패: ", err)
        return
    }
    console.log("파일 저장 완료 (비동기)")
})

파일에 내용 추가

// 비동기 방식으로 파일에 내용 추가
fs.appendFile("output2.txt", "\n새로운 줄이 추가됩니다.", (err) => {
    if (err) {
        console.log("내용 추가 완료")
    }
})

파일 삭제

fs.unlink("output2.txt", (err) => {
    if (err) throw err
    console.log("파일 삭제 완료")
})