분류 전체보기 (36) 썸네일형 리스트형 [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 = .. 대학교 학생회 활동이 스펙에 도움이 될까? | 전 부총학생회장, 현 개발자 학생회 활동을 시작하게 된 이유어릴 때부터 사람들에게 관심받는 것,함께 어울리며 소속감을 느끼는 것을 좋아했어요. 그래서인지 중고등학생 때부터 자연스럽게 학급임원이나 학생회 활동에 참여했습니다.대학교에 들어가서도 흐름이 이어져서2학년 때는 과학생회의 집부로 활동을 시작하게 됐어요. 고등학교 때와 비교했을 때,대학교 학생회는 훨씬 큰 규모의 다양한 행사를 기획하고 준비하더라구요. 과정이 쉽진 않았지만,친구들과 열심히 준비한 행사를 성공적으로 마무리했을 때의 뿌듯함이 너무나 좋았습니다. 학생회 활동으로부터 얻은 성취감이 제게 많은 긍정적인 에너지를 주었고,그 에너지가 활동을 더 열심히 하게 만드는 원동력이 되었습니다.꾸준히 활동을 열심히 하다 보니, 감사하게도 4학년땐 부총학생회장을 맡게 되었습니다.저도 .. FECONF2024 후기 | 컨퍼런스를 오프라인으로 참석해야하는 이유 첫 FECONF 방문FECONF는 2017년부터 매년 열리는 프론트앤드 기술 컨퍼런스입니다.작년에 티켓팅을 시도했는데 정말 몇 초만에 티켓이 매진될 정도로 인기가 많더라구요.역시 올해에도 클릭 한번 잘못하면 티켓을 구매할 수 없게 될 정도로 빠르게 매진되었습니다. FECONF 말고도 대부분의 컨퍼런스는 세션 내용이 유튜브 영상으로 올라와서"굳이 오프라인으로 가야 하나?🤔"라는 생각이 있었어요. 그런데 티켓은 빠르게 매진되니까왜 사람들은 오프라인으로 참석하는지 궁금증도 있었습니다. 올해는 마침 모교에서 컨퍼런스가 열리기도 하고 친한 동생이 티켓을 양도해 준다고 하더라고요.(티켓팅은 실패했습니다...) 그래서 이번 기회에 오프라인 컨퍼런스는 뭐가 다른지 알아보자는 마음으로FECONF2024에 방문했습니다.. 개발자는 AI시대에서 어떻게 살아남아야 할까? 새로운 도구 AI어떠한 문제를 마주했을 때 빠르게 원인을 찾고내 상황에 맞는 해결 방법을 찾는 것은 개발자의 중요한 능력 중 하나이다. 몇 년 전 까지만해도 스택오버플로우, 각종 블로그와 문서를 탐색하며나에게 맞는 해결법을 찾기 위해 열심히 구글링 하며 많은 시간을 할애했다.그런데 ChatGPT의 등장 이후로 구글링을 하는 시간이 눈에 띄게 줄어들었다. 어떤 기능을 원하는지 그 기능을 구현할 수 있는 코드를 알려주고,어떤 에러를 해결하고 싶은지 물어보면 해답을 알려주기도 한다.종종 ChatGPT에게 코드 리뷰를 해달라고 요청했을 때내가 생각하지 못한 좋은 리팩토링 결과물을 던져주어서 감탄한 경험도 있다. AI는 개발뿐만 아니라 다양한 곳에서 활약을 하고 있다.특히 이미지와 영상을 만드는 분야는 엄청난 속.. [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에 나와있는 시맨틱 태그 정의를 학습한다. 예시 찾아보기 .. 이전 1 2 3 4 5 다음
