개발 🐾

최종 프로젝트 핵심 기능 분석을 통해 정해진 주제는 '사람 별 일정 관리 서비스'핵심되는 기능 중 '캘린더'를 구현하게 되었다.캘린더를 구현하는 방법은 라이브러리와 직접 구현하기 로 나눌 수 있다.  캘린더 구현 방법 2가지 비교라이브러리는 비교적 쉽고 빠르게 구현이 가능하지만 커스터마이징이 어렵다.직접 구현하는 방법은 커스터마이징이 자유롭지만 구현이 오래 걸린다. 캘린더 라이브러리와 직접 구현하는 방식을 비교해보았다. 시간 안에 진행해야 하는 협업 프로젝트이기에 라이브러리를 사용하기로 만장일치 !  캘린더 라이브러리 비교아래는 공식 문서에서 볼 수 있는 달력들이다.더보기1. Toast UI Calendar 2. React-Calendar 3. React-Big- Calendar 4. FullCalend..

최종 프로젝트 시작 단계에서 주제와 페이지 구성, 유저플로우 등 얼추 가닥이 정해졌다.디자이너분과 미팅을 앞두고 정리해 본 핵심 기능을 기록한다.3조 노션 링크3조 피그젬 링크 우리 조의 주제는 '사람 별 일정 관리 서비스' 에서 시작되었다.개인이 사용하는 페이지이며 (추후 소셜 서비스로 확장 가능성 다분)사용자가 주변 사람들을 추가하고 그 사람과의 일정을 정리, 기록한다는 점에서 일반 일정 관리 서비스와는 차별점을 두고 있다. 보통 일정 관리는 모바일에서 주로 사용하지만, 웹 개발을 주로 배운 우리는 pc를 우선으로 개발, 추후 반응형/적응형을 고려하여 모바일에서도 사용 가능하도록 이야기 나누었다.   MVP 구현범위 설정 및 핵심 기능 MVP(최소 필수 기능)는 아래 그림 중 빨간색으로 표시하였으며약..

zustand와 supabase를 활용해서 로그인 토큰 유효성 검증을 하려고 한다.로그인 토큰 유효성 검증이 무엇일까?로그인 토큰 유효성 검증이란? 📌사용자가 보유한 인증 토큰이 유효한지 확인하는 과정즉, 사용자가 로그인 상태를 유지하고 있는지 확인하는 역할이다.Supabase에서는 auth.getSession() 또는 auth.refreshSession()을 이용해서 토큰을 검증할 수 있다. 로그인 토큰 검증 로직 흐름 📍로그인 과정사용자가 이메일과 비밀번호를 입력하여 로그인 요청을 보냄supabase.auth.signInWithPassword()를 통해 인증 (비밀번호를 통해 사용자 인증하는 방식)인증이 성공하면 엑세스 토큰(Access Token)과 리프레시 토큰(Refresh Token) 이 ..

페이지네이션(1)에서 잘못된 searchParams의 사용으로 API 엔드포인트가 아닌 현재 페이지에 접근했다. [NEXTFLIX_Day3] 페이지네이션(1) - 기능 파악카테고리별 영화 상세페이지에서 페이지네이션을 구현하려고 한다.추후에 어떻게 활용될지 모르니, 기능을 구현하기까지의 트러블 슈팅을 자세히 기록하고자 한다.이번 글에는 잘못된 방향성coco910.tistory.com 구현하고자 하는 방향에 맞는 방법인 '동적 라우트 구조'를 적용하며 작동 방식을 함께 정리해보고자 한다.추가로 페이지와 버튼의 로직을 살펴보며 동작 흐름도 파악해본다.페이지네이션 버튼의 기능다시 짚어보는 버튼의 기능기능 1 : Page = 1 기본값기능 2 : 버튼 클릭 마다 -1 / +1기능 3 : 첫 페이지 : ‘이전’ 버..

카테고리별 영화 상세페이지에서 페이지네이션을 구현하려고 한다.추후에 어떻게 활용될지 모르니, 기능을 구현하기까지의 트러블 슈팅을 자세히 기록하고자 한다.이번 글에는 잘못된 방향성으로 구현했을 때의 문제점을 기록했으며 최종 방법은 2편에서 확인할 수 있다.  [NEXTFLIX_Day3] 페이지네이션(2) - 동적 라우팅 작동 방식페이지네이션(1)에서 잘못된 searchParams의 사용으로 API 엔드포인트가 아닌 현재 페이지에 접근했다. [NEXTFLIX_Day3] 페이지네이션(1) - 기능 파악카테고리별 영화 상세페이지에서 페이지네이션을 구coco910.tistory.com 페이지네이션이란?콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소  페이지네이..

지난 개인 과제부터 너무 헷갈리는 라우트 핸들러, 서버 액션더보기[기존 지식]라우트 핸들러는 주로 클라이언트 컴포넌트에서 사용하며 GET, POST 등을 이용해서 서버로 요청을 보내고,나의 로컬호스트 서버로 응답을 준다. 서버 액션은 주로 서버 컴포넌트에서 사용하며 비동기 함수를 통해 요청하고 응답을 받는다.정도로 알고 있었다. 둘의 차이점은 응답을 사용하는 부분에 있다고 생각했다.라우트 핸들러 : 핸들러 -> 내 서버 함수 -> 실제 사용서버 액션 : 함수 -> 실제 사용둘의 특징을 확실히 비교해보고자 한다.Route Handler// app/api/hello/route.tsimport { NextResponse } from "next/server";// 1. GET 요청을 처리하는 핸들러export ..

2025.03.21(금) Task팀 회의- ERD : 페이지 구조화- supabase DB 설정- 프로젝트 셋업- 역할 나누기 개인 기능 구현- 초기 설정- 기능 파악 및 구현  팀 회의 ERD : 페이지 구조화📍인증 / 인가 방법 : 비회원 익명제 - 홍*동, 댓글 작성 시 비밀번호 설정📍CUD : 영화 상세 페이지 댓글 작성, 수정, 삭제📍와이어프레임을 통해서 페이지 다시 정하기📍페이지 구조 정하기📍필수 기능 체크  supabase DB 설정📍팀원 초대📍comments 테이블 설정id : uuidcreated_at : timestamptzname : varcharpassword : varcharcontent : varcharmovie_id : int8  프로젝트 셋업📍Next.js 설치..

Tanstack Query + Context API + Zustand로 전역 상태 관리하기  *Context API : 상태를 전역으로 공유 4주차 숙제 🤔 Tanstack Query + Zustand 왜 같이 쓸까?탠스택은 서버 상태를 가져오고 캐싱한다.주스탠스는 클라이언트 상태 관리를 간편하게 할 수 있다.둘을 함께 사용하면, 서버 상태를 클라이언트 상태로 동기화하는 패턴을 만들 수 있다. 숙제 수행 단계 1.  RQProvider.tsx 에서 서버/브라우저 각각 새로운 쿼리 클라이언트 생성더보기"use client";import { isServer, QueryClient, QueryClientProvider,} from "@tanstack/react-query";function makeQue..

Next.js는 웹을 만들기 때문에 웹 서버를 실행할 수 있는 프레임워크이다.그렇다면 Next에서의 '웹 서버'란 무엇일까? React의 웹 서버의 역할은 빌드 시점에 빈 html(id가 root인 빈 div태그)과 JS 번들 파일을 제공한다.그것을 받은 브라우저는 알아서 JS를 해석하여 빈 태그에 JS 파일들을 바꿔 끼우는 형식으로 페이지를 구성한다.브라우저는 빈 html을 받았기 때문에 JS를 인식할 때까지 시간이 걸릴 수 밖에 없다. 즉, TTV가 길다.클라이언트 사이드 렌더링(CSR)이 바로 이러한 방식이다. Next.js의 웹 서버의 역할은 빌드 시점(SSG)과 요청 시점(SSR)에 HTML을 생성하고 API 라우트를 통한 데이터를 제공한다.나누자면 html은 프론트엔드, API를 제공하는 건 ..

👾 LoL info App 메인 화면 및 작동 영상   Github 링크 : https://github.com/JinchaeKim/lol-info-app.git배포 링크 : https://lol-info-app-git-main-jinchaes-projects.vercel.app🖥️ 프로젝트 소개LoL의 아이템, 챔피언, 챔피언 로테이션 등 다양한 데이터를 조회하는 페이지입니다.TypeScript를 활용하여 타입 선언, useState에서 제네릭을 사용하였습니다.Next.js를 활용하여 동적 라우팅, App Router, 레이아웃 구성, Route Handler를 다루었습니다.Riot Games의 API와 Data Dragon를 활용하여 LoL의 다양한 정보를 나타냅니다. 🕰️ 개발 기간2025 / ..