Tripllo 제작기

A collection of 16 posts

Tripllo 삭제 및 일상 회고 cover image
Tripllo 제작기,  Diary

Tripllo 삭제 및 일상 회고

정들었던 Tripllo 어플리케이션을 삭제했다. AWS EC2, S3, RDB를 내렸다. 배포되어있는 도메인도. 씁쓸하면서 이상한 기분이었다. RDB 생성 script를 백업하고, 소개 페이지에 올려둔 gif 파일도 모두 백업해두었다.

(14) Closure & Currying 적용기 cover image
Tripllo 제작기,  JavaScript,  Vue.js

(14) Closure & Currying 적용기

함수형 프로그래밍에 대해서 공부하다가 Tripllo에 적용한 클로저와 커링.

(13) Vuex-store와 EventBus에 대한 고찰 cover image
Tripllo 제작기,  Vue.js

(13) Vuex-store와 EventBus에 대한 고찰

데이터를 Vuex store에 저장시키지 말고 로컬 컴포넌트에서 불러와 EventBus로 통신을 하면 어떻게 될까? 라는 물음에서 시작된 삽질기.

(12) Let's Encrypt 갱신 자동화 cover image
Tripllo 제작기,  Let's Encrypt,  Automation

(12) Let's Encrypt 갱신 자동화

AWS EC2 환경에서 Nginx와 Let's Encrypt로 HTTPS SSL 인증서 갱신 자동화를 해보자.

(11) Sentry 에러 로깅 시스템 도입 cover image
Tripllo 제작기,  Sentry,  Error

(11) Sentry 에러 로깅 시스템 도입

Sentry를 통해 프론트엔드 에러 로깅 시스템을 도입해보자.

(10) Frontend -travis 배포 자동화 cover image
Tripllo 제작기,  DevOps,  Automation

(10) Frontend -travis 배포 자동화

Vue프로젝트를 aws의 S3와 CloudFront에 Travis CI를 통해 배포 자동화를 해보자.

(9) vue 리팩토링2 cover image
Tripllo 제작기,  Refactoring,  Vue.js

(9) vue 리팩토링2

멘토링 후 Tripllo에 꽤 많은 것을 손봐야한다는 것을 알게 되었다. 하나하나 고쳐보면서 정리한 것을 기록해보자.

(8) vue 리팩토링1 cover image
Tripllo 제작기,  Refactoring,  Vue.js

(8) vue 리팩토링1

멘토링 후 Tripllo에 꽤 많은 것을 손봐야한다는 것을 알게 되었다. 하나하나 고쳐보면서 정리한 것을 기록해보자.

Tripllo 후기 cover image
Tripllo 제작기

Tripllo 후기

프로젝트를 마무리했다. 두달 반 조금 안 되게 시간이 걸린 듯 하다. 프로젝트를 진행하면서 느꼈던 점을 조금 적어보려고 한다.

(7) 로그인4 -vue 소셜로그인 cover image
Tripllo 제작기,  Vue.js,  Social Login

(7) 로그인4 -vue 소셜로그인

vue에서 소셜 로그인 기능을 만들어보자. 보통 요즘 서비스들은 다 소셜 로그인으로 가입, 로그인이 되므로 앞으로 서비스 개발할 때 거의 필수적으로 들어갈 기능이라고 생각했다. 또 backend보다는 frontend 개발자로 지원하고 싶기 때문에 백엔드의 OAuth2.0 을 사용하는 것 보다는 Javascript단에서 로그인 기능을 넣고 싶었다.

(6) 로그인3 -vue 구현 cover image
Tripllo 제작기,  Vue.js

(6) 로그인3 -vue 구현

SpringBoot 쪽 서비스 로직이 만들어졌으므로 이번엔 vue에서 화면을 만들고 회원가입과 로그인을 진행해보자. 우리는 vue의 기능을 최대한 살려서 뼈대가 되는 페이지 하나에 login과 signup 2개의 컴포넌트를 붙이고 watch를 활용해 데이터를 검증할 것이다.

(5) 로그인2 -SpringBoot 구현 cover image
Tripllo 제작기,  SpringSecurity,  JWT

(5) 로그인2 -SpringBoot 구현

Spring Security와 JWT를 사용해서 로그인 기능을 구현했다. Spring Security의 구현된 소스와 login의 Service 단 내부 로직을 개념에 맞춰서 알아보자.

(4) 로그인1 -SpringSecurity & JWT 개념 cover image
Tripllo 제작기,  Spring Security,  JWT

(4) 로그인1 -SpringSecurity & JWT 개념

Spring Security와 JWT를 사용해서 로그인 기능을 구현했다. Spring Security와 JWT의 개념을 알아보자.

(3) Vue init & ESLint, Prettier 설정 cover image
Tripllo 제작기,  Vue.js

(3) Vue init & ESLint, Prettier 설정

백엔드 Setting은 끝났으니 이제 프론트엔드 Setting이 필요하다. npm 으로 Vue를 생성하고, 코드 포맷터인 ESLint, Prettier 설정을 해보자.

(2) MySQL 설계 & SpringBoot init cover image
Tripllo 제작기,  MySQL,  SpringBoot

(2) MySQL 설계 & SpringBoot init

Tripllo 백엔드 세팅을 해보자. Workbench로 DB를 설계하고 MySQL, MyBatis와 SpringBoot를 연동한다.

(1) 제작동기 cover image
Tripllo 제작기

(1) 제작동기

Trello 어플리케이션을 만들기 시작한 지 벌써 2달이 조금 안 되었다. 하루에 10시간씩 꼬박 시간을 들여가며 만드는 시간이 조급하면서도 즐거웠다. 현재 어플 상태는 3/4 정도 만들어진 상태로 배포되어 있다. 어플을 만들면서 다음번에 같은 문제를 만났을 때 참고할 만한 자료를 남겨두어야지 생각만 하다가 지금부터라도 남겨두어야겠다 싶어 제작기를 적으려고 한다.