본문 바로가기

Develog

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의 앱 라우터 기본값)서버컴포넌트의 장점 : 클라이언트 번들.. 더보기
Node.js 패키지 매니저 선택(npm& yarn & pnpm 비교) 패키지 매니저란?패키지 매니저는 애플리케이션의 의존적인 패키지를 관리해 준다.라이브러리의 설치, 삭제, 업데이트등을 도와주고 여러 dependencies 환경에 설치하고 관리할 수 있게 해 준다.0. 시작하며 대표적인 패키지 매니저로는 npm, pnpm, yarn (yarnBerry)가 있다.오늘은 이 세 가지 패키지 매니저의 차이를 알아보고 각각의 장단점을 알아보고자 한다.1. NPM장점Node.js 설치 시 기존으로 함께 제공되는 공식 패키지 매니저200만 개 이상의 패키지를 보유한 세계 최대 오픈소스 패키지 저장소단점설치속도가 느리다- 의존성 하나하나를 실제로 node_modules 폴더에 복사한다.- 특히 프로젝트가 커질수록 node_modules의 파일수가 증가하여 수만 개 이상이 되기도 한다... 더보기
React의 state는 동기인가 비동기인가. with 이벤트 루프 🤔 시작하며결국 시작은 우리가 처음 리액트를 배울때 헷갈렸던 가장 기초적인 예제에서 시작한다. const handleClick = () => { setCount(count + 1); console.log(count); // 이전 값이 찍힘}; 왜 여기서 이전 값이 찍히는가 ? 왜 바로 count+1된 값이 찍히지 않는걸까? state는 언제 업데이트 되는걸까?이에 대한 답을 알아보도록 하겠다.📚 동기와 비동기 간단 정리동기(sync) : 실행순서가 보장되는 것을 뜻한다. 호출 시 결과를 바로 확인할 수 있다. (const, let, for, if, function, console.log() 기본적으로 모두 js의 함수는 모두 동기이다.) 비동기(async) : 실행순서가 보장되지 않는것을 뜻한다.. 더보기
Cursor 사용 후기: 초보자도 웹사이트 만들기 가능한 AI 코드 에디터 체험기 한줄요약 : 세시간 반동안 Cursor로 이거만듬 삼행시로 행복한 시간 0. 발단코파일럿과 같은 AI 어시스턴트가 생산성을 올려준다는 요즘, 저는 코드는 직접 쳐야 늘지! 라는 사람입니다. 주변의 무수한 코파일럿 추천에도 꿋꿋이 경험치가 쌓일 때까지 쓰지 않겠다는 마음이었는데요.하지만 너무 궁금했습니다! 너무 써보고 싶어! 궁금해! 대체 왜 다들 그렇게 열광하는가?! 그래서   네, Cursor, AI code editor 결국 찍. 먹 시작합니다.  1. 개요 : Cursor란? 요즘 핫 한 AI를 활용한 코드 에디터입니다.탭과 간단한 프롬프트를 통해 코드를 짜주며, 개발자의 코드 베이스를 읽고 그에 맞춰 응답한다고 합니다. 2. Cursor랑 다른 AI 랑 가격비교 completions란?Comple.. 더보기
프론트엔드 에러 핸들링 구조 정리 (Axios + CustomError 적용) 여러분은 어떻게 에러를 관리하시나요? 저는 사이드 프로젝트를 하며 어질어질했습니다.에러관리 코드가 어질러진 방처럼 흩어져 있었거든요. 그래서 ErrorHandling 구조를 고민하며 청소를 시작했습니다.한장요약  1. 에러와 에러핸들링? Errors? JS코드를 실행할때, 각각 다른 에러들이 발생할 수 있다. 에러들은 개발자들에의해서, 잘못된 INPUT에 의해서 또는 예측할 수 없는 일들에 의해 발생한다.에러가 일어났을 때, JS는 멈춘후에 에러메세지를 생성한다.이를 기술적으로는 Throw an exception 즉, 에러를 던진다고 한다. W3Schools 등 공식 문서나 내 경험상에서도 자바스크립트에서는 Error 와 Exception을 명확히 구분하지 않고 비슷한 맥락으로 다뤄진다.Error 프로그.. 더보기
Next.js 보일러 플레이트 만들기 개념🔥 **보일러플레이트(Boilerplate)**란?1. 개념 : 반복적으로 자주 사용하는 코드 구조나 파일. 2. 이름의 유래 : 신문 인쇄소에서 자주 쓰던 금속판에서 온 말로, 자주 쓰는 문구를 금속판으로 찍어두고 복사 붙여넣기 하듯 사용했던 것에서 유래된다. 소프트웨어에선 반복적으로 쓰는 코드라는 의미 3. 개발에서의 의미매 프로젝트마다 거의 비슷하게 생기는 기본 뼈대 코드처음부터 직접 하나하나 다 작성하지 않아도 되도록, 초기 세팅을 미리 해둔 코드 묶음4. 보일러 플레이트의 장점 시간 절약: 매번 똑같은 설정 안 해도 됨.일관성 유지: 팀원들이 같은 구조에서 개발.생산성 향상: 중요한 로직에만 집중 가능. 목적스토리북이나, 다른 라이브러리 등을 공부하거나 테스트하고 싶을때, 매번 설정을 새로.. 더보기