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",..

3계층 티어(3-tier architecture)는 소프트웨어 애플리케이션의 아키텍처 모델 중 하나로, 애플리케이션을 세 가지 주요 구성 요소로 분리하여 효율적으로 관리하고 유지보수할 수 있도록 도와줍니다. 이 모델은 프레젠테이션 계층, 비즈니스 계층, 데이터 계층으로 나뉩니다. 각 계층은 독립적으로 기능하며, 특정 역할을 담당합니다.1. 프레젠테이션 계층 (Presentation Layer)역할: 사용자와 상호작용하는 부분입니다. 사용자의 입력을 받고, 데이터를 시각적으로 표시하는 역할을 합니다.기능:사용자 인터페이스(UI)와 관련된 모든 작업을 담당합니다.브라우저, 모바일 애플리케이션, 데스크탑 애플리케이션 등 클라이언트 측에서 실행되는 코드가 이 계층에 속합니다.요청을 받아 비즈니스 로직 계층에 전..

Nginx는 주로 웹 서버로 사용되며, 고성능, 높은 확장성, 낮은 리소스 소모 등의 특성으로 널리 사용함Nginx 역할1. 웹 서버 (HTTP 서버)Nginx는 웹 서버로 가장 많이 사용됩니다. HTTP 요청을 처리하고 정적 파일 (예: HTML, CSS, JavaScript, 이미지 등)을 클라이언트에게 제공합니다. 이를 통해 웹 페이지가 클라이언트의 브라우저에 렌더링됩니다.정적 컨텐츠 제공: HTML, 이미지, CSS, JavaScript 파일 등을 서버에서 클라이언트로 제공.빠른 성능: 높은 동시 처리 성능을 자랑하며, 수많은 사용자 요청을 효율적으로 처리합니다.2. 리버스 프록시 (Reverse Proxy)Nginx는 리버스 프록시 서버로도 사용됩니다. 리버스 프록시는 클라이언트의 요청을 받아 ..