개발/Next (6) 썸네일형 리스트형 [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도 예쁘고 사용법도 쉬워서 사이드프로젝트할 .. [Next14] 페이지와 레이아웃 : Pages and Layouts 해당 글은 Next.js 공식문서를 해석한 글입니다.학습하며 제가 이해한대로 작성한 내용이기 때문에 오해석한 부분이 있을 수 있습니다.정확한 내용은 아래의 공식문서를 참고해주세요!https://nextjs.org/docs/app/building-your-application/routing/pages-and-layoutsNext에서는 특별한 파일 컨벤션이 있다는 것을 지난 글에서 소개했어요.그 중 layout.js page.js, template.js는 특정 라우트의 UI를 생성하기위해 사용되어요.이 글에서는 이 특별한 파일들을 언제, 어떻게 사용하는지에 대해 알려드리겠습니다.Pagespage.js는 특정 라우트의 고유한 UI를 포함합니다.page.js에서 리액트 컴포넌트를 export 하여 정의할 수 있.. [Next14] 라우트 정의하기 : Defining Routes 해당 글은 Next.js 공식문서를 해석한 글입니다.학습하며 제가 이해한대로 작성한 내용이기 때문에 오해석한 부분이 있을 수 있습니다.정확한 내용은 아래의 공식문서를 참고해주세요!https://nextjs.org/docs/app/building-your-application/routing#file-conventions Creating RoutesNext.js의 파일 시스템은 폴더가 어디에 생성 되어있는지에 따라 결정돼요.각 폴더는 route segment이고, 각 segment는 url segment와 1:1 매칭이 됩니다.nested route를 만들기 위해선 폴더 안에 폴더를 만들어서 중첩된(nested) 구조를 만들어주면 됩니다. 예를 들어, app 하위에 dashboard 폴더가 있고 그 하위에 .. [Next14] 라우팅 기초 : Routing Fundamentals 해당 글은 Next.js 공식문서를 해석한 글입니다.학습하며 제가 이해한대로 작성한 내용이기 때문에 오해석한 부분이 있을 수 있습니다.정확한 내용은 아래의 공식문서를 참고해주세요!https://nextjs.org/docs/app/building-your-application/routing모든 어플리케이션의 뼈대는 routing입니다.이 글에서는 웹 라우팅의 기초 컨셉을 소개하고 Next에서는 라우팅을 어떻게 다루는지에 대한 내용을 다루었습니다. 용어우선, 용어 소개를 간단하게 하고 넘어가겠습니다. - Tree : 위계구조를 시각화하여 부르는 용어- Subtree : tree의 일부분- Root : tree 혹은 subtree에서 첫 번째 노드- leaf : 자식 노드를 갖지 않은 노드 - URL Segm.. 이전 1 다음
