[인프런 워밍업 클럽 Full-Stack 3기] 4주차 발자국 - 인스타그램 클론코딩

이번주는 강의 볼륨이 제일 많았던 인스타그램 클론코딩을 진행했다. 로그인, 회원가입을 위한 Supabase Auth와 실시간 채팅을 구현하기 위한 Supabase Realtime Database 배포까지 구현해볼 수 있었다. 이번시간엔 거의 다른 주차에 비해 2배정도 되는? 양인거 같아 월요일부터 틈틈히 해서 겨우 시간을 맞출 수 있었다. 수강 내용Section 6 인스타그램 클론코딩 - Supabase 인증 구현 Part 1이번 챕터에서는 Supabase 인증 시스템을 구현해보는 것이었다. 다음과 같은 기능을 구현했다.이메일 인증을 통한 회원가입OTP 인증을 통한 회원가입로그인(추가) 카카오 소셜 로그인이는 Supabase Auth를 통해 구현했다. 강의에서는 위의 내용들만 구현했지만 Supabase Auth에는 더 다양한 기능들을 제공하고있었다. JWTSession 등을 지원하기도했고, 권한관리 등도 제공했다.그리고 강의를 들으면서 느꼈던 것이지만 React Query를 잘 사용하셔서 React Query의 활용성에 대해서도 한번 더 성장한다는 느낌을 받았다.Section 7 인스타그램 클론코딩 - 인스타 DM 채팅 기능 구현 Part 2인증 기능을 모두 마친 뒤에는 실시간 채팅 기능을 구현했다. 이 시간에 Supabase Realtime Database를 학습할 수 있었다. 사실 그냥 Database랑 어떤 차이인지는.. 잘 모르겠지만 해당 기능을 켰을 때 실시간으로 채팅 기능을 수현할 수 있었다. 이때에도 React Query를 이용해 데이터를 캐싱하고 다시 불러오는 작업을 함으로써 좀 더 효율적으로 Supabase Table 데이터들을 관리할 수 있었다. 그리고 전에도 얘기했던것이지만 Database라서 그런지 메서드 자체가 SQL문을 그대로 가져와서 학부시절 DB를 배워놨었던 부분이 이해하기도, 적응하기에도 좀 더 편했었다.export async function getAllMessages({ chatUserId }: { chatUserId: string }) { const supabase = await createServerSupabaseAdminClient(); const { data, error } = await supabase.auth.getSession(); if (error && !data?.session) { throw new Error("User is not authenticated"); } const { data: messages, error: messagesError } = await supabase .from("message") .select("*") .or(`receiver.eq.${chatUserId},receiver.eq.${data?.session?.user.id}`) .or(`sender.eq.${chatUserId},sender.eq.${data?.session?.user.id}`) .order("created_at", { ascending: true }); if (messagesError) { throw new Error("Failed to get messages"); } return messages; } const { data: messages, error: messagesError, isLoading: messagesLoading, refetch, } = useQuery({ queryKey: ["messages", selectedIndexState], queryFn: async () => { const allMessages = await getAllMessages({ chatUserId: selectedIndexState, }); return allMessages; }, });useEffect(() => { const channel = supabase .channel("message_postgres_changes") .on( "postgres_changes", { event: "INSERT", schema: "public", table: "message", }, (payload) => { console.log(payload); } ) .subscribe(); return () => { channel.unsubscribe(); }; }, []);그리고 메시지를 주고받고 한 다음 채팅을 그냥 보여주기만 하면 실시간으로 동기화가 안된다는 문제점이 있어 (새로고침을 해야 보여진다.) 그 때를 위한 동기화 작업을 supabase channel기능을 사용했다.Section 8 웹사이트 배포하기 - 도메인 등록, Vercel, AWS 배포Vercel 배포같은 경우는 개인적으로 포트폴리오 배포할 때 유용하게 사용했었고 AWS배포도 한번쯤은 해보는것이 좋다고 해서 해본적이 있어서 좀 가볍게 들었다. 그리고 배포 시 빌드 에러를 최소화하기 위해 항상 push하기 전에 build한번 하고 push를 해서 빌드 오류도 없이 무난하게 모든 프로젝트를 배포할 수 있었다.미션4주차 미션은 다음과 같았다.작성한 모든 프로젝트 배포하기채팅 메시지 삭제 기능 구현채팅 읽음, 안읽음 표시 기능 구현삭제기능, 읽음/안읽음 표시 기능을 위해 supabase data table에 is_readis_deleted 항목을 추가하고 각 항목들을 update하는식으로 구현했다. 그리고 동기화를 위해 channel에 update 항목을 추가해주는걸로. 인터넷에서 찾아보니 *을 이요해 모든 이벤트 INSERTDELETEUPDATE 등을 포함할 수 있다고 했지만 그냥 업데이트만 하나 추가해주었다. ui는 그렇다 치고.. 일단 삭제 기능이랑 읽음 기능까지는 구현해봤다.마무리인스타그램 클론코딩을 끝으로 이렇게 4주간의 대장정이 마무리가됬다. Supabase 프로젝트 한번 해보겠다고 들을까 말까 했던 강의였는데 이렇게 다같이 스터디할 수 있는 기회가 생겨서 나 혼자 했으면 흐지부지 되었을텐데 이렇게 끝까지 완강할 수 있어서 개인적으로 뜻깊었던 스터디 기간이었다.강의 내용도 부실하지 않고 적당히 그리고 자세하게 알려주셔서 내용을 이해하기도 쉬웠다. 또한 Supabase 자체에 국한되지 않고 Next.js나 React Query같은 프론트엔드 지식도 함께 쌓아 더 괜찮은 시간이었다. 지금 이 토대를 기반으로 다음에 할 Supabase를 통한 개인 프로젝트도 화이팅해야겠다!

[인프런 워밍업 클럽 Full-Stack 3기] 3주차 발자국 - Netflix 클론코딩

이번주는 Netflix 클론코딩에 관한 내용이었다. Netflix 클론코딩이라던지 무한스크롤 구현이라던지 하는 내용은 이전에도 다른 강의에서 자주 나왔던 항목이어서 그런지 들을 때 좀 가볍게 들었던 것 같다. 다음 주에 있는 인스타그램 클론코딩의 강의+과제 볼륨이 거의 2주치가 되어서 이번주는 쉬어가는 듯 가볍게 듣고 다음 챕터 강의에 집중하려했다.이번 강의의 핵심은 supabase table에서 데이터 가져오기, 무한 스크롤 구현, SEO 최적화하기였다. 수강 내용Section 5. Netflix 클론코딩 - 영화검색 서비스 제작하기이번 챕터에선 Netflix 클론코딩을했다. 어느 때와 마찬가지로 tmdb에서 데이터를 가져와 영화를 뿌려주고, 해당 영화에 대한 정보를 보여주는 것이었다. 기술 스택은 지난번과 마찬가지로 Next.js, tailwind css를 기반으로했고 이번 프로젝트에서는 특히 상태관리가 필요해 zustand 라이브러리를 선택했다. 강의에서는 recoil을 사용했지만 리코일의경우 Next.js 15버전과 호환이 잘 되지 않기도 하고 평소에 가벼운 zustand를 자주 사용해서 해당 라이브러리로 상태관리를 진행했다.영화 목록 전체 불러오기우선 영화 데이터는 강의에서 준비해서 supabase 테이블에 모두 넣고 해당 테이블의 데이터들을 모두 불러오는 코드를 작성했다. const { data, error } = await supabase .from("movie") .select("*")검색 기능 추가하기위에서 말한 상태관리 라이브러리는 이 검색 기능을 활용하기 위해 사용한다. Header 컴포넌트에 있는 SearchInput 에서 검색을 하면 다른 곳에서도 해당 검색어를 사용하기 위해 검색어를 전역 변수로 지정했다.const { data, error } = await supabase .from("movie") .select("*") .like("title", `%${search}%`)search 키워드를 받아와 supabase table 내 title 컬럼에서 search 키워드가 포함된 항목들을 검색한다. 보면서 느끼는건데 확실히 SQL을 알고있으면 이런 키워드를 이해하는 데 좀 더 쉬운거같단 생각이 든다. table이라 그런지 다 SQL문법 사용하네.. 아무튼 이렇게 하면 supabase table에서도 검색어를 손쉽게 찾을 수 있다.무한 스크롤 구현무한 스크롤 구현하는 방법은 매우 다양하다. intersection observer을 사용한다던지.. 이번 강의에서는 가볍게 tanstack-query와 react-intersection-observer 라이브러리를 통해 무한 스크롤을 구현했다.const { ref, inView } = useInView({ threshold: 0 });위는 react-intersection-observer에서 사용하는 hooks이다.ref : 참조할 요소를 지정한다. inView : 요소를 불러와야 할 경우를 true false로 판별한다.threshold : 얼만큼 겹쳤을 경우 inView를 변경할 지 설정한다.이를 통해 데이터를 불러오는 곳 하단에 을 작성하면 하단에 닿았을 경우의 트리거가 완성된다. 그리고 그 다음에는 tanstack-query에 있는 useInfiniteQuery를 사용한다.const { data, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage } = useInfiniteQuery({ initialPageParam: 1, queryKey: ["movie", keyword], queryFn: ({ pageParam }) => searchMovies({ search: keyword, page: pageParam, pageSize: 12 }), getNextPageParam: (lastPage, allPages) => { return lastPage.page ? lastPage.page + 1 : undefined; }, });대충 이런식으로.. useQuery랑은 비슷하지만 hasNextPage, fetNextPage등 무한 스크롤 구현에 유용한 기능들이 포함되어있다. 강의를 들으면 깔끔하게 무한 스크롤까지 구현이 가능해진다.SEO (Next.js generateMetadata)Next.js에서는 동적으로 metadata를 생성해주는 기능을 제공한다. dynamic page같은 경우 각 페이지별로 메타데이터를 설정해주려고 하면 예를들어 id를 1, 2, 3 이렇게 다 따로 만들 수 없으니 이 때 generateMetadata를 사용하면 된다.export async function generateMetadata({ params }: any) { // Next.js에서는 params를 await 해야 함 const { id } = await params; const movie = await getMovie(Number(id)); return { title: movie?.title, description: movie?.overview, openGraph: { images: [movie?.image_url], }, }; }강의에서는 Next.js 14 버전이라 별 문제가 없었지만 나는 Next.js 15 버전을 사용해서 params를 가져올 때 async-await을 사용해서 가져왔다. 15버전에서 그냥 가져오면 동작은 하지만 에러가 발생한다. 이렇게까지 하면 가볍게 Netflix 클론코딩은 클리어. 미션3주차미션은 "찜하기" 기능을 구현하는 것이다. 유저 정보도 아직 없고 어떻게 구현할까 하다가 역시 로컬에 저장하는건 localstorage가 답이다 생각했다. 하지만 Next.js 는 SSR이라 localstorage를 그저 React처럼 사용한다면 기능이 정상적으로 동작하지 않는다. 따라서 zustand의 persist를 통해 로컬스토리지에 데이터를 쉽게 사용할 수 있도록 구현했다.마무리 이번주도 주말까지 무사히 일정을 잘 맞췄다. 몇번 했던 기술들이었지만 한번 더 복습 겸 꼼꼼히 들었다. 예전에는 javascript api 중 intersection observer을 이용해 무한스크롤을 깡으로 구현했었는데 확실히 라이브러리를 통해 구현하니까 많이 간편했다. 다음 인스타 클론코딩은 거의 2주치 분량이던데 다음주는 진짜 미리미리 듣고 추가미션까지 해낼 수 있도록 노력해야겠다. 마지막 4주차도 화이팅!

[인프런 워밍업 클럽 Full-Stack 3기] 2주차 발자국 - Dropbox 구현

이번주에 배운 내용은 Storage를 통해 Image를 CRUD 하는 기능이다. 이 강의를 들은 다음 추후 Next.js + Supabase 스택으로 블로그를 만들 생각이었어서 그 때 Supabase Storage를 사용할거라 좀 더 유심히 들었다.이번 Dropbox 프로젝트에서는 지난 TodoList 프로젝트를 했을 때 개인적으로 Meterial UI Tailwind를 사용할 때 마음에 들지 않았던 부분들이 있어서 한번 써보고 싶기도 했던 Shadcn/ui를 통해 css를 구현해봤다.수강 내용Section 4. Dropbox 클론코딩이번 섹션에서 배운 내용들은 다음과 같다.Storage 설정 (Bucket 생성 및 Policy 설정)파일 업로드, 검색, 수정, 삭제 기능드래그 앤 드롭을 통한 파일 업로드 기능 추가주로 이제 스토리지에 어떻게 접근해 파일들을 제어할 것인지가 핵심 내용이었다.export async function uploadFile(formData: FormData) { const supabase = await createServerSupabaseClient(); const file = formData.get("file") as File; const { data, error } = await supabase.storage .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!) .upload(file.name, file, { upsert: true }); handleError(error); return data; }예를들어 다음과 같은 코드는 파일을 업로드할 때 사용하는 코드이다. upsert를 통해 insert + update 기능으로 같은 이름이 있다면 자동으로 수정해주는 기능이 있다는 것도 처음 알게 된 사실이다.프로젝트에서 한가지 아쉬운 점이 있었다면 파일을 검색할 때 예를들어 A 를 검색했다면 A 로 시작하는 파일 이름만 검색된다는 점이었다. 따라서 이 부분을 개인적으로 한번 수정해보기도 했다.export async function searchFiles(keyword: string = "") { const supabase = await createServerSupabaseClient(); const { data, error } = await supabase.storage .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!) .list(); // 전체 파일 목록 가져오기 handleError(error); return data ? data.filter((file) => file.name.includes(keyword)) : []; }다음과 같이 keyword를 받아오면 supabase storage의 전체 파일 리스트들을 가져오고, 그 안에서 filter을 통해 keyword가 포함된 데이터들만 표시되도록 구현해봤다. 이렇게 하면 검색 키워드가 포함된 파일 이름들은 모두 나타나게 된다. 드래그 앤 드랍 기능도 구현했는데 이는 react-dropzone 라이브러리를 사용했다.const onDrop = useCallback((acceptedFiles: File[]) => { // Do something with the files }, []); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });npm에 적혀있는 공식 사용법인데, 기존에 사용했던 form을 삭제하고 div로 바꾼 다음 div와 input에 getRootProps getInputProps를 넣고 각각에 적절한 로직들을 넣어주면 드래그 앤 드랍을 통한 파일 업로드 기능도 정상적으로 이루어진다.미션미션은 마지막으로 업데이트 된 날짜를 이미지 카드에 표시해주는 내용이었다. supabase에서 이미지 리스트들을 불러오면 각각의 이미지들은 다음과 같은 구조를 띈다.따라서 lastModified 나 updated_at을 작성해주면 된다. (둘이 무슨 차이가 있는지 잘 모르겠다.....) 날짜 포맷은 지난 Todolist때 사용했던 것 그대로 사용했다. :)결과 화면은 다음과 같다.마무리파일 업로드를 Supabase에 어떤 방식으로 해야할 지 알게 된 시간이었다. 그리고 지난번 기초를 잘 잡아두니 (초기 세팅 등) 별다른 불편함 없이 프로젝트를 새로 시작할 수 있어서 역시 초기 세팅이 중요하다 생각됬다. 또한 강의만 따라 듣는 것이 아닌 부족한 점을 개선하고 내 방식을 추가해서 작업했다는 점도 고무적이었다.다음 프로젝트는 Netflix 프로젝트인데 사실 넷플릭스 프로젝트는.. 다른 강의에서도 몇번 해봤던 내용이지만 특히 그 중 기대하는 점은 SEO에 관한 내용이 있다는 것이었다. Next.js를 사용하는 큰 이유 중 하나가 바로 SEO 관련인데 이 부분에 대해 어떤 내용일지가 궁금하다. 예를 들어 Next.js는 자체적으로 sitemap이나 robots.txt 기능을 제공한다는 점과 강의에서도 말씀해주셧든 page.tsx가 서버 컴포넌트여야 하는 이유 등 어떻게하면 Next.js만이 가지는 장점을 최대한 효율적으로 활용하면서 프로젝트를 만들 수 있을지 기대가 된다.

[인프런 워밍업 클럽 Full-Stack 3기] 1주차 발자국 - TODO List 구현

이제 막 3개월차에 들어가는 새내기 개발자. 일을 다니면서 퇴근 후 개인공부 또는 개발을 하며 멋있는 삶을 보내는 나날을 상상했지만 현실은 퇴근하면 누워있기 바쁜 그런 회사원A. 그러던 차에 인프런에서 스터디를 한다는 소식을 들었다.이런 프로젝트가 있다는 것은 이미 알고 있었지만, 이전에는 이미 들은 강의이거나 기술이 맞지 않아 참여를 하지 않았었는데 마침 관심있던 Supabase와 요즘 실무에서도 사용중인 Next.js를 결합한 프로젝트 강의라니! 심지어 할인된 가격에! 이건 안할 수 없겠다 싶어서 바로 신청했다. 솔직히 사놓고 안듣고있는 강의가 넘치는데 이런 프로그램에라도 참여해야 강의를 완강할 수 있겠다 싶은 생각도 있긴했다. ㅠㅠ 수강 내용Section 1, 2 : OT 및 기술 소개Section 1과 2에선 전체 프로젝트에 대한 소개와 사용 기술에 대한 설명이 주를 이뤘다.이번 강의로 다음과 같은 기술 스택들을 배울 수 있다고 했다.Supabase에서는 Storage, Database, Auth, Realtime 등 Next.js 14, Typescript, Tailwind CSS, Meterial UI Tailwind, Recoil, Tanstack QueryAWS, Vercel, GoDaddy(Domain) 확실히 기존에 개인 프로젝트를 할 때 Firebase를 사용했었는데 Firebase같은 경우는 나온지 오래되서 그런지 레퍼런스들이 굉장히 많았다면 Supabase는 그런 점이 좀 부족하다 생각했었는데 강의로 그런 부분들을 채울 수 있어서 좋았다. 실제로 혼자 한번 Supabase를 설정하려고 했었는데 안되서 한참 찾아봤던 문제를 강의에서 짚어주신 부분도 있었다.강의에서도 좀 중요하게 강조했던 부분이 있다면 Tanstack Query가 아닐 까 싶다. 사실 좋다 좋다 해서 사용하지 왜 좋은지 왜 사용하는지 잘 알지 못하고 썼었는데 이번 기회에 왜 사용하는지, 어떻게 사용하는지 좀 더 잘 알게 된 것 같아서 나중에 효율적으로 사용할 수 있을 것 같다는 생각이 들었다.Tanstack Query (React Query)서버와 통신할 때 관리해야 하는 상태들이 많이 다양한데, 이런 상태 관리를 클라이언트에서 사용하는 데 도움을 주는 라이브러리.fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리캐싱 : 캐싱을 통해 동일한 데이터에 대한 반복적인 비동기 데이터 호출을 방지하고, 불필요한 API 콜을 줄여 서버에 대한 부하를 줄이는 결과를 갖는다.Client 데이터와 Server 데이터 간의 분리 : 프로젝트 규모가 커지고 관리해야 할 데이터가 넘치다보면 클라이언트에서 관리하는 데이터와 서버에서 관리하는 데이터가 분리될 필요성을 느낀다.서버에서 가져오는 데이터 : react-query 클라이언트에서 관리하는 데이터 : recoil, zustand ...useQuery : 데이터를 가져오는 작업에 사용useMutation : 데이터를 변경하는 작업(PUT, POST, DELETE)에 사용queryClient.invalidateQueries : queryClient를 사용해 쿼리 요청을 다시 진행할 수 있다. (다른 곳에서 refetch를 진행하기 위함Section 3. TODO LIST 만들기(UI 구현은 블로그 글로는 생략...)본격적으로 프로젝트를 만들어보는 시간이다. Supabase에는 Table Editor, SQL Editor, Database, Authentication, Storage 등 어떤 기능들이 있는지 각각 자세하게 설명해주셨다.그리고 Supabase를 사용하기 위한 환경변수를 설정하고, Supabase Database를 사용할 때 쉽게 types를 추가하기 위해 script를 추가했는데 처음엔 몰랐는데 나중에 미션을 진행하다보니 자동으로 supabase에 있는 table에 대한 타입을 추가해준다는게 굉장히 편리했다."scripts": { // dev, build, start, lint "generate-types": "npx supabase gen types typescript --project-id [project_id] --schema public > types_db.ts" }그리고 이제 Supabase 사용하기 위한 client server middleware 설정도 진행했다. 혼자 공식문서를 봤으면 한참 해멨을 텐데 간단하게 설정이 완료됬다. 이 부분은 나중에 supabase로 개인 프로젝트를 진행할 때 요긴하게 사용할 듯.이제 Next.js Server Action을 구현했다.server action : api 구현 없이 함수 호출만으로도 api를 대신할 수 있는 기능getTodo, createTodo, updateTodo, deleteTodo를 만들었다. 그 중 getTodo와 createTodo를 보면 다음과 같다.export async function getTodos({ searchInput = "" }): Promise { const supabase = await createServerSupabaseClient(); const { data, error } = await supabase .from("todo") .select("*") .like("title", `%${searchInput}%`) .order("created_at", { ascending: true }); if (error) { handleError(error); } return data; }from : 가져올 Table 선택 select : 가져올 부분 선택like : title에 searchInput이 앞뒤로 들어가 있는 부분이 있다면 모두 가져온다.order : 정렬export async function createTodo(todo: TodoRowInsert) { const supabase = await createServerSupabaseClient(); const { data, error } = await supabase.from("todo").insert({ ...todo, created_at: new Date().toISOString(), }); if (error) { handleError(error); } return data; }created_at : 사용자가 잘못 입력할 수도 있어 데이터가 생성될 때 서버에서 자동으로 날짜가 생성되도록 구현actions들도 모두 구현했으니 이제 DOM에 이벤트를 달아줄 일만 남았다. 위에서 Tanstack Query를 사용하는 방법을 배웠듯 서버에서 데이터를 가져오는 것은 useQuery를 사용하고 데이터를 생성, 수정, 삭제하는 부분은 useMutation을 사용해 구현할 것이다.const { data, isLoading, refetch } = useQuery({ queryKey: ["todos"], queryFn: () => getTodos({ searchInput }), });const { mutate, isPending } = useMutation({ mutationKey: ["todos"], mutationFn: () => createTodo({ title: "New Todo", completed: false, }), onSuccess: () => refetch(), });useQuery useMutation을 담당하는 부분들의 일부를 한번 가져왔다. 이렇게 데이터를 get 할 때는 useQuery 그리고 create 등을 할 때 useMutation을 사용했다.강의를 모두 마치면 CRUD 기능을 모두 할 수 있는 TODO List가 완성된다.미션1주차 미션은 "생성 시간과 완료 시간"을 표시하는 것.생성 시간은 이미 존재하므로 완료 시간만 Supabase Todo Table에 completed_at 컬럼을 추가했다. 이 때 아까 위에서 말했듯 generate script를 통해 쉽게 table type을 정의할 수 있어서 간편했다.actions에 updateTodo 부분에 completed_at을 추가하고 todo.completed가 true일 경우 새 날짜를 작성하도록 구현했다.const { data, error } = await supabase .from("todo") .update({ ...todo, updated_at: new Date().toISOString(), completed_at: todo.completed ? new Date().toISOString() : null, }) .eq("id", todo.id ?? 0);그리고 시간을 표시하기위해 Date를 바꾸는 함수를 추가했다. (YYYY-MM-DD HH-MM-SS 형식)export const formatDate = (dateString: string) => { if (!dateString) return ""; const date = new Date(dateString); const formattedDate = date.toLocaleDateString("en-CA"); const formattedTime = date.toLocaleTimeString("en-GB", { hour12: false, }); return `${formattedDate} ${formattedTime}`; // 이부분 ${} 이 연속된 부분인데 현재 코드 블럭에서 이상하게 나온다. };따라서 생성 날짜와 수정된 날짜를 표시하면 다음과 같이 결과물이 완성된다.마무리 직장과 병행하며 프로그램을 수행한다는 것이 조금 어려웠지만 무사히 1주차 미션들을 달성해서 뿌듯하다. 혼자라면 중간에 포기하거나 조금 루즈해지거나 했을텐데 다들 열심히 사는 것 같아 나도 뒤쳐지지 않도록 노력했다.개인적으로 이번 강의를 모두 마치고 목표가 있다면 Supabase + Next.js를 통해 나만의 블로그를 만드는 것. 강의를 들으면서 나중에 이 기능은 어떻게 활용하면 좋겠다라는 상상도 해보고 하는 시간들이 즐거웠다. 또 강사님께서 차근차근 친절히 알려주셔서 더 쉽게 학습됬었던 듯 하다. 개인적으로 supabase이외에도 react query를 좀 더 상세하게 알 수 있었던 시간이라 (위에서도 말했듯 이전에 사용할 때에는 그냥 좋다니까 썼지 제대로 쓴다는 느낌은 받지 못했다) 굳이 fullstack 스택이 아니더라도 front-end 개발자 입장에서도 한단계 스킬 업한 느낌이었다.앞으로 3, 4주차에 좀 타이트하게 진행된다고 했는데 이번주는 스케쥴에 딱 맞게 진행해서.. 다음주에는 조금 더 신경써서 시간을 할애해봐야겠다. 스터디원들 모두 화이팅...! ❣