영감을 (inspire) 주고픈 개발 블로그

밑바닥부터 만드는 웹 서비스 -1 : 설계 프론트엔드 : 엥귤러 / 백엔드 : flask REST API / DB 몽고DB(도커) 본문

시리즈/웹 페이지 만들기

밑바닥부터 만드는 웹 서비스 -1 : 설계 프론트엔드 : 엥귤러 / 백엔드 : flask REST API / DB 몽고DB(도커)

inspire12 2018. 6. 15. 01:05

REST가 뭐고 REST를 왜 배우고 써야 하는가? 

처음 주니어로 개발자 커리어를 시작하는 시점에서 미리 해봤으면 좋았을 거라고 생각되는게 꽤 많습니다.

그 중 하나가 REST API 를 이용해서 만든 토이프로젝트입니다. 

거의 모든 앱은 서버 - 클라이언트 구조로 되어있고 이 통신에서 가장 많이 쓰이는 것이 REST 이기 때문입니다.


REST에 대한 개념은 아래 블로그에 정리되어 있습니다. 

조대협님 블로그의 REST 정리 : http://bcho.tistory.com/953


여기선 REST를 쉽게 제공하는 프레임워크를 통해 사용법에 더 집중할 예정입니다.


그런데 초보 개발자의 입장에선 우선 REST는 바로 쓸 수 있게 빠르게 이해하려면 json 데이터를 요청하고 받는 비동기 통신인 ajax 개념으로 간단하게 이해하고 넘어가고 점차 이해하고 시작합시다.


REST 가 뜨게 된 이유는 된 가장 큰 이유는 모바일 때문입니다. 

  1. 모바일은 우선 데이터를 사용해야하는데 이 상황에서 요청할 때마다 html 을 보내주는 방식은 비효율적이며 
  2. 모바일은 아이폰, 안드로이드, 윈도우폰 등 다양한 OS와 다양한 플랫폼에 대해 대응해야 하며 
  3. 그만큼 사용자가 늘어났기 때문에 분산처리의 필요성이 증가했으며 
  4. 브라우저의 성능과 프론트엔드 프레임워크가 좋아졌기 때문에 서버에서 처리하던 걸 클라이언트에서 처리하는 게 이득이 커졌기 때문입니다.
단점도 거의 없고 장점만 있으니 써야죠. (태클 환영합니다.)

이 포스팅 시리즈에선 아래와 같은 스팩으로 진행할 생각입니다.

개발 스택 

  • 프론트엔드 : npm, angular6
  • 백엔드 : flask, flask_apiframework , python3.6
  • DB : 몽고 DB 3.0 (Docker) 
  • IDE : Pycharm Profession
  • VCS : Git, GIthub


1. 프로젝트 세팅 

 파이참 실행 (일반 프로젝트)

 1) 폴더 backend / frontend 만들기 


mkdir backend 

cd backend 

# 가상 환경으로 라이브러리 의존성을 분리합니다.

virtualenv venv  

# 가상환경 실행

source ./bin/activate 

# 서버 프레임워크인 flask와 restful을 지원하는 flask_restplus를 설치합니다. 주의) flask_restful 이 아닙니다. 

pip install flask, flask_restplus

# 프론트 엔드 파일을 생성을 위해 위치 이동합니다.

cd ..

mkdir frontend 

# 엥귤러 설치합시다.

npm install angular/cli 

ng new frontend


.gitignore 파일 작성

첨부 파일 참고


pycharm 내에서 git 잘 되는지 확인 


2. 몽고 db 사용 (도커 + 로보 3T)


왜 굳이 docker 를 쓰나요? 

 사실 그냥 설치해도 상관은 없습니다. 저는 근데 docker 로 하면 금방 설치할 수 있어서 씁니다.(편해서) 그리고 docker 공부도 하고 싶어서 씁니다. 

docker pull mongo:3.0


docker run --name mongo -p 27017:27017 -d mongo


docker exec -it mongo /bin/bash


docker start <container id> 


참고 : https://qvil.github.io/docker/docker-mongo/


container id 는 실행하고 docker ps -a    로 확인하자 


로보 3T 설치 



디비 설계 (자료구조) : 기본 틀은 따로 문서에 저장하는 걸 추천한다. docker 로 실행할 때 로컬로 하다보니 자주 껐다키는데 그러다 오류가 나서 디비를 날릴 수도 있다. 

 

사용자 컬렉션

/**

 기본적인 유저 정보를 생각나는데로 적었다. 홈페이지 성격에 따라 디비 수정이 있을  같다. 

 _id 칼럼은 아이디로 나중에 primary키로 쓰일 것이다. 

user_type은 회원 구분을 위해 만들었다.  

passwd는 틀이 완성되고 회원가입을 하면서 처리할 예정이다.

*/ 

user  

 {

    "_id" : "inspire12",

    "psswd":"willbeencryption",

    "created_date":"2011-02-02",

    "name" : "myname",

    "user_type" :  "1"

}

 

글 컬렉션 

/**

 게시판은 우선 하나의 디비에 저장해서 사용한다. 사용량이 많지 않을 거라 굳이 구분하지 않았다. 

index를 primary 키로 이를 통해 구분한다. 

board_type으로 들어가는 게시판 마다 글을 구분한다. 

depth 을 통해 답글여부를 사용한다. 

시간순 나열, 추천 순 나열, 조회 순 나열을 위해 칼럼을 추가했다. 

_id는 board_type, index, depth 를 이어 만듬

*/

 board 

{

   "_id" : "team_1_1",

   "index" : "1",

   "board_type": "team",

   "title": "start",

   "content": "hihihihi",

    "user_id": "inspire12",

    "depth" : "1",

   "images": [],

    "files" : [],

    "created_data": "2010-05-02",

    "hit" :"0",

    "recommend": [],

}


댓글 컬렉션 

/**

 댓글 위치를 위해 board_id를 가져와야한다.

 댓글의 댓글을 구현하기 위해 comment_depth를 추가했다. 대댓글 기능은 역시 고민을 좀 더 해야한다. 

*/

 comment 

{

    "_id" : "",

    "index" : "1",

    "board_index" : "1",

    "user_id" : "inspire12",

    "comment_content" : "asdfdsa",

    "depth" : "1",

    "comment_depth" : "1"

}