Like Project
나이키를 모티브로한 프로젝트.
개발 초기 세팅부터 전부 직접 구현했으며, 실제 사용할 수 있는 서비스 수준으로 개발하는 것을 목표로 라이키 팀원들과 즐겁게 작업한 1차 프로젝트 입니다.
GIT REPO: https://github.com/jiwanjeon/26-1st-LIKE-frontend
프로젝트 선정 이유
깔끔한 UI, 커머스 사이트의 기본적인 로직이 모두 들어가있어 프론트, 백엔드 모두 첫번째 프로젝트로 진행하기에 배울 점이 많다고 판단하여 선정하게 되었습니다.
개발 기간 및 개발 인원
- 개발 기간 : 2021년 11월 01일 – 11월 12일
- Front-end 3명 : 임연수, 전지완, 신유진
- Back-end 2명 : 이지은, 김봉철
구현한 것(메인페이지)
- 전체보기/신발/옷/용품/스포츠 버튼 눌렀을시 해당하는 상품 보이기
- 색상/사이즈 눌렀을시 해당하는 상품 보이기. 만약, 한번더 눌렀을시 취소도 되며, 동시에 여러개 선택도 가능(필터링)
- 카테고리/색상/사이즈 선택시 필터링 되게 하며 Query String개념을 이용하여 Searchparams로 fetch로 Back-end와 API 통신
공유하고 싶은 코드
-
Mark-up
: 첫번째로, 마크업의 중요성을 공유하고싶다. 위의 사진을 보면 이름만 보도라도 여기 Main.js가 어떤식으로 구성 되어있는지, 또는 어떤식으로 작동 되는지 이름만 봐도 알수 있다. 만약, updateSize나 updateColor가 어떤식으로 이루어져있는지 궁금하다면 눌러서 확인 하면 된다. -
Block를 만났을때 해결하는 법
: 내가 했던 메인페이지에서 가장 주요한 핵심 기술구현이기도 하다. 카테고리/색상/사이즈를 선택했을대 필터링을 하여 Back과 API 통신하기도 하며 화면에 띄워줘야한다. 처음 이 문제에 직면 했을때 어떻게 해야하는지 전혀 감도 오지 않고 막막하기만 했다. 예를들어, localhost:3000/producs/category=2?color=red&color=blue&size=230&size=250 이런식으로 Back한테 주소를 줘야하는데 전혀 문제접근을 하지 못했다. 하지만 이러한 Blocker를 세분화 한다면, query string규칙(?로 시작하는지, =로 key/vaule 구분/ property는 &로 연결) --> 여러 가지 속성 추가될 때 매번 ? 안붙게 로직 작성 --> 체크 풀면 속성이 제거 --> 만약 모든 속성이 제거 되는 경우 쿼리스트링 삭제 이렇게 세분화 하니 이전 보다 비교적 쉽게 해결 할 수 있었다. 그래서 위의 fetch 부분을 보면, 이러한 과정에 맞게 baseUrl, /Products, categoryPath, queryString이 나눠져 있는것을 확인 할 수 있다.
느낀점
이번 프로젝트를 하면서 2주간 진행하면서 느낀점이 크게 2가지가 있었습니다.
- 개발자스러운 사고력
- 개발자스러운 소통
지금까지 Computer Science로 2년간 공부하면서 코딩에 관련한 사고력이 나쁘지 않다고 생각했지만 그것은 큰 '오산' 이였다는 것을 느낄 수 있는 좋은 계기가 됐습니다. 어떠한 문제점에 직면 했을때 막연하게 결과물에 초점을 두지말고 그 결과물에 도달하기 위해 과정을 세분화 하는것이다(예시로 아래에 기억하고싶은 코드에 부연 설명할 예정). 그 과정에서 어떤 개념 또는 기술이 필요한지 하나하나 파악한 후 하나하나 천천히 계단 오르듯이 가다보니 해결 할 수 있었다. 물론 말로는 쉽지만, 이러한 일련의 과정이 내 머리속에 있지 않다면 또 다른 문제를 직면 했을시 또 막막하기만 할 뿐일것이다.
프로젝트를 하면서 혼자서 하는게 아닌 프론트와백 한 팀을 이루워서 진행하기 때문에 소통은 개발을 하는데 있어서 빠질 수 없는 중요한 덕목중에 하나이다. 하지만, 내가 생각하는 "개발자스로운 소통"은 사뭇다르다. 물론, 우리가 흔히 알고있는 "소통"은 엄청 중요하다. 그렇지만, "개발자스로운 소통"이 되기 위해서는 프론트와 백 서로서로 어느정도 기본 지식이 바탕이 되야지만 프론트와 백간의 소통이 가능하기 때문이다.
아쉬운점
아무래도 기간이 2주라는 단기간안에 결과물을 보여줘야 하는것과 처음 프로젝트를 진행하다보니 코딩을 하면서 전혀 생각지도 못한 blocker들을 만나면서 처음에 계획한거와는 다른 방향으로 나아간게 많이 아쉬웠다. 2번째 프로젝트 진행하게 되면 이점들을 염두해두고 한다면, 이전보다 더 나은 결과물이 나올거라 예상이된다.
