본문 바로가기

webpack

 (3)
[react] cra, vite 없이 직접 리엑트 프로젝트 세팅하기2(webpack) - 프록시 서버 목차프로젝트 기본 구조웹팩바벨타입스크립트CSS전처리환경변수정적 파일1(image, svg)정적 파일2(font)라우팅완성파일 저번 글에서는 리엑트와 웹팩 기반 프론트엔드 프로젝트에서 기본적인 웹팩 세팅에 대해 알아보았다.이번에는 백엔드 및 서드파티 api와 원활한 소통을 위한 프록시 설정에 대해 알아보겠다. * 이 글은 이전 글인 "[react] cra, vite 없이 직접 리엑트 프로젝트 세팅하기1(webpack) - 바벨, 타입스크립트, css 전처리, 환경변수, 정적 파일"에서 이어진다.2024.08.18 - [프로그래밍 일반/프론트엔드] - [react] cra, vite 없이 직접 리엑트 프로젝트 세팅하기1(webpack) - 바벨, 타입스크립트, css 전처리, 환경변수, 정적 파일 [reac..
[react] cra, vite 없이 직접 리엑트 프로젝트 세팅하기1(webpack) - 바벨, 타입스크립트, css 전처리, 환경변수, 정적 파일 목차프로젝트 기본 구조웹팩바벨타입스크립트CSS전처리환경변수정적 파일1(image, svg)정적 파일2(font)라우팅완성파일 일반적으로 리엑트 프로젝트는 cra나 vite 등의 cli로 자동 세팅이 가능하다.이 방식은 학습 단계에서 간편하지만, 실무에서 scss나 타입스크립트, 바벨 등 다양한 환경 세팅을 해야할 때 배경 지식이 전무하여 문제가 생길 수 있다. 따라서 프로젝트 세팅을 직접 해보기로 했다. 도구로 webpack을 사용한 이유는 웹팩의 설정방식이 복잡하지만, 빌드 방식의 커스터마이징이 상세하여 실무에서 사용 비중이 높기 때문이다. 프로젝트 기본 구조1. 새 프로젝트를 만들고 npm과 git 세팅을 초기화한다. npm 초기화npm init -y git 초기화git init 만약 .gitign..
마이크로 프론트엔드(MF) 1. 배경 지식 및 개념 정리 주제모놀리틱 아키텍처의 개념과 문제점msa의 개념마이크로프론트엔드(MFA) 회사 업무 중 마이크로 프론트 아키텍처(MFA)에 대해 알게 되었고프론트엔드 개발 공부에 도움이 될 것 같아 간단하게 정리해보았다.아키텍처에 전혀 문외한인지라배경이 될만한 개념들부터 하나씩 살펴가겠다.  프로젝트 구조: monolithic 아키텍처부터 MSA의 등장MSA는 백엔드에서 사용되는 아키텍처이나, 모놀리틱 아키텍처의 문제점을 극복하기 위해 사용된다는 점에서 알아볼 필요가 있다. monolithic 아키텍처1) 개념의존성, 프레임워크공통개발 같은 프로젝트 내 모듈별 분리패키징 & 빌드전체 패키징 & 전체 빌드 모놀리틱 아키텍처란, 여러 서비스를 하나의 프로젝트 아래에 위치시키며 개발 및 운영을 하는 방식이다.예컨대, 웹툰을..

티스토리툴바