개발 (21) 썸네일형 리스트형 [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도 예쁘고 사용법도 쉬워서 사이드프로젝트할 .. [HTML] 시맨틱 태그(Semantic Tag) : section, article, div 차이 이번 글에서는 문서의 영역을 구분하는 HTML 태그 중``, ``, ``에 대해 알아보려고 합니다! 태그 설명섹션은 동일한 내용의 요소들을 하나의 그룹으로 묶어주는 역할을 해요.일반적으로 섹션의 주제를 지정하기 위해 h태그(`` ~ ``)를 사용하는데 필수는 아닙니다. A회사 프론트엔드 모집공고 필요한 역량 React, typescript 코드 품질 향상, 테스트 코드 작성 반응형 웹 개발에 대한 이해 원활한 커뮤니케이션 능력 주요 업무 PC 웹 / 모바일 웹 서비스 개발 웹 성능 최적화 테스트 코드 작성위의 예시를 볼까요?A회사의 프론트엔드 모집공고 페이지입니다. 소제목으로 "필요한 역량"과 "주요 업무"가 있는데요,``이 소제목에 해당하는 요소들을 하나로 묶어주고 있습니다. 이처럼 .. [HTML] 시맨틱 태그 (Semantic Tag) : h1 & header 시맨틱 태그에는 아주 많은 종류가 있어요.그 중 이번 글에서는 과 에 대해 알아봅시다! 태그가 속해있는 섹션의 제목을 나타냅니다. 제목1 에 포함되어있는 내용도 과 같은 섹션으로 묶여있기 때문에 "제목1"에 관한 내용으로 분석되어요. --> 내용1 내용2 `` 부터 `` 까지 있으며, 뒤의 레벨(1~6)는 제목의 위계를 의미해요.``은 가장 최상위 섹션의 제목,``는 서브 섹션의 제목,``는 서브 섹션의 부제목 등의 순서로 사용됩니다. 제목 요소는 하위에 따라오는 내용을 하나의 섹션으로 묶어요. 자신보다 높은 위계의 제목 요소를 만나기 전까지 하나의 섹션으로 구분해요. 시맨틱 태그 공부하는 방법 학습하기 MDN에 나와있는 시맨틱 태그 정의를 학습한다. 예시 찾아보기 .. [HTML] 시맨틱 태그(Semantic Tag)로 좋은 사이트 만드는 방법 시맨틱 태그 설명 시맨틱 태그란 의미 있는 태그를 뜻합니다. 평소에 어떻게 마크업을 작성하시나요?만약 아래와 같은 페이지를 구현한다고 할 때, 어떻게 마크업 하실 건가요? div만 사용한 경우이미지, 텍스트, 모달, 버튼 등 어떤 요소이든 간에 `` 태그만 있으면 작성할 수 있습니다.다음과 같이 말이죠. 제목입니다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.. [Javascript] NaN 알아보기 NaN에 대해 알아보기Javascript에서 숫자를 처리하는 방법NaN에 대해 본격적으로 다루기 전에,Javascript에서 숫자를 저장하는 방법에 대해 알아볼 필요가 있어요!위의 이미지는 [ECMA]에서 정한 Number에 대한 정의입니다.설명을 통해 다음과 같은 정보를 알 수 있어요.Javascript는 IEEE754라는 표준에 따라 Number value를 처리한다.`Not-a-Number(NaN)`, `양수 무한`, `음수 무한`도 Number value에 속한다. IEEE754란?전기전자공학자협회(IEEE)에서 정한 표준 중 하나입니다.Javascript는 숫자를 다룰 때 IEEE754에서 정한 표준에 따라 처리하고 있어요.더 알아보고 싶다면 이전 포스팅을 참고해주세요![양수0, 음수0 차이 쉽.. [Javascript] 0.1 + 0.2가 0.3이 아닌 이유 쉽게 이해하기 지난 글 복습하기지난 포스팅에서 javascript에서 `-0`이 존재하는 이유에 대해 알아보았어요.[양수 0, 음수 0 차이 쉽게 이해하기] 위의 글에서 이야기했던 `-0`이 존재하는 이유와 오늘 글의 주제와 관련이 있기 때문에다시 한번 리캡해볼까요?Recap!- javascript는 숫자를 저장할 때 IEEE754표준에 따라서 64개의 비트(bit, 0 또는 1)를 사용한 부동소수점으로 저장한다.- 이때 가장 앞에 오는 비트가 부호를 의미한다. 양수면 `0`, 음수면 `1`을 저장한다.- `+0`을 저장할 때는 `0`을 저장하고 `-0`을 저장할 땐 `1`을 저장하기 때문에 차이가 발생합니다. 이 내용을 잘 이해해야 오늘의 이야기도 쉽게 이해할 수 있으니,아직 잘 모르겠다 싶다면 지난 포스팅을 먼저.. 이전 1 2 3 다음
