프리온보딩 코스 회고록 3 | 섭섭한 서버 데이터

기간	목표	github repository
09.13 ~ 09.15 (약 2일)	특정 깃헙 레파지토리(angular-cli)의 이슈 목록과 상세 내용을 확인하는 웹 사이트 구축	https://github.com/wanted-team-11/assignment4
09.16 ~ 09.18 (약 2일)	API 서버와 통신해서 작동하는 댓글 프로젝트를 Redux를 통해 구현	https://github.com/wanted-team-11/pre-onboarding-assignment-week-3-2-team-11
09.20 ~ 09.25 (약 5일)	투자 관리 서비스의 관리자 기능 구현	https://github.com/wanted-team-11/pre-onboarding-assignment-week-4-1-team-11

과제 주안점 | 서버 데이터 관리

네번째 과제 :: Context API를 활용한 상태관리 및 API 연동

다섯번째 과제 :: Redux를 활용한 상태관리 및 API 연동

여섯번째 과제 :: React-query를 활용한 상태관리 및 API 연동 / 스타일링 라이브러리 antd 사용 / json-server 사용

파편화된 서버 데이터 처리 | 어쩌면 이건 BFF..?

  렌더링 되어야 할 정보들이 단일 api로 받아 올 수 없었다. 기본적으로 두 세개의 api를 조합해야 했다. 제일 큰 문제는 페이지네이션과 검색 기능을 json-server의 내장 기능을 써야한다는 점이었다.json-server의 페이지네이션 기능은 Paginate API를 통해 제공하는데, 데이터를 한 번에 패치하지 않고 페이지 단위로 패치한다. 그런데 한 페이지에서 렌더링 되어야할 정보가 페이지 단위로 패치하는 api들에 모두 있을거라는 보장이 없었다. 예를 들자면 사용자 목록 1page를 렌더링 하려면 사용자 api, 사용자 설정 api, 계좌 api가 각각 필요한데, 각 정보는 1:1 대응 관계가 아니었다. 그래서 사용자 api만 1page를 부르고 1page에 렌더링 되어야할 사용자 정보를 전체 사용자 설정 api, 전체 계좌 api를 호출해 찾아야 했다.

  더 큰 문제는 json-server에 있는 서버 데이터들이 좀 이상했다. 키 값의 의도가 모호하고, id들이 중복 되는 것도 있고, 의도한 건지 모르겠는데 json-server relationships를 쓸 수 없게끔 키 값을 스네이크 케이스로 줬다.이 때문에 json-server의 기능을 100%활용하지 못하고 수작업으로 나누는 작업이 많아서 힘들었다.

  어떤 팀은 제공된 서버의 키값을 카멜케이스로 바꿔서 이를 해결했다... 현실이라면 이 방법이 맞겠다. 프론트 혼자 끙끙 앓는것 보다 서버팀에 가서 키 이름만 바꿔달라고 하면 되니까.. 근데 다시 생각해보니 키 이름을 바꾸지 못하는 나름의 사정도 있을 수도 있지 않을까..?

  MSA 구조를 공부할 때 BFF라는 개념을 본 적이 있다. Micro Service Architecture는 앱에서 제공해야할 여러 가지 플랫폼을 마이크로 서비스 단위로 나누는 구조다. 여기서 백엔드에서 줘야할 정보들을 각 플랫폼에 맞는 정보를 다르게 준다면 백엔드 업무가 너무 많다. 그래서 각 마이크로 서비스 단위의 프론트에서 Backend For FrontEnd를 만들어 백에서 준 데이터를 한 번 정제하는 작업을 한다는 것이다. 개념만 봤을 때는 그렇게 어려워 보이지 않았는데 막상 백 데이터를 정제 처리하는 과정을 겪어보니 쉽지 않다고 느꼈다.

서버 데이터 섭섭한디요

antd <<< 이거 미친 사람임(좋은 뜻)

  여섯번째 과제에서 스타일링 라이브러리 사용을 권했다. 그래서 antd를 처음 써봤는데 신세계였다. 일단 자잘구리한 컴포넌트들을 만들지 않아도 되고 예뻐서 좋았다. 근데 제일 감동 받은건 error modal 처리였다. modal 컴포넌트를 만들려면 potal과 같은 전역적인 처리를 해줘야했는데 antd는 무슨 수를 쓴건지 modal 컴포넌트를 hooks에 넣어도 사용이 가능했다. 나중에 한 번 뜯어 봐야겠다.

/** 여담 */

  짤과 밈의 뉘앙스 차이를 아시는가. 짤은 뭔가 한국스럽고 밈은 뭔가 외국스러운 그 미묘한 차이.. 어쩌다보니 회고록 썸네일들이 인터넷 짤로 채워졌다. 개발자들은 짤보단 밈을 더 많이 쓰는 것 같다. 나도 한 번 찾아봤다. frontend meme들은 프론트는 잘 정돈되어있고 백은 혼란스럽다는게 대부분이다. 이번 과제는 백이 굉장히 심플하고 프론트에서 그 심플한 api들을 조합해 힘들게 랜더링 해야한다는 점에서 마음에 드는 meme을 찾을 수 없었다.. 그래서 섭섭한 강태오님을 넣었다. 우영우를 한 번도 안봤는데 우영우 짤이 회고록의 절반 이상을 차지한다. 이상한 일이다.