hani hani

자바스크립트에서 this는 다른 언어나 객체 지향 프로그래밍에서 사용하는 this와 다소 다르게 동작할 수 있습니다. 특히, this는 함수가 호출되는 방식에 따라 다르게 동작합니다. 오늘은 자바스크립트에서 this가 어떻게 동작하는지, 화살표 함수에서 this는 어떤 특징을 가지는지, 그리고 이를 어떻게 잘 활용할 수 있는지 알아보겠습니다. 목차this의 개념this의 동적 바인딩this의 활용  this의 개념자바스크립트에서 this는 함수가 호출될 때 this가 바인딩된 객체를 참조합니다. 이때 this가 참조하는 객체는 함수가 어떻게 호출되었는지에 따라 달라집니다. 전역 컨텍스트에서의 this환경참조전역전역 객체브라우저 환경window 객체Node.jsglobal 객체 함수 내부에서의 this함수..

TypeScript에서 타입을 정의할 때 type과 interface 두 가지 방법이 있습니다. 겉보기에는 비슷해 보이지만, 몇 가지 중요한 차이점이 존재합니다. 이번 글에서는 type과 interface의 차이점과 각각의 적절한 사용법을 설명하겠습니다.목차type과 interface의 기본 개념type과 interface의 차이점어떤 경우에 무엇을 사용할까? type과 interface의 개본 개념type타입 별칭(Type Alias)을 정의할 때 사용간단한 원시 타입부터 복잡한 객체 타입까지 다양하게 활용 가능 interface객체의 구조를 정의하는 데 사용, 주로 클래스와 함께 사용하지만 함수 타입과 함께 사용 가능  type과 interface의 차이점확장 방식type은 &(Intersection..

본 글은 Next.js에서 useSWR와 axios를 사용해 서버에 비동기로 데이터를 가져오는 방법을 다룬 내용입니다.  목차useSWRaxios사용해보기  useSWR데이터 페칭을 위한 Hook으로 데이터 요청과 캐싱을 쉽게 관리할 수 있도록 해준다. 이전 데이터를 유지하면서 백그라운드에서 새로운 데이터를 가져와 업데이트 하는 방식이다. 기본 형태는 아래와 같다. // 0. 설치yarn add swr// 1. import import useSWR from 'swr'; // 2. 선언 (key: '/api/user', 데이터 가져오는 함수: fetcher)const { data, error, isLoading } = useSWR('/api/user', fetcher); (필수 값은 색깔로 표시)파라미터k..

본 글은 Next.js에서 useSWRInfinite를 사용해 커서 기반 무한 스크롤을 구현한 내용입니다. 목차페이지네이션: 커서 기반 VS 페이지 기반무한 스크롤 구현 (useSWRInfinite) 페이지네이션: 커서 기반 VS 페이지 기반우선 페이지 기반과 커서 기반의 차이점 및 장, 단점에 대해 정리했다. 페이지 기반 (Page-based Pagination)페이지 번호와 오프셋(offset)을 사용해 특정 페이지의 데이터를 가져오는 방식장점구현이 간단 (페이지 번호와 오프셋을 사용해)특정 페이지 번호로 이동하기 때문에 직관적으로 사용 가능많은 라이브러리와 프레임워크에서 기본적으로 지원하는 페이지네이션 방식단점데이터가 많을 수록 비효율적데이터가 빈번하게 변경되는 경우, 데이터가 중복되거나 누락될 수..

본 글은 Next.js에서 Zod + React Hook Form을 사용해 회원가입 페이지를 만든 방법을 다룬 내용입니다. 다양한 프로젝트 진행하면서 항상 회원가입 페이지는 직접 구현했었는데, 주변에서 간편한데 성능 좋은 라이브러리 조합이 있다고 추천해줘서 사용해봤다. 사용해보니 정말 간편하게 회원가입 기능을 만들 수 있어서 다른 사람들과 함께 공유하면 좋을 거 같아서 글을 쓰게 되었다. 목차 Zod React Hook Form 실제로 적용해보기 Zod TypeScript를 우선으로 하는 스키마 선언 및 유효성 검증 라이브러리이다. 스키마 검증에 사용하며, 사용자 등록 양식을 캡슐화하여 관리한다. 장점으로는 강력한 유효성 검사 → 유효성 검증 후 값을 리턴, 타입을 자연스럽게 추론 가능 쉬운 사용 → 직..

본 글은 리액트에서 네트워크 통신을 가능하게 해주는 fetch와 axios에 대해 다룬 내용입니다 목차 fetch axios fetch JS 내장 라이브러리 Promise 기반의 인터페이스를 사용해 비동기적으로 요청을 처리 try { let response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } let data = await response.json(); console.log(data); } catch (error) { console.error('Fetch error:', error); } axios Promise 기반의 API를 사용해 비동기 요청 처리 HTTP 요청과 응답을 쉽게 ..

본 글은 리액트에서 사용하는 hooks 중 useState, useReducer에 대해 다룬 내용입니다. 목차 차이점 useState란? useReducer란? 차이점 useState useReducer 용도 단순한 상태관리 복잡한 상태관리 인터페이스 하나의 상태 값, 그 값을 변경하는 함수 반환 리듀서와 디스패치 함수 반환 가독성과 유지 보수성 직관적이라서 단순한 상태 관리에 적합 코드 가독성을 향상 복잡한 상태 업데이트 로직 분리 가능, 유지 보수성 향상 액션에 따라 상태가 변경되어야 하는 경우 간단히 정리하면, useState는 단순한 상태 관리에 사용, 간단한 컴포넌트에서 유용, useReducer는 복잡한 상태 관리에 사용, 상태 업데이트 로직 분리가 가능해 코드 가독성과 유지 보수성 향상 가능..

본 글은 Next.js에서 crypto-js 사용해 AccessToken, Refreshoken을 암호화 및 복호화 하는 방법에 대해 다룬 내용입니다. 목차 1. 도입 이유 2. crypto-js란? 3. 사용 방법 1. 도입 이유 SessionStorage에 AccessToken, Refreshoken을 저장했던 이유는 Cookie에 비해 보안성이 높았기 때문이다. 하지만, 탭별로 데이터가 관리되다 보니 사용자가 매번 새로운 로그인을 해야 하는 번거로움이 발생했다. 보안도 중요하지만 사용자 경험 개선이 우선이라 판단되어 AccessToken, Refreshoken을 Cookie에 저장하기로 했다. 이때, 그냥 저장하는 게 아닌 crypto-js를 활용해 암호화해 사용자 정보가 직접적으로 노출되지 않도록..