2023년 4월 24일부터 5월 5일까지 2주간 진행한 프로젝트입니다.
🎞️ 첫번째 프로젝트
엘리스 SW트랙에서의 첫 프로젝트이자 저의 첫 프로젝트입니다. 바닐라 자바스크립트로 진행하여 그동안 공부한 자바스크립트를 온전히 활용할 수 있는 기회가 되었습니다.
프로젝트 주제는 온라인 서점입니다. 엘리스에서의 프로젝트이며, 기존 온라인 서점 알라딘을 차용하여 엘라딘으로 사이트 이름을 정하였습니다. 이 프로젝트는 불과 한달 전에 진행하였지만, 회고글을 작성하는 지금은 타입스크립트와 리액트를 주로 사용하고 있네요. 순수 자바스크립트만으로 작업을 했던 경험이 본질의 중요성에 대해서 깨닫게 해주는 것 같습니다.
📓 엘라딘 프로젝트 소개
-
목적 : 필요한 책들을 찾아보고 간편하게 구매할 수 있게 하는 유저 서비스를 제공합니다.
-
목표
홈에서 엘라딘 베스트 셀러, 추천 도서 등 유저에게 유용한 서비스를 제공합니다.
회원 가입을 하지 않아도 마이페이지를 제외한 모든 기능을 이용할 수 있습니다.
상품 조회부터 구매까지 짧은 프로세스로 유저가 빠져들게 합니다. -
기능
- 상품 등록, 장바구니 추가, 주문하기 등 쇼핑몰의 핵심 서비스를 구현합니다.
- 회원가입, 로그인, 회원정보 수정 등 유저 정보 관련 CRUD
- 상품 목록을 조회, 상품 상세 정보를 조회 가능함.
- 상품 목록, 상세 페이지, 장바구니 어디서든 주문 페이지 로 연결하여 구매가 가능함.
- 장바구니에서 주문, 바로 결제 버튼으로 주문 완료 후 회원만 마이페이지에서 조회 및 삭제가 가능함.
- 장바구니는 서버 DB가 아닌, 프론트 단에서 저장 및 관리됨 (indexedDB).
- 회원, 비회원, 게스트 유저 모두 원하는 키워드를 검색하여 상품 조회가 가능함.
🛠️ 기술스택
프론트 - HTML, CSS, JavaScript
백엔드 - MongoDB, Node.js, Express.js
👩🏻💻 협업
API명세는 노션을 활용하였고, API테스트는 포스트맨을 이용하였습니다.
레포지토리는 gitlab을 사용하였습니다. (엘리스 트랙에서는 Gitlab을 사용합니다.)
팀원들간의 소통은 디스코드와 게더를 사용하였는데, 매일 정해진 시간에 스크럼을 진행했고 시간관계 없이 수시로 화상회의 및 화면공유를 하며 소통을 진행했습니다.
밤까지 작업을 하고 새벽에 한명이 화면 공유를 하고 다 함께 두더지 잡듯이 버그를 잡았는데, 확실히 머리를 맞대니 해결이 빨랐습니다. 또한 문제의 원인과 해결 방법을 공유하며 정말 많이 배울 수 있었습니다.
👀 맡은 역할
제가 담당한 부분은 아래와 같습니다.
-
역할: 프론트엔드
-
담당: 메인페이지, 마이페이지, 회원 정보 수정페이지, 주문페이지, 비회원 주문페이지
-
개발:
1) 담당 페이지 레이아웃 및 api 요청 처리
2) 메인 페이지 슬라이더 구현
3) 회원가입, 회원정보 수정 유효성 검사 구현
4) 커스텀 모달 구현하여 모든 window alert 대체
5) 주소 검색 api 적용
특히, Carousel과 window alert을 대체할 커스텀 모달을 직접 구현하였는데요.
슬라이더의 경우 라이브러리를 사용하면 간편하지만, 메인페이지에서 테마에 맞는 책을 진열하는 역할을 하기 위한 carousel이었기에 원하는 기능을 적용시키고자 직접 구현하였습니다.
- 한 구간에서 5개의 책을 보여줌
- 첫번째 구간에서는 왼쪽 버튼을 숨기고, 마지막 구간에서는 오른쪽 버튼을 숨기는 등의 버튼 노출을 조절.
- 버튼의 서서히 보이고 사라지도록 transition으로 opacity 효과를 주었습니다.
- 3개의 슬라이더를 하나의 배열에서 각 인덱스 값으로 상태를 관리
//상품 슬라이더 시작
let currentIdx = [0, 0, 0];
const chevronRightBtn = document.querySelectorAll(".fa-chevron-circle-right");
const chevronLeftBtn = document.querySelectorAll(".fa-chevron-circle-left");
//오른쪽 버튼 효과
chevronRightBtn.forEach((button, idx) => {
button.addEventListener("click", function () {
let slides = button.parentElement.querySelector(".slides");
//버튼 나타나고 사라지는 효과
if (currentIdx[idx] === 0) {
chevronLeftBtn[idx].style.opacity = 1;
} else if (currentIdx[idx] === 4) {
button.style.opacity = 0;
}
//슬라이딩 되는 부분
if (currentIdx[idx] < 5) {
slides.style.left = -(currentIdx[idx] + 1) * 950 + "px";
currentIdx[idx] += 1;
}
});
});
//왼쪽 버튼 효과
chevronLeftBtn.forEach((button, idx) => {
button.addEventListener("click", function () {
let slides = button.parentElement.querySelector(".slides");
//버튼 나타나고 사라지는 효과
if (currentIdx[idx] === 1) {
button.style.opacity = 0;
} else if (currentIdx[idx] === 5) {
chevronRightBtn[idx].style.opacity = 1;
}
//슬라이딩 되는 부분
if (currentIdx[idx] > 0) {
slides.style.left = -(currentIdx[idx] - 1) * 950 + "px";
currentIdx[idx] -= 1;
}
});
});📝 느낀 점
HTML, CSS, JavaScript의 기본기를 확실히 다질 수 있었던 프로젝트였습니다. 마침 엊그제 타입스크립트와 리액트를 사용한 프로젝트를 마무리했는데요. 기본기를 학습했던 것이 값진 경험이었다는 걸 새삼 느낄 수 있었습니다. 또한, 백엔드분들과 지속적으로 소통하며 데이터가 오고가는 흐름에 대해 배울 수 있었습니다. 우리 팀 백엔드분들 최고🩷 첫 프로젝트다보니 맞닿드린 문제가 얼마나 유의미한지 구분하기도 쉽지 않았습니다. 앞으로는 프로젝트 기간에 바쁘더라도 어떤 문제를 어떻게 해결했는지 성실히 기록해야겠네요.
