Next.js package.json scripts dependencies 이해
Next.js 프로젝트에서 명령을 실행할 때 실제로 어떤 패키지와 script가 연결되는지 알아두면 환경 오류를 훨씬 빠르게 찾을 수 있습니다.
프론트엔드
HTML·CSS부터 JavaScript, React와 상태관리까지, 화면을 만들고 데이터를 다루는 기술을 배웁니다.
총 177개의 글
Next.js 성능 최적화 체크리스트 번들 이미지 캐시
성능 최적화는 코드를 많이 바꾸는 일이 아니라 실제 병목 후보를 좁히는 과정입니다. Next.js에서는 Client Component 범위, JS 번들, 이미지, 캐시, 데이터 요청 구조를 먼저 봅니다.
Next.js 렌더링 성능 최적화 기준
Next.js 화면이 느릴 때 서버 렌더링, 네트워크, 클라이언트 JS, React 리렌더링을 한 문제로 묶지 않습니다.
Axios 설치와 Next.js API 요청 구조
Next.js에서는 서버 데이터 조회에 fetch를 그대로 사용할 수 있습니다. 그렇다고 Axios가 필요 없는 것은 아닙니다. 브라우저에서 외부 API를 호출하거나 공통 요청 설정이 필요할 때 Axios를 선택할 수 있습니다…
Next.js redirects 설정과 URL 이동 처리
URL 구조가 바뀌면 사용자가 과거 링크로 들어왔을 때 새 주소로 연결해야 합니다. 정적 규칙은 next.config redirects로, 서버 로직의 실행 결과에 따른 이동은 redirect() 같은 API로 처리할 수 있습…
Next.js SEO SSR 초기 HTML 검색 노출 구조
검색 노출을 설명할 때 “SSR이면 SEO가 된다”는 문장만으로는 부족합니다. 실제로 중요한 것은 검색엔진이 처음 받은 응답에 핵심 콘텐츠와 링크가 포함되는지, metadata와 본문 구조가 일치하는지입니다.
프론트엔드 SEO 기초: HTML 구조와 이미지 성능 진단하기
제목·설명·링크·제목 계층과 이미지 속성을 작은 HTML 페이지에서 고칩니다. LCP와 CLS, 실험실과 실사용 데이터의 차이도 구분합니다.
Next.js SEO 체크리스트 metadata 초기 HTML OG
기능이 완성돼도 검색엔진이 보는 초기 HTML, metadata, canonical, OG 이미지가 잘못되어 있으면 검색 노출과 공유 품질이 떨어질 수 있습니다.
Next.js App Router 학습 순서와 TaskFlow Next.js 시작
React로 TaskFlow SPA를 완성했다면 다음 단계는 화면을 여러 URL로 나누고, 서버와 브라우저가 각각 어떤 일을 맡을지 구분하는 것입니다. Next.js App Router는 React 위에 파일 기반 라우팅, S…
React Compiler 기준 useMemo useCallback 언제 줄일까
React 과정의 마지막 단계는 “useMemo와 useCallback을 많이 넣기”가 아닙니다. 이전 글에서 실제 렌더링을 측정했으므로 이제 어떤 최적화가 필요한지 판단할 수 있습니다.