본문 바로가기

분류 전체보기59

[Next.js] Route Groups, Dynamic Routes, Metadata Route Groups routes들을 논리적으로 그룹화할 수 있게 해주는 기능URL 경로에는 영향을 주지 않는다. -> 파일 구조를 더 명확하게 정리할 수 있다.사용방법 : 폴더 이름을 괄호 ( ) 로 감싼다.파일구조생성  URLapp / about / page.tsx/aboutapp / (about) / page.tsx/app / (home) / about.tsx/about Dynamic route (동적 라우팅)폴더 이름에 대괄호 [ ] 를 사용하면 동적 라우팅(Dynamic Routing) 을 만들 수 있다.app/ └── product/ └── [id]/ └── page.tsx  위 구조는 /product/123, /product/abc, /product/42 등 다양한 U.. 2025. 4. 13.
[Next.js] layout.tsx Next.js에서는 layout.tsx 파일을 이용해 페이지의 레이아웃을 구성할 수 있다.이 레이아웃 시스템은 중복 없이 구조적인 UI를 만들 수 있게 해주고, 페이지 간 전환 시에도 공통 UI를 유지하게 해준다. 레이아웃 파일의 기본 개념 layout.tsx는 Next.js가 페이지를 렌더링하기 전에 먼저 확인하는 파일.각 디렉토리에 존재할 수 있으며, 중첩 레이아웃을 구성할 수 있다.즉, 상위 디렉토리의 레이아웃 안에 하위 디렉토리의 레이아웃이 포함되어 렌더링됩니다. 레이아웃의 렌더링 과정   Next.js는 먼저 최상위(root) 레이아웃부터 렌더링을 준비한다.  /app/layout.tsx그 후 현재 URL을 기준으로 해당 경로의 디렉토리로 이동하여,해당 디렉토리에 layout.tsx가 있는지 확.. 2025. 4. 13.
[Next.js] 하이드레이션(Hydration) 웹 렌더링 방식: CSR과 SSR💡렌더링 (Rendering)우리가 만든 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 바꾸는 과정 즉, 사용자가 볼 수 있는 웹페이지를 만드는 과정인데, HTML을 "어디서" 만들 것인지에 따라 방식이zing829.tistory.com Next.js는 어떻게 렌더링할까?💡렌더링(Rendering)     React와 같은 라이브러리에서 우리가 작성한 컴포넌트(JSX)는 브라우저가 직접 이해할 수 없다.    컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환해주는 과정이 바로 렌더링이다. Next.js는 기본적으로 SSR(Server Side Rendering)을 사용한다.SSR: 서버에서 HTML을 미리 만들어서 브라우저에 전달하는 방식사용자가 페이지.. 2025. 4. 12.
[리액트 7기] 6주차 주간회고 💡핵심 3줄 요약프레임워크 첫 사용천천히 꾸준히 킵고잉💡이번 주 목표[✅] 포기하지말자[✅] 남들과 속도는 달라도 천천히 계속 해보자💡칭찬하고 싶은 점-💡고치거나 버려야 할 점- 오늘 할 일을 뒤로 미루기 ! 뒤로 미루기 ! 뒤로 미루기 ! (이제그만 ㅜ ㅜ)💡일일 스프린트더보기04월 05일 (토)04월 06일 (일)[❌] 졸업과제 제출04월 07일 (월)[✅] Next.js #1.1 -#2.1[✅] 퀴즈제출04월 08일 (화)[✅] Next.js #2.1 -#2.10[❌] 퀴즈제출 - 잠들어버렸다.04월 09일 (수)[✅] Next.js #3.0-#3.8[✅] 퀴즈 제출04월 10일 (목)[✅] Next.js [ SSR CSR ] 렌더링 개념 이해하기04월 11일 (금)[✅] 주간회고 작성[✅.. 2025. 4. 11.
웹 렌더링 방식: CSR과 SSR 💡렌더링 (Rendering)우리가 만든 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 바꾸는 과정 즉, 사용자가 볼 수 있는 웹페이지를 만드는 과정인데, HTML을 "어디서" 만들 것인지에 따라 방식이 달라진다.💡CSR (Client Side Rendering)렌더링 위치: 브라우저(클라이언트) CSR은 클라이언트 사이드 렌더링의 줄임말로, 브라우저에서 렌더링을 수행한다는 뜻이다. 대표적인 기술로는 React(CRA,Vite) , Vue, SPA구조가 있다. 동작 방식사용자가 웹사이트에 접속하면 HTML 파일이 로딩된다.HTML 안에는 실제 콘텐츠가 거의 없고, 대부분 자바스크립트 파일을 불러오는 스크립트만 존재한다.브라우저는 JS를 다운로드하고 실행한다.React 등의 라이브러리가 작.. 2025. 4. 11.
[Next.js] App Router Next.js는 왜 폴더가 곧 URL ????Next.js는 최신 버전부터 App Router를 도입하여, 폴더 구조만으로 페이지와 URL을 정의할 수 있도록 했다.파일 시스템 기반의 라우팅 방식이라 누구나 직관적으로 구조를 파악하고 사용할 수 있다는 장점이 있다.( 혁명 그 자체. .)  Next.js의 App Router가 어떻게 동작하는지, 그리고 URL이 어떻게 생성되는지 예시와 함께 정리하고자 한다.Next.js의 App Router는 /app 폴더를 기준으로 작동한다.이 app 폴더가 프로젝트의 루트 경로(/)를 구성하게 되며, 내부 폴더와 파일이 곧 URL 경로가 된다.app폴더 내의 page.tsx파일을 (/)를 루트 세그먼트(root segment)라고 부른다./app├── layout... 2025. 4. 8.
[Next.js] 스타트 - 프로젝트 생성 목차- Next.JS 란?- Next.JS 특징- 프레임워크 vs 라이브러리- Next.JS 프로젝트 생성Next.js ?Next.js는 React 기반의 오픈소스 JavaScript 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 웹 애플리케이션 개발에 필요한 많은 기능을 제공한다.Next.js의 주요 특징서버 사이드 렌더링(SSR): 페이지를 서버에서 렌더링하여 SEO 개선 및 초기 로딩 속도 향상정적 사이트 생성(SSG): 빌드 시점에 페이지를 미리 생성하여 빠른 성능 제공파일 시스템 기반 라우팅: 폴더와 파일 구조를 기반으로 자동으로 라우트 생성API 라우트: 서버리스 함수를 쉽게 생성할 수 있는 기능자동 코드 분할: 페이지별로 필요한 JavaScript.. 2025. 4. 8.
파라미터(Parameter) 공부를 하다 보면 useParams()나 파라미터(Parameter)라는 말을 자주 보게 된다.솔직히 일상생활하면서 자주 쓰는 말이 아니기 때문에 나는 아직도 익숙치가 않다.그래서 익숙해지고자 블로그에 정리하기로 했다.파라미터(Parameter)파라미터(Parameter)는 어떤 것을 구분하거나 전달할 때 쓰는 정보 조각이다.특히 웹 주소(URL) 안에 들어있는 정보를 말할 때 많이 사용된다.https://zing829.tistory.com/56 나의 티스토리 블로그 주소에서도 볼 수가 있는데 이 주소에서 맨 끝에 있는 56이 바로 파라미터다.56은 블로그 글 번호, 즉 해당 글을 구분하는 정보를 나타낸다.https://zing829.tistory.com/:postId 파라미터의 종류( 한 URL에 두 .. 2025. 4. 5.
혼자 할 땐 몰랐던 커밋 메시지의 중요성 최근 팀 프로젝트를 하면서 Git을 본격적으로 사용하게 되었고, 커밋 메시지를 언제, 어떻게 작성해야 하는지 참 어렵게 느껴졌다.혼자 프로젝트를 할 땐 늘 "아 오늘은 여기까지! 커밋!" 하루 작업 단위로만 커밋을 진행했다.작업 내용이 명확하게 드러나지 않고, 무슨 작업이었는지 나조차도 기억하기 힘들었다. 그래서 나는"커밋 메시지, 이제는 아무렇게나 쓰면 안 되겠다."는 생각이 들었고,그동안 배운 것들을 정리해보려 한다.📌 왜 커밋 메시지가 중요할까?코드 히스토리 추적이 쉬워짐협업 시 변경 내용 이해가 쉬움PR 리뷰, 디버깅 효율 증가좋은 커밋 메시지는 프로젝트의 유지보수성을 높이고, 개발 팀 내에서의 협업을 강화하는 데 기여한다.따라서 커밋 메시지 작성은 단순한 기록을 넘어서 프로젝트 관리의 핵심 요.. 2025. 4. 4.

티스토리툴바