All Articles

WIKEA 후기

Members
프론트: 노선경, 김수연, 김예슬, 안정현 (4)
백: 정운산, 최우석 (2)

프로젝트 소개

  • 인테리어 가구, 소품을 판매하는 사이트
  • 카테고리, 신제품, 가격, 색상 등에 따라 상품을 볼 수 있는 필터 기능을 제공

프로젝트 계획 및 일정

  • 1st Sprint : 전체 레이아웃, 컴포넌트화
  • 2nd Sprint : 컴포넌트 별 기능 구현, 프론트-백 통신, conflict 수정 작업

구현한 기능 (내가 기여한 기능 ✔️)

  • 자체 로그인, 회원가입
  • 메인 네비게이션 탭 GNB ✔️
  • 메인페이지 반응형 ✔️
  • 상품 필터, 정렬
  • 페이지네이션
  • 사이드 모달 ✔️
  • 헤더 스크롤 애니메이션
  • 상세 페이지 이미지 슬라이드
  • 페이지별 동적 라우팅 ✔️
  • REST API로 카테고리, 제품 데이터 통신 ✔️

기억에 남는 로직/코드

config.js : API 주소 관리

  • API 주소를 변수로 지정하고 파일을 따로 분리하면 ip주소가 바뀔 때에 관리 용이



메인 페이지 : 호버된 아이템만 보이기

  • 아이템 개수만큼 열림 닫힘 상태값(boolean)을 배열에 저장
  • 아이템의 인덱스를 인자로 받아 해당 인덱스의 상태값은 true로, 외의 상태값은 false로 바꾸는 함수 handleLabelOn 선언

  • 라벨 버튼에 마우스 호버시 함수 handleLabelOn 에 해당 인덱스를 전달, 신제품 배경이미지에서 마우스가 벗어났을 시 handleLabelOn(0) 호출



회원가입 페이지 : 핸드폰 번호 형식 변경

  • - 을 포함하여 핸드폰 번호를 입력한 경우 onBlur이벤트를 사용하여 핸드폰 번호 형식 변경하는 함수 호출



제품 이미지 슬라이드

잘했던 점

SCSS 활용 scss를 사용해보는 첫 프로젝트였다. nesting 기능을 넘어 mixin, if, 변수 지정 등 다양한 기능을 사용해볼 수 있었다. break point를 정할 때 변수로 지정하고 그리드 시스템을 적용할 때 if문으로 칼럼의 너비를 계산할 수 있었다. css를 js처럼 ✨

같은 개발자끼리의 협업을 고민해 보는 시간

소통이라고 하면, 프론트와 백엔드끼리의 소통이 제일 중요하다고 생각했지만 첫 주에는 프론트끼리도 소통해야 할 일이 굉장히 많았다. 공용 컴포넌트를 나누는 것도, 역할 분담을 마치고 컴포넌트를 만드는 것도 절대 혼자만의 일이 아니었다. 컴포넌트를 만들 때부터 서로 “이 부분은 이렇게 할게요~ 이렇게 했으니 이건 꼭 지켜주셔야 해요~” 등의 얘기가 자주 오갔고, 자연스럽게 컴포넌트 문서화에 이르렀다. 리뷰어의 칭찬도 받으니 기분까지 좋은 건 덤이었다. 알고 보니 실무에서도 협업을 위해 문서화를 진행하는 일이 많다고.

백엔드와도 처음에는 사소한 단어(배열=리스트, 객체=딕셔너리) 차이로 서로 어리둥절한 일이 많았다. 데이터도 백엔드에게 받기만 하는 것이 아니라 구조를 분명히 요구해야하는 부분도 있었다.

코드치는 시간보다 팀원들끼리 의견을 조율하고 맞추는 시간이 생각보다 더 많았는데 사소한 문제에도 불편해하는 기색없이 적극적으로 소통해주고 같이 고민해준 팀원들에게 참 고맙다!

아쉬웠던 점

추가 기능 구현

끝내 완료하지 못한 추가기능들이 아쉬움으로 남는다. (장바구니, 위시리스트 등등) 단순히 기능을 구현하지 못했다는 것보다 ‘거기서 오는 배움의 과정을 느껴볼 기회가 더 있었을 텐데-’ 하는 이유에..

우선순위 정하기

2주차에는 생각보다 작은 스타일, 수정 작업에 할애하는 시간이 많았다. 계획을 세울 때 목표는 있었지만 우선순위를 제대로 세우지 않아서 진행 중인 작업의 관련 작업이 생겼을 때 추가기능이 계속 미뤄지게 된 게 아닐까 생각한다. 다음을 위해 기억하자, 구체적이고 작은 일 단위로 쪼갠 뒤 우선순위 정하기!

소감

기술적 소감

내가 구현한 코드가 최선이라고 생각하지 않는다. 오히려 아직도 다시 보면 아쉬움이 많이 남지만 이건 과정이니까, 하며 스스로를 다독이고 있다. 하지만 기존 웹사이트를 구조 면에서나, 기능을 구현하는 로직 면에서나 그대로 따라하지 않고 물론 그대로 따라할 수도 없지만 내가 생각하기에 합당한 이유에 따라 다르게 코드를 작성했다는 점에서 만족도가 높다. 기존의 코드를 참고하고 왜 이렇게 짰을까 생각해보고 보다 좋은 방법을 고민해보는 시간이 참 재밌었고 (정말정말정말) 또 시간이 지나도 계속 기억에 남아있는 것은 그런 과정들이었다.

물론 질적인 고민의 시간을 양적으로도 많이 가져가기에 2주란 시간은 짧았고, 다음 프로젝트 때에는 (기업협업을 위한 이력서 작성 등등으로 인해서) 시간이 더욱 없을테지만 그래도, 다음 프로젝트 때에는 시맨틱 측면에서, 가독성 측면에서, 컴포넌트 재사용 측면에서 등등 좀 더 좋은 코드를 작성하기 위해 고민하고 알아가는 순간이 더 많이 왔으면 좋겠다. 정말, 부지런해야겠다.

Published May 22, 2020

Front end developeryeseulkim on Twitter