redux 과제 분석 및 주말 회고

📅 TIL #67



🎯 Achievement Goals


  • Cmarket 과제 분석해보기
  • 인스타그램 스키마 그려보기






이번 주말에는 이번주에 배웠던 Cmarket-redux 과제를 분석해보는 시간을 가졌다. 아무래도 코드스테이츠에서 주는 과제는 어느정도 만들어진 틀에서 action이랑 reducer 틀만 만들면 끝나는거라서 이 웹페이지가 어떤 구조로 되어있는지는 따로 공부할 시간이 없다.

그래서 나는 이번 주말을 이용해서 이 웹사이트가 어떤식으로 되어있는지 간략하게나마 툴을 이용해서 분석을 해보았다.

그리고 스키마 그려보는 공부를 하기 위해 인스타그램을 타겟으로 스키마도 만들어보는 시간을 가졌다.




👉 주말 회고


cmarket

cmarket2



위에 두 장의 사진이 이번주에 했던 Cmarket 웹페이지의 모습이다.

먼저 figma 툴을 이용해서 컴포넌트 단위로 어떻게 되어있는지 그려보았다.


figma


디자이너 처럼 디테일하게 하진 못했지만 그래도 프로젝트 전에 연습차원에서 한 번 그려봤다. 그래도 한 번 해보니 컴포넌트 단위로는 언제든 그려볼 수 있을 것 같다.



그 다음은 miro 툴을 이용해서 props가 어떻게 전달되는지 reduceraction이 어떤 역할을 하는지 그려보았다.


miro


이런식으로 그려보았다! 구조를 그려보니 redux에 대한 이해가 더 깊어진 것 같다! 이 구조를 그려보면서 useSelctoruseDispatch에 대해서 다시 공부를 하게 되었다.



그 다음은 만약 내가 인스타그램 백엔드라고 생각을 하고….! 스키마를 최대한 열심히 그려보았다.


diagram


userfollows 를 통해 맞팔이라는 것을 표현했고 postcommentlike기능은 유저도 할 수 있는 기능이고 posts에서도 가능하기 때문에 둘 다 연결가능하게 했다.







🙌 느낀점


오늘 과제 분석 외에도 타입스크립트 강의도 듣고, 알고리즘도 2문제나 풀었다.. 정말 주말은 항상 바쁘다 ㅜㅜ 그래도 개발 공부가 즐겁기에 항상 힘이난다!! 아침부터 새벽까지 쭉 공부를 하면서 느끼는건 정말 하루가 빨리 지나간다. 이제 프로젝트 시작일도 얼마 안남았기 때문에 더 열심히 달려나가야 한다!

이제 다음주가 지나면 코드스테이츠의 모든 수업은 다 들었다. 정말정말 시간이 빠르면서도 이렇게 치열하게 달려온 나 자신에게 정말 칭찬해주고 싶다.

항상 지금처럼 달려나가도록 더 노력해야겠다!





👊 내일의 TIW(today I Will)

MVC design pattern