본문 바로가기

전체 글56

브라우저에 화면이 나타날때까지 어떤 일이 일어 날까? 📌 브라우저 렌더링 과정에 대해서 🌐 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 현대 웹 개발에서 성능은 단순한 속도 문제가 아니라, 사용자 경험(UX)의 핵심입니다. 이 글에서는 브라우저가 웹페이지를 표시하는 전 과정을 단계별로 정리해보겠습니다. 브라우저 렌더링 전체 흐름탐색(Navigation)사용자가 URL을 입력하거나 링크를 클릭하면 탐색이 시작됩니다. DNS 조회 → TCP 핸드셰이크 → TLS 협상 단계를 거쳐 서버와 연결합니다.응답(Response)서버로부터 HTML 등의 데이터를 수신합니다. 이 때 TTFB(Time To First Byte)가 첫 체감 속도에 큰 영향을 줍니다.구문 분석(Parsing)HTML은 DOM으로, CSS는 CSSOM으로 파싱되어 구조화됩니다. 프.. 2025. 5. 19.
[프로젝트] 프로젝트구조 및 코드 컨벤션 https://llddang-blog.tistory.com/87📁폴더&파일 프로젝트 구조 - App routersrc/ : 루트 경로app/ : 페이지 및 layout 경로page.tsx 및 error.tsx, layout.tsx 등 next.js에 기본으로 기원하는 routing 파일들만 존재.components/ : 페이지에서 사용될 컴포넌트들의 모음layouts/ : 페이지의 layout에 사용될 컴포넌트 모음 (ex: Header, Footer, Sidebar 등)페이지의 layout 요소에 들어갈 컴포넌트특정 컴포넌트의 layout 요소를 저장하지 ❌ui/ : shadcn 에서 가져오는 공통 컴포넌트들의 모음commons/ : 프로젝트에서 사용할 공통 컴포넌트들의 모음프로젝트의 공통 컴포넌트라.. 2025. 4. 2.
[Next.js] parallel, intercept routes를 사용한 회원가입/로그인 구현하기 📌 복잡한 폴더구조 어떻게 폴더를 생성해야할까?  ✅ 패러렐과 인터셉트를 동시에 사용하여 모달로 보이는 페이지를 통해 로그인/회원가입을 구현하려고 한다 가장 먼저 이해해야 하는것은 폴더 구조이다. 패러렐 라우트는 한 페이지에 여러 페이지가 동시에 보인다.라는 개념이 핵심이다. 우리가 한 컴포넌트 내에서 여러 컴포넌트를 동시에 사용 하는 것은 각각의 HTML 태그를 사용 하기 때문이다. 예시) 이제 이 구조를 패러렐 라우트의 구조에 대입해서 이해해 보자.  페이지도 컴포넌트이다.동시에 두페이지가 보인다면 어딘가에서 A페이지와 B페이지를 동시에 렌더링할 수 있는 구조를 가지고 있어야 한다. 패러렐 라우트는 이러한 구조 설정을 layout에서 설정할 수 있다.  Next.js는 layout.tsx의 prop.. 2025. 3. 30.
[Next.js] parallel route와 intercept route - 기본 이론 정리 Next.js의 Parallel Routes와 Intercept Routes 정리Next.js 13 이상에서는 App Router를 기반으로 더욱 유연하고 강력한 라우팅 기능을 제공합니다. 그 중 대표적인 기능이 바로 Parallel Routes와 Intercept Routes입니다. 이 글에서는 두 개념을 쉽게 이해할 수 있도록 예시와 함께 정리해 보겠습니다.✅ Parallel Routes (병렬 라우트)Parallel Routes는 하나의 페이지에서 여러 개의 UI 구성 요소를 병렬로 동시에 렌더링할 수 있도록 하는 기능입니다.예를 들어, 어떤 페이지에 다음과 같은 UI가 있다고 가정해 봅시다:왼쪽에는 팀 리스트 오른쪽에는 팀의 상세 분석 그 아래에는 메인 콘텐츠이처럼 화면을 여러 개의 영역(Sl.. 2025. 3. 25.
[shadcn] shadn forwardRef error - input 해결하기 📌 forwardRef() 에러발생 원인 리액트에서는 ref를 DOM요소 (, 등) forwardRef로 감싼 컴포넌트에만 전달할 수 있다.  하지만 shadcn에서 제공하는 기본 Input의 코드를 살펴보면 ...props로 스프레드 연산자로 나머지 모든값을 props 형태로 전달하고 있다. 나의 경우에는 shadcn Form 컴포넌트를 사용하려 할 때 문제가 발생하였는데, shadcn의 함수형 Input에 ref값을 전달하고 있기 때문에 발생하는 error이다. import * as React from 'react';import { cn } from '@/lib/utils';function Input({ className, type, ...props }: React.ComponentProps) {.. 2025. 3. 25.
[Next.js] shadcn/Form use-hook-form 에러 - TypeError: Cannot destructure property 'getFieldState' of '(0 , react_hook_form 📌 shadcn의 Form을 사용할때 발생한 TypeError     ✅ 문제해결import { Form, useForm } from 'react-hook-form';import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,} from "@/components/ui/form" 아래 처럼 shadcn에서 제공하는 form에서 Form을 import 해야하는데, react-hook-form에서 Form을 import해서 에러가 발생했다.     ✅ 추가문제 - 잘못된 FormProvider를 사용해도 같은 error가 발생한다. 관련이슈 : https://github.com/shadcn-ui/.. 2025. 3. 22.

티스토리툴바