supabase (3) 썸네일형 리스트형 [Next14] 검색 기능 만들기 with Supabase 기능 정의검색창에 검색어를 입력하면 `title` 또는 `location`에 검색어가 포함된 데이터를 노출시킨다.뒤로가기를 눌렀을 때, 이전 검색 결과로 이동한다.컴포넌트 구현검색창 코드"뒤로가기를 눌렀을 때, 이전 검색 결과로 이동한다."라는 기능을 구현하기 위해서,검색어를 입력했을 때 히스토리 스택이 추가되어야 합니다.따라서 검색어를 검색하면 url 쿼리를 추가하여 히스토리 스택을 쌓아봅시다. import { Input } from "@nextui-org/input";import { ChangeEvent, useState } from "react";interface SearchInputProps { onSubmit: (value: string) => void;}const SearchInput = .. [Next14] To Do List 만들기 with Supabase (2) Next API Route 사용하여 할 일 목록 구현하기 이전 글 [Next14] To Do List 만들기 with Supabase (1) 프로젝트 세팅요즘에 Next를 사용하는 회사가 많아짐에 따라 어떤 것인지 궁금해졌어요. Next는 SSR이라서SEO에 유리하고, 렌더링 속도가 빠릅니다.특히 API도 직접 만들 수 있다는 것이 흥미로웠어요! 실무에서devshelly.com이전 글에서 Next 프로젝트와 Supabase 프로젝트를 생성하고, 두 프로젝트를 연결해 보았어요.그리고 Supabase의 데이터를 Next에서 러프하게 노출시켰습니다.정말 데이터를 그대로 노출한 것이라서 아직 페이지라는 느낌이 안들죠. 😅이번 글에서는 할 일 목록 UI 추가해보려고 합니다.할 일 목록 구현하기UI 구현우선은 할 일을 확인할 수 있는 목록 UI를 구현해봅시다! 지난 .. [Next14] To Do List 만들기 with Supabase (1) 프로젝트 세팅 요즘에 Next를 사용하는 회사가 많아짐에 따라 어떤 것인지 궁금해졌어요. Next는 SSR이라서SEO에 유리하고, 렌더링 속도가 빠릅니다.특히 API도 직접 만들 수 있다는 것이 흥미로웠어요! 실무에서 과연 Next API를 사용할 일이 있을까?라는 생각이 들었지만,사이드 프로젝트로는 아주 적합하다는 생각이 들었어요!혼자 개발할 때 서버도 만들고 클라이언트도 만들려면 아주 귀찮기 때문.. 그래서 새로운 기술을 접할 때 시도해 보기 좋은(만만한)To Do List를 만들어보려고 합니다! Next API도 사용해볼 예정인데, 그러면 또 database가 필요하겠죠.database를 직접 구축하는 것은 귀찮아서supabase라는 서비스를 사용하기로 했습니다. UI도 예쁘고 사용법도 쉬워서 사이드프로젝트할 .. 이전 1 다음
