Web development with Node & Express

🔰노드 시작하기🔰

익스프레스

앱 애플리케이션 프레임워크

-앱 : 현재 장치 자체에서 동작하는것

-웹 페이지 : 네트워크를 통해 장치에 전달되는 것

 

터미널 사용하기

📌파워셸 사용법 익히기

 => 디렉터리 이동방법, 파일복사.이동.지우는방법, 명령줄 프로그램에서 빠져나오는방법

 

npm 

: 노드 패키지 관리자

: 패키지를 설치하고 의존성을 관리함 

-g : 패키지를 전역으로 설치(시스템 전체에서 쓸 수 있음)

 

노드로 만드는 단순한 웹 서버

웹서버 : 단순히 파일을 컴퓨터-> 브라우저로 전송

노스 = 지금만드는 앱이 곧 웹서버이다

이벤트기반 프로그래밍 = 프로그래머가 어떤 이벤트를 사용할수잇는지, 거기에 어떻게 응답해야하는지 알아야함

(사용자가 클릭하면, 그 클릭에 대한 이벤트는 프로그래머가 처리) => 직관적이다

 

라우팅

요청받은 컨텐츠를 클라이언트에 보내는 메커니즘 

 

정적자원전송

노드 : 파일을 열고, 읽소, 브라우저에 전송하는 작업을 해야함 

fs.readfile(__dirname + path, function(err, data){

  if(err){

 

  }

};

* __dirname : 현재 실행중인 스크립트가 들어있는 디렉터리(경로)

 

노드 시작하기 총평-----------------------------------------------------------------------------------------

• 노드만 사용해서 간단한 웹서버 만들기 쉽다(정적인파일 보여주는것)
• 사용자의 요청에따라 여러가지 정적인파일 보여줄 수 있다
• fs이용해서 파일을 읽어오고, 그 작업과정이 끝나면 비동기적으로 메서드 or err처리가 가능하다

--------------------------------------------------------------------------------------------------------------

 

 

🔰익스프레스🔰

📌스캐폴딩 유틸리티

 

초기단계

• npm은 프로젝트 의존성과 메타데이터를 package.json(프로젝트설명, 의존성 목록을 만들기위함)파일에 보관
• npm install하면 지정한 패키지를 node_module디렉터리에 설치.
•  이때 --save를 하면 package.json을 업데이트 함
• app.get(경로, 함수) = 라우터 추가하는 메서드
• app.use( ) = 미들웨어를 추가하는 메서드(라우터와 일치하지않는 모든것을 처리)
• ⭐익스프레스는 라우터와 미들웨어를 추가하는 순서가 중요함
• res.end(노드의 저수준 메서드) / res.send(익스프레스의 확장메서드) - 클라이언트에 응답보냄(res.send([status],body) - 기본값은 text/html(응용 - res.set(text/plain) , res.json)
• res.writehead => res.set/res.status(오류처리)/res.type(헤더 설정메서드)

뷰와 레이아웃

뷰는 각 요청에 맞게 html을 즉석에서 만들어 커스텀페이지 제공가능

 

정적파일과 뷰

미들웨어를 통해 정적파일과 뷰(사용자에게 전송하는것)를 처리

static미들웨어는 정적자원을 담고있는 디렉터리를 지목해서 특별한 처리없이 클라이언트에 전송

 

익스프레스로 시간절약 총평 ------------------------------------------------------------------------------------------------

• 일반 노드로 할수있다. 다만 코드를 더 쳐야한다.
• 고수준 메서드가 많다.

-----------------------------------------------------------------------------------------------------------------------------------

 

⭐노드모듈 : 모듈화와 메커니즘 제공

⭐npm 패키지 : 프로젝트를 저장, 버전 붙이고 참조하는 표준 스키마 제공

⭐require : 모듈가져오는 함수 => 노드는 node_modules디렉터리에서 모듈 찾음

 

 

 

 

 

🔰요청과 응답객체🔰

1. URL의 각 부분

프로토콜

호스트 : =서버, www(서브도메인, 옵션값), 한 단어이거나 숫자형 IP

포트 : 80, 443을 안쓴다면 1023보다 커야함

경로 :

쿼리스트링 : key-value => URL인코드해야함(encodeURIComponent 내장함수 사용)

해시 : 서버에 전달X, 브라우저에서만 사용(단일페이지 어플리케이션 or AJAX를 사용하는곳에서 사용함)

 

2. HTTP요청 규칙

:HTTP에는 GET, POST규칙을 많이 씀

 

📌브라우저-웹서버 통신

1. 브라우저는 서버에 요청을 보냄(브라우저는 서버와 통신할때 AJAX, GET, POST만 이용)
2. 그 요청은 규칙, URL, 쿼리스트링
3. 앱은 그 요청에 따라 어떻게 응답할지 결정

- 웹 서비스 : DELETE, PUT과 같은 추가 규칙도 사용

 

 

3. 요청 헤더

페이지 이동시 서버로 URL만 보내는것이아니라,

브라우저, 운영체제, 하드웨어 등 '사용자 에이전트'정보를 보냄.

 

4. 응답 헤더

서버가 응답 시 브라우저가 화면에 렌더링하거나 표시하지않는 정보를 보냄.

Content-Type - 컨텐츠타입(HTML, CSS, JS등 브라우저는 URL보다 컨텐츠타입을 우선시 함)

응답이 압축되었는지 여부와, 어떤 인코딩을 사용하였는지 등등 내용이 포함됨

 

5. 인터넷 미디어 타입

클라이언트에서 콘텐츠를 렌더링하기 위해 이 정보가 중요

text/html; charset=UTF-8

=> 타입/서브타입/문자인코딩

 

6. 요청본문

POST요청에는 본문이 있음.

application/x-www-form-urlencoded <= 가장 널리쓰이는 미디어 타입

application/json <= AJAX사용시 쓰이는 미디어 타입

 

7. 요청객체

req.params : 이름붙은 라우트 매개변수를 담고 있는 배열

req.query : 쿼리스트링매개변수(get매개변수), 이름/값 쌍 형태로 담고있는 객체

req.body : POST 매개변수를 담고 있는 객체

 

📌핸들바를 사용한 템플릿 템플릿 엔진 : 머스테시 템플릿 : 머스테시 엔진이 해독할 수 있는 문법 📌폼 처리 input : id는 프론트 전용, name은 서버로 전달

 

 

 

🔰쿠키와 세션🔰

statefull : 세션의 상태에 따라 서버의 응답이 달라짐(statefull 프로토콜 : TCP)

statefullless : 세션상태에 무관한 응답, 그렇기때문에 세션정보를 서버에 저장하지않음

(statefullless 프로토콜 : HTTP, UDP) => 서버는 단지 요청에대한 응답만 보내며, 세션관리는 client에 책임이 있다

 

statefullless의 장점

scaling이 자유롭다 : 어떤 서버로 로드되어도 db에 저장된 client정보로부터 세션정보를 가져오면 되기때문에,

확장된 서버에 scaled out되어서 그 서버에도 해당 세션정보를 넘겨주는 등의 부가적인 활동을 안해도 된다

 

📌HTTP : statefullness의 성격을 가진 프로토콜

📌REST : statefullness한 성격을 가진 설계구조

 

 

 

 

 

🔰미들웨어(=벨브)🔰

: 애플리케이션에 대한 HTTP요청에서 동작하는 기능을 캡슐화 하는 방법

: 클라이언트-서버를 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개역할을 하는 소프트웨어

: 매개변수 3개(or 4개)를 받는 함수

: 파이프라인속에서 실행(express앱에서는 app.use를 호출해 미들웨어(=벨브)를 삽입)

📌 무언가를 주입하는 벨브, 벨브뒤에는 기존것+새것이 섞여있음

 

• app.get, app.post 라우트 핸들러 - 해당 HTTP동사만 처리하는 미들웨어
• 미들웨어 - 모든 HTTP동사를 처리하는 라우트 핸들러

 

미들웨어의 매개변수가 4개인 경우?

=에러처리를 위한 미들웨어로 변함

 

next함수

: next()를 호출하지않으면 파이프라인은 종료(이후의 라우터와 미들웨어를 호출하지않음)

: next()를 호출하지않으려면 res.send, res.json, res.render등 응답을 보내야 함(반대로 호출하려면 클라이언트에 응답을 보내면 안됨)

 

📌미들웨어 찰떡 이해 설명 영상

www.youtube.com/watch?v=SaiFQJynnb0

 

 

라우팅

: URL이나 HTTP에 명시된 요청을, 그 요청을 처리할 코드로 돌리는 메커니즘