[인프런 워밍업 클럽 Full Stack 3기] 스터디 3주차

강의 메모 정리함수와 메서드maybeSingle() vs single()maybeSingle(): 리스트가 아닌 단일 데이터를 가져오는 함수로, null을 반환할 수 있음single(): 단일 데이터를 가져오지만, null일 경우 에러 발생따라서 null 가능성이 있을 때는 maybeSingle()을 사용하는 것이 안전함메타 데이터 처리는 서버 단에서 처리하는 것이 효율적SEO 작업SEO(검색 엔진 최적화) 구성 요소타이틀과 설명(Description)카카오톡 등으로 URL 공유 시 표시되는 정보검색 엔진에 노출되는 중요 정보OG Image메타 태그의 일종소셜 미디어에서 링크 공유 시 표시되는 이미지카카오톡 등에서 웹사이트 공유 시 나타나는 이미지React 관련 기능react-intersection-observer 라이브러리useInView 훅컴포넌트가 화면에 보이는지 여부를 감지threshold 값을 통해 화면에 얼마나 보여야 감지할지 설정 가능반환값: [ref, inView, entry]ref 활용법특정 DOM 요소(예: div)에 ref를 연결하면 해당 요소가 화면에 보이는지 감지 가능주요 사용 사례: 무한 스크롤페이지 하단에 보이지 않는 태그를 배치해당 태그가 화면에 보이는 순간 다음 페이지 데이터 로드useInfiniteQueryReact Query에서 제공하는 무한 스크롤 구현을 위한 훅일반 useQuery보다 무한 스크롤 구현에 적합주요 반환값:data: 모든 페이지 데이터를 포함fetchNextPage: 다음 페이지 데이터 요청 함수hasNextPage: 다음 페이지 존재 여부isFetchingNextPage: 다음 페이지 로딩 상태(isLoading 대체 가능)status: 전체 쿼리 상태사용 시 현재 페이지와 다음 페이지를 합친 전체 상태 값을 data가 관리함미션 수행이번 미션에서는 실습에서 구현한 넷플릭스 클론에서 '찜' 기능을 추가하는 것이 목표였다.

[인프런 워밍업 클럽 Full Stack 3기] 스터디 2주차

미션 수행이번 미션에서는 실습에서 구현한 Dropbox에 마지막 업로드 시간을 표시하는 기능을 추가하는 것이 목표였다.구현 결과각 파일을 표시할 때 아래에 마지막 업로드 시간이 표시되는 것을 확인할 수 있다.2주차 회고2주차에는 중간점검 시간을 가졌다. 수강생들의 다양한 질문과 강사님의 상세한 답변을 통해 많은 것을 배울 수 있었던 유익한 시간이었다.특히, 1주차보다 Supabase의 사용법에 훨씬 익숙해진 것을 느낄 수 있었다. 하지만 여전히 실습 중 오타로 인해 코드가 실행되지 않는 상황이 반복되었다. 결국 깃허브에 제공된 코드나 강의 속 코드를 참고하며 오타를 수정하고 누락된 부분을 채워 넣어야 했다. 이러한 과정에서 실습 코드 오류를 해결하는 데 적지 않은 시간을 쏟게 되었다.자동완성 기능은 매우 편리하지만, 의도치 않은 코드 완성으로 인해 어디서 문제가 발생했는지 찾기가 어려운 경우도 많았다. 이 때문에 앞으로 실습에서는 더욱 신중하게 코드를 작성해야겠다고 다시 한번 다짐했다.이번 주차를 통해 실습 과정에서의 꼼꼼함과 디버깅의 중요성을 다시금 깨달았고, Supabase와 같은 외부 서비스를 활용하는 데 자신감을 조금 더 얻게 되었다.

[인프런 워밍업 클럽 Full Stack 3기] 스터디 1주차

강의 주요 내용 서버 액션: 비동기 함수서버에서 실행되는 함수Next.js는 서버에서 실행되는 서버 컴포넌트와 브라우저에서 실행되는 클라이언트 컴포넌트를 구분하여 동작한다.파일 최상단에 'use server'가 선언되어 있으면 서버 컴포넌트이다.'use client'가 선언되어 있으면 클라이언트 컴포넌트이다.서버 컴포넌트 내에서 정의한 함수를 클라이언트에서 직접 호출할 수 있다. 즉, 별도의 API를 구현하지 않아도 클라이언트에서 서버 함수를 바로 사용할 수 있어 개발이 더욱 간편해진다.Recoil: 전역 상태 관리 라이브러리Recoil이란?Recoil은 클라이언트 상태 관리 라이브러리로, 여러 컴포넌트에서 동일한 상태를 공유할 수 있도록 도와준다. 예를 들어:뷰어 상태 관리헤더 검색창 상태 관리이처럼 다양한 상태를 효율적으로 관리할 수 있으며, Redux나 MobX보다 간편하게 사용할 수 있다.Recoil의 핵심 개념Recoil은 Atom과 Selector라는 두 가지 핵심 개념으로 구성된다.1. Atom전역 상태를 정의하는 가장 기본적인 단위여러 컴포넌트에서 공유 가능2. SelectorAtom 상태에서 파생된 값을 생성할 때 사용특정한 값만 변형하여 제공 가능예: 텍스트 상태에서 문자열 길이만 가져오는 Selector 정의Selector를 활용하면 불필요한 연산을 줄이고 최적화된 방식으로 상태를 관리할 수 있다.React Query: 클라이언트 상태 관리 및 데이터 동기화React Query란?React Query는 TanStack에서 개발한 서버 상태 관리 라이브러리로,서버에서 데이터를 가져오거나데이터를 변경하는 요청을 보낼 때 사용된다.React Query의 역할클라이언트에서 데이터 가져오기(Fetching)가져온 데이터 캐싱(Caching)서버 데이터 변경 시 동기화(Syncing)즉, 서버와 클라이언트 간의 데이터 흐름을 효율적으로 관리할 수 있도록 도와준다.React Query의 주요 장점✅ 자동 캐싱 (Auto Caching)✅ 서버 데이터와 클라이언트 데이터 분리 (Separation of Server & Client State)Supabase 주요 기능1. Table EditorTable Editor는 데이터베이스에서 직접 테이블을 생성 및 수정할 수 있는 기능이다.2. SQL EditorSQL Editor를 통해SELECT, UPDATE, DELETE 등의 SQL 쿼리를 실행할 수 있다.Assistant 기능 지원: AI가 DB와 연동되어 SQL을 자동 생성해준다.예: "이 테이블에서 특정 컬럼을 가져오고 싶어!"라고 입력하면, 적절한 SQL 쿼리를 자동 생성해준다.SQL이 익숙하지 않은 사용자에게 유용한 무료 기능이다.3. 데이터베이스 관리생성된 테이블 조회데이터베이스 함수 및 트리거 설정예: 특정 row가 생성, 수정, 삭제될 때 실행되는 트리거 설정 가능액세스 컨트롤(Role-based Access Control)특정 유저가 특정 테이블에 접근할 수 있도록 권한을 설정할 수 있다.(※ 액세스 컨트롤 관련 내용은 본 강좌 범위에서 제외)미션 수행이번 미션에서는 실습에서 구현한 TODO 리스트에 생성 날짜를 표시하는 기능을 추가하는 것이 기본 목표였다.처음 도전해보는 분야였던 만큼 시행착오가 많았고, 라이브러리 버전 호환 문제나 기타 충돌로 인해 많은 구글링이 필요했다.관련해서 강사님이 추천해주신 강의를 다시 한 번 정독한 뒤, 선택 과제도 수행해볼 예정이다.이번 실습을 통해 Next.js, Recoil, React Query, 그리고 Supabase를 더욱 깊이 있게 이해할 수 있었으며, 앞으로의 프로젝트에서도 적극적으로 활용해볼 계획이다.