Express
Express는 웹 개발을 위한 프레임워크로 node를 사용하여 서버를 구축하는 데에 쓰인다
Express도 node패키지로 다른 패키지와 같다. 대신 더 많은 기능이 있다
정확히는 웹 어플리케이션 제작을 도와주는 웹 개발 프레임워크.
Node로 서버를 생성하고 실행할수있다
Express는
- 요청을 받아들일 서버 구축을 돕고
- 들어오는 요청을 파싱한다. (http요청은 텍스트 정보. js객체가 아니므로 express가 그것을 돕는다)
- 요청들을 특정 라우트에 매치시켜준다 /home, /about /logout 등등
- http 응답을 만드는 것도 도와주는데 상태코드를 설정할 수 있고 헤더와 같은 콘텐츠를 어떻게 응답할지 설정할 수 있다
라이브러리와 프레임워크 차이
둘다 다른 사람들이 작성한 코드
둘다 npm 같은 도구를 이용해 다운로드한다
Library라이브러리
라이브러리는 내가 코드에 언제든지 결합할 수 있다.
언제 결합할지 결정하거나 어떻게 사용할지 등을 내가 결정한다
내가 제어권을 가짐
작은 단일 목적의 역할만 한다 http요청이나 텍스트 색상 변경 같은.
라이브러리 예시 - JQuery, Navbar, Scroll Reveal,
Framework프레임워크
프레임워크는 구조를 제공한다. 프레임워크에서 제어의 흐름을 역전시킨다
나는 거의 제어에 관여하지 않는다
프레임워크의 작동 원리에 따라 내가 코들르 작성해야한다
라이브러리보다 야망이 더 크다. 웹 앱이나 게임을 만들고 애플리케이션을 제작한다
즉 프레임워크를 쓰면 제공하는 다양한 기능을 얻는 대신 코드 작성에서의 자유와 유연성을 놓치게 된다
프레임워크 예시 - express, react, angular, Django, Spring
Express 앱 만들기
구버전 npm에서 패키지를 package.json에 저장하려면 —save를 입력하면 된다
신버전에서는 —save를 쓰지 않는다
새 프로젝트를 만들고 express를 설치한다. express를 require로 불러온 후 함수를 실행한다.
const express = require("express");
const app = express();
console.dir(app);
app.listen(3000, () => {
console.log("Listening on port 3000!")
})app.listen으로 포트 3000.
로컬 서버이기 때문에 Url이 아닌 포트 번호를 알아야 하는데 3000이다.
서버를 실행시키고 브라우저에서 해당 서버로 들어가려면
url을 넣는 창에 다음과 같이 입력한다
localhost:3000
로컬 호스트란 사용하는 로컬 기기를 의미하는 것으로 콜론 뒤에 포트 번호를 입력한다
들어가보면 Cannot GET / 이라고 뜬다.
서버는 있지만 응답을 못 받는다는 뜻.
응답을 주는 코드를 추가한다
app.use(() => {
console.log("We Got a new Request!")
})use메서드의 작동 방식은 요청이 들어오면 콜백이 실행되는 것이다.
요청이 어디서 들어오든 상관 없다.
요청 및 응답 객체
서버가 응답하기 위해서는 두 가지 객체를 알아야 한다
첫 번째는 들어오는 요청을 의미하는 객체
두 번째는 응답을 의미하는 객체
app.use((req, res) => {
console.log("WE got a new request!!")
})이름은 맘대로 지어도 되지만 req(request), res(response)를 많이 쓴다
이 객체는 express로 만들어져 이 콜백에 전달된다
http요청은 javascript객체가 아니다. 텍스트정보이다. 어떠한 프로그래밍언어도 아님.
express는 그걸 데이터로 변환한다. 파싱해서 전달할 객체로 변환.
위 경우 app.use의 콜백함수에 전달된다.
console.dir()로 볼수있다. console.dir는 객체를 나타낼때 좋다. 객체 외에는 console.log
요청 객체 → express는 자동으로 http요청 정보를 파싱해서 js 객체를 만들고, 그걸 콜백의 첫 번째 인수로 전달한다.
응답 객체에는 메서드가 있는데 res.send이다 res.send는 http 요청을 보낸다
app.use((req, res) => {
console.log("we got a new request!")
console.dir(req);
res.send("hello this is response!")
})res.send 메서드를 이용해서 텍스트나 객체, 배열을 보낼 수 있다.
Express 라우팅 기초
라우팅이란?
요청과 요청된 경로를 가져와서 응답을 갖는 어떠한 코드에 맞추는 것을 말한다.
localhost:3000 뒤에 /dog, /cat, /search 같은 경로를 추가하고
해당 경로마다 응답을 다르게 할수 있다
const express = require("express");
const app = express();
app.get('/cat', (req, res) => {
console.log("cat request!!")
res.send("meow!")
})app.get에는 두가지가 필요하다
우선 일치하는 경로, 그 다음 콜백함수가 필요하다.
app.get('/', (req, res) => { //루트 라우터
res.send("this is the home page!!")
})
app.get('/cat', (req, res) => { // cat으로 들어가면 meow!
console.log("cat request!!")
res.send("meow!")
})
app.get('/dog', (req, res) => { // dog로 들어가면 woof!
res.send("woof!")
})app.get은 get 요청에만 반응한다
post는 이렇게 할수있다
app.post('/cats', (req, res) => {
res.send('post request!!')
})Express의 api 참고 메뉴에서 Application으로 들어가면
get, post, put이 있고 delete도 있다.
Express가 가진 모두 다른 http 동사로 요청의 타입에 따라 구분함.
존재하지 않는 라우트를 요청하면
404인 경우. cannot get응답을 받는다
이때 제네릭 응답을 만들어서 여기 있는 라우트와 일치하지 않을때 응답하도록 할수있다
app.get('*', (req, res) => {
res.send("i don't know that path!")
})*은 모든 요청이라는 뜻이다. 그래서 이 코드는 맨 끝에 와야 한다. 위에 작성하면 그 밑으로는 무시함.
Express 경로 매개 변수
reddit사이트에는 /r/dogs, r/cats/ 하는 식으로 수많은 페이지가 있다
각각의 라우트가 있지 않다. 대신 제네릭 패턴을 정의한다
express에서 만드는 방법은 라우트를 생성해서 그 안에 경로 문자열에 콜론을 이용해 변수나 경로 변수로 지정하게끔 하는 것이다.
app.use('/r/:subreddit', (req, res) => {
res.send("this is subreddit!")
})이렇게 하면 브라우저에서 url뒤에 /r/dog, /r/cat 등 무엇을 넣어도 위 응답을 받는다
subreddit이 무엇이어야 하는지 정해둔게 없다. 그냥 저 뒤에 한 단어가 오는 패턴을 정의한것.
이때 들어오는 req.params 요청을 console.log 해보면
{ subreddit: ‘cats’ }
라고 되어 있다. 이를 구조분해 할수있다
그 다음 그 값을 send해준다.
app.use('/r/:subreddit', (req, res) => {
const { subreddit } = req.params;
res.send(`this is ${subreddit}!`)
})이렇게 하면 url에 r/입력한 값이 브라우저에 나타난다
이것이 경로 매개변수와 경로 변수를 라우트나 패턴에 설정하는 기본 방법
아주 흔하게 쓰이는 패턴이다.
app.use('/r/:subreddit/:postId', (req, res) => {
const { subreddit, postId } = req.params;
res.send(`this is ${subreddit} by ${postId}!`)
})이렇게 여러개가 쓰이는 패턴도 설정가능하다.
정리하면, 라우트에 콜론 뒤 경로를 정의하는 문자열을 넣고,
키-값 쌍이 있는 req.params를 사용하면 된다.
쿼리 문자열
쿼리란 URL의 일부로 물음표 뒤에 위치하며 쿼리 문자열의 한 부분으로써 키-값 쌍으로도 정보를 담는다
URL 끝에 /search?가 붙은게 보일것이다
/search?q=colors
쿼리 문자열의 매개변수 이름이 colors가 된 것이다
코드에서 라우트를 정의할때 일일이 쿼리 문자열을 찾는 코드를 추가하지 않는다
대신 Express가 구축하고 콜백으로 전달되는 req 객체가 있다
req 객체에 쿼리라는 특성이 있다. 그 특성에서 쿼리 문자열 기반으로 만들어진 키-값쌍을 찾게 된다
localhost:3000/search?q=dogs
라면 console.log(req.query) 해보면 { q: ‘dogs’ } 라고 뜬다.
여러 개의 키-값 쌍은 &로 구분한다.
localhost:3000/search?q=dogs&color=red
만약 매개변수가 누락된다면?
if(!q) {
res.send("nothing found!")
}이렇게 처리할 수 있다
Nodemon 을 사용한 자동 재시작
성가신 점은 코드를 변경할때마다 서버를 재시작해야 한다는 것.
Nodemon이라는 패키지를 사용하면 자동으로 재시작된다.
nodemon이 파일 혹은 디렉토리의 다른 JavaScript 파일을 변경하고 저장할때마다
감지하고 재시작한다. 서버를 재시작하는 것이다.
