React 기초 문법 가이드React는 컴포넌트 기반 UI 라이브러리로, 효율적으로 사용자 인터페이스를 구성하기 위해 사용되며. JSX 문법과 컴포넌트 개념이 핵심1. JSX 문법React는 JavaScript와 HTML을 결합한 JSX (JavaScript XML) 문법을 사용function App() { return Hello, React!; }JSX 특징HTML과 유사하지만 JavaScript 코드로 변환가능중괄호 {}로 JavaScript 표현식을 사용가능const name = 'Nell'; const age = 25; function App() { return {name}는 {age}살입니다.;}2. 컴포넌트 (Components)(1) 함수형 컴포넌트function Greeting() { re..

ReportWebVitals?**reportWebVitals**는 React 프로젝트에서 웹 성능 데이터를 수집하는 함수React 공식 템플릿 (Create React App)으로 프로젝트를 생성하면 기본적으로 포함되어있음이 함수는 Web Vitals 메트릭(웹 성능 지표)을 기록하거나 분석 도구로 전송하는 데 사용Web Vitals 메트릭메트릭설명FCPFirst Contentful Paint - 첫 번째 콘텐츠가 렌더링되는 시간LCPLargest Contentful Paint - 가장 큰 콘텐츠가 렌더링되는 시간CLSCumulative Layout Shift - 레이아웃 불안정성FIDFirst Input Delay - 첫 사용자 입력에 대한 응답 시간TTFBTime to First Byte - 첫 바이..

Webpack이란?Webpack은 JavaScript 애플리케이션을 위한 **모듈 번들러(Module Bundler)**이다.여러 개의 자바스크립트 파일, CSS, 이미지 등을 하나의 파일(혹은 효율적인 여러 파일)로 묶어 배포할 수 있도록 최적할수있는 도구Webpack이 필요한이유??문제 상황프로젝트가 커질수록 많은 자바스크립트 파일과 CSS 파일이 생김브라우저가 모든 파일을 개별적으로 가져오면 속도가 느려지고 관리가 어려워짐최신 JavaScript 문법은 일부 브라우저에서 지원되지 않을 수 있기때문이다.해결 방법모듈 번들링: 여러 파일을 하나로 묶어 네트워크 요청을 최소화코드 압축(uglify): 파일 크기를 줄여 로딩 속도 개선트랜스파일링(Babel): 최신 문법을 구형 브라우저에서도 사용 가능하도..

Babel (JavaScript 컴파일러) Babel이란?Babel은 최신 JavaScript 코드를 구형 브라우저나 Node.js 환경에서 사용할 수 있도록 ES5로 변환해 주는 컴파일러Babel 설치npm install --save-dev @babel/core @babel/preset-env babel-loader필수 패키지패키지설명@babel/coreBabel 핵심 패키지@babel/preset-env최신 자바스크립트 문법 지원babel-loaderWebpack과 Babel 연동 2.4 Babel 사용 방법1) Webpack과 함께 사용하기webpack.config.jsconst path = require("path");module.exports = { entry: "./src/index.js",..

1. npm (Node Package Manager)npm 명령어 정리npm init프로젝트 초기화 (package.json 생성)npm init -y기본 설정으로 바로 초기화npm install 패키지 설치npm i install의 단축어npm install -g 글로벌 설치npm uninstall 패키지 삭제npm update패키지 업데이트npm list설치된 패키지 확인npm run package.json에 정의된 스크립트 실행npm startstart 스크립트 실행 (npm run start)와 동일npm test테스트 스크립트 실행npm audit보안 취약점 검사npm cache clean --force캐시 삭제설치 예제npm install express스크립트 예제 (package.json){..