Mini WAS 개발 hands-on

#해결 과제

❔ Express를 이용해 Hello World가 출력되는 서버를 작성하며, 기본적인 서버의 구조를 이해합니다.

❔ 주어진 API 문서에 작성된 조건에 따른 서버를 작성합니다.

❔ 대소문자 변환하는 기능을 수행하는 서버를 작성하며 다음과 같은 개념을 학습 합니다.

 > Routing의 개념을 이해하고, 메서드와 URL에 따라 분기(Routing)합니다.

 > 클라이언트 요청을 처리하는 비지니스 로직을 작성하고 처리한 데이터를 응답으로 보냅니다.

 > CORS의 개념을 이해하며, 서버에 적용할 수 있어야 합니다.

 

#실습 자료

레파지토리 : https://github.com/cs-devops-bootcamp/sprint-cozstory-frontend

 

#과제 항목별 진행 상황

💡 Express 설치하기

공식문서 를 참고하여, Express를 설치하세요.

# Node.js가 이미 설치되었다고 가정한 상태에서, 애플리케이션을 보관할 디렉토리를 작성하고 그 디렉토리를 작업 디렉토리로 설정
$ mkdir myapp
$ cd myapp

# npm init 명령을 이용하여 애플리케이션에 대한 package.json 파일을 작성
$ npm init

# ENTER 입력 시 기본값 지정
entry point: (index.js)
# 기본 파일의 이름을 app.js로 입력하거나 자유롭게 입력

# myapp 디렉토리에 Express를 설치한 후 종속 항목 목록에 저장
$ npm install express --save

# Express를 임시로 설치하고 종속 항목 목록에 추가하지 않으려면, 다음과 같이 --save 옵션을 생략
$ npm install express

# --save 옵션을 통해 설치된 Node 모듈은 package.json 파일 내의 dependencies 목록에 추가
# 이후 app 디렉토리에서 npm install을 실행하면 종속 항목 목록 내의 모듈이 자동으로 설치

💡 간단한 서버 만들기

공식문서의 시작하기 - Hello World 예제를 참고하여 서버를 만듭니다. 서버를 작성하면서 다음과 같은 질문에 대한 대답을 스스로 고민해 보고, 설명을 읽어보기 바랍니다.

# myapp 디렉토리에 app.js라는 이름의 파일을 작성
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 on port ${port}`)
})

# 앱은 서버를 시작하며 3000번 포트에서 리스닝
# 앱은 루트 URL(/) 또는 라우트에 대한 요청에 “Hello World!”로 응답하고 다른 모든 경로에 대해서는 404 Not Found로 응답
# req(요청) 및 res(응답)는 Node가 제공하는 오브젝트

# 앱 실행
$ node app.js

# 브라우저에서 <http://localhost:3000/로> 접속

1. 아래의 코드가 의미하는 바는 무엇일까요?

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

1. require 모듈로더(module loader)를 통해 http 서버를 생성하기 위해 express 패키지 모듈 호출
2. Express 서버를 생성하기 위해서 express 함수를 호출하여 app 변수에 할당
3. 서버의 port(포트)번호를 지정
4. 해당 app에는 express() 함수를 통해 만들어진 객체가 할당

[참고] app 객체의 메소드 도큐먼트 : 공식문서

2. 아래에서 get, ‘/’ , req, res, res.send()가 무엇을 의미하는 걸까요?

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

1. HTTP 요청 중, 메소드가 get, 엔드포인트(Endpoint)가 /인 요청을 또 다른 함수로 처리하는 비지니스 로직
2. 요청에 대한 정보는 req 객체에, 서버에서 보내야 하는 답변에 대한 정보는 res 객체에 담김
3. res.send() 를 통해 원하는 데이터를 클라이언트에 전송
4. 현재 이 코드에서는 Hello World! 라는 문구를 응답으로 보내고 있습니다.

[참고] res 객체의 메소드 도큐먼트 : 공식문서

3. 아래의 코드가 의미하는 바는 무엇일까요?

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

1. app 객체의 listen 메소드를 사용
2. 기본 형태는 app.listen(port, callback)
3. listen 메소드는 특정 호스트와 port에서 연결을 수신한다라는 것을 표현하기 위해서 사

💡 Mini Node Server 만들기

이번 스프린트에서 구현하는 웹 서버의 기능은 매우 단순합니다. 클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 변경된 단어를 응답으로 받아 화면에 보여 줍니다.

Mini Node Server API

Endpoint(URL) Method 기능

/lower	POST	문자열을 소문자로 만들어 응답해야 합니다
/upper	POST	문자열을 대문자로 만들어 응답해야 합니다

Mini Node Server 요구사항

• POST에 문자열을 담아 요청을 보낼 때는 HTTP 메시지의 body(payload)를 이용합니다.
• 서버는 요청에 따른 적절한 응답을 클라이언트로 보내야 합니다.
• 서버는 POST 요청 이외의 다른 모든 요청에 대하여, 클라이언트에 잘못된 요청이라고 알려줄 수 있어야 합니다.
• CORS 관련 설정을 적용해야 합니다.

Mini Node Server 서버 작성

이번 스프린트는 코드를 살펴보면 위에서 Hello World 서버를 작성 했을 때 사용한 기본 설정 외에, 아래와 같이 3개의 부분으로 나눠 볼 수 있습니다.

1. CORS 모듈을 사용하기 위한 코드작성
2. API에 따른 라우팅 ‘/upper’ 요청 처리 로직
3. API에 따른 라우팅 ‘/lower’ 요청 처리 로직

CORS 적용하기

const cors = require(’cors’)
app.use(cors()) 

문자열을 대문자로 만들어 응답하기

// 라우팅명 : /upper
app.post('/upper', (req, res) => { 
	let data = req.body.toUpperCase();
	res.json(data); //express는 json 미들웨어를 사용하므로 Content-Type application/json으로 응답해주어야 함
})

확인해보기

Client

$ npx serve ./client -l 3000

   ┌────────────────────────────────────────┐
   │                                        │
   │   Serving!                             │
   │                                        │
   │   - Local:    <http://localhost:3000>    │
   │   - Network:  <http://10.0.2.15:3000>    │
   │                                        │
   │   Copied local address to clipboard!   │
   │                                        │
   └────────────────────────────────────────┘

Server

서버를 실행하기 위해서 node server/server-express.js 혹은 npm start 명령을 사용합니다. 그리고 http://localhost:4000 로 접속하여, Hello World가 출력되는지 확인합니다.

$ npm start

> mini-node-server@1.0.0 start
> node server/server-express.js

Server listening on <http://localhost:4000>

# 백엔드, 클라이언트 서버 정상 구동 확인
$ netstat -antp
(Not all processes could be identified, non-owned process info
 will not be shown, you would have to be root to see it all.)
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp6       0      0 :::4000                 :::*                    LISTEN      19777/node          
tcp6       0      0 :::3000                 :::*                    LISTEN      19664/node          

문자열을 소문자로 만들어 응답하기

app.post('/lower', (req, res) => {
  console.log(req);
	let data = req.body.toLowerCase();
	res.json(data);
})

• Preflight 요청
  • 교차 출처 리소스 공유 (CORS) 사전 요청은 본격적인 교차 출처 HTTP 요청 전에 서버 측에서 그 요청의 메서드와 헤더에 대해 인식하고 있는지를 체크
  • 본 요청을 보내기 전에 먼저 본 요청에 대한 권한을 확인 하는 작업을 통하여, 본 요청이 유효할 수 있는지 체크
  • HTTP Header 중 "Access-Control-Request-Method", "Access-Control-Request-Headers" "Origin", 을 사용

출처 : https://velog.io/@jijang/사전-요청-Preflight-request

 

#TROUBLE SHOOTING LOG

📝 문제 1 : 3000번 서버가 올라가지 않음 (npx serve ./client -l 3000)

• 원인 : npm serve가 설치되어있지 않음
• 해결 방안 : npm install serve@13.0.4: npm serve 설치 후 재기동

📝 문제 2 : 서버는 올라갔지만 동작이 안됨

• 원인 : npm 4000서버가 연결되지 않음
• 해결 방안

1. netstat -antp : 가동되어있는 서버 확인
2. npm start : npm 서버를 올려 4000번 서버 사용 가능하도록 구동

#References

• package.json 구조 document