프론트엔드 개발자가 Class기반 객체지향 프로그래밍에 쉽게 다가갈 수 있도록 TypeScript를 이용하여 설명하는 글이다.

TypeScript 환경에서 객체(objcet)를 키(key)와 값(value)를 이용하여 동적으로 생성하는 방법을 알아보자.

프론트엔드 개발자의 백엔드 공부 도전..!

카테고리마다 체크박스가 2개씩 있다고 가정하자. 복수 선택이 불가능하도록 설계하고, 체크한 아이템들을 마지막에 form onSubmit 할 때 넘겨주도록 구현하자.

현재 보여지는 페이지를 Image로 출력해보고, PDF로도 출력해보자.

React 환경에서 D3를 사용해보고, 반응형으로 차트의 크기를 설정해보자.

TypeScript 환경에서 useRef를 사용하고 있었다. 그리고 이 ref값을 함수나 훅스에 넘겨주는 과정에서 문제가 생겼다.

CRA없이 React18환경으로 프로젝트를 셋팅해보자. tsconfig와 webpack을 활용하여 절대 경로도 설정해줄 것이다.

Client State와 Server State를 따로 관리하는 React Query를 완전 정복해보자!

Redux를 적용하려다 Redux ToolKit을 적용하게 되었다.

Network 탭의 Response 값 가져오기

Next.js 에서는 query string값을 사용하고 싶다면 useRouter를 이용할 수 있다. 하지만 이 값을 이용하여 데이터를 요청하면 원하던 대로 동작하지 않을 수 있다.

Recoil을 이용하여 쉽게 상태관리 해보자. atom과 selector의 차이에 대해서도 알아보자.

BackEnd Developer가 설계한 API에 요청을 보내려다 보니 CORS 가 발생했다. React Next 환경에서 Proxy를 이용하여 해결해보자.

Recoil에서 발생한 Duplicate atom key 문제를 해결해보자.

clayful를 이용한 토이 프로젝트를 수행했다. 상품을 장바구니에 담고, 장바구니에서 주문을 하면 결제 페이지로 넘어간다. 배송지 정보를 입력하고 주문을 클릭하면 결제 요청을 하게 된다.

구글에서 무료로 제공하고 있는 웹분석 서비스이다. vercel을 이용하여 키 값을 관리하는 방법과 Production, Development 에서 GA를 따로 사용하는 방법을 알아보자.

GraphQL과 Apollo에 대한 개념을 알아보고, Back단에서 어떻게 작업해야하는지 정리해보자.

CSR과 SS에 대해 알아보고 Hydrate에 대한 개념을 살펴보자. 그리고 React 18에서 추가된 Suspense의 강력한 기능과 Hydrate를 알아보자.

SSR 에러 해결, 게시글 수정 기능 구현, 스켈레톤 로딩