지난 달 26일부터 프리온보딩 과정에 참여하게 되었다.
이전부터 프론트엔드를 하겠다고 생각하고, 공부를 시작했다.
그러나 독학하는게 생각보다 쉽지않았다. 혼자하는게 일정에서는 자유로울수 있지만 그만큼 늘어지기 십상이었다.
또한 문제가 발생했을 때 이를 해결하는 방법이 맞는 방법인지 더 좋은 방법이 있는지 남들과 공유할 수 없었다.
그래서 이런 needs를 충족시키고자 개발동아리에 지원했었지만, 면접을 진행하는 내내, 이 동아리는 현직자들을 더 요하는 것 같다고 느꼈다.
붙었냐고 ? 뭐 어떻게 됐겠는가,, ㅋㅋ;
뭐, 이런 여러 방황아닌 방황. 풀기 힘든 실처럼 꼬여버린 생각들을 갖고 있던 중 해당 프로그램의 설명회를 듣게 되었다.
무엇보다 사람들과 함께하는 것이 매력적이었다. 사실 그거 하나보고 지원했다고 해도 무방하다.
같이 공부하는게 그리웠다. 그래서 부랴부랴 과제제출하고 시작하기를 기다렸다 ㅎㅎ;
4일간 첫 과제에 대한 정리 및 회고 , 과제 피드백#1 을 진행하며 한 주의 절반이 빠르게 지나갔고 곧이어 해당 과제를 마주하게 되었다
2일과제에 4명이 팀이라고 ? 금방하겠네 ~
2일 과제에 4명이 팀이었다. 이전 과제는 2명이서 금방해냈기에 이번에도 금방할 줄 알았다.
그런데 아니었다. 왜 그랬을까?
과제가 ??!
주어지는 과제 설명서를 토대로 벗어나지 않게, 주어진 것만 구현하는 것이 중요하다고 생각되었다
요구사항에서 벗어난 개발은 “시키지도 않은 엉뚱한 걸 구현해왔네” 라는 것으로 귀결될 수 있다고 생각하기 때문이다. 따라서 과제 사항 외의 구현과 변경 또한 생각하지 않았다.
디자인 예시도 없었고 상품데이터에 대한 id가 없었다.
id가 없다면 우리가 id를 추가해 데이터를 관리해야하는지부터가 고민이었다. 주어지는 데이터를 수정해서 local로 관리하면 편하겠지만 그럴 경우가 실제로 존재할까에 대해서 의문을 지었다.
그리고 상품 상세페이지에서 수행되는 기능이 랜덤상품을 출력하는 것. 그리고 다른 페이지에서 상품이 클릭되었을 때 해당 상품의 정보를 보여주는 두 가지 기능을 하는 페이지인데 구현 url이 하나였다.
주어지는 과제에서는 url에 id가 붙는 것도 아니었기에 어떻게 구현하라는거지?라는 생각이 머릿속에 맴맴 돌았다.
- /product/id 또는 다른 값을 사용해서 상세기능을 구현하세요 <-라고 한줄만 써있어도.. ~이런 맴맴은 하지 않았을 것이다.~
과제 수행전 준비
수행전, 요구사항을 분석하는 것이 중요하다고 생각하기에 유저스토리를 작성했다.
이를 통해 유저스토리별 기능분담을 진행할 수 있을뿐더러 팀과 소통해보며 구현의 방향을 잡아나갈 수 있기 때문이다.
팀 과제에서 중요한 것은 모든 팀원들이 과제에 대한 생각이 동기화 되어야 한다는 것인데, 비대면이어서 이를 하기위해 다양한 방법들을 행했다.
디자인은 figma 로, 과제에 대한 방향은 draw.io 를 기준으로 소통했다.
다만, 아쉽다고 생각되는게 과제구현을 어떻게 해나갈지 시간에 급급해 내가 많은 요소를 고려하지 못했다는 것이다.
매우 작은 사항까지 고민해보고 이런 저런 케이스에 대한 처리와 추상적이지 않은 구체적인 설계를 했다면 어땠을까. 나의 부족한 설계로 인해 개발에 팀원분들께서 난항을 겪은 것 같다.
내가 제시한 방향으로 팀원분들이 따라주셨기에 미안한 감정이 크다.
많이 아쉽다. 또한 비대면으로 하기에 생각의 공유를 온전히 이루어내지 못했던 것 같다.
무튼, 과제 개발방향을 잡아놓고 회의를 마무리했다. 이제 개발할 일만 남은 것.
~나는 자기 전 이 날의 나의 언행과 있었던 상황들을 그려보았고 회의 내내 나의 생각을 강하게 주장했나 싶었다. 사실 이 부분이 많이 어렵다. 경험들이 쌓이면 좋은 태도를 갖게 되겠지. 하루 하루 회고해보는 시간은 좋은 것 같다.~
과제 수행
~이걸 어떻게 쓸까,,~ 과제량이 상당했다. 그 중 핵심이라고 생각되는 부분만 작성하겠다..
100개의 데이터중 랜덤하게 하나를 뽑아서 사용자에게 보여준다.
보여진 데이터는 관심없음 유무와 함께 최근이력에 추가된다.
여기서 내가 생각했던 것은 보여줄 데이터의 후보가 사용자의 행동에 따라 달라진다는 것이었다.
예를들어 초기 페이지 진입시 보여질 데이터의 후보는 100개지만, 사용자가 99개의 상품을 관심없음으로 등록했다면, 새로고침 수행 시 1개의 상품만을 보여줄 수 있도록 localStorage에 저장해놓는 것이다.
1개의 상품마저 관심없음으로 등록한다면, 보여줄 수 있는 데이터가 없고 사용자가 관심없음을 해제해야 다시 보여질 수 있도록 처리하는게 중요하다고 생각되었다.
localStorage를 실제 사용자의 개인 db테이블처럼 사용할 수 있도록 구현해내는 과제인 것 같았다.
00시에는 모든 데이터가 초기화되는 로직을 수행해 localStorage에 아무 값이 없다면, 다시 api를 호출해서 보여줄 수 있는 데이터 목록을 100개로 reset하면 될 것 같았다.
또한 사용되는 데이터가 같지만, 페이지가 다르기에 공유되는 데이터를 localStorage에서 관리하며 각각의 페이지에서 공유되는 데이터를 갱신해야한다고 생각했다.
상세페이지::1. 랜덤 데이터 출력
n개의 데이터 중. 랜덤한 데이터를 가져오되, 다음에 가져올 값은 이전 값과 겹치면 안된다.
처음에 생각했던 것은 이전에 뽑은 데이터의 index와 현재 뽑힐 index가 같다면 다시 랜덤넘버를 생성하는 함수를 재귀호출하는 것이었다.
그러나 이전에 뽑힌 데이터는 뽑힐 데이터의 배열에서 제외되기 때문에 index로 접근하면 안되었다.
- 2개의 데이터에서 1개를 제외했고 뽑혔던 데이터의 idx가 0이었다면, 이 때 랜덤번호로 뽑힐 값은 0밖에 남지않게 되는데 이전과 같기에 계속해서 재귀를 호출하는 문제점이 생기기 때문이다.
id값이 주어졌다면 이를 비교하면 되었을텐데 없었기에 unique하지 않은 title로 비교해서 구현했다.
출력된 데이터는 관심유무 값을 인자로 갖는 최근이력리스트에 추가하는 함수에 true를 넣어 호출했다.
상세페이지::2. 관심없음 클릭
관심없음을 클릭했을 때 관심유무를 인자로 갖는 최근이력리스트에 추가하는 함수에 false를 넣어 호출 했다.
이때, 이미 랜덤데이터 출력과 동시에 최근리스트에 추가되었기 때문에 filter를 통해 현재 관심없는 데이터와, 기존 최근이력에 있었던 데이터의 관심값과 조회시간을 갱신시켜야했다.
이 함수를 구현할 때 심히 고민했는데, 이것도 id값이 없어서 애를 먹었다. 호출데이터 훼손이라는 것을 하지 않고 구현할 목표로 인덱스로도 해보고 for문을 두번돌리는 것도 고려해보았지만, 시간복잡도가 o(n^2)이므로 하진 않았고,
결국 1번과정과 동일하게 unique하지 않지만 title로 비교했다. + hash값 생성도 고려했지만 너무 과제와 멀어지는 것 같아서 하지 않았다.
localStorage에서 값을 매번 갱신하는 것이 아닌, 가져오고 state로 관리했다.
component가 unmount될 때 한번만 최근이력과 출력가능한 데이터를 갱신시키고자 했지만, 새로고침시 componentWillUnmount 함수를 호출하지 않는다는 것을 확인하고 매번 local에 접근하게 했다.
새로고침시 호출되지않는 것에 대해
localStorage 사용 방식
localStorage에 2개의 데이터를 저장했다.
- 출력가능한 데이터리스트
- 최근이력리스트
갱신 시점은 페이지별로 나뉜다.
1. 상세페이지일 때 localStorage 갱신시점
사용자가 상세페이지에 접근하고 출력가능 리스트 중 랜덤하게 하나를 뽑는다.
이 때, 최근이력리스트에 해당 데이터를 추가한다.
사용자가 관심없음을 클릭하면 출력가능 리스트에서 해당 데이터가 제외되고 최근이력리스트에 관심없음 유무값이 갱신된다.
2. 최근이력리스트페이지일 때 localStorage 갱신시점
사용자가 리스트에서 관심없음을 클릭하면 출력가능리스트에서 제외된다. 이와 동시에 최근이력리스트에 관심없음 유무값이 갱신된다.
사용자가 리스트에서 관심없음 해제를 클릭하면 출력가능리스트에 추가된다. 이와 동시에 최근이력리스트에 관심없음 유무값이 갱신된다.
~말로는 쉬운데,, 설계할 때 이 부분까지 고려하지 못해서 제출 2시간전에 구현했다.. id값도 못해서 title로만 했었다..다시 한번 설계의 중요성을 느끼며,,~
회고
Class Component
Class Component를 life cycle이해할 때만 봤던 정도이지 실제로 컴포넌트 개발은 예제작성으로만 그쳤다.
setState의 경우 비동기적으로 되다보니 원하는 동작수행을 위해서 어떻게하는건지..함수형에서는 함수형업데이트로 했는데,,하면서 계속 보다가 팀원분께서 2번째인자에 callback으로 작성하면 동기적인 결과를 기대할 수 있다고 해주셔서 해결하고 하나 더 알게되었다.
lifecycle에 대해 이해하고 있다고 생각했지만 막상 수많은 lifecycle함수를 대해보니 내 착각에 불구했다.
사실 hooks에서 이런 다양한 cycle함수를 크게 신경 쓰지않고 구현하지 않는가..
~물론 mount 이 후 수행되고 dependencies array에 구독되는 state or props의 변경이 있을 때 수행되는 useEffect의 경우는 조금의 이해는 필요하다고 생각되지만..~
그런데 class로 작성되는 component는 이 함수들을 이해하고 잘 활용하는 것이 중요하다고 생각되었고, 학습의 시간을 가져야겠다고 생각했다.
개발뿐만아니라 legacy코드를 최신화하거나 읽고 개발하는 것도 junior의 일이다. 잘 알아놓아 업무에 빨리 적응하는 신입이 되도록 해보자
우리팀 !
- 팀원분들께서 모두 열정적이셨다. 새벽 2시에 마무리하고 헤어졌는데 이를 닦으며 "좀 더 해보고 자자"라는 생각에 gatherTown에 입장했는데 아직 팀원분들께서 남아계셔서 놀랐다!
- 4시까지 작업을 진행했는데 팀원분께서 같이 해주셔서 골머리를 앓던 문제를 해결하고 잘 수 있었다. 다시 한번 감사를..
- 또 한분은 10분만 주무시고 오시는 등 정말 대단하다고 생각되었다. 다시 한번 존경을..
- 뒤죽박죽으로 만들어뒀던 디자인 시안을 팀원분께서 엄청나게 깔끔하게 정리해주셨다. 감사합니다
이렇듯 좋으신 분들이셔서 개발내내 웃음이 끊이질 않았다 ! 특히 팀원분의 짱구성대모사는 인상깊었다.
이런 즐거운 개발도 정말 오랜만인 것 같다 ㅎ;; 이렇게 개발이 재밌는데;;
아쉬운 점
공통적으로 사용하는 함수를 분리하는 시간을 갖지 못했다. 이 또한 초기 설계 miss라고 생각된다.~(죄송합니다).
~중간에 price값이 "구찌원"이라는 데이터가 있었는데, 불러온 데이터들의 유효성을 체크해보는 로직을 추가못한 것이 아쉽다.
unit test를 해보기로 했었는데 시간이 부족해서 해보지 못했다.
제출 5분전에 조금 변경한 것 외에 담당 부분 스타일을 신경쓰지 못했다.
그래도 이외에 구현한 기능에 있어서는 모두 정상적인 동작을 확인했다.
localStorage를 몇번이고 지우고 했는지 모르겠다. 페이지 이동을 몇번씩 했는지도 모르겠다. 새로고침도 몇번 했는지 모르겠다.
데이터 1개 남았을 때, 0개 남았을 때의 경우도 고려해보고 그 때 관심있음 없음, 페이지에 상품이 노출되는지, 최신이력이 유지되는지 등등 수많은 케이스들을 직접 테스트해보며 정확한 기능구현에 힘을 쏟았다 !
어려웠던 점
소통이었던 것같다. 의견을 주고 받지만 결국 같은 의견이었던 경우가 있었다.
다시 한번 소통의 중요성을 느끼며 나의 말로인해 혼란이 생기는 경우를 없애도록 노력해야겠다.
의견을 내기 전 한번 더 체크하는 습관을 들이고 간단하고 명료하게, 말로 전달이 어렵다면 시각적인 자료를 활용해 내 생각을 온전히 전달할 수 있도록 하자.
보통 프로젝트는 여러 사람들의 의견으로 충분한 회의를 거쳐 개발방향을 잡아나간다.
그러나 이 과제는 시간이 매우 촉박해 의견수립에 많은 시간을 쏟기 힘들었다.
그러다보니 내가 제시한 방향으로 팀원분들께서 따라주시는 것으로 진행되었는데 예상치못한 이슈가 생겼을 때 나의 불찰이라는 생각이 머리속을 떠나지 않았다.
이 사례를 반면교사 삼아 더 나아지는 내가 되도록 노력해보자.
좋았던 점
- 내가 끙끙앓는 것 부분을 공유하면 같이 고민해주시고 해결책까지 제시해주셔서 많은 도움이 되었다. 심지어 질문하면 답변을 해주셨는데 정말 이해가 잘가도록 설명해주셨다.
- 과제 제출후 모두 모여 과제를 다시 정리해보는 시간을 가졌고 지난 시간들이 새록새록 스쳐지나가면서 팀원분들의 생각을 알 수 있게 되어 좋았다.
- 팀 프로젝트는 프로젝트를 대하는 관심과 참여도 (통칭 열정)가 중요하다고 생각되는데, 우리 팀은 매 회의마다 열정 삼세창을 외치며 불씨가 꺼지지않게 점화를 하며 개인적으로도 열정을 유지하며 전념할 수 있었다.
여담
코딩은 예술의 일종이라고 생각한다.
그림이나 노래도 대다수의 사람에게 공감을 불러일으키고 듣기 좋은노래, 보면 편안해지는 그림이 있듯이 남이 보았을 때 읽기 쉽고 감탄을 자아내는 깔끔한 코드도 예술의 일종이 아닐까싶다.
예술의 길은 고독하고 험난하다고 하지 않는가. 다만 이 길을 혼자 걷는지, 같이 걷는지에 따라 덜 험난해질 수 있다고 생각한다.
나는 혼자 걸었던 험난했었던 길에서, 함께하는 길로 올라왔고 열심히 걸어갈 예정이다.
함께 자라며 좋은 꽃을 피울 수 있도록 열정 열정 열정~!
