Next 가보자고

npx create-next-app@latest설치 시 옵션 설정TypeScriptTailwind CSSApp RouterNext : https://nextjs.org/docs/app/building-your-application/configuring/type

오 좋은데..?일단 폴더 추가하고 page.tsx 파일을 넣어주기만 하면 라우팅이 된다니... 놀라운걸..dashboard 폴더를 추가하고 page.tsx를 넣어서 확인하니http://localhost:3000/dashboard이렇게 바로 경로 이동이 된다..

Next 프로젝트 에서는 Supabase를 활용해 백엔드 작업을 할 예정이다.Supabase는 간단하게 서버를 구현할 수 있다는 점에서 프론트 개발자인 나로서 가장 좋은 서비스라고 생각한다. Firebase도 있지만 Nosql이라는 단점을 가지고 있어 좀 더 활용성이

Enable Row Level Security유저별 접근 권한 여부는 실무가 아니라 연습예제이기 때문에 일단은 체크를 해제하고 진행한다.컬럼별 Type과 추가 설정을 추가해준다.그 다음에 이 Table을 기존 Next의 코드에 적용해보자.

Supabase Key 설정

npm i --save @supabase/ssr @tanstack/react-queryconfig/ReactClientProivider.tsxapp/layout.tsx

서버에서 실행되는 비동기 함수.actions/todo-actions.tsNext Server Actions: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-a

이렇게 해서 Next, Supabase와 함께 TodoList 를 만들어 보았다.개발을 함에 있어서는 React와 크게 다른 점은 없는 것 같다.장점이 많고, 계속 발전하고 있는 만큼 전망이 밝은 프레임워크라고 생각한다.지금은 프론트엔드 개발자 이지만 Next를 활용해

이번에는 Supabase 의 Storage를 활용해서 파일을 업로드 할 수 있는 MiniBox 라는 프로젝트를 진행하려 한다.

Supabase와 CRUD 개발을 했다면 기능을 구현해주자.Seach는 간단하게 Onchange 이벤트가 발생하면 찾을 수 있도록 개발.components/searchComponent.tsxFile Drag DropReact-Query의 useMutation 와 rea

Todolist와 minibox를 바탕으로 영화사이트를 만들어보자 데이터는 TMDB 데이터로 진행한다. > TMDB : https://www.themoviedb.org/ 일단 기존 Next 프로젝트 셋팅을 해주고, 이번에는 홈페이지를 만들거라 Header 와 Fo

다양한 인증 방식을 지원하는 인증 시스템사용자 인증 및 권한 관리를 제공다양한 소셜 로그인 방식 지원

Supabase의 Email Templates 활용이메일 인증 요청은 1시간에 3번 가능SMTP server를 설정하면 제한 없이 이메일 인증 요청 가능SMTP server 설정하는 것은 나중에 설정할지 말지 생각해보기로 하고, 일단은 시작해보자!signUp.tsx이렇

모든 사용자에게 동일한 데이터를 전송하는 방식으로 채팅 시스템에서 실시간으로 메시지를 전송하거나, 다수의 사용자에게 동시에 알람을 보낼 때 유용한 방식이다.현재 연결된 사용자를 실시간으로 추적하는 방식으로 실시간 채팅에서 현재 접속 중인 사용자를 표시하거나, 게임에서