2020-01-07
1️⃣ 리스트 테이블에 필터를 적용하여 원하는 row만 보는 기능을 구현했을 때, 필터를 적용한 뒤 새로고침을 누르면 state가 초기화 되어 필터링이 되지 않는다.
--> next.js router를 활용하여 현재 url에 필터정보를 query에 저장하여 url을 replace한다. 그 후 새로고침을 시 param에 해당하는 값을 state에 넣어준다. (param은 string이므로 형변환 필요)
2020-01-08
오늘은 슈퍼어드민 관리자 페이지에서 사용자의 문의를 관리하는 문의관리 페이지를 만들었다.
1️⃣ 뭔가 필터, 액션, 리스트페이지로 생긴 구조를 여러번 만들어보니 요령이 생긴 것 같다. 오늘 처음으로 느낀 변화는 내가 만들고자한 것을 막히는 것 없이 쓱싹 해낸 것 같은 느낌이 든 것이다!!
항상 프로그램을 구현할 때, 거의 작은 컴포넌트부터 상향식(bottom-up)으로 구현해나갔다. 아니 사실 하향식으로 했다가 상향식으로 했다가... 이랬다 저랬다 한것 같다. 따라서 데이터나 작동의 흐름을 제대로 파악못하여 prop이나 state를 잘못 지정하곤 했는데, 오늘은 하향식(top-down)으로 개발을 해보았다.
개발 순서는, CTO님이 온보딩 때 잘게 나눠주신 task 순서처럼 (1) 데이터 가져오기(타입,인터페이스,서비스 만들기) (2) 데이터 출력 (3) 컴포넌트 만들고 테이블에 보여주기 (4) 추가기능구현(필터, 액션 등) 순으로 구현했다.
그래서 있지 않은 컴포넌트여도 먼저 사용하고, 만들어야 하는 컴포넌트를 만들면서 빨간줄을 지워가는 형태로 개발을 했다. 이렇게 하니 진짜 내가 3일에 걸쳐 만들었던 유사한 페이지를 하루만에 뚝딱 만들어서 너무 뿌듯했다ㅠㅠ
2️⃣ nextjs 문서를 읽으며 배운내용을 적용하기 위해 문의 상세페이지를 띄울때 getServerSideProps 사용했다. getServerSideProps를 사용하면 Next.js는 요청한 데이터를 반환받을 때까지 기다리고 페이지를 미리 랜더링한 다음에 유저에게 페이지를 보여준다. 따라서 속도가 느릴 수 있다.
--> 반드시 필요한 경우에만 쓰는 것이 좋음!! 예를들어 SEO 관련 데이터 인 경우(?)
아무튼 이제 배운 내용을 사용할 때 무작정 돌아간다고 사용하지말고, 왜? 이 기술을 사용해야하는지, 이 기술이 반드시 필요한 것일지 제대로 알고 사용하도록 하자!
참고할 것!
React로 사고하기
