[인프런 워밍업 스터디 클럽 3기 풀스택] 3주차 발자국

학습 내용인프런 워밍업 클럽 스터디 3주차로,이번 주는 넷플릭스 프로젝트를 다루는 시간이었다.useInfiniteQuery와 Jotai(recoil 대체 전역상태 라이브러리)를 사용해볼 수 있었다.미션 3 구현 내용과제 구현 저장소Netflix 중 찜하기 관련 기능 포인트 1: favorites 테이블 추가actions/favoriteActions.ts"use server"; import { createServerSupabaseClient, handleError, PostgrestError, } from "@next-inflearn/supabase"; // Movie 타입 정의 export type Movie = { id: number; image_url: string; overview: string; popularity: number; release_date: string; title: string; vote_average: number; // Movie 타입에 favorites 필드 추가 favorites?: { // optional field로 추가 id: number; } | null; }; // SearchMoviesResponse 타입 정의 export type SearchMoviesResponse = { data: Movie[]; page: number; pageSize: number; hasNextPage: boolean; }; // 에러 케이스를 위한 타입 정의 type SearchMoviesError = { data: never[]; count: number; page: null; pageSize: null; error: PostgrestError; }; // 성공 케이스를 위한 타입 정의 type SearchMoviesSuccess = { data: Movie[]; page: number; pageSize: number; hasNextPage: boolean; }; export async function searchMovies({ search, page, pageSize, }: { search: string; page: number; pageSize: number; }): Promise { const supabase = await createServerSupabaseClient(); // 현재 사용자 정보 가져오기 const { data: { user }, } = await supabase.auth.getUser(); // 쿼리 설정 const query = supabase .from("movie") .select( user ? ` *, favorites!left ( id ) ` : "*", // 로그인하지 않은 경우 favorites 정보를 가져오지 않음 { count: "exact" } ) .ilike("title", `%${search}%`) .order("popularity", { ascending: false }); // 로그인한 경우 현재 사용자의 즐겨찾기만 조회하도록 필터링 if (user) { query.eq("favorites.user_id", user.id); } const { data, count, error } = await query.range( (page - 1) * pageSize, page * pageSize - 1 ); const hasNextPage = count ? count > page * pageSize : false; if (error) { return { data: [], page, pageSize, hasNextPage: false, }; } // 반환된 데이터를 Movie 타입에 맞게 변환 const moviesWithFavorites = (data || []).map((movie: any) => ({ ...movie, favorites: movie.favorites?.[0] || null, // 즐겨찾기 정보 포함 })); return { data: moviesWithFavorites, page, pageSize, hasNextPage, }; } export async function getMovie(id: string) { const supabase = await createServerSupabaseClient(); const { data, error } = await supabase .from("movie") .select("*") .eq("id", id) .maybeSingle(); handleError(error); return data; } 포인트 2: profiles 테이블 추가utils/AuthProvider.tsx"use client"; import { useEffect } from "react"; import { createBrowserSupabaseClient } from "@next-inflearn/supabase"; import { useSetAtom } from "jotai"; import { userAtom } from "@/utils/jotai/atoms"; export function AuthProvider({ children }: { children: React.ReactNode }) { const setUser = useSetAtom(userAtom); const supabase = createBrowserSupabaseClient(); useEffect(() => { // 현재 세션 확인 supabase.auth.getSession().then(({ data: { session } }) => { setUser(session?.user ?? null); }); // Auth 상태 변경 구독 const { data: { subscription }, } = supabase.auth.onAuthStateChange((_event, session) => { setUser(session?.user ?? null); }); return () => subscription.unsubscribe(); }, [supabase, setUser]); return children; } 포인트 3: movies / favorites / profiles 테이블 연결favorites 테이블 내 profiles 테이블 내 회고 시간이 부족하다는 핑계로,더 디벨롭할 수 있는 부분이 많음에도 불구하고 생각했던 것들을 다 구현하진 못했던 것 같다.다만, 이렇게 틀을 갖춰놧으니 추후에 추가적인 기능을 정의해서 구현해보기 너무 좋을 것 같다.

[인프런 워밍업 스터디 클럽 3기 풀스택] 2주차 발자국

학습 내용인프런 워밍업 클럽 스터디 2주차로, 이번 주는 드롭 박스 프로젝트와 함께 Supabase의 Storage를 다뤄볼 수 있는 시간이었다. Supbase Storage1. 기본 구성 요소Files: 모든 종류의 미디어 파일 저장 가능 (이미지, GIF, 비디오 등)Folders: 파일을 체계적으로 구성하기 위한 디렉토리 구조Buckets: 파일과 폴더를 담는 최상위 컨테이너 (접근 규칙별로 구분)2. 접근 제어 모델Private Buckets (기본값) RLS(Row Level Security) 정책을 통한 접근 제어JWT 인증 필요Signed URL을 통한 임시 접근 가능Public Buckets파일 조회 시 접근 제어 없음URL만 있으면 누구나 접근 가능업로드/삭제 등 다른 작업은 여전히 접근 제어 적용3. 보안 기능RLS 정책 설정 가능SELECT (다운로드)INSERT (업로드)UPDATE (수정)DELETE (삭제)소유권 관리owner_id 필드로 리소스 소유자 추적JWT의 sub claim 기반 소유권 할당4. 이미지 변환 기능 (Pro Plan 이상)실시간 이미지 최적화크기 조정품질 조정 (20-100)WebP 자동 최적화변환 옵션resize 모드: cover, contain, fillwidth/height 지정 (1-2500px)최대 파일 크기: 25MB최대 해상도: 50MP5. 인증 방식S3 액세스 키서버 사이드 전용모든 버킷에 대한 완전한 접근 권한세션 토큰클라이언트 사이드 사용 가능RLS 정책 기반 제한된 접근6. 통합 기능Next.js 이미지 로더 지원AWS S3 호환성PostgreSQL DB와 연동7. 제한사항파일명은 AWS S3 명명 규칙 준수 필요HTML 파일은 보안상 plain text로 반환이미지 변환 기능은 Pro Plan 이상에서만 사용 가능미션 2 구현 내용과제 구현 저장소Dropbox 중파일의 마지막 수정(업로드) 시간을 표시하는 기능 추가 하기 export interface FileObject { name: string bucket_id: string owner: string id: string updated_at: string created_at: string last_accessed_at: string metadata: Record buckets: Bucket }=> DropboxImage 컴포넌트가 prop으로 받는 image의 타입은 FileObject로 그 중 업로드시간은 created_at을 의미하기에 이를 이미지에 추가하였다.(사진 참고) 포인트 1: 한글 파일명 es-hangul 사용// 안전한 파일명 생성을 위한 유틸리티 export class FileNameConverter { // 안전한 문자 패턴 정의 private static readonly SAFE_CHARACTERS = /^[a-zA-Z0-9!\-_.*'()]+$/; private static generateRandomString(length: number = 8): string { const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; return Array.from({ length }, () => chars.charAt(Math.floor(Math.random() * chars.length)) ).join(""); } // 파일명이 안전한 문자들로만 구성되었는지 확인 private static isSafeFileName(name: string): boolean { return this.SAFE_CHARACTERS.test(name); } // 안전하지 않은 문자를 포함한 파일명을 안전한 형식으로 변환 private static convertToSafeFileName(name: string): string { try { // 파일명 정규화 const normalized = name.trim().normalize(); // 한글이나 특수문자가 있는지 확인 const hasKorean = /[ㄱ-ㅎㅏ-ㅣ가-힣]/.test(normalized); const hasSpecialChars = /[^A-Za-z0-9]/.test(normalized); if (!hasKorean && !hasSpecialChars) { return normalized; } // 한글이 있는 경우 로마자로 변환 시도 if (hasKorean) { const romanized = romanize(normalized); if (romanized && romanized !== normalized) { // 로마자 변환 결과에서 안전하지 않은 문자 제거 return romanized.replace(/[^a-zA-Z0-9]/g, "_").toLowerCase(); } } // 변환 실패 시 랜덤 문자열 생성 return this.generateRandomString(); } catch (error) { console.error("Conversion error:", error); return this.generateRandomString(); } } // 원본 파일명을 안전한 형식으로 변환 static encode(fileName: string): string { console.log("Original filename:", fileName); const extension = fileName.split(".").pop() || ""; const nameWithoutExt = fileName.slice(0, fileName.lastIndexOf(".")); const safeName = this.isSafeFileName(nameWithoutExt) ? nameWithoutExt : this.convertToSafeFileName(nameWithoutExt); console.log("Safe filename:", safeName); return `${safeName}_${Date.now()}.${extension}`; } // 파일명에서 타임스탬프 제거하여 원본 이름 추출 static decode(fileName: string): string { const [name] = fileName.split("_"); return name || fileName; } }포인트 2 : 업로드 날짜 표시export function formatDate(timestamp: string): string { const date = new Date(timestamp); const now = new Date(); const diff = now.getTime() - date.getTime(); // 1일 이내 if (diff 회고파일명 변환하는데 생각보다 시간이 많이 소요됐다.여찌저찌 구현은 헀지만, 이미지가 어떻게 encoding되고 decoding되는지 일련의 과정에 대한 공부가 필요함을 느끼는 이번주 였다.

[인프런 워밍업 스터디 클럽 3기 FE] 1주차 발자국

따라하며 배우는 자바스크립트 A-Z미션미션1(Day 2) (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/kelvin-chihyun/inflearn-js-react/tree/main/js/food-menu미션2(Day 3) (가위바위보 앱)깃허브 저장소 주소: https://github.com/kelvin-chihyun/inflearn-js-react/tree/main/js/r-p-s미션3(Day 4) (퀴즈 앱)깃허브 저장소 주소: https://github.com/kelvin-chihyun/inflearn-js-react/tree/main/js/quiz미션4(Day 5-1) (책 리스트 앱)깃허브 저장소 주소: https://github.com/kelvin-chihyun/inflearn-js-react/tree/main/js/book-list미션5(Day 5-2) (깃허브 파인더 앱)깃허브 저장소 주소: https://github.com/kelvin-chihyun/inflearn-js-react/tree/main/js/github-finder회고굉장히 짧은 시간 내에 많은 내용을 독파해야 하는 커리큘럼인 것 같다. 다시 들어야할 부분이 적지 않았다..JS를 어느 정도는 알고 있지만서도, 많은 양을 한꺼번에 다시 보려니까 정말 많은 시간을 들여야했던 것 같다.(남은 3주,, 험난함이 가득한 여정이 예상된다...🥹) FE 워밍업 클럽에서 개인적으로 얻고자 하는 것은, 강의를 듣기 전 보다 조금 더 나아진 기본기이다.(Event Loop, OOP, Design Pattern을 다시 훑고 싶기도 했다.) 리액트 사용에만 익숙해져서 바닐라 자바스크립트로 querySelector나 addEventListner, appenChild, createElement 등의 기본 메서드가내가 알던 게 맞는지 반신반의하며 오랜만에 MDN 공식문서를 순회하기도 했다. 남은 JS도 마무리 잘하고, 이해도가 전보다 높아진 상태에서 React Core에 대한 내용을 깊게 파고 이해하고 싶다.

[인프런 워밍업 스터디 클럽 3기 풀스택] 1주차 발자국

[풀스택 완성] Supbase로 웹사이트 3개 클론하기 (Next.js14)학습 내용 섹션 1. 오리엔테이션 ~ 섹션 3. 연습 프로젝트 - TODO LIST 만들기.이번 주는 라이브러리(or 프레임워크) 간략 소개 및 기본 문법이 주를 이룬다고 할 수 있다.라이브러리 사용법은 공식문서나 강의노트를 참고하면 좋을 것 같고,이 라이브러리(or 프레임워크)를 왜 사용하는 지를 적어두려고 한다. SupabaseSupabase는 위와 같은 장점과 단점을 가진다고 한다. 장점1. 오픈소스 프로젝트 (자체 서버구축 가능)완전한 오픈소스로 제공되어 무료로 사용 가능자체 서버에 직접 설치하고 운영 가능Docker를 통한 쉬운 배포와 구성커뮤니티 기반의 지속적인 발전과 버그 수정기업의 보안 정책에 맞춰 커스터마이징 가능2. PostgreSQL 기반 (관계형 DB 장점을 살릴 수 있다)강력한 PostgreSQL의 모든 기능 사용 가능복잡한 관계형 데이터 모델링 지원트랜잭션 및 ACID 속성 보장강력한 쿼리 최적화와 인덱싱풍부한 데이터 타입과 확장 기능외래 키 제약조건을 통한 데이터 무결성 보장3. Firebase 대비 저렴무료 티어의 관대한 제공사용량 기반의 합리적인 가격 정책자체 호스팅 시 비용 절감 가능예측 가능한 비용 구조과금 체계의 투명성불필요한 기능에 대한 과금 없음4. 다양한 연동방식 지원 (+ GraphQL, API, SDK, DB Connection)RESTful API 자동 생성GraphQL 인터페이스 기본 제공다양한 프로그래밍 언어를 위한 공식 SDK 제공JavaScript/TypeScriptPythonDart/Flutter기타 다양한 언어실시간 데이터 구독 기능직접적인 데이터베이스 연결 지원OAuth 및 소셜 로그인 통합자동 생성된 API 문서 단점. 아직 성숙하지 않은 커뮤니티 기반Firebase 대비 작은 커뮤니티 규모상대적으로 적은 레퍼런스와 예제 코드문제 해결을 위한 자료 부족2. 비교적 적은 기능들, 적은 서비스 연동 지원Firebase 대비 제한된 기능 세트서드파티 서비스 통합 옵션 부족일부 고급 기능 미지원3. 부족한 문서화, 한글 문서 부족불완전하거나 업데이트가 늦은 문서한국어 문서의 절대적 부족일부 기능에 대한 설명 부실4. Firebase보다 높은 러닝커브PostgreSQL 지식 필요초기 설정의 복잡성상대적으로 더 많은 학습 시간 요구Next.js Next.js는 내용이 방대하기에 정리라기보다는 공식문서의 Next.js에 대한 소개로 대체하겠다.Next.js란?풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. React의 기본 기능에 추가적인 최적화와 기능을 제공하며, 개발자가 복잡한 설정 대신 애플리케이션 개발에 집중할 수 있게 해줍니다.주요 기능1. 라우팅 시스템파일 시스템 기반 라우터레이아웃, 중첩 라우팅 지원로딩 상태, 에러 처리 기능2. 렌더링클라이언트/서버 사이드 렌더링정적/동적 렌더링Edge와 Node.js 환경에서의 스트리밍3. 데이터 페칭서버 컴포넌트에서 async/await 사용요청 메모이제이션데이터 캐싱과 재검증4. 스타일링CSS ModulesTailwind CSSCSS-in-JS 지원 5. 최적화이미지 최적화폰트 최적화스크립트 최적화6. TypeScript향상된 타입 체크효율적인 컴파일커스텀 TypeScript 플러그인라우터 종류App Router: 최신 라우터(v13.4.0 이후)서버 컴포넌트스트리밍 지원최신 React 기능 활용Pages Router: 기존 라우터서버 사이드 렌더링기존 프로젝트 지원안정성 검증됨 Tailwindcss유틸리티 우선(utility-first) 방식의 CSS 프레임워크로, 미리 정의된 클래스들을 조합하여 스타일링하는 방식을 제공한다.// 유틸리티 우선 접근 새 메시지 새 메시지 장점빠른 개발: 클래스 이름을 고민할 필요 없음일관성: 미리 정의된 디자인 시스템 제공커스터마이징: 설정 파일을 통한 쉬운 확장번들 크기: 사용한 클래스만 포함되어 최적화됨반응형 디자인: 내장된 반응형 클래스 제공단점긴 클래스명초기 학습 곡선 RecoilFacebook에서 개발한 React 전용 상태 관리 라이브러리(23년 이후로 깃허브 저장소가 업데이트되고 있지 않는 이슈가 있어, 다른 라이브러리가 권장된다...)주요 특징React 전용으로 설계된 상태 관리 도구간단하고 직관적인 API비동기 데이터 처리 지원상태 파생과 캐싱 기능TypeScript 지원1. Atom - 기본 상태 단위// atoms/todoAtom.ts import { atom } from 'recoil'; // 할 일 목록 상태 export const todosState = atom({ key: 'todosState', default: [], }); // 필터 상태 export const todoFilterState = atom({ key: 'todoFilterState', default: 'all', // 'all' | 'completed' | 'uncompleted' });2. Selector - 파생 상태// selectors/todoSelector.ts import { selector } from 'recoil'; import { todosState, todoFilterState } from '../atoms/todoAtom'; export const filteredTodosState = selector({ key: 'filteredTodosState', get: ({get}) => { const filter = get(todoFilterState); const todos = get(todosState); switch (filter) { case 'completed': return todos.filter((todo) => todo.completed); case 'uncompleted': return todos.filter((todo) => !todo.completed); default: return todos; } }, }); export const todoStatsState = selector({ key: 'todoStatsState', get: ({get}) => { const todos = get(todosState); const total = todos.length; const completed = todos.filter((todo) => todo.completed).length; const uncompleted = total - completed; return { total, completed, uncompleted, percentCompleted: total === 0 ? 0 : (completed / total) * 100, }; }, });3. 컴포넌트에서 사용 예시// components/TodoList.tsx import { useRecoilState, useRecoilValue } from 'recoil'; import { todosState, todoFilterState } from '../atoms/todoAtom'; import { filteredTodosState, todoStatsState } from '../selectors/todoSelector'; export function TodoList() { // 상태 읽기와 쓰기가 모두 필요한 경우 const [todos, setTodos] = useRecoilState(todosState); const [filter, setFilter] = useRecoilState(todoFilterState); // 읽기만 필요한 경우 const filteredTodos = useRecoilValue(filteredTodosState); const stats = useRecoilValue(todoStatsState); const addTodo = (text: string) => { setTodos([ ...todos, { id: Date.now(), text, completed: false, }, ]); }; const toggleTodo = (id: number) => { setTodos( todos.map((todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo ) ); }; return ( {/* 필터 컨트롤 */} setFilter(e.target.value)}> 모두 보기 완료된 항목 미완료 항목 {/* 통계 표시 */} 전체: {stats.total} 완료: {stats.completed} 미완료: {stats.uncompleted} 완료율: {stats.percentCompleted.toFixed(1)}% {/* 할 일 목록 */} {filteredTodos.map((todo) => ( toggleTodo(todo.id)} /> {todo.text} ))} ); }React Query(Tanstack Query)서버 상태 관리를 위한 강력한 라이브러리로, 데이터 페칭, 캐싱, 동기화, 업데이트를 효율적으로 처리1. 기본 사용법(Query)// 기본적인 쿼리 사용 function TodoList() { const { data, isLoading, error } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos, }); if (isLoading) return 로딩 중...; if (error) return 에러 발생!; return ( {data.map(todo => ( {todo.title} ))} ); }2. 데이터 변이(Mutation)function AddTodo() { const mutation = useMutation({ mutationFn: (newTodo) => axios.post('/todos', newTodo), onSuccess: () => { // 캐시 무효화 및 쿼리 다시 가져오기 queryClient.invalidateQueries({ queryKey: ['todos'] }); toast.success('할 일이 추가되었습니다!'); }, }); return ( mutation.mutate({ title: '새로운 할 일' })}> 할 일 추가 ); }3. 자동 캐싱 및 재검증// 캐시 시간 및 재시도 설정 const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos, staleTime: 5 * 60 * 1000, // 5분 cacheTime: 30 * 60 * 1000, // 30분 retry: 3, // 실패시 3번 재시도 });4. 의존적 쿼리function UserTodos({ userId }) { // userId가 있을 때만 쿼리 실행 const { data: todos } = useQuery({ queryKey: ['todos', userId], queryFn: () => fetchUserTodos(userId), enabled: !!userId, }); }5. 무한스크롤 / 페이지네이션function InfiniteTodos() { const { data, fetchNextPage, hasNextPage, isFetchingNextPage, } = useInfiniteQuery({ queryKey: ['todos'], queryFn: ({ pageParam = 0 }) => fetchTodoPage(pageParam), getNextPageParam: (lastPage) => lastPage.nextCursor, }); return ( {data.pages.map((page) => ( page.todos.map(todo => ) ))} fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} > {isFetchingNextPage ? '로딩 중...' : hasNextPage ? '더 보기' : '더 이상 없음'} ); }장점자동 캐싱중복 요청 방지 데이터 신선도 관리메모리 효율적 관리서버 상태 동기화백그라운드 업데이트 자동 재시도에러 처리개발자 경험DevTools 제공TypeScript 지원직관적인 API성능 최적화 자동 가비지 컬렉션요청 중복 제거스마트 리페칭단점학습 곡선복잡한 개념들 (staleTime, cacheTime, invalidation 등)최적의 설정을 위한 깊은 이해 필요다양한 옵션들로 인한 초기 진입 장벽번들 크기기본 번들 사이즈가 큰 편 (약 12KB gzipped)작은 프로젝트에서는 과도할 수 있음 보일러플레이트 반복적인 쿼리 설정 코드전역 설정을 위한 추가 코드 필요TypeScript 사용 시 타입 정의 부분이 길어질 수 있음상태 관리 한계 클라이언트 상태 관리에는 부적합서버 상태 전용이라 별도의 상태 관리 도구 필요때로는 다른 상태 관리 라이브러리와 함께 사용해야 함캐시 관리 복잡성 복잡한 캐시 무효화 로직캐시 키 관리의 어려움잘못된 설정 시 메모리 누수 가능성미션 1TODO LIST 중 TODO 항목 옆 생성 시간 표시(선택) completed_at 필드를 추가하여 완료한 시간도 함께 저장1번은 수업중 todo 테이블을 만들었을 때 created_at을 받아와서 배치만 하면 끝이고,2번은 edit table을 해서 completed_at column을 추가하여 배치하면 사실상 끝이었다. 깃허브 저장소: https://github.com/kelvin-chihyun/next-inflearn/tree/main/apps/todo 회고사실 1주차는 맛보기와 같다.Next.js의 기본적인 기능(라우팅, 렌더링, 데이터 페칭 등)에 대해서는 알고 있는 편이라, 복습하는 느낌으로 보았다. 이번 풀스택 워밍업 클럽에서 개인적으로 얻고자 하는 것은 강의 내용은 베이스로 두고, 다른 기술을 사용한다거나 포인트를 두는 것이다.(강사님이 잘 가르쳐주시는 것은 당연하지만, 나 자신이 수동적으로 임하면 제대로 안할 것 같았다.) 이번 주에는 아직 한번도 사용해보지 않고 알고만 있던 Turbo Monorepo로 프로젝트를 구성하는 것을 목표로, TO DO LIST를 만들기보다는 모노레포 구성에서 나오는 여러 경로 인식 에러들을 처리하는 데에 힘을 썼던 것 같다. 배포는 어떻게 해야할지 아직 감도 안잡히지만, 이어지는 프로젝트를 수행하면서 배포도 해보려고한다. 구성 방법에 대해 이해가 된 건 아니지만, 어찌됐든 구성 자체는 의도대로 만들어서 뿌듯한 이번 주였다. (투두리스트의 기능이 다소 없는 것 같아 아쉬운 부분이 있는데, 이 부분은 추후에 디벨롭해보려고 한다.)