Develog 썸네일형 리스트형 Babel과 Webpack 그리고 Vite +a https://news.hada.io/topic?id=21430 위 글을 읽고 Next.js15.1+ 부터는 Vercel에 묶여있다는 말에 그게 무엇인가! 왜 Vite를 못쓴다고 난리인지 찾아보는 과정에서 번들링, 트랜스파일, 빌드 개념을 다시 잡았습니다. IE와 같은 구형 브라우저는 JavaScript의 최신 표준인 ESM(ECMAScript Modules)을 지원하지 않습니다. 또한 ES6 이상의 문법(예: 화살표 함수, 지수 연산자 등)도 제대로 동작하지 않기 때문에, 이러한 브라우저 환경에서 최신 문법으로 작성한 코드를 실행하려면 추가적인 개발 환경 설정이 필요합니다.대부분의 현대 브라우저는 ESM을 지원하지만, 여전히 실무에서는 모듈 로더나 번들러를 사용하는 것이 일반적입니다. 특히 다양한 환경.. 더보기 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 프로그.. 더보기 이전 1 2 3 4 ··· 6 다음
