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

1.강의에서 사용된 기술 요약

1.1.Next.js

• 정의: 풀스택 개발에 최적화된 React 프레임워크

• 특징:

  • 서버사이드 렌더링으로 SEO 최적화

  • 폴더 구조가 URL 라우팅과 일치 (app/movies → /movies)

  • 중요 파일: page.tsx(라우트), layout.tsx(레이아웃), route.ts(API)

  • Link 컴포넌트로 클라이언트 사이드 라우팅 지원

• 도구: Server Actions(서버 기능), Metadata API(SEO 최적화)

1.2.TailwindCSS

• 정의: 유틸리티 우선 CSS 프레임워크

• 특징: HTML에 직접 클래스 적용으로 빠른 스타일링

• 주요 클래스:

  • 레이아웃: flex, grid, flex-col, justify-center

  • 크기/여백: w-{n}, h-{n}, p-{n}, m-{n}

  • 스타일링: bg-{color}, text-{color}, rounded-{size}, shadow-{size}

1.3.Recoil

• 정의: Facebook의 React 상태 관리 라이브러리

• 특징: 간편한 전역 상태 관리, 높은 성능

• 주요 개념:

  • atom: 상태 기본 단위

  • useRecoilState: 상태 읽기/쓰기

  • useRecoilValue: 상태 읽기

1.4.React Query

• 정의: 서버 상태 관리 라이브러리

• 특징: 데이터 페칭, 캐싱, 동기화 자동화

• 주요 함수:

  • useQuery: 데이터 조회

  • useMutation: 데이터 변경

  • 자동 백그라운드 갱신, 캐싱, 에러 처리

2.Todo list 개발

2.1.미션 해결

• supabase의 todo 테이블에 completed_at 컬럼을 추가 후 화면에 todo 생성일과 완료일을 함께 표시했습니다.
  

  

• 완료일과 생성일의 날짜, 시간을 자연스럽게 표시하기 위해 시간 표시 함수

  export function getKoreanTime() {
    const now = new Date();
    const koreaTimeDiff = 9 * 60 * 60 * 1000; // 한국 시간대(UTC+9)의 밀리초
    const koreanDate = new Date(now.getTime() + koreaTimeDiff);
    return koreanDate.toISOString();
  }
  
  export function convertTime(time: string) {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
  
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  }

  2.2.추가 개선 사항

  • 폴더 구조 및 파일명 변경

root/
├── actions/      # 서버 액션 관련 코드
├── app/          # 페이지 라우팅 및 레이아웃
├── components/   # 재사용 가능한 UI 컴포넌트
├── config/       # 환경 설정 파일
├── containers/   # 상태 관리 및 비즈니스 로직
├── public/       # 정적 파일 (이미지, 폰트 등)
└── utils/        # 유틸리티 함수
    └── supabase/ # Supabase 클라이언트 설정

2.3.문제 해결 (런타임 에러)

• 웹브라우저에서 체감상 5분 정도 시간이 흐르면 데브툴 콘솔창에서 아래와 같은 런타임 에러가 표시됐었습니다.

• 제 컴퓨터 웹브라우저의 특정 확장 플러그인이 중복 실행되고 있었던 문제였습니다. 문제의 확장 플러그인이 1번만 실행되게 조치하니 해결됐습니다.

Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

3. 회고

•  이번 Todo 리스트를 개발하면서 추가적으로 시도해보고 싶었던 것들이 있었지만, 대부분 실천하지 못해 아쉬움이 남습니다. 2주 차부터는 더 많은 공부 시간을 확보하고, 이번에 시도하지 못했던 추가 개발 사항들을 더욱 구체화하여 1주 차 결과물보다 더 높은 퀄리티의 결과물을 만들어보고자 합니다.