학습목표

• NextJs 와 Supabase를 이용한 풀스택 개발

• CRUD 구현

📝 Next.js

• 서버 사이드 랜더링 지원

• 리엑트와 비슷한 문법을 사용

• 서버 사이드 랜더링이기 떄문에 SEO(검색엔진) 최적화

• HTTP API 구축 가능 → 간단한 개인 프로젝트는 서버를 구축할 필요가 없음

• 폴더명이 곧 Route(URL)이 됨. → 즉 정확한 폴더명을 정의해줄 필요가 있음

📝 Supabase

• firebase 에 대응해 나온 백엔드 서비스 플랫폼

장점

• 오픈소스 프로젝트 ( 자체 서버 구축 가능)

• PostgreSQL 기반 ( 관계형 DB장점을 살릴 수 있다)

• 파이어베이스 대비해 저렴

• 다양한 연동방식을 지원( GraphQL, API, SDK, DB Connection )

단점

• 아직 성숙하지 않은 커뮤니티 기반

• 비교적 적은 기능들, 적은 서비스 연동 지원

• 부족한 문서화, 한글 문서 부족

• 파이어베이스 보다 높은 러닝커브

📝TailwindCSS

• utility-First 컨셉을 가진 CSS 프레임 워크

• 부트스트랩,Vuetify 등 과 같은 미리 세팅된 유틸리티 클래스를 활용하는 방식

• 빠르게 원하는 디자인을 개발 가능하지만 코드의 복잡성으로 인해 유지보수가 어려워지는 단점

📝Recoil

• react 를 위한 상태 관리를 하는 라이브러리

📝Atom

• redux에 store와 같은 개념

• 데이터 상태의 단위

📝Seletor

• atom을 기반으로 파생된 데이터를 만들어냄

1주차 미션 - TODO List

• 추가 사항

  • 업데이트 시 변경 내용이 기존 내용과 같을 경우,
    즉 변경 사항이 없을 경우 업데이트가 일어나지 않게 코드를 변경하였습니다.

첫번째 회고

예전 프로젝트에서 React (Recoil, React Query) 와 Firebase 를 사용한 프로젝트를 개발해 본 경험이 있지만,

당시 무작정 만들기만 했고 왜 이렇게 사용해야 되는지에 대해, 또는 어떤 역할을 하는 기능인지에 대해 생각하지 않았습니다.

이 강의와 스터디를 통해 React, Recoil, React Query 에 대해 조금 더 자세히 알 수 있었습니다.

또한 NextJs와 Supabase, TailwindCss 에 대해 처음 배웠습니다.

써보고 싶었던 기술을 배우고 사용해 본 경험이 생겨서 좋은 공부가 되었습니다.