profile
남는건 코드와 글뿐!!
post-thumbnail

객체지향 프로그래밍(OOP)과 TypeScript

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

2일 전
·
0개의 댓글
post-thumbnail

객체를 키와 값을 이용하여 동적 생성할 경우 Type 선언

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

6일 전
·
0개의 댓글
post-thumbnail

Spring Boot로 데이터 리턴 후 Next.js에서 Get 요청해보기

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

7일 전
·
0개의 댓글
post-thumbnail

카테고리별로 복수 선택이 불가능한 React CheckBox

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

2022년 5월 11일
·
0개의 댓글
post-thumbnail

Next.js 환경에서 현재 페이지 Image, PDF로 저장

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

2022년 5월 9일
·
0개의 댓글
post-thumbnail

React 에서 D3 사용하기 (막대 차트, 반응형)

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

2022년 5월 5일
·
0개의 댓글
post-thumbnail

useRef의 파라미터에서 타입

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

2022년 5월 4일
·
0개의 댓글
post-thumbnail

CRA 명령어 없이 프로젝트 셋팅(React18, TypeScript, Webpack, Babel)

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

2022년 4월 29일
·
0개의 댓글
post-thumbnail

React Query 사용법

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

2022년 4월 28일
·
0개의 댓글
post-thumbnail

Next에서 Redux ToolKit 사용하기

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

2022년 4월 27일
·
0개의 댓글
post-thumbnail

Axios에서 HTTP request를 이용하여 에러 처리

Network 탭의 Response 값 가져오기

2022년 4월 26일
·
0개의 댓글
post-thumbnail

useRouter 첫 번째 렌더링 undefined Bug

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

2022년 4월 26일
·
0개의 댓글
post-thumbnail

Recoil은 얼마나 간단할까?

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

2022년 4월 25일
·
0개의 댓글
post-thumbnail

React와 Next.js의 Cors 에러 해결 (Proxy)

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

2022년 4월 21일
·
0개의 댓글
post-thumbnail

Recoil - Duplicate atom key ~~~ 에러 해결

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

2022년 4월 20일
·
0개의 댓글
post-thumbnail

간단한 쇼핑몰 예제

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

2022년 4월 14일
·
0개의 댓글
post-thumbnail

Google Analytics를 Production과 Development 에서 따로 사용하기(Next, Vercel)

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

2022년 4월 13일
·
0개의 댓글
post-thumbnail

GraphQL과 Apollo

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

2022년 4월 7일
·
0개의 댓글
post-thumbnail

Hydrate(Next, React 18)

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

2022년 4월 4일
·
2개의 댓글
post-thumbnail

SPACE_DEV_CLUB - 20

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

2022년 4월 3일
·
0개의 댓글