상세 컨텐츠

본문 제목

Project Type To Korean

JavaScript

by Martin52 2019. 12. 12. 16:28

본문

프로젝트 링크 : https://www.notion.so/martin52dev/Type-To-Korean-Team

 

Type To Korean / Team Name Trio

1. About

www.notion.so

TypeToKorean Main page

Type To Korean은 내가 프로그래밍을 배우고 팀원들(홍식님, 동호님)과 진행한 첫 번째 프로젝트다.

 

 Type To Korean은 외국인들이 한국어에 관심을 가지게 되는 과정이 음악이나 드라마와 같은 한류 문화를 통해 관심을 가진다는 생각으로 프로젝트가 시작이 되었다. 외국인들이 좋아하는 BTS, 블랙핑크 등의 노래나 한국 드라마(대장금, 별에서 온 그대 등)를 타자 Typing을 통해 써보면서 한국어를 배울 수 있는 플랫폼을 구성해보자는 취지로 프로젝트가 진행이 되었다.

 

 홍식님과 동호님이 Front-end를 맡아 진행해 주셨고 나는 Back-end를 맡아 프로젝트를 진행하였다. Front-end는 React기반으로 AntD과 Chart.js를 이용해 프로젝트를 진행했고, Back-end는 Node.js기반, Express 프레임워크를 이용해 구성하였고, Sequelize(ORM)을 이용해서 MySQL Database에 연결했다. 사용자 정보 보호를 위해 Session과 Node.js 내장 모듈인 Crypto를 사용했다. 프로젝트 마무리 단계에서는 클라이언트 쪽은 aws-s3에, 서버 쪽은 aws-EC2에 Deploy도 진행해 보았다.

 

 프로그래밍을 배우고 처음 진행하는 프로젝트였지만 코드스테이츠에서 배웠던 내용과 인터넷에 올라온 많은 Reference들을 참조해 개발을 진행했다. 가장 어려웠던 부분은 Sequelize를 진행하기 전에 순수 Query를 이용해 DB를 접근하는 방식이었다. 그때그때 맞는 Query를 짜야하고, 수정하기가 상당히 까다로웠다. Sequelize는 promise를 기본 동작으로 작동해 비동기 작업을 제어할 수 있게 만들어줘서 보다 편하게 DB에 접근할 수가 있었다.

 DB에 접근하는 이슈 외에도 Front와 Fetch연결을 통해 http protocol을 진행을 할 때도 어려움이 있었다. (연결하는 부분에 어려움이 많았다...) 사용자의 정보를 구분하고 보호하기 위해서 Express-session을 모듈로 사용했는데 인증 관련 부분에서 Front 쪽에서 쿠키 값을 주지 않는 이슈가 있었다. Session과 Crypto를 이용해 서버 쪽에서 다른 사용자의 정보를 접근하지 못하도록 처리를 해두었는데 클라이언트에 쿠키에 세션 값을 넣어서 보내는 것이 되었지만, 클라이언트에서 받은 쿠키를 서버 쪽으로 보내지를 않았다. 쿠키에 값을 넣어서 보내줄 때 클라이언트 쪽에서 credential을 세팅해줘야 세션 값을 넣어준 쿠키를 서버에서 받을 수가 있다는 부분을 이번 프로젝트를 통해 알 수 있었고, 사용자의 정보 또한 보호하는 과정을 구현해 볼 수 있었다. 어려운 부분도 많았지만 좋은 팀원과 좋은 내용의 프로젝트라 재밌게 진행했고 기억에 오래 남는 프로젝트가 될 것 같다.

 

TypeToKorean 서비스 소개 ppt : https://slides.com/type-to-korean

 

Type To Korean

Codestates IM15 Sprint PPT

slides.com

프로젝트 사용 Stack

Front : Html, React, AntDesign, ReactRouter, Chart.js, AWS S3

Back : Node.js, Express, MySQL, ORM(Sequelize), Session, AWS EC2

  • Node.js 기반 EXPRESS ​Framework​를 사용, 서버 구성, 관리 및 유지, 보수. 
  • Sequelize(ORM), Schema를 통해 MySQL과 연결, DB 구조화 및 정리, 프론트에서 필요한  DB 설계 및 구현. 
  • Api를 통해 Typing에 필요한 글(data) 제공 및 사용자 data 저장, 사용자 점수에 따른 순위  제공, 사용자 정보 관리. 
  • Session, Crypto를 통해 사용자 보안 강화, 사용자의 정보 보호 및 관리. 
  • AWS-EC2 활용하여 server web application 배포. 
     

 

'JavaScript' 카테고리의 다른 글

Virtual Box, Vagrant를 이용한 가상환경에서 작업하기.  (0) 2020.02.11
Postman? Postman~!  (0) 2019.11.05
Issues when install MySQL in Window  (0) 2019.11.05
React, Front-end Library(3)  (0) 2019.11.05
React, Front-end Library(1)  (0) 2019.10.29

관련글 더보기