이 프로젝트는 웹 개발에 입문한 지 5개월 정도 되었을 때 처음으로 진행했던 개인 프로젝트입니다. 처음으로 혼자서 기획하고, 스스로 코드를 한 줄 한 줄 작성하면서 많은 오류를 접했습니다. 비록 미완성된 상태로 마무리되었지만, 이 프로젝트는 저의 개발 실력을 가장 많이 끌어올려 준 소중한 경험이었습니다.
개발기간 : 2024.04.1 ~ 2024.04.25
Liberté et Amour는 프랑스어로 “자유와 사랑”을 의미합니다. 자유롭고 낭만넘치는 패션을 타깃으로 한 쇼핑몰입니다.
PC버전 메인페이지
모바일 버전의 반응형 레이아웃
- express의 세션라이브러리와 passport로 세션방식 로그인을 구현하였으며 유저데이터는 mongoDB로 저장했습니다.
- 회원가입시 input값에 대한 예외처리를 정규표현식으로 처리했습니다(Email형식, password일치, 전화번호 형식, null값 혹은 빈 문자열 처리 등).
- React에서 회원상태 관리는 Redux로 전역으로 관리했습니다.
PC버전 상품 페이지 |
모바일 버전의 반응형 레이아웃 |
- 모든 이미지와 상품명, 가격등 정보는 모두 github에 JSON파일로 만들어서 ajax요청을 통해 데이터를 받았습니다.
- 유저가 상품의 상세페이지를 접속하지 않고도 모델의 착용샷을 미리 볼 수 있도록 css로 처리했습니다.
- 비밀번호 수정기능과 간단한 회원정보만 출력했습니다.
첫 번째 프로젝트였기 때문에 체계적인 계획 없이 진행한 부분이 많았습니다. 프론트엔드와 백엔드를 즉흥적으로 처리하면서 비효율적인 개발 방식을 취하기도 했습니다. 하지만 이 프로젝트는 저의 개발 실력을 크게 향상시킨 소중한 경험이었습니다.
- Redux를 사용하여 React 컴포넌트 간의 상태 관리를 효율적으로 수행하는 방법을 배웠습니다. 이를 통해 전역 상태를 효과적으로 관리하고, 컴포넌트 간의 데이터를 공유하는 방법을 익혔습니다.
- 백엔드에서는 Node.js와 Express를 사용하여 서버를 구축하는 방법을 익혔습니다. RESTful API를 설계하고 구현하면서 서버와 클라이언트 간의 데이터 통신을 이해하게 되었습니다.
- AJAX 요청을 통해 JSON 데이터를 서버와 비동기적으로 주고받는 방법을 익혔습니다. 이를 통해 페이지를 새로고침하지 않고도 데이터를 갱신하거나 가져오는 기술을 습득했습니다.
- 세션 기반의 회원 기능을 구현하면서 세션의 역할과 쿠키의 중요성을 배웠습니다. Passport.js와 Express-Session을 사용하여 사용자 인증과 권한 관리를 수행하는 방법을 익혔습니다.
이 프로젝트는 많은 어려움과 도전을 안겨주었지만, 그만큼 많은 것을 배울 수 있는 기회였습니다.