[생활코딩|Express #1] Hello, World!

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"프레임워크는 현실의 복잡함으로 부터 우리를 구원해 줄

우리의 구원자가 될 것입니다."

(생활코딩 : Web3 - express 수업소개. 중)

---

#0.

웹 애플리케이션을 좀 더 규모있고 안전하게 구현해야 하는 상황이다?

자연스럽게 프레임워크를 도입 할 준비를 하게 될 것.

어떤 프레임워크가 제일 인기 있는가? : Express

expressjs.com/ko/

Express - Node.js 웹 애플리케이션 프레임워크

 

#1.

npm install express --save

"--save" 옵션을 통해 우리 로컬에 express 모듈을 저장하자.

해당 명령어가 실행되면 node_modules 안에 express가 추가된 것을 확인할 수 있다.

다시 Getting Start의 Hello, world 영역을 살펴보자.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

express는 모듈이니 require를 통해 가져오고 그 아래의 코드는 정확히 알 필요는 없다. (사용하기에 문제는 안되기에..)

이후 기존의 main.js 파일의 내용을 제거하거나 주석처리하고 위의 코드를 붙여넣은 이후 서버를 실행하였을 때

Hello, World! 가 출력된다면 성공적으로 express 설치를 마친 것이다.

 

#2.

express라는 상수에 상수에 모듈을 호출하고 다시 app이라는 상수에 express를 함수처럼 불러오고 있다.

물론, const때문에 var(변수)로 바꾸어도 동작한다.

다만, express와 app은 바뀔 일이 없기에 const로 사용하는 것을 권장한다.

조금 더 자세히 설명하자면 app이라는 상수에 express를 객체로 가질 수 있도록 하는 과정이다.

자세한 내용은 공식문서를 참조하자.

Express 4.x - API 참조

app.get의 내용을 확인해보면,

첫번째 파라미터에는 경로, 두번째 파라미터에 호출될 함수가 표현되고 있음을 확인할 수 있다.

다시 우리 코드로 돌아와서 확인해보면,

'/' 은 경로가 되는것이고

(req, res) => {  res.send('Hello World!') } 은 호출될 함수가 되는 것이다.

이 코드를 우리가 익숙한 형태로 바꾸어보자면 아래의 코드가 된다.

app.get('/', function(req, res){
	return res.send("Hello, World!")
});

get이라는 methond는 흔히 route, routing이라고 하는데 사용자들에게 path를 지정해주는 역할이라 생각해도 무방하다.

경로('/')의 부분을 바꾸고 send의 내용을 바꾸면서 직접 확인해보자.

여담이지만 node.js 수업에서는 if문을 통해 이와 같은 과정(라우팅)을 구현했는데,

express가 도입되면서 훨씬 높은 가독성을 보장하게 되었다.

다음 코드인 app.listen은 app 객체의 listen 메소드의 첫번째 인자로 3000을 주게 되면,

이 메소드가 실행될 때 비로소 웹서버가 실행되면서 다음의 코드가 실행되도록 약속되어 있는 것이다.