📅  24.04.15 ~ 24.04.21 관리자 페이지를 만들어 쇼핑몰을 완성하는 주차였다.  👩🏻‍💻 나는 이번주에 무엇을 배웠는가?  마지막 주차는 쇼핑몰의 관리자 페이지의 기능을 구현해 보는 주차였다. 한 주 안에 관리자 페이지를 다 만들 수 있을까?라는 의문을 가졌지만, 단순한 CRUD 애플리케이션 구현으로 쇼핑몰 페이지와 다르게 SWR을 사용해서 캐시에 집중하고 백엔드와 동기화하는 방식의 흐름을 학습했다. 아무래도 관리자 페이지는 데이터를 업데이트 하는 부분이 많기 때문에 SWR을 사용해서 캐시를 이용하여 가져온 데이터를 저장하고 재사용 할 수 있어서 별도의 store 작업을 하지 않아도 되었다. 실시간 데이터 갱신에 따른 화면 업데이트가 필요시 사용하면 좋을 거 같다는 생각을 했다. 좀..

📅 24.04.08 ~ 24.04.14 지난 강의 이어서 만든 쇼핑몰에 주문, 결제 기능을 추가적으로 구현하는 주차였다. 👩🏻‍💻 나는 이번주에 무엇을 배웠는가? 이번주도 지난 강의에 이어서 주문, 결제 페이지를 추가적으로 구현하는 주차였다. 주문페이지에서는 배송정보를 입력받는 폼에서 Daum 우편번호 API를 활용해 배송지 입력시 우편번호 검색하는 모달을 구현했고, 결제페이지를 구현하는 과정에서는 포트원(구. 아임포트)이라는 통합 결제 솔루션을 이용했다. 강의에서 PG사는 카카오페이로 결제할 수 있도록 만들어 테스트하는 과정을 학습했다. 강의 분량은 길지는 않았지만 개인적인 일들로 인해 학습시간을 확보하지 못해 대략적인 흐름만 우선 파악해 두었다. 결제 페이지 구현하는 과정에서 포트원이라는 통합 결제 ..

📅 24.04.01 ~ 24.04.07 지난 강의 이어서 만든 쇼핑몰에 기능을 추가적으로 구현하는 주차였다. 👩🏻‍💻 나는 이번주에 무엇을 배웠는가? 지난주차에 이어 쇼핑몰에 로그인, 로그아웃, 회원가입 주문페이지 관련 기능을 구현하는 실습을 하는 주차였다. 지난주에 듣고 정리 하지 못한 장바구니 담기 기능 구현부터 학습을 시작했다. 구현하는 로직은 어렵진 않았으나 막상 내 방식대로 시도해 보려니 잘 되지 않았다. ComboBox를 별도의 모듈로 컴포넌트화 하는 부분에서 어려움을 느꼈다. 뭔가 쉬워 보이면서도.. 막상 들은 내용을 토대로 구현해보려고 하니 어렵게 느껴졌다. Class 문법에 익숙하지 않아 getter, setter 개념을 이해하는 부분도 조금.. 힘들었다. 로그인과 로그아웃을 기능 구현은..

📅 24.03.25 ~ 24.03.31 쇼핑몰을 만들면서 지금까지 배웠던 모든 걸 종합해 보고 부족했던 학습 내용에 대해 복습하는 주차였다. 👩🏻‍💻 나는 이번주에 무엇을 배웠는가? 온라인 쇼핑몰에서도 비즈니스의 우선이 되는 상품목록, 카테고리 목록, 상품상세, 장바구니 페이지들을 구현하는 주차였다. 제공되는 REST API를 통해 전달 받은 데이터와 이벤트들을 store가 관리하고 MSW를 통해 Mocking 하는 테스트 코드를 작성하는 야살님 방식의 코드를 보면서 작성 의도를 파악하려고 했다. 특히 테스트 코드를 따라 해 보려고 노력했는데 강의가 너무 빠르고 테스트 코드는 제공되지 않아 학습 속도가 더뎠다. 따라 실습하다가 점점 따라 쓰기밖에 안 되는 거 같아 따라 쓰는 방식은 중단했다. 계속 강의를..

📅 24.03.18 ~ 24.03.24 디자인 시스템에 대해 이해하고 styled-components를 활용하여 CSS in JS를 학습하는 주차였다. 👩🏻‍💻 나는 이번주에 무엇을 배웠는가? 이번주는 디자인 시스템을 이해하고 CSS in JS의 대표적인 라이브러리 styled-components 학습하는 주차였다. CSS in JS 대해 궁금했었는데 학습하게 되어서 재미있었다. CSS의 역사를 공부하면서 Web의 역사까지 알게 되는 주차였다. 제품을 처음 만들 때는 초기에 세운 규칙들이 잘 이행되고 반영되지만 시간이 지날수록 규칙들이 어긋나고 점차 사라지는 등 불협화음이 필연적으로 발생한다. 새로운 프로젝트 구성원과 팀이 관여하고, 프로젝트가 확장되면서 이러한 현상은 가속화되고 결국 제품의 사용자 경험..

📅 24.03.11 ~ 24.03.17 React에서 라우팅 처리하기 위해 React Router 대해 학습하는 주차였다. 👩🏻‍💻 나는 이번주에 무엇을 배웠는가? 이번주차는 학습 내용이 많지는 않았다. 어렵지는 않았으나, 해당 기술이 나오게 된 배경지식을 이해하려고 했고 스스로에게 끊임없이 질문을 하면서 학습했다. 학습 키워드들의 사용법에 대해서는 공식문서를 통해 익히는 습관을 갖기 위해 노력했다. React Router는 주소(URL)에 따른 컴포넌트 렌더링을 관리하기 위한 라이브러리이다. React에서는 Routing의 구현할 수 있는 기능이 내장되어 있지 않기 때문에 라이브러리를 사용해서 라우팅 시스템을 설정할 수 있다. Routing이란 다른 주소에서 따라 다른 뷰를 보여주는 것을 의미한다. 즉..