24.11.18(Node.js, Express)

jiiiiiiiArchive.·2024년 11월 18일

🤯지식주머니🤯

목록 보기

56/98

React와 Node.js는 현대적인 웹 어플리케이션을 구축하는 데 널리 사용됨.
React는 프론트엔드에서 사용자 인터페이스(UI)를 만들 때,
Node.js는 백엔드에서 서버 로직을 처리할 때 주로 사용
이 두 기술을 결합하면 전체적인 웹 어플리케이션을 유연하게 구축할 수 있음.

Node.js

서버 측 JavaScript 실행 환경
비동기 I/O와 이벤트 기반 아키텍처를 통해 고성능 서버 구축하는 데 적합
기본 개념
- 비동기 I/O : 네트워크, 파일 시스템 등 I/O 작업이 비동기적으로 처리되어 효율적인 작업 가능
- Express.js : Node.js로 서버를 쉽게 구축하기 위한 인기있는 프레임워크
코드 예시
- Node.js의 http 모듈을 사용하여 웹 서버 만들기
  - 3000번 포트에서 실행되는 서버는 브라우저에 접속하면 "엄은지 안녕"이라는 메시지 표시
  
  1. http.createServer : 새로운 HTTP 서버를 생성
  - 요청(req)과 응답(res)을 처리하는 콜백함수 받고
  - req : 클라이언트의 요청 정보가 포함된 객체
  - res : 서버가 클라이언트에 응답을 보낼 때 사용
  2. res.statusCode = 200
  - HTTP 응답 상태 코드를 설정
  - 200은 "요청 성공"을 의미
  3. res.setHeader
  - 응답 헤더 설정
  - Content-Type : 응답 내용의 형식 지정. 여기서는 HTML 형식이며 UTF-8로 인코딩된 텍스트
  4. res.end
  - 응답 본문을 작성하고 응답 종료
  5. .listen(3000)
  - 서버를 3000번 포트에서 대기하도록 설정
코드 실행
- 위 코드를 파일로 저장(파일명 : index.js)
- 터미널에서 node.index.js를 실행
- 3000번 포트에서 서버가 실행
브라우저 접속
- 브라우저에서 http://localhost:3000으로 접속하면 "엄은지 안녕" 표시

Express

Express.js는 Node.js 위에서 동작하는 가볍과 유연한 웹 어플리케이션 프레임워크
RESTful API 서버 및 웹 어플리케이션 구축 단순화
특징
- 간결함 : 최소한의 설정으로 빠르게 서버 구축 가능
- 미들웨어 : 요청과 응답의 흐름을 제어하는 미들웨어를 쉽게 추가 및 관리 가능
- 라우팅 : 클라이언트 요청(URL)에 따라 적절한 로직을 실행하는 라우팅 기능 제공
- 확장성 : 다양한 서드파티 라이브러리와 통합 가능
- 유연성 : JSON, 텍스트, 파일 등 다양한 데이터 형식을 처리
서버 예제

Express 모듈 가져오기 및 앱 설정
- express : Express.js 프레임워크를 사용하기 위해 가져옴
- app : Express 어플리케이션 객체 생성
- port : 서버가 실행될 포트 번호
정적 파일 제공
- app.use : 미들웨어 등록(여기서는 정적 파일 제공 미들웨어 사용)
- express.static : 지정된 디렉터리(/public)의 정적 파일을 가상경로(/main)에서 제공
  - public/main.html은 http://localhost:3002/main/main.html에서 접근 가능
- __dirname : 현재 실행 중인 파일의 디렉터리 경로
HTML 파일 변환
- app.get : HTTP GET 요청 처리
- res.sendFile : 파일을 클라이언트에게 전송
- 루트 URL(/)로 접속 시 index.html 파일 반환
서버 실행
- app.listen : 지정된 포트에서 서버 실행
- 서버가 실행되면 콘솔에 메시지 출력
- {$port} : 템플릿 리터럴로 포트 출력