Spring Boot와 Vue.js로 만든 첫번째 사이드 프로젝트

ednadev·2020년 9월 9일
1

1. 서론

요즘 이력서 피드백을 받으면서 취업 준비가 한참이다...라고 하고 싶지만
사실상 이제까지 한거라고는 블로그랑 깃허브 관리다. (시간이 너무 오래걸림 ㅠ)

무튼 끝내고 나니 본격 시작해야하지 않을까? 이제 좀 시작하자!

최근 받은 이력서 피드백은
코치님께서 미경님 이력서 굉장히 깔끔하고 잘 쓰셨는데 부족한 부분들이 있다고 하시네요ㅠㅠ 아래 블로그 보시고 비교도 해보시면서 부족한 부분에 대해서 생각해보시라고 하셨습니다!

https://yeon-kr.tistory.com/131

블로그를 확인해보니 개인 프로젝트 후기 글이었다.
아무래도 마지막으로 배운 Spring과 Vue.js로 개인 프로젝트를 해야겠다.

2. 목표

이번 프로젝트 목표는 그동안 쌓은 웹 개발 지식을 정리하면서
웹 개발자라면 꼭 알아야 하지 않을까? 싶은 기능을 구현하는 것이다.

  • 가장 기본인 CRUD는 필수!
  • 파일 업로드
  • 오픈 API 사용하기

3. 기술 스택

Front-end : Vue CLI
Back-end : Spring Boot + Maven, MySQL

4. 결과

!youtube[RO7_ex-eE-k]

  • 기간 : 20.09.03 ~ 20.09.09 (일주일)

  • 코드 : https://github.com/ednadev/project-book

  • 포트폴리오 : https://vo.la/T89LH

  • 개발하면서 필수 사항 :

    • Junit을 이용한 단위테스트
    • Postman을 이용한 API 테스트
    • Spring Boot와 Vue.js 연동 후 테스트

5. 구현한 기능

  1. 로그인 : 네이버 & 카카오 로그인 API 사용

  2. 문제 발생 : 로그인 API 추가 --> Vue 컴포넌트 에러

  3. 해결 : cdn 방식으로 변경

  4. 추후 보완하고 싶은 기능 :

  • 로그인 API Vue CLI로 변경
  • 구글 & 페이스북 API 추가
  • JWT 토큰 사용해보기

  1. 메인 페이지 : 책 API를 통한 검색, 프로필 사진 및 이름 변경

  2. 문제 발생 : 프로필 사진 업로드가 되지 않음

  3. 해결 : @ModelAttribute로 변경하니 MultipartFile 가져오는 게 가능

  4. 추후 보완하고 싶은 기능 :

  • 여러 사용자들이 사용하게 될 시 기능 추가
  • 추가 기능에 맞춰 메인 디자인 업데이트

  1. 북리스트 수정 및 삭제

  2. 문제점 : index가 아닌 다른 화면 이동

  3. 해결 : Vue router에 대한 이해

  4. 추후 보완하고 싶은 기능 : 캘린더

  1. 아이디어 노트 CRUD

  2. 문제점 : CRUD 작동이 바로 되지 않음

  3. 해결 : 추가하는 부분 제외 가능하도록 변경

  4. 추후 보완하고 싶은 기능 : 추가할 때 reload 말고 바로 추가

6. 마무리

기술 스택 부분까지 작성하고 바로 프로젝트에 돌입했던 지난주!

그리고 오늘! 드디어 프로젝트를 완성했다.. 사실 좀 더 보완하고 싶은 기능들이 많지만 일단 프로젝트를 한번이라도 끝내는 것에 중점을 두었다.

이번 프로젝트를 통해 얻은게 많다. 홀로 백엔드부터 프론트엔드까지 전부 책임을 지고 개발을 해야했기에 내가 어떤 부분이 미흡한지가 보다 확실해졌다.

향후 보완하고 싶은 기능을 추가하기 위해 공부할 예정이다.
그전에 AWS를 다뤄보는 게 먼저지만~~

2개의 댓글

comment-user-thumbnail
2020년 9월 17일

헉 안녕하세요. 본문에서 언급하신 블로그 주인 입니다. 갑자기 제 블로그에 미경님 블로그에서 넘오신분들이 많아서 놀랬습니다ㅎㅎ컴공과 학생으로서 복습겸 작성한 블로그를 좋게 봐주시고, 언급해주셔서 감사드립니다.

1개의 답글