블로그 모아보기 - 인프런

인프런 워밍업 클럽 Frontend - 1주차 발자국 👣

📚 1주차 공부 내용 정리Next.js 렌더링CSR : React App의 기본적인 렌더링 방식으로 클라이언트인 브라우저에서 렌더링을 진행하는 방식이다.SSR : 서버에서 완성된 HTML을 만들어 브라우저에 보내주는 방식이다.SSG : 빌드 타임에 미리 페이지를 생성해두는 렌더링 방식이다.ISR : SSG 페이지를 일정 시간마다 주기적으로 새로 생성해주는 방식이다.Cursor AITabAI가 코드를 자동으로 완성해주는 강력한 기능여러 줄의 코드를 한 번에 작성할 수 있음TabChat코드 관련 질문에 정확한 답변을 제공컨텍스트를 이해하고 관련 조언을 제공Ctrl/⌘ + L인라인 코드 편집편집기 창에서 새로운 코드를 생성하거나 기존 코드를 변경 가능Ctrl/⌘ + K프로젝트 세팅Next.js App 프로젝트 생성npx create-next-app@latest # 최신 버전 설치 npx create-next-app@15.2.5 # 강의시 최신 버전 (권장) npx create-next-app@15.2.5 ./ # 현재 디렉토리를 프로젝트로 설정TypeScript 설정Next.js TypeScript Plugin : VS Code에서 Next.js 프로젝트 개발 시 타입스크립트 지원을 자동화해주는 확장 프로그램ESLint, Prettier 설정ESLint : 코드의 품질을 검사하고 오류를 검사하는 도구Prettier : 코드를 일관된 스타일로 자동으로 정리해주는 도구Tailwind CSS, shadcn/ui 설정shadcn/ui : Tailwind CSS를 기반으로 한 현대적이고 아름다운 컴포넌트 모음 (오픈소스 UI 시스템) 🏃‍♀ 미션미션을 해결할 때는 주로 공식 문서를 참고했다. 내용을 완전히 나의 언어로 표현하는 데 어려움도 있었지만, 직접 글로 정리해보면서 이해를 더 깊게 할 수 있었다.😵‍💫 회고(혼자서만) 눈물나는 스토리이번 워밍업 클럽 4기에는 Frontend뿐만 아니라 CS 과정도 참여했다. 하지만 워밍업 외에도 따로 준비하고 있는 중요한 일정(가장 중요한 ⭐️)이 있어서 모든 걸 병행하기엔 꽤 벅찼다.그래서 Frontend는 완주 러너를 목표로, CS는 기간 내 완강을 목표로 달리기로 결정했다.다행히도(?) 지난 기수에서는 우수 러너로 선정된 덕분에, 이번에는 모든 걸 욕심내기보다는 포기할 건 과감히 포기하고, 선택과 집중을 하자고 마음먹었다.우수 러너는 안녕........ 그래도 완주와 완강은 포기 못 해!!!!짐코딩 코치님의 강의 완전 짱짱이번에 처음으로 짐코딩 코치님의 강의를 들었는데......마치 내가 갓난아기가 된 것 같은 기분이랄까....걸음마부터 손잡고 하나하나 알려주시는 친절함에 감동받았다...... 👶🍼👍Cursor AI와의 첫만남이번 강의를 통해 처음으로 Cursor AI를 사용해봤다.아직은 낯설고 어색하지만, 써보니 정말 대박이다…! 앞으로 더 잘 활용해서 작업 속도도 높이고, 학습에도 적극 활용해보고 싶다.

워밍업 클럽 4기 프론트엔드 미션2 - 웹 렌더링의 다양한 방식

안녕하세요! 저는 짐코딩님의 'Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)' 강의를 수강 중인 인프런 워밍업 클럽 4기 참여자입니다. 이번 스터디 과제로 웹 렌더링의 다양한 방식에 대해 정리하면서 궁금했던 SEO까지 정리를 해보았습니다. 웹 렌더링의 다양한 방식 이해하기: CSR, SSR, SPA, SSG, ISR **웹 렌더링이란?**웹 페이지의 HTML 콘텐츠를 최종적으로 만들어내는 과정으로누가(서버/클라이언트) HTML을 만들고,언제 HTML이 만들어지고,어디서(서버/클라이언트) 데이터가 HTML이 통합되는지에따라 몇가지 방식이 있다. 1. SPA (Single Page Application)한 페이지에 처음에 한 번 HTML, JS, CSS를 로드하고 이후에는 페이지 이동 없이 필요한 데이터만 받아서 렌더링대부분 CSR 방식 사용해서 구현됨, Gmail, Facebook, Twitter, Trello 같은 서비스장점: 사용자 경험이 부드럽고 앱처럼 동작(새로고침 x)필요한 데이터만 요청해서 서버와 통신량 줄일 수 있음프론트엔드 개발자와 백엔드 개발자가 독립적으로 일할 수 있음단점:초기 로딩 느림 (CSR일 경우)SEO 대응이 어렵다 (CSR만 쓰면)여러 화면 상태를 관리하는 것이 복잡할 수 있음 MPA (Multi Page Application)페이지마다 HTML이 분리되어 있는 고전적인 웹사이트 구조1. SPA는 클라이언트 중심 구조URL은 바뀌지만 페이지 전체가 새로고침 되지 않음실제로는 JS로 필요한 부분만 바뀜렌더링 방식:기본은 CSR최근에는 Next.js, Remix 등을 통해 SSR/SSG/ISR도 SPA 안에서 사용 가능2. MPA는 서버 중심 구조각 URL마다 서버에서 완전히 다른 HTML 페이지를 생성렌더링 방식은 거의 항상 SSR (서버 템플릿)(ex: /profile을 누르면 서버가 HTML을 새로 만들어서 보내줌) 2. CSR (Client Side Rendering)모든 렌더링을 브라우저에서 처리 (HTML은 <div id="root"></div>만 있고, 나머지는 JS로 만듦)서버가 거의 비어있는 HTML 파일과 소스(JavaScript 번들)를 제공하면 브라우저에서 JS를 다운로드하고 실행해서 렌더링 함장점:한 번 로딩 된 후에는 페이지 전환이 부드러움(새로고침 발생 x)서버에 자주 요청하지 않으니 서버 부담이 적음클릭, 드래그 같은 다양한 상호작용이 빠르고 부드러움(JS 로딩 후 렌더)단점:초기 화면이 늦게 나옴 (JS 로딩 후 렌더)검색엔진에 약함JS가 꺼져있는 환경에서는 렌더링이 안 됨3. SSR (Server Side Rendering)서버에서 완성된 HTML을 만들어 클라이언트에 전달페이지 접근시 서버가 요청을 받아서 HTML 내용을 완성해서 브라우저에 보내줘서 렌더링하고 JS를 로드해 버튼 클릭 기능 추가(하이드레이션)장점:초기 로딩 빠름SEO에 강함(완성된 HTML 렌더)JavaScript가 꺼져 있어도 내용 볼 수 있음단점:요청마다 서버 렌더링 → 서버 부담 증가페이지 이동시 새로고침 -> 깜빡임서버에서 클라이언틀로 보내는 데이터 양이 많아짐4. SSG (Static Site Generation)빌드할 때 미리 HTML을 만들어 배포 (정적 페이지)웹사이트 빌드시 모든 페이지의 HTML을 미리 만들어 CDN 같은 곳이 올려놓고 사용자 접속시 이 HTML을 바로 보내주고 렌더링후 JS 로드해 버튼 같은 기능 활성화장점:속도 매우 빠름 (CDN으로 배포 가능)서버 없이 배포 가능(해킹 위험 적음, 서버 비용 저렴)검색엔진이 매우 강함단점:데이터가 자주 바뀌는 페이지에는 부적합(매번 빌드해야 함)사용자마다 다른 내용 보여주기 어려움모든 페이지를 미리 빌드해야 하므로 페이지 수가 많으면 느림5. ISR (Incremental Static Regeneration)SSG를 일정 간격으로 서버에서 재생성빌드시 HTML을 미리 만들고 개발자가 설정한 시간이 지나면 새 페이지를 생성하는 동안 기존 페이지 보여주다가 완료하면 새 페이지 보여줌장점:SSG처럼 빠르면서도 최신성 유지 가능트래픽이 많고 데이터가 자주 바뀌는 서비스에 적합변경된 페이지만 다시 생성하므로 전체 사이트 다시 빌드 안해도 됨단점:완전히 실시간으로 반영되진 않음Next.js에 의존언제 어떤 걸 써야 할까?정리렌더링 방식 요약SEO에 대해 알아보기SEO란?검색엔진이 해당 페이지를 얼마나 잘 인식하고, 색인하고, 순위에 반영할 수 있느냐에 대한 기술적 차이SEO에 강하다는 건?검색엔진 최적화(SEO)에 강하다 = 검색엔진(예: 구글, 네이버 등)이웹페이지의 내용을 빠르고 정확하게 색인(indexing) 할 수 있고, 검색 결과에서 상위 노출되기 좋은 구조라는 뜻이다.검색엔진이 페이지를 인식하는 과정크롤링(Crawling): 검색엔진 로봇이 사이트를 방문해 페이지 구조와 콘텐츠를 수집렌더링(Rendering): 수집한 HTML, JS, CSS를 실제로 브라우저에서 보는 형태로 해석색인(Indexing): 콘텐츠를 분석해 검색DB에 등록랭킹(Ranking): 검색어와 관련된 페이지들을 평가해서 순서를 정함👉 이 중 렌더링과 색인 단계에서 문제가 생기면 SEO가 약해짐 렌더링 방식에 따른 SEO 영향1. SSR (서버 사이드 렌더링) 🔥 SEO에 강함HTML을 서버에서 미리 만들어 보냄 → 검색봇이 즉시 콘텐츠 확인 가능메타태그, OG 태그, 구조화 데이터 모두 즉시 제공 가능2. CSR (클라이언트 사이드 렌더링) 🔥 SEO에 약함HTML에는 <div id="root"></div> 만 있음 → 실제 콘텐츠는 JS 실행 후 생성됨검색봇이 JS를 실행하지 않으면 콘텐츠를 못봄검색에 안 잡히거나, 검색 결과에 제목/내용 없음구글은 JS 실행이 가능하긴 하지만 렌더링 비용이 크고, 늦게 색인됨 → 여전히 SEO에 불리함(구글: "If you care about SEO, don’t rely only on client-side rendering.") 3. SSG (Static Site Generation) 🔥 SEO에 매우 강함HTML이 정적으로 존재함 → 검색봇이 빠르게 인식 가능속도도 빠르고 콘텐츠도 완전한 상태4. ISR (Incremental Static Regeneration) 🔥 SEO에 강함 (SSG 수준)- HTML이 정적으로 존재 + 주기적으로 갱신됨추가 SEO에 영향을 주는 요소<title>, <meta name="description"> 등 메타태그 유무<h1>, <p>, <a> 등 의미 있는 HTML 구조페이지 로딩 속도 (Core Web Vitals)모바일 최적화 여부중복 콘텐츠 및 링크 구조sitemap.xml, robots.txt➡ CSR에서는 이걸 JS로 렌더링하기 때문에, 검색엔진이 실행을 못하면 아예 안 보임 검색엔진 로봇이 사이트를 수집하는 방식구글: Googlebot네이버: YetiBing: Bingbot1. 🕒 언제 방문하나요? (크롤링 타이밍)검색봇이 사이트를 방문하는 시점은 다음과 같이 결정됨:⏱ 인기 있는 사이트는 몇 분~수 시간마다,소규모 개인 블로그는 수일~수주 간격으로 방문할 수 있음. 2. 🛠 어떻게 수집하나요? (크롤링 & 렌더링 방식)🔹 1단계: 크롤링 (Crawling)HTML, CSS, JS 등의 리소스 파일을 요청<a href="...">, sitemap.xml 등으로 링크를 따라 이동🔹 2단계: 렌더링 (Rendering)JS 실행 → 실제 페이지 내용을 브라우저처럼 구성DOM 생성 → 콘텐츠 수집 가능 여부 판단📌 CSR 페이지는 이 렌더링 과정이 없으면 "빈 페이지"로 인식됨.🔹 3단계: 색인 (Indexing)수집된 콘텐츠를 분석하여 검색 데이터베이스에 저장문서의 주제, 키워드, 제목, 링크, 이미지 등을 평가3. 🔍 크롤링 방식 예시✅ 정적 페이지 (SSG, SSR) <html> <head> <title>강아지 입양 정보</title> <meta name="description" content="귀여운 강아지들을 소개합니다."> </head> <body> <h1>푸들, 시츄, 리트리버</h1> </body> </html>→ Googlebot: HTML 바로 수집 → 색인 가능❌ 클라이언트 사이드 렌더링 (CSR) <html> <body> <div id="root"></div>  <script src="bundle.js"></script> </body> </html>Googlebot은 JS도 실행하긴 하지만:렌더링 비용이 크고실패할 확률도 있으며느리게 색인됨 (며칠~몇 주 지연될 수 있음) 4. 📁 크롤링 제어 도구들정리

frontend･webrendering