프론트엔드 개발자가 Class기반 객체지향 프로그래밍에 쉽게 다가갈 수 있도록 TypeScript를 이용하여 설명하는 글이다.
TypeScript 환경에서 객체(objcet)를 키(key)와 값(value)를 이용하여 동적으로 생성하는 방법을 알아보자.
카테고리마다 체크박스가 2개씩 있다고 가정하자. 복수 선택이 불가능하도록 설계하고, 체크한 아이템들을 마지막에 form onSubmit 할 때 넘겨주도록 구현하자.
TypeScript 환경에서 useRef를 사용하고 있었다. 그리고 이 ref값을 함수나 훅스에 넘겨주는 과정에서 문제가 생겼다.
CRA없이 React18환경으로 프로젝트를 셋팅해보자. tsconfig와 webpack을 활용하여 절대 경로도 설정해줄 것이다.
Next.js 에서는 query string값을 사용하고 싶다면 useRouter를 이용할 수 있다. 하지만 이 값을 이용하여 데이터를 요청하면 원하던 대로 동작하지 않을 수 있다.
BackEnd Developer가 설계한 API에 요청을 보내려다 보니 CORS 가 발생했다. React Next 환경에서 Proxy를 이용하여 해결해보자.
clayful를 이용한 토이 프로젝트를 수행했다. 상품을 장바구니에 담고, 장바구니에서 주문을 하면 결제 페이지로 넘어간다. 배송지 정보를 입력하고 주문을 클릭하면 결제 요청을 하게 된다.
구글에서 무료로 제공하고 있는 웹분석 서비스이다. vercel을 이용하여 키 값을 관리하는 방법과 Production, Development 에서 GA를 따로 사용하는 방법을 알아보자.
CSR과 SS에 대해 알아보고 Hydrate에 대한 개념을 살펴보자. 그리고 React 18에서 추가된 Suspense의 강력한 기능과 Hydrate를 알아보자.