국비 Final 프로젝트 완-료 !!

미니 & 세미 프로젝트에 이어서

드 디 어 파이널 프로젝트까지 무사히 마쳤다! 🎉🎉

 

파이널 프로젝트는 지난 세미 프로젝트 팀 그대로 진행되었다.

총 5명의 인원으로

4월 28일부터 5월 24일까지 약 20일간 만들었다.

 

20일간의 여정을 글에 담아보려고 한다 🤗

 

📌 개발환경

먼저 백엔드와 프론트엔드 각각의 개발 환경을 어떤 것으로 하는 게 좋을지 고민했다.

백엔드는 Spring 또는 SpringBoot

프론트엔드는 JSP 또는 React

강사님께 여쭤봤더니 보통 스프링과 jsp를 함께 한다고 하셨다.

하지만 jsp로 이미 세미 프로젝트를 해봤기에 리액트로 프로젝트 경험을 만들어 보고 싶었고

스프링에 비해 스프링부트를 많이 못 배워서, 이왕 프로젝트하면서 더 배워보자고 생각하였다.

 

따라서 우리 팀은 스프링부트 & 리액트로 결정하였다!

추가로 DB는 오라클과 MyBatis를 사용했다.

 

📌 프로젝트 주제

지난 프로젝트 때 온라인 쇼핑몰을 했어서 다른 주제를 해볼까 했다.

하지만 개발 환경이 달라졌기 때문에, 같은 온라인 쇼핑몰을 만들었을 때 차이점을 알 수 있으며

지난 아쉬웠던 점을 보완해서 더 업그레이드시켜 보자는 의견에

이번에도 온라인 쇼핑몰을 만들기로 하였다.

 

대신 세미 프로젝트는 클론 위주의 프로젝트였다면

파이널 프로젝트는 우리가 직접 만드는 새로운 사이트이다.

 

따라서 의류 쇼핑몰로 정하여

무신사와 같은 온라인 몰들의 레이아웃과 기능 등을 참고하여

우리만의 사이트로 만들기로 하였다!

 

📌 내가 만든 기능

우리는 프론트/백을 따로 나누지 않고, 페이지 단위로 나눠서 프론트와 백을 모두 하도록 했다.

 

1) 회원가입

2) 로그인(+비밀번호 찾기)

3) 개인정보 수정

4) 메인페이지

나는 위의 기능들을 맡았다!

 

회원가입은 간단할 것이라고 생각했는데 의외로 시간을 제일 많이 잡아먹은 곳이다.(엉엉)

비밀번호를 DB에 저장할 때 그대로 저장하면 보안 노출이 있기 때문에

스프링 시큐리티 그리고 jwt를 사용해야 하나???라는 생각이 들었다.

둘 다 아직 배워보지 못했기 때문에 배우다가 플젝 기간이 지날 수도 있겠다 싶었다.

 

따라서 비밀번호는 Crypto-js 암호화를 이용해

PBKDF2 방식으로 다이제스트를 생성해 AES 암복호화 알고리즘으로 보안을 높였다.

이번 기회에 암호화도 제대로 알게 되어 의미 있었다!

 

그리고 회원가입 주소창은 다음 카카오 API를 활용하였는데,

리액트에서 사용할 수 있는 방법이 제대로 나와있지 않아서

리액트에서 쓸 수 있도록 만들어진 npm 모듈을 알아냈다.

하.지.만 제대로 실행되지 않아 에러 잡는 데에 힘들었다 ^ㅠ^

구글링해도 사례 자체가 거의 없었고 팀원들의 노트북에서 해봐도 비슷한 증상이 나타났었다.

그래서 이것저것 만져보며 테스트하다 보니 해결이 되었다!

 

---

🗣️ 발표

우리 팀의 발표는 내가 맡았다!

사실 발표날에서 정해져서 갑작스럽긴 했지만

그래도 각자 팀원들이 어떻게 구현했는지 알고 있었고

PPT 내용도 함께 맡아서 작성했기 때문에 바로 준비할 수 있었다!

 

발표가 끝나고 나니 프로젝가 끝났다는 점에서 시원섭섭했고

하나에만 몰두해 있었는데 마치 수능이 끝난 것처럼?

살짝 허한 느낌도 있었다 ㅎ.ㅎ..

 

물론 고기 먹으러 회식 갈 생각에 금방 풀렸따 하하

 

---

👨‍👩‍👧‍👦 협업

파이널 프로젝트를 하면서 다른 사람들과 어떻게 협업해야 하는지 더 알게 되었다.

나아가 직접 기획한 사이트를 만드는 과정을 경험하면서

개발자로서 한 단계 더 성장한 것 같다.

 

처음에는 과연 내가 할 수 있을까라는 생각도 들었지만

하나하나 하다 보니 완성된 결과물을 보게 되어 자신감이 생겼고

더 많은 것을 배우기 위한 동기부여도 느낄 수 있었다.

 

이 기운을 이어받아서

앞으로 마주할 다양한 프로젝트들을 해낼 수 있도록

열심히 나아가야겠다 🚀

 

팀장이 열심히 만든 우리 쇼핑몰 로고 🌸

 

 

https://github.com/realzu/BlossomMall-Project

GitHub - realzu/BlossomMall-Project: SpringBoot & React 온라인 쇼핑몰 프로젝트