이 글은 Vercel에서 작성한 React Best Practice와 소스 코드를 보며 톺아보는 글입니다.|AI에게 "이 코드를 React Best Practice에 맞게 리팩토링해줘"라고 요청할 수도 있지만,왜 그 코드가 더 나은지, 어떤 원리로 성능이 개선되는지 이해하는 것이 중요합니다.이 시리즈에서는 Vercel이 정의한 8가지 카테고리를 하나씩 깊이 있게 살펴봅니다.각 Best Practice의 이론적 배경, 실제 성능 차이, 적용 시점을 중심으로 분석합니다.이 글은 sections에서 소개하는 8가지 섹션 중 7번째 섹션인 JavaScript Performance를 다룹니다.Vercel React Best Practices 구조Vercel은 React 성능 최적화를 Impact 수준에 따라 8개..
이 글은 원문을 번역하고, 추가 예시를 삽입한 글이다.Node.js 2025: 모던 서버사이드 자바스크립트 개발의 기준Node.js는 초창기 이후로 놀라운 변화를 거듭해왔습니다. 오랫동안 Node.js를 사용해왔다면 콜백이 난무하고 CommonJS가 지배적이던 시절에서, 오늘날처럼 깔끔하고 웹 표준을 따르며 개발 경험이 개선된 모습까지 변화를 직접 체감했을 것입니다.이 변화들은 단순히 겉모습만 바뀐 것이 아니라, 서버사이드 자바스크립트를 대하는 근본적인 방식의 변화입니다. 최신 Node.js는 웹 표준을 포용하고, 외부 의존성을 줄이며, 더 직관적인 개발 경험을 제공합니다. 아래 내용을 통해, 2025년의 Node.js 개발 트렌드를 정리합니다.1. 모듈 시스템: ESM이 표준가장 큰 차이를 체감할 수 ..
위 글은 NPM DEEP DIVE를 읽고, 그 중 5장의 내용을 정리하며,gpt와 티키타카한 글이다. Babel트랜스파일의 필요성ES6 이후 구형브라우저와 호환성을 유지하기 위해 트랜스파일러의 필요성이 대두됨초기에는 ES6코드를 ES5로 트랜스파일링 기능만 제공했으나, 이후 최신 ECMAScript + ESNext, 리액트 JSX 문법, 타입스크립트 등 확장 기능과 프리셋을 통해 특정 환경이나 목표에 맞는 미리 구성된 설정을 할 수 있게함동작방식추상 구문 트리(AST, Abstract Syntax Tree)는 소스코드의 구조를 트리 형태로 표현한 자료구조로, 컴팡일러와 인터프리터가 소스코 드를 분석하고 변환하는 역할을 하며, 최상위 노드, 노드, 자식 노드로 구성됨.아래는 astexplorer에서 fil..
JS와 React에서의 디자인 패턴을 다루기 앞서, 자바스크립트 + 리액트 디자인 패턴을 읽고,안티 패턴에 대해 정리해보려 한다.안티 패턴(Anti-pattern)디자인 패턴이 모범 사례를 뜻한다면, 안티 패턴은 겉으로만 해결책처럼 생긴 잘못된 패턴을 말하며 다음과 같이 정의한다.문제 상황에 대한 잘못된 해결책문제 상황에서 벗어나 올바른 해결책에 이르는 방법반면교사로 활용하기 위해 문서화하여 기록해야 하는 나쁜 디자인 패턴추가로,안티 패턴이란 획일적으로 어떤 사항에 해당되면 안티 패턴이라고 판단하는 것이 아니라,프로젝트 초기 설정 단계와 유지 보수 단계 등 처한 상황에 따라 결정되는 것이다.자바스크립트 안티 패턴(JavaScript Anti-pattern)자바스크립트는 변수에 저장된 값의 자료형을 명확하..
