[3주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 14

Map Object

 

String 만 답던 Map

key 값을 이용해 값 value를 받는다

단순히 string 만 받을게 아니라 int 등 여러가지를 보내고 싶을떄

 

 

express + 객체

 

자바스크립트 객체 추가

product = db.get(id)

product.id = id

url 로 받았던 id 값을 왼쪽에 넣어줌

 

배열로 받아오기

product ["id"] = id

 

키값으로 해당 밸류값만 가져오면 되는  

 

express + map + 객체 유튜버 실습

 

 

express 구조이해

 

https://expressjs.com/

Express - Node.js web application framework

웹 프레임 워크 = 내가 만들고 싶은 웹 서비스를 구현하는 데 필요한 모든 일을 틀 안에서 할 수 있는 것

 

express 사이트 Hello World 

 

앱은 서버를 시작하며 3000번 포트에서 연결을 청취합니다. 앱은 루트 URL(/) 또는 _라우트_에 대한 요청에 “Hello World!”로 응답합니다. 다른 모든 경로에 대해서는 404 Not Found로 응답합니다.

 

npm express-generator

 

www, app.js 이해하기

 

bin/www

모듈을 가져오는 부분

app이라는 모듈

debug라는 모듈, 어떤 작업을 하는지 로그를 찍는 모듈

http라는 모듈

포트 설정하는 모듈

3000으로 설정되어있지만 개인적으로 설정하면 바꿔주겠다

http가 create 서버를 해주는 모습

 

app.js

 

뷰 엔진이라고 부르는 부분은 리엑트 공부할때 학습

 

 

use = 연결해주겠다는 뜻

 

module.exports = app;

다른 곳에서 모듈로 사용할 수 있게 하겠다~

 

generator

index.js

Router  분기 처리를 한다.

 

기본 페이지 설정 '/'  , funtion ( req, res , next) {

설치가 안되어있는 모습

npm install

 

generator 잠깐 둘러봤다.

 

자바스크립트 함수 4가지 종류

 

 

전부 다 같은 함수

 

express 구조 정리

Express 구조 요약 정리

 Express 개요

Express는 Node.js 기반의 웹 서버 프레임워크로
HTTP 요청과 응답을 미들웨어 기반 구조로 처리한다.

기본 폴더 구조

 

 구성 요소별 역할 요약

 app.js (서버 진입점)

• 서버 실행
• 미들웨어 등록
• 라우터 연결
• 포트 설정

 routes (라우팅)

• URL 경로 정의
• 요청을 Controller로 전달

요청 경로 분기 담당

controllers (컨트롤러)

• 요청(req) 처리
• 응답(res) 반환
• Service 호출

✔️요청 처리 담당

 services (비즈니스 로직)

• 핵심 로직 처리
• 여러 Controller에서 재사용

실제 기능 수행

 models (데이터 계층)

• DB 구조 정의
• 데이터 CRUD 처리

DB와 직접 연결

middlewares (미들웨어)

• 인증 / 로그 / 에러 처리
• 요청 전·후 공통 처리

중간 처리 단계

 views / public

• views: 화면 템플릿 (EJS, Pug 등)
• public: 정적 파일 (CSS, JS, 이미지)

요청 처리 흐름

 

Client → Middleware → Router → Controller → Service → Model(DB) → Response

 MVC 관점 정리

MVCExpress

Model	models
View	views
Controller	controllers
Logic	services
URL	routes

 핵심 한 줄 요약

Express는 미들웨어 기반으로
라우터 → 컨트롤러 → 서비스 → 모델 순서로
요청을 처리하는 구조이다.