워밍업 클럽 4기 프론트엔드 - 발자국 3주차

일주일 동안 공부한 내용서버 액션 (Server Actions) 개념 및 활용폼 기반 서버 액션 및 이벤트 핸들러 사용법캐시 전략: unstable_cache, React Query 캐시데이터 유효성 검증 (zod), useActionState라우팅 고급 기술 (병렬 라우트, 인터셉팅 라우트)SEO 및 메타데이터 설정라우팅 동작 방식 및 코드 분할, 프리패칭회고이번 주는 Next.js App Router의 핵심 기능들과 고급 라우팅 기법들을 깊이 있게 배울 수 있었던 시간이었다. 특히 서버 액션과 캐시 전략을 공부하면서 서버-클라이언트 간 데이터 흐름에 대한 이해가 많이 높아졌다. 병렬 라우트나 인터셉팅 라우트처럼 평소 잘 접하지 않던 기능들을 실습해보며 다양한 UI/UX 패턴도 익힐 수 있었다. 강의자료가 정말 꼼꼼하게 정리되어 있어서 따라가기 수월했고, 아직 개념적으로 낯선 부분들도 많지만 천천히 반복해서 읽으면서 익숙해지고 있는 거 같다. 실용적인 내용이 많아 정말 유익했고, 전체적인 프론트엔드 구조에 대한 이해가 한층 넓어진 것 같다. 미션이번주 미션은 서버 액션(Server Actions)에 대한 개념과 필요성을 정리하고, 공식 문서를 바탕으로 서버 컴포넌트와 클라이언트 컴포넌트에서의 활용법을 블로그 형식으로 작성하는 것이었다. 처음에는 use server 같은 지시어가 익숙하지 않았고 개념이 좀 어려웠는데, 강사님이 준비해주신 강의자료 덕분에 점점 익숙해졌다. 클라이언트와 서버의 역할을 나누는 데 있어서 굉장히 많은 걸 배운 느낌이다. 역시 쉽진 않았지만 진짜 많이 배웠다!

워밍업 클럽 4기 프론트엔드 - 발자국 2주차

일주일 동안 공부한 내용노션 API 이용해서 MDX로 블로그 만들기환경 설정 및 vercel 배포성능 최적화 (LCP, React Suspect,Loading UI, Streaming)무한 스크롤(useInfiniteQuery) 회고이번주에 정말 많은 것을 배웠다. 솔직히 쉽지 않았고 아직도 완전히 이해가 되지않는 부분들이 있다. 그러나 단시간에 많은 것을 경험해볼 수 있어서 공부할수록 얻어가는게 많은 것 같다. 강사님의 꼼꼼한 강의자료를 보며 얼마나 준비를 많이 하셨는지 알 수 있고 강의 하나 하나에 들이신 정성에 인상 깊었다. 이번주에 배운 내용들이 다른 단순히 next 프레임워크를 벗어나 프론트엔드 개발자로서의 역량을 키울 수 있는 내용들이 담겨있어서 즐겁게 배웠고 강사님께 감사함을 느꼈다. 미션이번주 미션은 노션 API 이용해서 MDX로 블로그 만들고 vercel로 배보하는 것이였다. 이렇게 빨리 배포해볼 줄 몰랐는데 next에선 배포하는 것이 정말 간단해서 놀랐다. 강사님 말씀대로 먼저 최소 기능을 구현한 뒤 배포를 해보고 조금씩 기능을 추가하고 최적화를 하는것이 바람직한 것 같다. 재미있었고 짧은시간에 많이 배우는 것 같다. 다음주엔 더 빡세게 노력해야겠다!!! 화이팅~~!!!

워밍업 클럽 4기 프론트엔드 - 발자국 1주차

일주일 동안 공부한 내용커서 AI 툴 기본 환경 세팅과 사용법웹 렌더링 방식 (CSR, SPA, SSR, SSG, ISR)Next 프로젝트 환경 세팅과 사용할 라이브러리 공부(eslint,prettier,tailwind,shadcn)git 기본 사용법라우팅 방식회고강의 계획표만 봤을때는 금방 할 것 같았는데 제대로 이해하고 정리하다보니 생각보다 시간이 많이 걸렸다. 강의는 한 번 보기보다 여러 번 반복해서 보는 게 확실히 도움이 되는 것 같았다. 일주일 밖에 안되었지만 환경 세팅을 하고 강사님의 인사이트와 함께 설명을 듣고 정리를 하면서 프로젝트의 구성을 이해하게 되어서 뿌듯하다. 다음주에도 이번주처럼 강의를 반복해서 듣고 정리를 해가며 많은 것을 제대로 배워가야겠다. 강의를 들으면서 강사님께서 얼마나 이 강의를 위해 준비를 많이 하시고 수강자들을 배려해주셨는지 체감했던 것 같다. 너무 감사하고 다음주엔 더 열심히 해서 더 많이 배워가야겠다!! 미션이번주 미션은 주로 들었던 강의 내용을 제공해주신 노션 템플릿에다 블로그로 정리하는 것이였다. 강의와 강의자료, 공식문서, 챗gpt를 이용해 내가 제대로 이해할때까지 찾아보면서 정리를 했다. 그랬더니 처음에는 무슨말인지 잘 안와닿았는데 내가 이해할 수 있는 방식을 찾게 된 것 같다. 남은 강의를 수강할때도 이렇게 블로그에 내가 이해할 수 있는 방식으로 정리해가다보면 제대로 학습할수 있을 것 같다. 수강자에게 도움이 되는 미션들이였다.

워밍업 클럽 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은 만 있고, 나머지는 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에는 만 있음 → 실제 콘텐츠는 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에 영향을 주는 요소, 등 메타태그 유무, , 등 의미 있는 HTML 구조페이지 로딩 속도 (Core Web Vitals)모바일 최적화 여부중복 콘텐츠 및 링크 구조sitemap.xml, robots.txt➡ CSR에서는 이걸 JS로 렌더링하기 때문에, 검색엔진이 실행을 못하면 아예 안 보임 검색엔진 로봇이 사이트를 수집하는 방식구글: Googlebot네이버: YetiBing: Bingbot1. 🕒 언제 방문하나요? (크롤링 타이밍)검색봇이 사이트를 방문하는 시점은 다음과 같이 결정됨:⏱ 인기 있는 사이트는 몇 분~수 시간마다,소규모 개인 블로그는 수일~수주 간격으로 방문할 수 있음. 2. 🛠 어떻게 수집하나요? (크롤링 & 렌더링 방식)🔹 1단계: 크롤링 (Crawling)HTML, CSS, JS 등의 리소스 파일을 요청, sitemap.xml 등으로 링크를 따라 이동🔹 2단계: 렌더링 (Rendering)JS 실행 → 실제 페이지 내용을 브라우저처럼 구성DOM 생성 → 콘텐츠 수집 가능 여부 판단📌 CSR 페이지는 이 렌더링 과정이 없으면 "빈 페이지"로 인식됨.🔹 3단계: 색인 (Indexing)수집된 콘텐츠를 분석하여 검색 데이터베이스에 저장문서의 주제, 키워드, 제목, 링크, 이미지 등을 평가3. 🔍 크롤링 방식 예시✅ 정적 페이지 (SSG, SSR) 강아지 입양 정보 푸들, 시츄, 리트리버 → Googlebot: HTML 바로 수집 → 색인 가능❌ 클라이언트 사이드 렌더링 (CSR) Googlebot은 JS도 실행하긴 하지만:렌더링 비용이 크고실패할 확률도 있으며느리게 색인됨 (며칠~몇 주 지연될 수 있음) 4. 📁 크롤링 제어 도구들정리