꾸며줘 홈즈team
Front end Github
사용 기술 스택
FrontEnd : HTML / JavaScript / React / Sass
협업도구 : Slack / Git + GitHub /
Trello를 활용해 스케줄 조정 및 개인 작업 진행도 체크
구현 사항
- Component & map 메서드를 활용해 상품의 UI 구현
- 받아온 서버 데이터를 이용, sort 메서드와 if문으로 Filtering 기능 구현
- Query parameter의 offset과 limit값 설정으로
서버로부터 들어오는 데이터를 조절한 Page nation 기능 구현
구현 과정, 그리고 결과
1. 컴포넌트화와 map 메서드를 이용한 UI
먼저 상품 컴포넌트와 상품 전체가 보여질 컴포넌트를 하나씩 만들어줬다.
전체 컴포넌트의 state에 백엔드의 데이터를 받아와 줄
빈 배열을 만들어주고, setState를 통해 데이터를 들여와
props로 상품 컴포넌트에 데이터를 전달해줬다.
각 데이터가 들어갈 곳에 해당하는 데이터의 key값을 넣어주며
기본 틀을 완성했다.
상품 전체가 보여지는 컴포넌트에서 map메서드를 사용해줬다.
조건부 렌더링 처리로 products의 현재 데이터가 백엔드로부터 받아온
데이터와 일치한다면 뒤의 products.map()을 실행시켜준다는 코드를
입력해줬다.
map() 안에서 return해주는 html요소에 id 값을 제외한 나머지 데이터를
스프레드 연산자로 넘겨줬는데, 이게 너무나 혁신이었다.
함수의 인자도 스프레드 연산자가 사용 가능한 줄은 몰랐는데,
단순히 배열 뿐 아니라 함수의 인자도 복사 가능하다는 것은
이번 프로젝트를 통해 얻은 큰 깨달음 중 하나다.
2. 데이터 정렬 기능 구현
백엔드로부터 받아온 데이터를 sort 메서드를 조건 뒤에 붙여
조건에 맞는 정렬 기능을 구현했다.
백엔드로부터 데이터를 받기 전에 Mock data를 만들어
filter 기능도 추가해 정렬된 전체 데이터가 보여지는 것이 아닌
filter 조건에 맞는 데이터만 보여지게 만들어 줬다.
하지만 모든 상품을 다 보여주는 것이 좋지 않겠냐는 멘토님의
조언을 듣고 filter 메서드를 없애고 sort 메서드로만 기능을
만들어냈다.
코드의 마지막엔 setState으로 products가 현재 반영 중인
products를 보여주겠다고 작성해줘 조건에 따른 상품이
보여질 수 있도록 작성해줬다.
3. 페이지 네이션 기능 구현
총 데이터가 20개가 들어온다면 1페이지에는 16개가
2페이지에는 4개가 들어올 수 있도록 기능을 구현했다.
기능을 넣을 곳에 미리 onClick 이벤트를 부여하고
Onclick 이벤트가 실행되면 어떠한 함수가 실행될 수 있도록
코드를 작성해줬다.
데이터를 들여오는 것에 Query parameter를 사용하려고 했다.
한 페이지에 들어오길 원하는 데이터의 수는 16개 였어서
offset을 함수의 인자인 index와 연결시켜줬다.
offset이 시작점이고 limit이 시작점으로부터 가져올 값의 개수라고
이해하면 편하다.
(offset과 limit의 값을 따로 설정해주지 않으면 백엔드에서 설정한
기본값으로 입력이 된다는 사실을 알게 되었다.)
나의 경우에는 처음엔 16개의 데이터만 불러오고 싶었고,
다음엔 남은 4개의 데이터를 불러오려고 했기 때문에
limit은 그대로 두고, offset값만 교체해줘서
인자가 0이 들어왔을 땐 데이터가 16개가 들어올 수 있도록,
인자가 1이 들어왔을 땐 남은 데이터가 들어올 수 있도록
코드를 작성해줬다.
최종적으로 각 버튼의 onClick 이벤트에 함수를 추가해
인자값을 넣어줬고 기능을 구현해주었다.
1차 프로젝트에서 얻은 것
개발자로서의 첫 발표
감사하게도 발표 기회를 주셔서 마다하지 않고 승낙했다.
올 해 안으로는 다른 개발자들 앞에서 발표 할 기회가 두 번 다시
오지 않을 거라는 생각이 문득 들었고,
나의 코드만이 아닌, 팀의 코드를 알아가고, 이해한 것을 토대로
다른 개발자들에게 지식 전달을 할 수 있다는 것에 설렜다.
특히 다른 팀의 개발자들에게 설명한다는 경험을 가짐으로서
스스로 조금은 성장했다고 감히 판단한다.
경험 부재에서 오는 한계
프로젝트 이전에 개인 프로젝트를 진행하며 어떻게든 작업물을
만들어내긴 했지만, 본 프로젝트에 들어서며 나의 한계가 명확히 드러났다.
그 중 내가 가장 큰 문제라고 여겨졌던 것은 기획 단계에서
의견 제시를 하지 못한 것이었다.
내가 작업할 페이지만 정하고, html과 css로 작업해
기능만 넣으면 끝이라고 생각했던 내가 너무나 바보같았다.
내가 담당한 페이지에서 어떤 기능을 사용하고
다음 페이지로 넘어갈 때도 데이터를 어떻게 설정해서 넘길지,
백엔드와 소통은 어떻게 해야할 지 등 세부적으로 기획했어야 했다.
기획이 안되어있으니 작업 도중 계속 기획과 작업을 병행해야 했고,
그만큼 나의 작업 시간은 확보되지 않았다.
Github로 일어난 사건
아마 이번 기수에서 깃 문제를 가장 많이 일으킨 사람 중 한 명이
나일 거다. 이건 확신한다.
지금 봐도 아찔한 이 사진은
master 브랜치에서 merge를 해서 다른 팀원들의 코드를 전부
꼬이게 만들었던 그 장면을 보여준다.
그 어떠한 변명도 할 수 없었다. 실수를 저지르고 바로
실수를 했다고 팀원들에게 솔직하게 말했고,
리더분이 침착하게 이전 git을 추적해
과거의 git 기록으로 돌아갈 수 있도록 도와주셔서
사건을 해결할 수 있었다.
이외에도 branch에서 또 다른 branch를 만들어 push를 해놓고
왜 github에 PR이 없지..?라고 했던 것이나,
git master에서 작업을 해서 그대로 올리는 등
실무에서 용납되지 못할 치명적인 실수를 이번 프로젝트 때
모두 경험했다.
Git 사건 이후로 깨달은 점
사건이 발생하면 곧바로 보고할 것.
꽁꽁 숨겨봤자 git을 추적하면 누가 실수했는지 알 수 있고
사건이 발생했을 당시에 바로 해결을 해야지,
시간이 꽤나 흘러서 사건이 드러나면 그 땐 정말 돌이킬 수 없는
대형 사고로 이어지게 된다는 것을 느꼈다.
굵직한 Git 사건을 일으킨 후, 계속해서 log나 branch 등
계속 체크하고 작업을 진행하는 습관을 얻게 되었다.
마지막으로
나에게 실수한 건 잘못이지만, 팀으로 합심해 실수를 해결하자고
말해준 이번 꾸며줘 홈즈 팀원들 모두에게 진심으로 감사하다.
개인이 아닌 팀. 잘 되든 못 되든 우리는 팀이라는 것.
부족한 나를 믿어주고 끝까지 끌어주신 꾸며줘 홈즈 팀을
사랑한다.
