페이지네이션을 구현하기 전에 이론적으로 정리하며 공부하려고 한다!  Pagenation의 주요 특징[ 데이터를 나눠서 보여줌 ]한 번에 모든 데이터를 보여주지 않고, 일부만 보여줌 (예: 1페이지에 10개씩).사용자 입장에서 가독성 향상 + 로딩 속도 개선.[ 서버/클라이언트의 부담 감소 ]전체 데이터를 한 번에 처리하면 리소스 낭비가 커지는데, 페이징하면 필요한 만큼만 가져오니까 효율적이야.페이지 이동 기능 제공사용자는 원하는 페이지로 쉽게 이동 가능 (1, 2, 3... 다음, 이전 등).데이터 정렬과 필터링과 함께 사용 가능정렬, 검색과 함께 사용하면 다양한 조건의 페이징 처리가 가능함  페이지네이션 구현에는 보통 두 가지 방식이 있다. 1. Offset 기반 PaginationLIMIT, OFFS..

yarn create next-app .현재 경로에 next 프로젝트 생성 yarn add next@14 react@18 react-dom@18 Next.js 14 버전에서는 next.config.ts 파일을 공식적으로 지원하지 않습니다.즉, TypeScript(.ts)로 next.config.ts를 작성하는 것은 지원되지 않으며, .js 또는 .mjs 형식으로 변환해야 함 mv next.config.ts next.config.mjs 변경후 파일 내용 다음과 같이 수정/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true};export default nextConfig; PnP 환경에서는 TypeScript가 ..

JWT(JSON Web Token)는 클라이언트와 서버 간에 정보를 안전하게 전달하기 위해 사용되는 토큰이다크게 헤더(header), 페이로드(payload), 서명(signature) 세 부분으로 구성되는데, 이 세 부분이 결합되어 하나의 토큰을 형성한다 JWT 토큰을 구현하기 위해서는 Access Token과 Refresh Token 이렇게 두 종류의 토큰이 사용된다이 두 가지 토큰은 각기 다른 목적과 특성을 가지고 있으며, 보안성과 사용자 경험을 동시에 고려한 토큰 관리 방법이다. Access Token[목적] Access Token은 사용자 인증을 위해 사용된다이 토큰은 클라이언트가 서버에 API 요청을 보낼 때 포함되며, 서버는 이 토큰을 사용해 요청이 인증된 사용자인지 확인한다 [life cy..

NestJS에서 @InjectRepository 데코레이터는 TypeORM과 함께 사용되어 특정 엔티티의 리포지토리를 서비스 클래스에 주입하기 위해 사용됩니다! 이 데코레이터는 의존성 주입을 통해 데이터베이스와의 상호작용을 보다 간편하게 관리할 수 있도록 도와줘요  이 예제에서는 MySQL 데이터베이스를 사용하여 사용자(User) 데이터를 저장하고, GraphQL을 통해 사용자 데이터를 조회하고 추가하는 API를 구축합니다.@InjectRepository 데코레이터 사용 방법// npm 설치npm install @nestjs/typeorm typeorm mysql2npm install @nestjs/graphql @nestjs/apollo graphql apollo-server-express// yarn..

이벤트 루프를 잘 활용하면 오래 걸리는 작업을 효율적으로 처리할 수 있다 작업에는 동시에 실행될 수 있는 작업과 동시에 실행될수 없는 작업이 있는데 기본적으로 자바스크립트 코드는 동시에 실행될 수 없다 하지만 파일 시스템 접근이나 네트워크를 통한 입출력 작업은 동시에 처리될 수 있다 블로킹이란 이전 작업이 끝나야만 다음 작업을 수행하는 것을 의미하고 논블로킹은 이전 작업이 완료될 때 까지 기다리지 않고 다음 작업을 수행함을 뜻한다 논브로킹 방식이 더 짧은 시간안에 같은 작업을 처리할 수 있다(모든 작업이 동시에 처리될 수 있는 작업이라는 전제) setTime(콜백, 0)은 코드를 논블로킹으로 만들기 위해 사용하는 기법 중 하나이다 아무리 논블로킹 방식으로 코드를 작성하더라도 코드가 전부 내가 작성한 것이..

function run() { console.log("3초후 실행"); } console.log("시작"); setTimeout(run, 3000); console.log("끝"); 시작 끝 3초 후 실행 동작 과정 setTime의 시간이 정확하지 않을 수 있는데 이벤트 루프는 스택이 비어있을 때 만 큐에 있는 run함수를 스택에 가져오는데 스택에 함수가 너무 많다면 3초가 지난 후에도 run 함수가 실행되지 않기 때문이다