0146 · FE4월 16일
[Next.js] pages는 이제 안녕? App Router가 가져온 구조 혁신
“Next.js를 배우고 있는데… /app 디렉토리?_app.tsx, _document.tsx는 이제 안 쓰는 건가요?” Next.js 13부터 등장한 App Router는 단순한 디렉토리 변경이 아니다. 파일 기반 라우팅 → 컴포넌트 기반 아키텍처…
FE · 웹개발 · 프론트엔드
FE
9월 0장 · 통산 515장
- 0145 · FE4월 16일[Next.js] _app.tsx와 _document.tsx 완전 이해하기"Next.js에서 컴포넌트는 익숙한데... _app.tsx는 뭐고 _document.tsx는 또 뭐지?" 처음에는 괜히 프로젝트에 붙어 있는 듯한 느낌이지만, 이 두 파일을 이해하면 Next.js의 전체 앱 구조가 눈에 들어온다. ? 건물로 비유해…FE · 웹개발 · 프론트엔드
- 0144 · FE4월 16일[Next.js] getStaticProps와 getServerSideProps, Next.js가 데이터에 진심인 이유“데이터는 언제 불러와야 하지?”“초기 로딩 화면이 자꾸 비어 있다…”“검색엔진에 내 콘텐츠가 안 보인다…” React로 웹 애플리케이션을 만들면서 이런 경험을 한 적이 있다면, 지금부터 소개할 내용이 반가울 것이다. Next.js의 getStati…FE · 웹개발 · 프론트엔드
- 0143 · FE4월 16일[Next.js] React는 왜 SEO에 약할까? Next.js가 해답이다“웹사이트를 만들었는데 아무도 안 온다…?”“구글에 검색해도 내 사이트가 안 나온다…?”이럴 땐 코드보다 먼저 SEO를 의심해야 한다. SEO란 무엇인가? SEO는 Search Engine Optimization, 즉 검색엔진 최적화를 의미한다. 말…FE · 웹개발 · 프론트엔드
- 0142 · FE4월 16일[Next.js] React만 쓰던 내가 Next.js 튜토리얼에서 놀란 이유“React만으로도 충분한데, 굳이 Next.js를 배워야 할까?” 23년도 가을부터 React를 접하면서 웹개발을 해왔던 필자에게는 Next.js, Vue.js 등을 접해야 할 필요성을 못 느끼고 있었다. 그러다 최근 Next.js + TS 개발이…FE · 웹개발 · 프론트엔드
- 0131 · FE4월 6일[Next.js] 태그, 왜 width와 height를 안 쓰면 에러가 날까?서론 Image 컴포넌트의 에러 Next.js를 사용하다 보면 위의 사진처럼, <Image> 컴포넌트를 사용할 때 width와 height 속성을 반드시 지정하라는 에러를 자주 보게 된다. ?잠깐!!? Image 태그를 써야 하는 이유에 대해서는 아…FE · 웹개발 · 프론트엔드
- 0130 · FE4월 6일[Next.js] 단순히 태그만 바꾸라고? 대신 를 써야 하는 진짜 이유서론 npm run build 후 발생한 에러 내용 Next.js 기반 프로젝트에서 'npm run dev' 명령어를 사용하여 로컬에서 개발을 진행했을 때에는 문제가 없었지만, 'npm run build' 명령어를 사용하여 빌드하다가 위의 사진에 있…FE · 웹개발 · 프론트엔드
- 0129 · FE4월 6일[Next.js] Tailwind CSS 수식어, 진짜 쉽게 정리해봄!서론 Tailwind CSS를 사용하다 보면 hover:bg-blue-500이나 md:flex 같은 클래스명을 자주 볼 수 있다. 이때 hover:나 md:처럼 콜론 앞에 붙는 부분을 바로 수식어(Prefix Modifier) 라고 부른다. 수식어는…
- 0128 · FE4월 5일[React] 한 줄로 코드를 깔끔하게? 구조 분해 할당 완전 정복서론 React를 처음 배웠을 때, useState를 쓸 때마다 나오는 []와 ()의 조합이 도대체 무슨 의미인지 헷갈렸던 기억이 있다. 그냥 외워서 쓰긴 했지만, 코드의 의도를 정확히 이해하긴 어려웠다. 그러다 구조 분해 할당이라는 개념을 알게 되…FE · 웹개발 · 프론트엔드
- 0127 · FE4월 5일[Next.js] React.useState와 useState, 단순한 스타일 차이일까?서론 React에서는 상태를 관리할 때 useState라는 훅을 자주 사용한다. 그런데 코드를 보다 보면 React.useState(...)처럼 쓰는 경우도 있고, 그냥 useState(...)만 사용하는 경우도 있다. 이 둘은 어떤 차이가 있을까?…FE · 웹개발 · 프론트엔드
- 0126 · FE4월 4일[Next.js] Next.js 페이지 이동, 어떤 방법이 최선인가?서론 최근 app 라우팅 기반에서 프로젝트를 진행하면서, 핸들러에 의해 페이지 이동을 구현해야 했었다. 페이지 간 이동은 사용자 경험에서 중요한 요소로, 어떤 방법을 선택하느냐에 따라 애플리케이션의 성능과 사용성이 크게 달라질 수 있기에 더욱 어떤 …FE · 웹개발 · 프론트엔드
- 0125 · FE4월 4일[Next.js] Next.js + Tailwind에서 커스텀 폰트를 가장 쉽게 적용하는 방법!? 서론 Next.js에서 Tailwind CSS를 사용할 때, 커스텀 폰트를 적용하는 방법은 여러 가지가 있다. 웹사이트의 타이포그래피는 사용자 경험을 좌우하는 중요한 요소 중 하나이며, 올바른 폰트 적용 방식은 성능 최적화와 가독성 개선에 기여한…FE · 웹개발 · 프론트엔드