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

목차

• Next.js, TailwindCss, Recoil, supabase 특징

• Todo List 미션

Next.js

• React 기반의 풀스택 프레임워크

• SSR(서버사이드 렌더링) 지원

  • 서버에서 미리 HTML을 렌더링하여 SEO와 초기 로딩 속도 개선

  • fetch 등의 API 요청을 서버에서 처리해 클라이언트의 부담 감소

• SSG(정적 사이트 생성) 지원

  • 빌드 시 HTML을 미리 생성하여 빠르게 페이지 로딩

• 파일 기반 라우팅

  • pages/ 폴더 내 파일이 자동으로 라우트 됨

  • app/ 디렉토리에서는 레이아웃 공유 & 동적 라우팅 가능

• 서버 컴포넌트 & 클라이언트 컴포넌트 지원

   

• API Routes 제공

  • 백엔드 서버 없이 NextJS 내에서 API 구축 가능

• 이미지 최적화

  • <Image /> 컴포넌트를 사용하면 자동으로 이미지 크기 조절 & 포맷 변환

  • 웹페이지 속도 향상

• SEO 최적화

• Middleware 지원

  • 요청이 처리되기 전에 인증, 리디렉션, 캐싱 등 제어 가능

     

     

TailwindCss

• 유틸리티 퍼스트 방식의 CSS 프레임워크

• 미리 정의된 클래스를 조합하여 빠르게 스타일 적용하기 때문에 CSS를 직접 작성할 필요 없음 => 개발 속도 향상

Recoil

• Facebook에서 개발한 React 전역 상태 관리 라이브러리

• React의 Context API보다 강력하고, Redux보다 간단하게 사용할 수 있음

• 간단한 전역 상태 관리

  • useState 처럼 쉽게 사용할 수 있음

  • Atom을 이용해 상태를 관리하고 여러 컴포넌트에서 공유 가능

     

• 비동기 상태 관리 지원

  • Selector를 이용하면 useEffect 없이도 비동기 데이터 관리 가능

• Redux보다 가볍고 React의 상태 관리 방식과 유사해 학습 부담이 적음

   

   

supabase

• 오픈 소스 백엔스 서비스로 Firebase의 대체제로 사용됨

• PostgreSQL 기반의 데이터베이스

  • RDBMS 기능 제공

  • JSONB 데이터 타입 지원

• 인증 권한 관리

  • 이메일, OAuth(Google, GitHub 등), Magic Link 로그인 지원

     

  • Row-Level Security(RLS) 를 통해 사용자별 데이터 접근 제한 가능

• 스토리지 제공

  • 이미지, 파일 업로드 가능

  • 접근 권한을 설정해 보안 유지

• 서버리스 함수(Edge Functions) 지원

  • 서버리스 API 생성 가능

  • TypeScript와 호환

• Firebase 보다 쉬운 SQL 기반 데이터 관리

   

1주차 미션 - TODO List 제작

미션

• Next.js + Supabase 기반의 TODO List 제작

• 생성 날짜와 수정 날짜 표시하기

TODO list 만들기

생성 날짜와 수정 날짜 표시하기

• 날짜를 "yyyy-MM-dd HH:mm:ss" 형태로 보여주기 위해 date-fns 설치

   

  npm install date-fns

• created_at과 updated_at 값을 각각 상태로 관리하고,

• updated_at 값이 있다면 "수정됨:"이라는 텍스트와 함께 표시하고, 없다면 created_at 날짜만 표시

// todo.tsx
export default function Todo({ todo }) {

  const [created_at] = useState(todo.created_at);
  const [updated_at] = useState(todo.updated_at);

  const formatDate = (dateString: string) => {
    return format(new Date(dateString), "yyyy-MM-dd HH:mm:ss");
  };

return 
 
<span className="text-sm text-gray-500">
        {updated_at
          ? "수정됨: " + formatDate(updated_at)
          : formatDate(created_at)}
</span>