Webpack

에러React 애플리케이션을 CRA를 이용하지 않은 프로젝트를 만들던 중 컴포넌트를 import 하던 중 아래의 사진과 같은 에러가 발생했다.에러 코드를 읽어보니 webpack 번들링 중 발생한 에러로서 import 해오는 주소를 절대주소로 가져오는 코드에서 발생한 에러 처럼 보인다.import Test from 'components/Test';import React from 'react';import { Route, Routes } from 'react-router-dom';function App() { return ( }> }> );}export default App; 위의 'components/Test' 에서 './c..

모듈 번들러 모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로써 유지보수성, 네임스페이스화, 재사용성 문제를 해결하기 위해 사용한다. 프론트엔드 개발은 모듈단위로 파일을 엮어 개발하는 방식을 사용한다. 즉, 모듈 끼리 의존성을 띄고있는데 아래와 같은 문제들이 생긴다. 많은 모듈들의 순서 처리(의존성 처리) 모듈이 많아질수록 HTTP 요청이 많아저 발생하는 오버헤드 해결방법 ES6+ 스펙의 코드를 처리하는 방식 이러한 문제들을 해결하기 위해 나타난 것이 모듈 번들러(Module Bundler)로 각각의 모듈 의존성을 해결해 하나의 JS 파일로 만드는 도구이다. 이미지 압축, 최소화 등의 여러가지 기능들도 제공하며 유명한 번들러는 Webpack, Parcel, Rollup 등이 있다. 트랜스파일러 ..

SSR (Server Side Rendering)이란? 말 그대로 이다. 사용자에게 제공할 UI를 서버에서 미리 렌더링 하는 것 이다. 반대로, CSR (Client Side Rendering)은 브라우저에서 UI를 렌더링 하는 것 이다. 각 방식의 장단점 Server Side Rendering Client Side Rendering 장점 1. 검색 엔진이 웹 애플리케이션의 페이지를 원할하게 수집할 수 있다. 2. 초기 헨더링 성능을 개선할 수 있다. 1. SSR에 비해 속도가 빠르다. 2. 서버의 부하가 낮다. 단점 1. 브라우저 대신 서버가 처리하므로 서버 리소스가 사용된다. 2. 프로젝트 구조가 복잡해지고, 개발이 어려워질 수도 있다. 1. 검색 엔진이 페이지의 정보를 수집하기 어렵다. 2. 모든 ..