코딩병원

Frontend/Next.js

[Next.js] Turborepo와 pnpm을 사용하여 Monorepo 구축

최근 Frontend 생태계에서 Monorepo는 선택이 아닌 '필수'가 되어가고 있는 추세입니다. 여러 개의 프로젝트와 라이브러리를 하나의 저장소에서 관리하면 코드 재사용성이 높아지고, 의존성 관리가 쉬워지는게 주된 이유입니다. 오늘은 그 중에서도 가장 핫한 조합인 Turborepo와 pnpm을 사용하여 Monorepo를 구축해보겠습니다.1. pnpm과 Turborepo를 선택한 이유모노레포 도구에는 우리가 알지 못하는 다양한 것들이 있습니다. 예를 들면, Nx나 Lerna 등이 있습니다. 그런데 저는 왜 pnpm과 Turborepo를 골랐을까요? pnpm(Performant npm) Phantom Dependency 해결: npm이나 yarn과 달리, package.json에 명시되지 ..

2026. 1. 31.

Frontend/Next.js

[Next.js] OG 태그 설정 (feat. 카톡 링크 설정)

분명 다른 멋진 사이트들은 링크만 올려도 예쁜 썸네일 이미지와 제목이 뜨는데, 내 사이트는 왜 휑하게 URL만 덩그러니 뜨는 걸까요? 범인은 바로 OG(Open Graph) 태그의 부재입니다. 오늘은 내 사이트를 '프로페셔널하게' 보이게 만드는 가장 쉬운 방법, OG 태그에 대해 알아봅니다.1. 오픈 그래프(Open Graph)가 뭔가요?오픈 그래프(OG)는 쉽게 말해 "내 웹사이트의 디지털 명함"입니다. 카카오톡, 슬랙, 페이스북, 트위터(X) 같은 SNS 봇들은 링크가 공유되면, 그 사이트에 잽싸게 접속해서 "이 사이트를 어떻게 요약해서 보여줄까?" 하고 정보를 긁어갑니다. 이때 봇들이 참고하는 표준 규약이 바로 og:로 시작하는 메타 태그들입니다. 이 명함을 제대로 파놓지 않으면, 봇들은 무엇을 보..

2026. 1. 18.

Frontend/Next.js

[Next.js] LCP 1초대로 줄이고 구글 점수 따내기

우리가 어떤 링크를 클릭하고 화면이 하얗게 멈춰있을 때, '뒤로 가기'를 누르고 싶은 충동이 들기까지 걸리는 시간은 얼마나 될까요? 놀랍게도 평균 3초라고 합니다. 아무리 디자인이 예쁘고(FOUC 해결), 화면이 안 흔들려도(CLS 해결), 일단 화면에 뭐가 떠야 사용자가 머무릅니다. 오늘은 사용자의 인내심이 바닥나기 전에 메인 화면을 '탁!' 하고 띄워주는 핵심 지표, LCP(Largest Contentful Paint)를 공략해 봅니다.1. LCP (Largest Contentful Paint)가 뭔가요?LCP는 단어 그대로 "가장 큰(Largest) 콘텐츠가 그려지는(Paint) 시간"입니다. 브라우저는 화면을 그릴 때 로고, 메뉴, 텍스트 등을 순차적으로 보여줍니다. 사용자는 자잘한 메뉴가 떴을 ..

2026. 1. 17.

Frontend/Next.js

[Next.js] Text content does not match server-rendered HTML 해결 방법

지난 포스팅에서 CSS 로딩 순서를 고쳐 FOUC를 완벽하게(일부분) 잡았습니다. 그런데, Next.js로 마이그레이션을 마쳤는데 버벅이더라구요? 정말 개발은 끝이없음을 다시 한 번 느낍니다... "Text content does not match server-rendered HTML" 분명 CSS는 멀쩡한데 화면이 미묘하게 깜빡이거나 스타일이 튀는 현상. 이건 단순한 스타일 문제가 아닙니다. 바로 하이드레이션 불일치(Hydration Mismatch), 개발자들 사이에서는 일명 '모던 웹의 FOUC'라고 불리는 녀석입니다. 도대체 '하이드레이션'이 뭐길래 우리를 괴롭힐까요?1. 하이드레이션(Hydration): 마른 오징어를 물에 불리는 과정?Next.js와 같은 SSR(Server-Side Rend..

2026. 1. 10.

Frontend/Next.js

[Next.js] <a /> 태그와 <Link />의 차이

Next.js는 서버 사이드 렌더링을 수행하지만 동시에 싱글 페이지 애플리케이션과 같이 클라이언트 라우팅 또한 수행합니다. 이러한 방식의 라우팅이 다소 생소하게 느껴질 수 있으며, Next.js를 처음 접했을 때 가장 혼란을 느끼는 부분입니다. 서버 사이드 렌더링과 클라이언트 라우팅이 혼재돼 있는 것이 복잡하게 느껴질 수도 있습니다. 아래 코드를 살펴보겠습니다.import type { NextPage } from 'next';import Link from 'next/link';const Home: NextPage = () => { return ( A 태그로 이동 {/* 차이를 극적으로 보여주기 위해 리소..

2024. 5. 4.

Frontend/Next.js

[Next.js] 페이지 구조

먼저 creatae-next-app으로 Next.js 프로젝트를 만들어봅시다. 저는 타입스크립트를 항상 기반으로해서 타입스크립트도 추가하였습니다. npx create-next-app@latest --ts 위의 명령어를 실행하니 아래와 같은 디렉토리 구조를 띄며 프로젝트가 생성되었습니다. 안의 내용들을 자세히 살펴보면 좋겠지만, 기본적인 것만 살펴보고 Next.js에서 제공하는 예약어로 관리되는 페이지를 추가로 확인해보겠습니다. package.json 이 파일에는 프로젝트 구동에 필요한 모든 명령어 및 의존성이 포함돼 있으므로 프로젝트의 대략적인 모습을 확인하는 데 매우 유용합니다. 여기에서 눈에 띄는 몇 가지 주요 의존성만 살펴보겠습니다. { "name": "coding hostpital", "versi..

2024. 4. 10.

Frontend/Next.js

[Next.js] rewrites로 API 키 숨기는 방법

rewrites (URL 변경되지 않음) rewrites를 사용하면 들어오는 요청 경로를 다른 대상 경로에 매핑할 수 있습니다. rewrites를 사용하면 들어오는 request 경로를 다른 destination 경로에 매핑할 수 있습니다. rewrites는 URL 프록시 역할을 하고 destination 경로를 mask 하여 사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게 합니다. 따라서 API 키를 숨길 수도 있습니다. 이와 반대로 redirects는 새 페이지로 reroute 되고 URL 변경 사항을 표시하여 API 키를 숨길 수는 없습니다. [index.tsx] import React, { useState, useEffect } from 'react'; import Seo from "../..

2022. 7. 18.

Frontend/Next.js

[Next.js] redirects로 경로 변경해서 연결하는 방법

redirects (URL 변경됨) redirect를 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect 할 수 있습니다. 즉, redirect를 이용해서 한 페이지에서 다른 페이지로 이동하게 할 수도 있고, 아예 다른 URL의 웹사이트로 이동하게 할 수 있습니다. redirect를 사용하려면 next.config.js에서 redirects 키를 이용하면 됩니다. [next.config.js] /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async redirects() { return [ { source: "/content", destination: "/abou..

2022. 7. 17.

Frontend/Next.js

[Next.js] getServerSideProps 사용법 및 예제

[서버로부터 데이터 불러오기] 기본적으로 Next.js는 모든 페이지를 미리 렌더링 합니다. 이렇게 미리 렌더링을 하여 html을 생성하게 되면 더 나은 성능과 SEO 이점을 얻을 수 있습니다. Next에는 두 가지 형태의 사전 렌더링이 존재합니다. 정적 생성: 빌드 시에 페이지를 HTML로 만들어 요청 시 제공합니다. 서버 사이드 렌더링: 페이지 요청 시 서버 사이드 렌더링을 통하여 HTML을 제공합니다. 외부 데이터를 필요로 하지 않는다면 서버 사이드 렌더링을 통하여 외부 데이터를 이용하여 렌더링을 한 후 HTML을 제공하게 됩니다. 이때 서버 사이드 렌더링에 대하여 Next는 옵션을 제공합니다. 정적 생성에 관한 옵션에 대해서는 다음에 다루도록 하겠습니다. [getServerSideProps] Ne..

2022. 7. 7.

Frontend/Next.js

Next.js란?

Next를 사용하는 이유React는 페이스북에서 개발한 오픈소스 라이브러리로, '컴포넌트'를 사용하여 UI(User Interface)를 효율적으로 만들기 위한 프레임워크입니다. 그리고 Next는 React 기반 프레임워크로 개발자에게 뛰어난 생산성과 편의성을 제공합니다. React 기반 프레임워크이기 때문에 React에 대한 기본적인 지식을 필요로 합니다. React만으로도 프론트엔드 개발을 할 수 있는데, 왜 Next를 사용해야 할까요? 그 이유는 React의 단점에서 찾아볼 수 있습니다.React의 단점(SPA의 단점)React는 싱글 페이지 애플리케이션(SPA으로서 사이트에 접속할 때 하나의 페이지를 불러옵니다. 페이지를 불러올 때 필요한 모든 자바스크립트 파일을 한 번에 불러옵니다. SPA는 페..

2022. 7. 4.