서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장 동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성 템플릿 엔진은 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공한다. Pug 들여쓰기 표현식을 이용해 가독성이 좋고 개발 생산성이 높다. layout, include, mixin 등의 기능을 제공한다. pug 문법 // index.pug html head title= title body h1#greeting 안녕하세요 a.link(href="/") 홈으로 HTML 닫기 태그 없이 들여쓰기로 블럭을 구분 = 을 이용해서 전달받은 변수 사용 가능 id나 class는 태그 뒤에 이어서 바로 사용 ()을 이용해서 attribute 사용 each item in ..
Middleware란? 미들웨어는 Express.js 동작의 핵심! HTTP 요청과 응답 사이에서 단계별 동작을 수행해주는 함수이다. Middleware 동작 원리 Express.js의 미들웨어는 HTTP 요청이 들어온 순간부터 시작된다. 미들웨어는 HTTP 요청과 응답 객체를 처리하거나, 다음 미들웨어를 실행할 수 있다. HTTP 응답이 마무리될 때까지 미들웨어 동작 사이클이 실행된다. 📌 미들웨어는 어떠한 코드도 실행 가능하다. request, response 객체 수정이 가능하다. request-response 사이클을 끝낼 수 있다. 다음 미들웨를 호출할 수 있다. Middleware의 작성과 사용 req, res, next를 가진 함수를 작성하면 해당 함수는 미들웨어로 동작할 수 있다. Rou..
Express.js는 필요에 따라 유연하게 구조 설정이 가능하고, 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가가 가능하다. 또한 모든 동작이 명시적으로 구성되기 때문에, 웹 프레임워크의 동작 방식을 이해하기 가장 좋은 프레임워크이다. express-generator 사용하기 Express.js는 express-generator 라는 프로젝트 생성기를 제공한다. 이 생성기를 사용하면 프로젝트의 기본구조를 자동으로 생성해준다. express-generator는 프로젝트 생성 이후 사용되지 않기 때문에, npx 를 사용해 설치하지 않고 express 프로젝트를 생성할 수 있다. npx express-generator [프로젝트명] Express.js의 구조 app.js Express.js의 가장 기본이..
웹 서비스 웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어진다. HTTP 요청: 사용자가 어떤 데이터가 필요한지 서버에게 알림 HTTP 응답: HTTP 요청에 해당하는 적절한 데이터를 전달 웹 서비스 동작 방식 1. 브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달한다. 2. 서버는 사용자의 HTTP 응답을 브라우저로 전송한다. 3. 브라우저는 HTTP 응답을 사용자에게 적절한 화면으로 노출한다. ✔️ HTTP 요청 예시 HTTP 요청은 어떤 사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. GET / HTTP/1.1 Host: localhost:3000 User-Agent: Mozilla/5.0(Windows NT 10.0; Win64x; x64;rv:93.0) Accept: ..
NPM(Node Package Manager)이란 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. Node.js 프로젝트를 관리하는 필수적인 도구라 할 수 있다. Node.js 프로젝트를 생성하는 법부터 알아보자! 프로젝트 생성하기 npm init 생성한 프로젝트 디렉터리 안에서 이 명렁어를 사용하면 몇 번의 질문을 통해 package.json 파일을 만들어 준다. 만약 질문들을 건너 뛰고 싶다면 -y 옵션을 사용하면 된다. package.json 프로젝트 관련 정보들이 저장되는 파일이다. key value name 프로젝트 이름 version 프로젝트 버전 description 프로젝트 설명 scripts npm run [script name] 으로 실행할 수 있는 사용자 작성 스크립트 depe..
