전체 글

이 글은 앞선 개념 정리(1편)를 바탕으로 실제로 Next.js, PostgreSQL, Docker를 활용하여 사용자 인증 시스템을 구축한 과정을 정리한 실습 후기입니다.데이터 저장 방식 1편 보러가기 👈 [데이터 저장 방식 1편] 사용자 인증 시스템 제대로 이해하기 : 세션, 암호화, 쿠키, PostgreSQL 기초이 글은 "데이터 저장 방식 구현 과제"를 수행하기 전, 인증 시스템을 설계하기 위해 반드시 이해해야 할 주요 개념들을 정리한 글입니다. 프론트엔드부터 백엔드, 그리고 보안 요소까지 아우르neuri.tistory.com 1. 프로젝트 개요 및 구조🛠 기술 스택Frontend : Next.js14, TypescriptBackend : Node.js, PostreSQLInfra : Doc..

이 글은 "데이터 저장 방식 구현 과제"를 수행하기 전, 인증 시스템을 설계하기 위해 반드시 이해해야 할 주요 개념들을 정리한 글입니다. 프론트엔드부터 백엔드, 그리고 보안 요소까지 아우르는 인증 흐름의 기초를 다집니다. ✨과제 배경이 과제는 다음과 같은 환경과 조건 속에서 로그인 기능을 구현하는 것이 핵심입니다!과제를 구현하기에 앞서 관련 개념들을 정리해보았으며, 각 개념에 대한 구체적인 내용은 별도 포스팅으로 이어갈 예정입니다. 1. 사용자 인증 방식의 이해세션 기반 인증이란?사용자가 로그인하면 서버에서 세션을 생성하고, 이를 식별할 수 있는 session ID를 쿠키를 통해 클라이언트에게 전달합니다.이후 사용자는 모든 요청에 해당 쿠키를 자동 포함시키며 서버는 이를 통해 사용자를 식별합니다. ..

웹 프론트엔드에서 성능 최적화를 논할 때 빠지지 않는 키워드 중 하나가 바로 "Lazy Loading"입니다. 이 글에서는 Lazy Loading이 무엇인지부터, React 및 Next.js에서의 다양한 구현 방식, 그리고 실습 예제와 선택 가이드까지 모두 정리해 보았습니다. 💡 Lazy Loading이란?Lazy Loading(지연 로딩)이란, 웹 페이지 내의 리소스를 "필요할 때까지" 로딩하지 않고 미루는 전략입니다. 일반적으로 페이지가 처음 로드될 때 모든 자원을 한 번에 불러오지만, Lazy Loading은 사용자의 시점이나 조건에 따라 나중에 리소스를 불러오는 방식입니다. ✅ 사용 이유초기 로딩 시간 단축트래픽 절감 (데이터 전송량 감소)사용자에게 빠른 피드백 제공예 : 사용자가 스크롤하기 ..

최근 회사에서 배포 환경을 도커로 구성해 보라는 과제를 받게 되었다.기존에는 로컬 환경에서만 Next.js 앱을 실행해 봤지만, 이번 기회를 통해 Docker에 대해 기초부터 학습하고 Next.js 앱을 실제로 컨테이너에 올려 실행하는 데 성공했다. 본 글에서 Docker의 개념, VM과의 차이, Dockerfile 작성 및 컨테이너 실행까지 전 과정을 정리하였다.💡 Docker 기초 개념컨테이너란?컨테이너(Container)는 운영체제 수준의 가상화 기술로, 호스트 OS의 커널을 공유하면서 독립적인 실행 환경을 제공합니다. 전통적인 VM처럼 무거운 OS를 포함하지 않고, 애플리케이션과 그에 필요한 라이브러리만 포함하여 빠르고 가볍게 실행할 수 있는 것이 특징입니다.대표적인 리눅스 기반 컨테이너 기술로..

문제 링크 : https://www.acmicpc.net/problem/2533문제 정보문제 개요 백준 2533번 사회망 서비스(SNS) 문제는 트리 형태의 SNS 네트워크에서 모든 사람이 최소한 한 명의 얼리 어답터(Early Adopter)와 연결되도록 하는 최소 얼리 어답터 수를 구하는 문제입니다.노드(사용자)들은 트리 형태로 연결되어 있습니다.각 사용자는 얼리 어답터(새로운 기술을 먼저 사용하는 사람) 또는 일반 사용자일 수 있습니다.최소한의 얼리 어답터를 선정하여 모든 일반 사용자가 최소 한 명의 얼리 어답터와 연결되도록 해야 합니다.해결 방법이 문제는 트리 DP(Tree DP) 기법을 활용하여 해결하였습니다.각 노드(사용자)가 얼리 어답터인 경우와 아닌 경우를 나눠서 탐색합니다.DFS(깊이 우..

문제 링크 :  https://www.acmicpc.net/problem/1600문제 정보 문제 개요백준 1600번 말이 되고픈 원숭이 문제는 격자판에서 원숭이가 말의 이동을 일정 횟수(k번)만 사용할 수 있는 상황에서 (0,0)에서 (w-1, h-1)까지의 최단 거리를 구하는 문제입니다.원숭이는 일반적으로 상, 하, 좌, 우로 이동할 수 있습니다.단, 말의 움직임(체스 나이트의 이동 패턴)을 최대 k번까지 사용할 수 있습니다.도착점에 도달할 수 없으면 -1을 반환합니다. 해결 방법이 문제는 최단 거리 문제이므로 BFS(너비 우선 탐색)을 사용하여 해결하였습니다.일반적인 최단 거리 문제에서는 visited 배열을 2차원으로 사용하지만, 이 문제에서는 말처럼 움직일 수 있는 횟수(k)가 추가된 3차원 방문..

1. 문제 상황npm run dev 명령어 실행 시 세그멘테이션 오류가 발생하며 실행이 중단됨.npm run dev> fe@0.1.0 dev> next dev --turbopack/c/Program Files/nodejs/npm: line 65: 677 Segmentation fault "$NODE_EXE" "$NPM_CLI_JS" "$@"추가 오류 메시지Segmentation fault (3221225477 오류 코드)Node.js 실행 중 메모리 접근 오류로 인해 충돌 발생보통 손상된 npm 패키지, 권한 문제, 또는 OneDrive 경로 문제에서 발생파일 삭제 실패 (EBUSY, EPERM 오류)특정 폴더(node_modules/puppeteer, node_modules/next 등)를..

에러 빠르게 Vercel에 배포해보려다가 에러 발생Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any 해결법eslint 설정 파일에서 규칙을 수정해주면 된다..eslintrc.json의 rules에 "@typescript-sxlint/no-explict-any" : "off" 추가//.eslintrc.json{ ... "rules": { // Unexpected any. Specify a different type 문구 제거 "@typescript-eslint/no-explicit-any": "off", // React, { ReactElement } fr..

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다. 1️⃣ metadata 이용해서 메타태그 설정Next.js에는 SEO 및 웹 공유성을 개선하기 위해 애플리케이션 메타데이터(예: HTML 헤드 요소 내부의 메타 및 링크 태그)를 정의하는 데 사용할 수 있는 메타데이터 API가 있습니다. 앱에 메타테이더를 추가하는 데는 두 가지 방법이 존재합니다.Config-based : layout.js 또는 page.js 파일에서 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 export 해주기File-based : Next.js는 메타데이터를 명시하기 위한 일..

Github 계정에 로그인하고 Add Project를 클릭하면 빌드 가능한 프로젝트들이 나와있습니다.현재 빌드하려고 하는 프로젝트가 목록에 없는 상황입니다.  1. 우선, 프로젝트 검색창에 아무 값이나 입력해 주세요 저는 프로젝트 명의 일부분인 flaw라고 입력했습니다.  2. Configure GitHub App 버튼을 클릭하세요.  3. Github 계정 옆에 Configure을 클릭하세요.  4. 스크롤을 내려서 Select repositories에서 빌드할 프로젝트를 선택합니다.