express 프레임워크 2_서버 실제 연결하기(마이리얼트립)

안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.

비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.

온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.

저처럼 초보자 웰컴이에용.

 

이전 포스팅에서 express 프레임워크를 이용하여 서버에 연결해보았습니다.

오늘은 express에 대해 이해도를 높이기 위해 이론적인 설명과 이를 이용해서 서버를 연결해보겠습니다. 

---

이전 포스팅은 express 속을 파헤쳐보고 간단한 서버 연결 방법하기였습니다. 아래에서 확인하세요.

https://hjp-recipe.tistory.com/41

express 프레임워크 1_[node.js], [express.js]

---

서버프로그래밍이란 무엇일까요?

포트를 여러개 만들어 사용자들이 사용할 수 있도록 사용자들과 데이터 교류를 하는 것을 말합니다.

 

그렇다면, 포트란?

사용자와 서버가 데이터를 송수신하는 통로입니다.

---

 

express 프로젝트에서의 디렉토리 구조를 먼저 이해하기.

 

디렉토리구조 이해하기

디렉토리 구조를 살펴봅시다. 

 

[bin 폴더]

생성된 bin 폴더 안의 www파일은 우리가 서버를 쉽게 실행하는데 도움을 줍니다.

www는 world wide web의 약자입니다. 

bin은 binary의 약자이며 이는 이진이라는 뜻을 가집니다.

그러나 여기서는 폴더이름이 bin 일 경우 중요한, 실행가능한 파일들을 나열하는 폴더라고 볼 수 있습니다.

 

[public 폴더]

public은 열려있는, 접근이 가능한 이라는 뜻을 가집니다.

즉, public 안에 있는 파일들은 외부에서 접근이 이루어질 수 있습니다.

내 서버에 접속하는 다양한 유저들에게 제공할 리소스를 public 폴더안에 넣습니다. 

 

[routes 폴더]

routes는 중간다리 역할을 하는 코드의 집합이라 볼 수 있습니다.

 

router란? 사용자가 접근할 수 있도록 주소를 가지고 있는 사람(역할)입니다. 

https://hjp-recipe.tistory.com/35 에서 설명하기도 했지만 다시한번 라우팅(routing)에 대해 알아봅시다.

SPA(Single Page Application) 을 만들기 위해 우리는 리액트 라우팅을 사용합니다. 

전통적인 웹 어플리케이션의 구조는 여러페이지로 구성되어 있어 사용자가 요청할때마다 페이지가 새로고침되고 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다.

그래서 웹에서 제공되는 정보가 매우 많아 속도적인 측면에서 문제가 있었고,

이를 해소하기 위해 리액트와 같은 라이브러리 혹은 프레임워크를 사용해 뷰 렌더링을 유저의 브라우가 담당하도록 하고, (렌더링하는 것을 서버쪽에서 담당하는 것은 그만큼 렌더링을 위한 서버자원이 사용되고 불필요한 트래픽이 낭비된다) 우선 어플리케이션을 브라우저에 로드한 다음에 꼭 필요한 데이터만 전달받 아 보여줍니다.

이렇게 다른 주소에 따라 다른뷰를 보여주는 것을 라우팅이라 한다.  

 

router를 설명하기 위해 예를 들어보겠습니다.

사용자가 인스타그램의 홈을 들어가 인스타그램의 피드를 요청할 때 instagram.com/feeds 의 url로 접근했을 것입니다. 

instagram.com/feeds GET

get이라는 api를 통해서 접속할 것입니다. 

instagram.com이라는 도메인 /feeds에 접속하면 feeds를 가지고 옵니다. 

 

instagram.com/feeds를 인스타그램의 서버에서 get(가져옵니다.)

instagram.com/feeds 라는 주소단위로 route가 있습니다. 

즉, route안에 /users, ./feeds, / 가 각각 다 있다. → 여러가지 route들이 있습니다. 

이 route들을 바로 서버로직으로 보내준다. 

그래서 사용자가 /feeds로 접속하면 인스타그램 홈에 들어가 피드를 요청하는 것입니다. 

 

사용자가 인스타그램 home에 들어왔을 때 웹페이지에서 메인 api를 요청하여 이를 사용자에게 다시 전달합니다. 

이 때 어떻게 사용자가 인스타그램의 서버를 알고 진입할까요?

이 때 사용자가 인스타그램의 서버에 진입하도록 도와주는 역할을 하는 것이 router이라 할 수 있습니다. 

 

 실질적인 서버를 만드는 것은 app.js 이다. 

app.js

app.js 파일에서 var app = express ( ) 는 express app을 반환한다는 뜻이고,

express는 서버를 반환하는데 도움을 주는 프레임워크입니다. 

 

이전 포스팅에서 routes 폴더에 index.js, users.js 파일을 만들어 require로 불러왔습니다. 

var indexRouter = require('./routes/index')  >> routes폴더의 index를 불러옵니다.

var usersRouter = require('./routes/users')  >> routes폴더의 users를 불러옵니다.

 

require로 불러온 다음, app.use로 연결시킵니다. 

app.use ( '/', indexRouter ) >> indexRouter를 사용한다 라는 뜻으로 연결시키는 작업입니다.

app.use ( '/users', usersRouter ) >> usersRouter를 사용한다 라는 뜻으로 연결시키는 작업입니다.

 

 

이번에는 routes폴더에 main.js파일을 만들어 require로 불러오고 use로 연결시켜 봅시다. 

const mainRouter = require('./routes/main') >> routes 폴더의 main을 불러옵니다.

app.use('/main', mainRouter)  >> mainRouter을 사용한다 라는 뜻으로 연결시키는 작업입니다.

 

 

[services 폴더]

const country = require('../DB/country') 로 country 서버를 가져옵니다. 

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

앞서 아래와 같은 레이아웃을 만들기 위해

DB폴더를 생성하고 그 속에 country.js 파일을 생성하여 그 속에 배열로 코드를 작성해 주었습니다. 

 

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

이제부터 country.js 에 주입한 배열과 데이터들을 이용해서 아래와 같은 슬라이드를 만들어봅시다. 

es6 문법을 사용하여 앞서 작성한 country.js 의 배열에서 가져올 값들을 return (반환) 해줍니다. 

 

1. services > main.js

 

main에 slide 정보를 가져오는 API 를 만들기.

countries 기본값은 null이고 parameter에 값을 넣으면 해당하는 그 값이 들어갑니다.

if 문 >> cityName이 null일 때는 데이터를 받지 않은 상황이므로, 모든 배열의 값을 전달합니다.

 

2. routes > main.js 

 

routes > main.js 파일에서 위 이미지의 슬라이드 전체를 가지고 오는 API를 만들어봅시다.

 

main.js 에서 const mainService = require('../servies/main') 을 하여 

service의 main 파일을 불러오는 것을 mainService 변수에 넣고 mainService에서 countries를 불러올 것입니다.

그리고 슬라이드 전체를 가지고 오는 API를 만듭니다.

routes > main.js

그리고 슬라이드에서 특정 하나의 도시를 가지고 오는 API를 아래와 같이 만듭니다.

좀 더 구체적으로 슬라이드 부분을 가지고 오는 API를 작성하기 위해 

router.get ( '/slide/:cityName') 이라고 작성합니다. 

아래 코드에서 보면 :cityName 은 동적라우팅에 쓰이는 변수입니다. 

오사카 라는 도시 외에도 다른 특정 하나의 도시를 가지고 오는 API를 만들어야하기 때문에 오사카 대신 :cityName을 작성합니다. 

만약 router.get('/slide/osaka') 라고 작성한다면 :cityName에 osaka라는 데이터가 넘어올 것입니다. 

동적라우팅을 받는 방법은 parameter 에 req.params.cityName 을 작성하여 받을 수 있습니다. 

여기서 mainService.countries는

위의 services의 main 파일을 불러오는 것을 mainService 라 변수로 칭하고, 실제 services의 main의 countries를 res.json으로 불러온 것입니다. 

 

 

여기서 잠깐,

service와 route를 나누는 이유는? 

service : 실제 데이터 로직을 다루는 코드

route : 사용자가 어디로 갈 지 알려주는 실제 경로를 만들어 주는 코드

route에서는 사용자가 넘어왔으니 사용자에게 정보를 주기 위해 s

ervice에서 로직을 가지고 와 router에서 실행시켜 줍니다.

이러한 로직을 n-layered architecture 이라 합니다.

 

---

이전에 만들었던 my-real-trip 프로젝트와 지금까지 만든 서버와 연결시켜 봅시다. 

 

1. Home > index.jsx

•   이전에 배웠던 Hook에는 useState와 useEffect 등이 있다.  Hook을 사용하는 이유는 함수형 컴포넌트에서 상태를 사용하기 위해서입니다.  
• axios는 서버와 통신을 하기 위해 HTTP통신을 해야하는데 이 통신을 좀 더 쉽게 해주는 라이브러리입니다. 
• npm install --save axios를 설치합니다. 

 

2. package.json

"proxy" : "http://localhost:3000" 을 설정해 줍니다. 

package.json

 

 

**useEffect는 아래와 같이 함수형 컴포넌트 안에 작성해야 합니다.

웹에서 서버로 요청할 때 axios.get(post) 한다. 그러면 서버에서 데이터를 웹으로 다시 돌려주어야 합니다.(res.json)

이 때 웹에서 반응을 해서 다시 적용을 해야 합니다. 

이 반응하는 상황, 때를 then에서 받아와 이 때의 시점으로 데이터를 받아올 수 있습니다. 

**동기처리와 비동기 처리

• 동기처리 : 하나를 처리하고 끝나면 다음 것을 처리 (하나씩만 처리 가능)
• 비동기처리 : 하나 처리하는 중 다른 것 처리했다가 또 다른것을 처리할 수 있는 경우
  (병렬적으로 여러개 처리가능) 

promise는 비동기 처리 및 제어 (JS ES5문법)입니다.

promise를 사용해서 네트워크를 처리 (http request, response) 해주는 것이 axios입니다. 

 

이렇게 my-real-trip 프로젝트와 express 로 작성한 서버를 연결 해 주었습니다. 

 

postman에서 확인해봅시다.

localhost:3000/main/slide/london 라우트에서 london의 데이터만 가지고 올 수 있습니다.

postman

**서버(express 프로젝트) 를 켠 상태에서 my-real-trip 프로젝트를 실행시켜야만 프로젝트가 실행이 됩니다. 

my-real-trip 프로젝트를 실행시킨 결과 아래와 같이 확인할 수 있습니다.

 

이렇게 마이리얼트립 화면을 구현해 보면서 express의 이론적 개념도 훑어보고, 

실제로 서버에 연결하여 보았습니다.