개발 (24) 썸네일형 리스트형 [Next] Next 살펴보기 저는 얼마 전까지 React로만 개발하다가 최근에 이직을 하며 Next를 처음 제대로 사용해 보게 되었어요. Vue를 사용하다가 React로 넘어왔을 때 만큼의 변화는 아니지만, Next가 버전이 올라가면서 큼직한 변화들이 많이 있었고 그 과정에서 버전별 히스토리가 남아있는 것 같더라구요. 특히 Next13 버전을 기점으로 App Router이 도입되면서 패러다임이 크게 변했기 때문에 이를 특히 주의해야 했습니다. 이러한 변화들을 인지하고 있어야 올바른 개발이 가능할 것 같아서 간략하게 Next의 히스토리와 개발할 때 주의해야할 점에 대해 정리해 보았습니다! Next는 왜 만들어졌을까?React만 사용할 때 겪는 몇 가지 문제점을 해결하기 위해 2016년 Vercel(당시 ZEIT)에서 Next를 만들.. [CSS] transform 속성을 layer와 stacking context 관점에서 알아보기 [CSS] Stacking Context 쌓임 맥락 쉽게 이해하기Stacking Context 이란?HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.하지devshelly.com 지난 글에서 stacking context가 어떤 의미인지 알아봤어요!특정 element를 다른 element보다 위에 그리고 싶을 때,z-index를 사용하여 화면에 그려지는 순서를 조절할 수 있습니다. 그런데 css 속성 중 `transform`을 사용할 때에도 다른 element보다 위에 그려지게 됩니다.그 이유는 stacking context가 생성되었기 때문이에요.얼핏 보아서는 화면에 .. [CSS] Stacking Context 쌓임 맥락 쉽게 이해하기 Stacking Context 이란?HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.하지만 css의 속성 중 z-index를 사용해 보신 적 있다면, 이미 stacking context를 활용하고 계신 것입니다! DIV #1 z-index: 4; DIV #2 z-index: 3; DIV #3 z-index: 2; DIV #4 z-index: 1; 위 이미지에서 보이듯, z-index가 클수록 상위에 노출됩니다.DIV#1, DIV#2, DIV#3, DIV#4는 하나의 영역(context)에서 z-index를 기준으로 어떤 순서로 쌓일지(stacking).. [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에 나와있는 시맨틱 태그 정의를 학습한다. 예시 찾아보기 .. 이전 1 2 3 다음
