원티드 프리온보딩 프론트엔드 코스 1주차 회고 (3)

이따만큼 밀린 회고를 열심히 적어 보자!

열정 넘치는 첫째 주 과제라서 이런 시련을 안겨 주신 걸까 생각하게 만든 두 번째 과제....

• 라디오 버튼으로 기한 설정 활성화
• 카테고리 선택
• 필터 태그
• 이미지 첨부
• 옵션 세트 기능
• 상품 정보 고시 기능

 

딱 보기에도 구현해야 할 기능이 이~ 만큼 많이 있다.

여기서 내가 맡은 부분은 카테고리 선택, 필터 태그, 이미지 첨부 기능이다.

 

 

 

1. 카테고리 선택

카테고리 선택 부분은 블로그 포스팅으로도 올렸지만, 카테고리를 선택하고 버튼으로 카테고리를 해제하는 부분에서 어떻게 구현하면 좋을지 많이 고민했다. 지금 생각해 보니 관건은 체크 박스의 checked 속성이었는데, 이 과제에서는 체크 박스의 value와 checked 상태를 묶어 객체로 관리하는 방식을 선택했다.

 

이 과제에 앞서 팀원들끼리 Context API를 공부하고 과제에 돌입했는데, 상태 관리 툴을 써 보지 않은 나로써는 굉장히 신세계였다. 🤩

props를 자식 컴포넌트로 보내고 또 보내고 하는 것이 굉장히 코드가 더러워진다 생각은 하면서도(...) 리덕스 같은 상태 관리 도구를 공부해 보지 않았으니 쓸 수가 없었는데, Context API로 관리하니 코드를 짜기에도 훨! 씬! 간결해지더라.

 

아무튼 그래서 이 부분은 첫째 날 하루를 꼬박 붙잡고 있었는데도 모르겠길래 다음 날 해결한 부분인데, 성공하고 나니 자신감이 하이브리드 샘이솟아 리오레이비.... 😎

 

 

 

 

 

 

2. 필터 태그

한 번도 구현해 보지 않은 기능이라 되게 어려울 것 같았지만 막상 검색해 보니 자료도 많고 얼마 걸리지 않았던 필터 태그.

검색 조건에 맞도록 필터 태그를 띄우는 기능은 Array.filter() 메소드로 손쉽게 해결했다.

아무튼간에 Array 메소드들은 map이든 filter든 reduce든...... 정말 유용하다. 리액트로 개발하면서 정말 잘 쓰고 있음.

 

그리고 고민했던 부분은 검색창을 누르면 필터 태그 목록이 좌라락 뜨고, 태그 한 개를 클릭하면 닫혀야 했는데 버튼을 클릭하기도 전에 창이 닫혀 버리는 문제가 있었다. 이 부분은 버튼에 onClick이 아닌 onMouseDown 이벤트를 줘서 해결할 수 있었다.

 

 

 

3. 이미지 첨부 기능

생각하면 눈물이 나는 이미지 첨부...

 

협업을 하면서 각자 구현할 기능을 기간 설정 / 기본 정보 등록 / 옵션 세트 등록처럼 큰~ 틀로 나누고 작업했는데, 이미지 업로드 기능이 여기도 들어가고 저기도 들어가면서 겹치는 상황이 발생했다!

그래서 각각의 코드를 합치는 과정에서 코드 작동이 조금 꼬인 것 같다...... 😢

마지막까지 붙잡고 있었으나 알다시피 시간이 모자라면 침착하지 못하는 본능이 있기에 결국 기능을 완성하지 못하고 제출했다.

 

 

1. 등록된 이미지를 저장하고 삭제하는 방식
2. 이미지 다중 등록 시 늦게 등록한 순으로 출력

 

문제가 됐던 부분은 크게 이 두 가지로 나눌 수 있을 것 같다.

 

 

첫 번째 등록된 이미지를 저장하고 삭제하는 방식은, 나 같은 경우에는 어차피 이미지의 이름만 띄운다!에 집중해 개발했기 때문에 저장은 이미지의 제목만 배열에 저장하고, 삭제도 이름을 받아와서 삭제하는 방식을 택했다.

그렇지만 다른 팀원 분의 경우 삭제하는 방식에서 이름이 다르더라도 파일이 다를 수 있으니 고유한 id가 같아야 삭제한다! 는 방식으로 개발하셨기 때문에 imageHandler 코드를 수정해야 했다.

 

 

그치만 여기까지는 괜찮았음.

 

 

진짜 문제는 2번이다.

 

 

 

사실 저 위에서 첨부한 썸네일 친구는 하나만 등록되어야 하고, 대표 이미지는 여러 개를 등록할 수 있어야 한다.

그래서 이미지를 첨부할 때도 여러 개가 한 방에 들어갈 수 있도록 multiple 속성을 추가했는데......

이렇게 하다 보니 최신 순으로 출력하는 데 애를 먹었다. 

 

setState에 아무리 스프레드 배열로 펼쳐 넣어도 이상하고...... 요 놈들을 뒤에 넣어도 앞에 넣어도 전부 다 먹통이었다.

 

생각해 보니 썸네일은 어차피 하나가 등록되어 있을 때 다른 사진을 등록하면 초기화하는 방식이고, 대표 이미지는 주르륵 연속해 출력하는 방식이니 multiple 속성을 추가한다고 여러 개가 첨부되는 것도 아니다. 물론 multiple 속성을 넣고도 최신 순으로 출력하는 방법이야 있겠지만은 시간도 촉박했기 때문에 약간 무리였던 것이 아닐까...... 생각해 본다. 아무튼 리팩토링 할 거임 ㅇㅇ

 

 

 

4. git의 중요성

git은 협업할 때 굉장히 유용한 툴이고 중요하다는 걸 알고 있었지만 이번에 특히 중요성을 더 절실히 깨달았다.

 

혼자 할 때는 물론 add, commit, push만 잘하면 되고~ 뭐 레포지토리에 안 들어가면 -f 좀 써 보고~ 커밋 이상하면 reset이든 revert든 신나게 해보고~ 하면 되지만 협업할 때는 그러면 진짜 안 된다. 이 사람 코드를 내가 없애 버릴 수도 있고 아무튼 안 된다.

협업할 때 강제로 푸시했다면 이 사진을 참고하라는 글을 봤는데 배꼽은 안 빠졌지만 웃겼다.

 

왜냐면~ 우리도 코드가 꼬여 버려 어떤 코드가 삭제됐고, revert를 했고, 무슨 짓을 해도 코드 두 개가 안 합쳐지는 기이한 현상(그냥 git 모르는 거겠지만...)을 겪었기 때문이다.

 

지금 생각해 보니 당연하다. 특정 커밋으로 revert를 하고 다시 pull을 하면 최신 커밋이 받아와질 거라고 생각했는데 revert는 특정 커밋과 똑같은 코드들을 다시! 새로운 커밋으로! 보내는 것이 아닌가. 그러니까 pull을 하면 revert로 되돌린 커밋일 것이니 지금이 가장 최신 상태라고 뜰 수밖에......

 

더군다나 이 일을 과제 제출 두 시간 전에 겪어 뇌가 멈췄다. 그래서 git으로는 도저히 해결을 못 하고 코드를 수작업으로 붙여 넣는 방식을 택했는데 당연히 효율성도 떨어졌고 부족한 나의 git 지식에 대해서도 다시 되돌아봤다. 

 

 

여기서 생각해 본 나의 git 사용 문제점은

 

 

merge가 필요한 상황에 git merge 명령어를 쓰지 않고 브랜치만 냅다~ 바꿔서 pull 해 오기

git:(item) $ git pull upstream item-list

git:(item-list) $ git pull upstream item-list
git:(item-list) $ git checkout item
git:(item) $ git merge item-list

그러니까 두 번째 방식으로 merge 하지 않고 첫 번째 방식으로 가져온 것이다.

물론... 충돌이 나고 잘 해결만 하면 코드를 잘 받아올 수도 있다.

그치만 git merge 명령어가 멀쩡히 있는데 저런 방식으로 하는 게 옳은 것 같지는 않다.

 

 

무엇보다 git reset과 revert는 블로그 백 번 봐도 잘 이해가 안 갔는데, 직접 써보고 문제를 직면하고 나서 차차 생각해 보니 이제야 조금씩 이해가 가기 시작한다.

 

 

 

 

마감 직전까지 이런저런 사태를 겪으며 했던 생각은 이거였다.

 

두 번째 과제부터 어찌 이런 난관을 안겨 주시나? 생각했지만 사실 재미있었다. 그리고 이번 과제가 제일 빡센 난관도 아니었음을

제출하고도 너무 아쉬워서 한 시간 동안은 계속 트러블 슈팅을 했었다.

하루 종일 눈알 빠지게 모니터 쳐다보고 목도 거북이 되고 밥 먹는 시간도 아까워서 모니터 앞에서 밥도 대충 먹고 개발하면서도 맡은 기능을 성공적으로 구현했을 때의 뿌듯함은 이루 말할 수 없다.

 

 

 

 

나 개발을 정말로 사랑하게 됐나 봐......

 

 

GitHub - console-lo9/wanted_pre_onboarding_02: 상품등록 과제 구현 내용을 담은 레포지토리입니다