프론트엔드 썸네일형 리스트형 PR Agent 도입해서 혼자서 코드 리뷰 하기 (aka. 혼자여도 코드리뷰가 하고싶어!) 0. 목적사이드 프로젝트 프론트엔드가 저 혼자지만 코드리뷰가 하고싶었어요..우리는 AI가 있기때문에 혼자서 북치고 장구치고 다 할수 있습니다. 그렇게 찾아냈습니다! PR 생성을 도와주고 코드리뷰도 해주는 PR-Agent 오픈소스! https://github.com/qodo-ai/pr-agent GitHub - qodo-ai/pr-agent: 🚀 PR-Agent (Qodo Merge open-source): An AI-Powered 🤖 Tool for Automated Pull Request Analysis,🚀 PR-Agent (Qodo Merge open-source): An AI-Powered 🤖 Tool for Automated Pull Request Analysis, Feedback, Su.. 더보기 서버컴포넌트와 클라이언트 컴포넌트 분리를 통해 성능 최적화 (with.Next.js) 문제발견로딩페이지의 LCP 최대 콘텐츠 페인트 속도가 약 5초로 Core Web Vitals 기준 Poor(매우구림) 수준이었다.또한 로딩 프로그래스바가 없어서, 리프레쉬토큰을 재발급 할 때, 사용자가 알 지 못한다.개선 목표로딩속도를 최적화 하기위해, 메인페이지(클라이언트 컴포넌트)를 서버컴포넌트와 클라이언트 컴포넌트로 분리하자!!로딩프로그래스 바를 추가하여 CLS (누적 레이아웃 시프트)를 최소화하자!메인 페이지SSR로 페칭하는 부분이 있음,페칭하고 전역상태로 저장하는 부분이 있음이를 분리 할 수는 없을까?이유 : fetching데이터를 외부에서 가져오고, useEffect로 client상태는 분리하자.결과 기존코드 //[channelID]/[sessionCode]/page.tsx const r.. 더보기 서버컴포넌트와 클라이언트 컴포넌트 잘 사용하기 (with Next.js) 1. Next.js의 서버 컴포넌트와 클라이언트 컴포넌트서버 컴포넌트서버 컴포넌트란 React에서 선택적으로 서버에 캐시하여 렌더링할 수 있는 컴포넌트다. Next.js에서는 라우트 세그먼트별로 세분화하여 부분 렌더링과 스트리밍이 가능하도록 설계되어 있다. Next.js에서 서버 컴포넌트를 렌더링하는 전략은 다음 세 가지가 있다.정적 렌더링: 라우트가 빌드 타임에 미리 렌더링되거나 백그라운드에서 재검증된다.동적 렌더링: 라우트가 사용자의 각 요청 타임에 맞춰 렌더링된다.스트리밍: 서버에서 생성된 UI가 준비되는 대로 점진적으로 클라이언트로 전송된다. 이를 통해 사용자는 전체 콘텐츠가 로딩되기 전에 일부 콘텐츠를 미리 볼 수 있다. (Next.js의 앱 라우터 기본값)서버컴포넌트의 장점 : 클라이언트 번들.. 더보기 [우아한-Tech 스터디] Framer-motion을 이용한 애니메이션으로 화려한 웹 페이지 만들기 - 2주차 - 개요Framer-mortion 으로 페이지 전환시의 효과를 구현한다.사용 개념motion.div의 initial ,animate, exit 를 이용했다. + react-router-dom-v6 도 준비물 motion.div, AnimatePresense, react-router-dom-v6, useLocation STEP 1경로에 맞는 페이지 만들기import { AnimatePresence, motion } from "framer-motion";import { useLocation } from "react-router-dom";const About = () => { const location = useLocation(); return ( AnimatePresence mode="w.. 더보기 이전 1 다음
