jeonggod/portfolio-project

Flask(Layered Architecture), React를 이용한 포트폴리오 웹서비스

Portfolio Web Site

포트폴리오 웹 사이트는 자신의 정보(이름, 학력, 수상경력등)를 입력한 후, 검색을 통해 다른 사용자의 포트폴리오 정보를 확인할 수 있는 포트폴리오 웹 서비스입니다.

기술 스택

Language

• Python3.6 이상 (Server)
• JavaScript (Client)

Framework

• Flask
• React

Database

• MySQL

Others

• Google Cloud Platform
• Azure Storage
• Postman
• Github

Design Pattern

• Layered Architecture

python3.6 이상 이유

from dataclasses import dataclass

python3.6이상부터 지원하는 모듈인 dataclass를 사용하고 있기 때문입니다.

About the project

힘들었던 점

Oauth2를 이용하여 구글 로그인을 구현하는 것과 JWT token을 이용하여 로그인 세션을 유지시키는 방법이 가장 어려웠습니다.

OAuth2

Oauth2는 Client에서는 React Google Login을 이용하여 Authorization Code를 얻은 뒤, 서버에서 해당 코드를 이용하여 토큰값을 얻고 유저 정보를 얻는 방식으로 구현했습니다. flask에도 Oauth2 구글 로그인 라이브러리가 존재했지만 세션을 이용하는게 마음에 들지않아 제가 직접 구글 공식 문서를 참조하여 구현하게 되었습니다.

JWT Token

JWT token에 대해서는 정보가 확실치 않아서 많이 헤맸습니다. 정해진 형식이 있는게 아닌 사람마다 다 다른 방식으로 구현을 하여서 jwt 자체에 대해서 공부를 하느라 어려웠습니다.

Login요청이 들어오면 Access Token과 Refresh Token을 Server에서 "user id"를 이용해 생성합니다. 이 때 flask-jwt-extended 라이브러리를 사용했습니다.
Refresh Token은 DB에 저장한 뒤, Access Token과 Refresh Token을 Client에게 보냅니다. Client는 Access Token은 localstorage에 저장한 뒤, Refresh Token은 Cookie에 저장하는 방법으로 구현했습니다.

Layered Architecture의 사용 이유

Spring을 공부하기 위해 책을 샀었는데 해당 책에 Layered Architecture방식으로 구현을 했던 것이 생각나 적용해보았습니다.

처음 만든 개인 프로젝트이기도 하고 디자인 패턴에 대해서 아직 정확하게 공부해보지 않았기 때문에 왜 이 패턴이 해당 프로젝트에 맞는지는 판단을 못 하겠습니다.

그렇지만 해당 디자인 패턴을 적용시키고 개발을 하면서 느낀점은 정말 디자인 패턴을 정해놓고 개발을 하는게 중요하다는 것을 깨달았습니다. 로직의 이해부분이나 코드의 재사용성등 많은 부분에서 이점을 얻었습니다.

먼저 파일 구조는 이렇게 되어있습니다.
Controller : api의 요청을 받는 파일들을 모아놨습니다. 데이터를 가공한 뒤 Service에게 넘겨줍니다.
Service : Business Logic을 처리하는 파일들입니다. Model에 있는 ORM객체를 이용하여 DB와 통신하여 Controller에게 적절한 데이터를 반환합니다.
Model : ORM를 정의한 파일들입니다.