이번 주말에는 이번주에 배웠던 Cmarket-redux 과제를 분석해보는 시간을 가졌다. 아무래도 코드스테이츠에서 주는 과제는 어느정도 만들어진 틀에서 action
이랑 reducer
틀만 만들면 끝나는거라서 이 웹페이지가 어떤 구조로 되어있는지는 따로 공부할 시간이 없다.
그래서 나는 이번 주말을 이용해서 이 웹사이트가 어떤식으로 되어있는지 간략하게나마 툴을 이용해서 분석을 해보았다.
그리고 스키마 그려보는 공부를 하기 위해 인스타그램을 타겟으로 스키마도 만들어보는 시간을 가졌다.
위에 두 장의 사진이 이번주에 했던 Cmarket 웹페이지의 모습이다.
먼저 figma
툴을 이용해서 컴포넌트 단위로 어떻게 되어있는지 그려보았다.
디자이너 처럼 디테일하게 하진 못했지만 그래도 프로젝트 전에 연습차원에서 한 번 그려봤다. 그래도 한 번 해보니 컴포넌트 단위로는 언제든 그려볼 수 있을 것 같다.
그 다음은 miro
툴을 이용해서 props
가 어떻게 전달되는지 reducer
와 action
이 어떤 역할을 하는지 그려보았다.
이런식으로 그려보았다! 구조를 그려보니 redux
에 대한 이해가 더 깊어진 것 같다! 이 구조를 그려보면서 useSelctor
와 useDispatch
에 대해서 다시 공부를 하게 되었다.
그 다음은 만약 내가 인스타그램 백엔드라고 생각을 하고….! 스키마를 최대한 열심히 그려보았다.
userfollows
를 통해 맞팔이라는 것을 표현했고 post
의 comment
와 like
기능은 유저도 할 수 있는 기능이고 posts
에서도 가능하기 때문에 둘 다 연결가능하게 했다.
오늘 과제 분석 외에도 타입스크립트 강의도 듣고, 알고리즘도 2문제나 풀었다.. 정말 주말은 항상 바쁘다 ㅜㅜ 그래도 개발 공부가 즐겁기에 항상 힘이난다!! 아침부터 새벽까지 쭉 공부를 하면서 느끼는건 정말 하루가 빨리 지나간다. 이제 프로젝트 시작일도 얼마 안남았기 때문에 더 열심히 달려나가야 한다!
이제 다음주가 지나면 코드스테이츠의 모든 수업은 다 들었다. 정말정말 시간이 빠르면서도 이렇게 치열하게 달려온 나 자신에게 정말 칭찬해주고 싶다.
항상 지금처럼 달려나가도록 더 노력해야겠다!
👊 내일의 TIW(today I Will)
MVC design pattern