멈추지 않는 기록

“Next.js를 배우고 있는데… /app 디렉토리?_app.tsx, _document.tsx는 이제 안 쓰는 건가요?” Next.js 13부터 등장한 App Router는 단순한 디렉토리 변경이 아니다. 파일 기반 라우팅 → 컴포넌트 기반 아키텍처로, Next.js의 구조 자체가 진화한 것이다. 이 포스팅에서는 App Router의 탄생 배경부터 핵심 구조, 그리고 기존 Pages Router와의 차이까지 한 번에 정리해보겠다. App Router는 왜 생겼을까? Next.js는 오랫동안 pages/ 디렉토리를 통해 파일 기반 라우팅을 제공해왔다. 간편하고 직관적이지만, 한계도 명확했다.페이지마다 공통 레이아웃을 구성하기가 복잡했다 (_app.tsx, 조건부 렌더링 등)코드 스플리팅, 로딩 상태 관..

"Next.js에서 컴포넌트는 익숙한데... _app.tsx는 뭐고 _document.tsx는 또 뭐지?"처음에는 괜히 프로젝트에 붙어 있는 듯한 느낌이지만, 이 두 파일을 이해하면 Next.js의 전체 앱 구조가 눈에 들어온다. 🏠 건물로 비유해보자 Next.js 앱을 하나의 건물이라고 생각해보자._document.tsx는 건물의 설계도와 구조물이다. (콘크리트, 창문, 외벽 등)_app.tsx는 건물 내부의 인테리어다. (벽지, 가구, 조명, 공기청정기 등)즉, _document.tsx는 HTML 구조 자체를 커스터마이징하고,_app.tsx는 그 안에서 React 페이지들이 어떻게 렌더링될지를 설정한다. _app.tsx – 전체 앱의 진입점 _app.tsx는 Next.js에서 모든 페이지가 ..

“데이터는 언제 불러와야 하지?”“초기 로딩 화면이 자꾸 비어 있다…”“검색엔진에 내 콘텐츠가 안 보인다…” React로 웹 애플리케이션을 만들면서 이런 경험을 한 적이 있다면, 지금부터 소개할 내용이 반가울 것이다. Next.js의 getStaticProps와 getServerSideProps는 이 모든 고민에 대한 실질적인 해답이다. 📦 데이터 패칭이란 무엇인가? 웹 페이지는 단순히 HTML과 CSS만으로 이루어지지 않는다. 사용자에게 보여주는 대부분의 정보는 외부에서 불러온 데이터를 바탕으로 동적으로 구성된다. 이 데이터를 서버나 API로부터 가져오는 과정을 바로 데이터 패칭(data fetching)이라고 한다. 예를 들어 블로그 페이지를 만든다고 가정해보자. 글 목록, 작성자 정보, 댓글..

“웹사이트를 만들었는데 아무도 안 온다…?”“구글에 검색해도 내 사이트가 안 나온다…?”이럴 땐 코드보다 먼저 SEO를 의심해야 한다. SEO란 무엇인가? SEO는 Search Engine Optimization, 즉 검색엔진 최적화를 의미한다. 말 그대로 구글이나 네이버 같은 검색엔진이 웹사이트를 더 잘 이해하고, 더 잘 노출할 수 있도록 만드는 기술이다. 쉽게 말해 SEO는 “검색엔진에 잘 보이기 위한 노력”이며, 웹사이트의 입장권이자, 마케팅의 시작이다. 왜 개발자가 SEO를 알아야 하는가? 보통 마케터나 콘텐츠 작성자가 신경 쓰는 영역처럼 보이지만, 실상은 다르다. SEO의 기본은 HTML 구조, 페이지 렌더링 방식, 메타 태그, 접근성, 퍼포먼스 등 개발자의 손끝에서 결정되기 때문이다. 예를..

23년도 가을부터 React를 접하면서 웹개발을 해왔던 필자에게는 Next.js, Vue.js 등을 접해야 할 필요성을 못 느끼고 있었다. 그러다 최근 Next.js + TS 개발이 붐 하는 분위기를 마주하고, 사진처럼 이런 생각을 가지고 Next.js 튜토리얼을 시작했다. 그러나 막상 공식 튜토리얼을 따라가다 보니, 단순한 React 확장이 아니라 웹 개발에 필요한 진짜 기능들을 제대로 갖춘 프레임워크라는 것을 깨닫게 되었다. 이 글에서는 튜토리얼을 통해 경험한 Next.js의 구조, React와의 공통점과 차이점, 그리고 개인적으로 유익했던 배움의 포인트들을 정리해보았다. 튜토리얼 간략 정리 Next.js의 공식 튜토리얼은 nextjs.org/learn에서 제공되며, 마크다운 블로그 형태의 간단한 ..

서론 Next.js를 사용하다 보면 위의 사진처럼, 컴포넌트를 사용할 때 width와 height 속성을 반드시 지정하라는 에러를 자주 보게 된다.🚨잠깐!!🚨 Image 태그를 써야 하는 이유에 대해서는 아래 글을 참고하자!https://pangil-log.tistory.com/257 대신 를 써야 하는 진짜 이유" data-og-description="서론Next.js 기반 프로젝트에서 'npm run dev' 명령어를 사용하여 로컬에서 개발을 진행했을 때에는 문제가 없었지만, 'npm run build' 명령어를 사용하여 빌드하다가 위의 사진에 있는 에러를 발견하게 " data-og-host="pangil-log.tistory.com" data-og-source-url="https://pangi..

서론Next.js 기반 프로젝트에서 'npm run dev' 명령어를 사용하여 로컬에서 개발을 진행했을 때에는 문제가 없었지만, 'npm run build' 명령어를 사용하여 빌드하다가 위의 사진에 있는 에러를 발견하게 되었다. 왜 이러한 에러가 발생했는지 알아본 결과, Next.js에서 npm run build 시 태그를 컴포넌트로 바꾸라고 경고하는 이유는 웹 성능 최적화 때문이었다. 왜 그렇게 된 것인지, 어떻게 사용해야 하는 것인지 등에 대해서 오늘 한 번 살펴보자.   왜 대신 를 써야 할까? Next.js에서는 기본 HTML 태그 대신 next/image의 컴포넌트를 사용하길 권장하며, 빌드 시 경고까지 출력한다. 이는 단순한 스타일 가이드가 아니라 웹 성능 최적화를 위한 핵심적인 설계..

서론 React를 처음 배웠을 때, useState를 쓸 때마다 나오는 []와 ()의 조합이 도대체 무슨 의미인지 헷갈렸던 기억이 있다. 그냥 외워서 쓰긴 했지만, 코드의 의도를 정확히 이해하긴 어려웠다. 그러다 구조 분해 할당이라는 개념을 알게 되면서, 그동안 막연했던 코드가 하나씩 명확해지기 시작했다. 이번 글에서는 이 구조 분해 할당이 어떤 개념이고, 왜 React에서 자주 쓰이는지 쉽게 설명해보려고 한다.   구조 분해 할당이란? 구조 분해 할당(Destructuring Assignment)은 객체나 배열에서 값을 꺼내서 변수에 간결하게 할당할 수 있는 자바스크립트 문법이다. 기존에는 배열이나 객체에서 값을 꺼낼 때 아래와 같은 방식으로 작성했다.const arr = [1, 2]const firs..

서론 React에서는 상태를 관리할 때 useState라는 훅을 자주 사용한다. 그런데 코드를 보다 보면 React.useState(...)처럼 쓰는 경우도 있고, 그냥 useState(...)만 사용하는 경우도 있다. 이 둘은 어떤 차이가 있을까? 그리고 어떤 걸 쓰는 게 더 좋을까? Next.js 환경 기준으로 그 차이점과 추천 사용법을 정리해보자.   기본 개념 정리 React에서 훅(hook)은 상태나 생명주기와 관련된 기능을 함수형 컴포넌트에서 사용할 수 있게 해주는 도구다. 이 중 useState는 가장 기본적인 훅으로, 상태를 만들고 변경하는 데 사용된다. useState는 React 객체에 포함되어 있는 함수이기 때문에, React.useState처럼 쓸 수도 있고, 구조 분해 할당을 통해..

서론최근 app 라우팅 기반에서 프로젝트를 진행하면서, 핸들러에 의해 페이지 이동을 구현해야 했었다. 페이지 간 이동은 사용자 경험에서 중요한 요소로, 어떤 방법을 선택하느냐에 따라 애플리케이션의 성능과 사용성이 크게 달라질 수 있기에 더욱 어떤 방법을 사용해야 하는지가 고민이었다.window.location.href 방식react-router-dom의 useNavigate 방식그리고 새로 알게 된 useRotuer방식 이 글에서는 Next.js에서 제공하는 다양한 페이지 이동 방법을 살펴보려고 한다.각 방법의 장단점을 비교하고, 결국에는 useRouter가 왜 가장 적합한 선택인지 살펴보자.   1. window.location.href: window.location.href는 JavaScript의 기..