지난주까지는 혼자 목데이터만 써가며 작업물을 만들었다면
이번주부터는 찐! 프론트 + 백엔드 팀프로젝트 시작!!
총 2번의 팀프로젝트를 하는데, 그 첫 시작이었다.
설렘반 걱정반으로 시작한 첫주 회고 :)
팀 프로젝트를 하며 내가 가져갈 수 있는건?
- Trello를 사용하며 팀원들과 작업진행을 공유하고, 매일 스탠딩 미팅도 진행하며 소통
- 속도가 같을 수 없으니 팀 속도에 맞출 것! 결과물 보단 팀프로젝트를 하며 얻을 수 있는 것을 얻자!
- 무엇보다 같이 으쌰으쌰 하는것
나에겐 백엔드가 하는 일에대해서 잘 알지 못하기에 서로 소통을 어떻게 해야하는지가 제일 큰 문제였다.
목데이터가 아닌 직접 데이터를 받아서 써본적 도 없다보니, 어떤 데이터가 넘어올 지 감도 안잡히는 무지 상태의 나...
List Page
- 상품 리스트 페이지 중 소메뉴가 있는 메인 카테고리를 기준으로 잡고 목데이터만들어서 작업을 하였다.
- 데이터는 한개의 스테이트로 관리하는것이 좋을 것 같아서 1차 수정을 하였다.
- 조건에 따른 결과의 한 쪽이
null이라면 삼항연산자 대신 && 연산자 사용- 3일간 온탕과 냉탕을 오갔던 결론
list 페이지의 주요기능인 filter / sort
-
데이터(originalData)를 받아온 후 해당 데이터로 filter & sort 를 진행하는데, 전체를 누르면 전체데이터를 다시 보여줘야했다.
처음엔
originalData와filterData를 스테이트 두개로 관리하였다.const [originalData, setOriginalData] = useState([]); const [filterData, setFilterData] = useState([]);originalData는 filter해주는 목록버튼 부분에서만 필요하고,
실제로는 filterData만 계속 바뀌면서 보여주는 것인데... 어떻게하면 한개로 줄일까 고민고민..
스테이트 재렌더를 활용한 변경데이터 일반 변수 -> filter & sort
-
수정 전
const [target, setTarget] = useState("all");-
목록 클릭 or 셀렉트 체인지를 하면 데이터를 setFilter()해주고 해당 목록에 highlight 해주기 위해 dataset값을 가져와서 setTarget()하였다. 초기값은 전체(all)
-
셀렉트 체인지 할 때 체인지이벤트 내에서 setFilterData()를 진행하였었다.
-
-
수정 후
const [options, setOptions] = useState({ target: "all", sort: "recommend" });- options에서 기존의 target과 셀렉트 체인지 할 때
options.sort부분을 변경시키면서 컴포넌트가 재 렌더되며 해당 target으로 data를 가공-> 컴포넌트 재렌더 -> sort값으로 정렬해주도록 하였다.
- options에서 기존의 target과 셀렉트 체인지 할 때
여기서 한가지 문제가 생겨서 2시간을 헤맸는데 ...
자꾸만 originalData가 바뀌는 것 ㅠㅠ
이미 머리는 과부화되어 돌아가지도않고 멘붕오다보니 더디게 해결책을 찾게 되었지만, 어쨋든 찾아냈다.
sort 할 때 originalData 원본을 바꿔 버리는 것!!
[...originalData]로 복사해서 쓰니 정상작동 하였다.
( 이걸로 2시간을 소비했지만, sort() 이놈.. 아주아주 머리에 남게 되었다. )
WoW... 과거의 나는 고생, 미래의 나는 편함
list 페이지 filter,sort 구현을 다 하고나서 온라인 세션이 있었다.
프론트로서는 완전 편할 것 같은 Query string을 배웠는데...
'그럼 그동안 작성한 것이 필요가 없다는건가??? 그냥 백엔드로 요청하면 끝이었던건가???' 라는 의문이 너무너무 들었다.
데이터스테이트 관리에 대해 여쭤보러 간 김에 이 부분도 여쭤봤더니 멘토님께서 그래도 해둔 게 있으니 데이터를 적당히 받아오면서 기능을 사용하는쪽으로 얘기해 주셨는데...
결론...
다음날, 백엔드 멘토님과 스탱딩미팅 끝나고 얘기하면서 실무에서는 Query string으로 하니까, 이것으로 하는것으로 결정을 내렸다.
3일간 온탕과 냉탕을 몇번 왔다갔다 했는지 모르겠지만, 다 미래의 나에게 살이되는 것이니 어여 정신차리고 다시 작업 시작!
그동안 작업한 것은 공부한 셈 치고 내 머리에 차곡차곡 남기기용
Query string 사용할 로직으로 바꿔바꿔~~
NAV
드롭다운 메뉴
처음에는 카테고리 한개에서만 드롭다운이 되는 형태로 작업 후 다른탭에서도 열리도록 수정을 거칠 예정이었다.
한개만 구현할 땐 쉽게 가능하였는데 선택된 카테고리에서 나와주는 드롭다운 메뉴들이 바뀌어줘야하는데 상수데이터를 어디에서 받아야하는지가 고민이었다.
분위기도 어수선하고 머리는 더 어수선해지고 집중 하나도 안되고 ㅠㅠ
일주일간 차곡차곡 쌓였던것이 한계치 폭팔
결국 코드가 다 꼬여서 손을 댈 수 없는 상태가와서 결국 커밋시점 되돌아가고, 그보다 더 뒤로... 삭제 삭제해서 거의 틀만 놔두고 삭제하였다.
그래도 그동안 겪었다보니 타격이 덜 컸는지 잠깐의 조용한 시간을 갖고나니 멘탈 재정비가 되었다.
극복하는 것 또한 내가 겪고 나만의 방법을 찾는것, 이것이 숙명인거늘...
결론
지금생각해보면 너무 어렵게 생각했던것 같다.
필요한 상수데이터를 외부파일로 관리하고, 최상단에서 꺼내서 썼더니 금방 해결되었다.
const [isEnter, setIsEnter] = useState(false);
const [nowTarget, setNowTarget] = useState(null);
const [subMenuData, setSubMenuData] = useState([]);
useEffect(() => {
if (nowTarget === "products") {
setSubMenuData(PRODUCTS_SUBMENU);
} else if (nowTarget === "goods") {
setSubMenuData(GOODS_SUBMENU);
}
}, [nowTarget]);
//함수 생략
<DropMenu
isEnter={isEnter}
onDropMenu={onDropMenu}
subMenuData={subMenuData}
/>- isEnter : 불리언값으로, dropMenu의 className 중
.hidden속성을 관리 - onDropMenu : products, goods에 mouseEnter되면 true해주고, nav(드롭메뉴까지 감싸고있는)에서 leave되면 false시킴
- subMenuData : nowTarget(탭 마우스엔터 시 변동) 이 바뀔 때 마다 타겟에 맞는 데이터로 SubMenuData를 변경시켜 prop으로 다시 전달
느낀점
혼자가 아닌 팀 작업을 하다보니, 어렵게 느껴졌었다.
그리고, 백엔드에서 데이터를 어떻게 받아오게 될 지, 리스트페이지처럼 백엔드에서 처리될 수 있는게 어떤건지를 알지 못하는 와중에 시작을 하다보니 소통부분에서도 어려움을 겪게 되었다.
이 문제들을 해결 하기 위해 다른팀은 어떻게 소통하는지 벤치마킹을 하여, 스탱딩 미팅 때 조율하고 적용해 보았다.
멘토님께서 해주셨던 말 중에 (정확히는 기억안나지만)
'스탱딩미팅 때 각자 회의내용이 정리된 상태로 와서 미팅 이후에 필요한경우에는 가서 얘기해야겠지만 최대한 중간중간 이야기 할 상황을 덜 만들고, 현재는 서로가 알아들을 수 있도록 쉬운 단어를 선택하여 좋은 소통을 해야한다' 하신 것을 느끼게 되었다.
프론트와 백엔드, 서로의 고충을 얘기하면서 우리 팀만의 나은방향을 찾아가는 것.
이걸 위한 첫번째 프로젝트가 아닐까 싶다.
공부하며 정리&기록하는 ._. 씅로그
