개요

군복무때 진행했던 웹 프론트 프로젝트를 github에 정리하기 위해, 풀스택 환경을 구축해야할 필요성이 생겼다.

본 포스팅에서 전체 과정을 다시 한번 다룰 것이며, 범위는 기본적인 서버 구축 및 프로젝트 실행에 필요한 모듈 설치까지이다.

---

설치

Back-End

nvm

nvm은 node.js를 관리하기 위한 도구이다.
다음 명령어로 설치해주자.

#curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

#export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"

#[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Node.js

nvm을 이용하여 node.js를 설치해준다.

#nvm ls-remote
...
...
       v13.10.0
       v13.10.1
       v13.11.0
       v13.12.0

원격 저장소에서 설치 가능한 버전 목록을 출력해주며
다음 명령어로 설치해주자.

#nvm install 13.12.0 #lastest version

Express

node.js 기반의 웹 프레임워크 이다.
백엔드 서버를 자동으로 생성해준다.

#npm i express-generator -g

-g는 전역으로 설치하는 옵션이다.

Express로 웹서버를 만들어보자.

root@kali:/work/worktalk/pj# express --view=pug be

   create : be/
   create : be/public/
   create : be/public/javascripts/
   create : be/public/images/
   create : be/public/stylesheets/
   create : be/public/stylesheets/style.css
   create : be/routes/
   create : be/routes/index.js
   create : be/routes/users.js
   ...
   ...
   ...

be 폴더와 그 안에 웹서버 파일들이 생성되었다.
해당 폴더로 접근하여 웹서버를 실행해주자.

※ --view=pug는 html을 편리하게 작성하는 매크로 같은 개념인데, 본 프로젝트에서 사용하지 않는다.※

root@kali:/work/worktalk/pj# cd be
root@kali:/work/worktalk/pj/be# npm i
root@kali:/work/worktalk/pj/be# DEBUG=be:* npm start

> be@0.0.0 start /work/worktalk/pj/be
> node ./bin/www

  be:server Listening on port 3000 +0ms

출력되는 포트를 통해 웹서버에 접속할 수 있다.

MongoDB

몽고DB는 NoSQL 데이터베이스로, 비관계형 모델이다.
(실제로 사용해보니 매우 편리했다.)

설치과정이 꽤 길기 때문에, 다음의 링크를 참조하자.

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/#install-mongodb-community-edition-using-deb-packages
: 우분투에서 설치하기

Mongoose

몽구스는 node.js에서 몽고DB에 접근할 수 있도록 도와준다.

#cd be
#yarn add mongoose

Yarn

nvm과 비슷한 기능을 수행하는 패키지 관리 도구이다.
동작이 더 빠르다고 하여 사용한다.

#curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo ㅇapt-key add -
#echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

저장소에 추가하고

#sudo apt update
#sudo apt install yarn

apt를 이용하여 설치한다.

Front-End

Vuetify

먼저 Vue.js 기반의 홈페이지를 생성해주는 vue cli를 설치해주자.

#yarn global add @vue/cli

vue cli 를 이용하여 fe 폴더에 프론트 페이지를 생성한다.

#vue create fe

만든 페이지로 웹서비스를 running 시킨다.

#cd fe
#yarn serve
 DONE  Compiled successfully in 3240ms                                                                오후 2:12:08


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.132.129:8080/

다음처럼 프론트 페이지 출력되는 모습을 확인할 수 있다.

모듈

axios

axios는 쉽게 request를 전송하고 response를 다룰 수 있도록 하는 도구이다.

#cd fe
#yarn add axios

설치가 완료되면, 다음처럼 자바스크립트로 사용할 수 있다.

<script>
import axios from 'axios'

export default {
  mounted () {
    axios.get('http://localhost:3000/api/user')
      .then((r) => {
        console.log(r)
      })
      .catch((e) => {
        console.error(e.message)
      })
  }  
}
</script>

cors

정책에 의해 원래는 다른 도메인이나 포트를 가진 서버에서 다른 서버에게 자원을 요청하는 행위가 금지되어있다.

cors는 이것을 가능하게 해준다.

#cd be
#yarn add cors

Back-End 서버에서 루트 라우터에 해당하는 be/app.js에 다음과 같이 삽입해준다.

const cors = require('cors') // 상단 아무곳이나 추가
app.use(cors()) // api 위에서 사용하겠다고 선언