본문 바로가기

프로그래밍 일반

 (12)
[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..
웹 폰트의 동작 방식 브라우저는 기본적인 폰트 설정을 가지고 있다.예컨대 크롬의 폰트 설정(chrome://settings/fonts)에 들어가면 글꼴 크기, 폰트 스타일을 지정가능하다.반면, 웹 폰트는 해당 페이지에서 지정한 폰트를 사용하는 것이다.(크롬은 기본적으로 허용이고, 파이어폭스는 허용 여부를 선택할 수 있다) 폰트 임베딩(font-embeding)사용자가 폰트가 설치되어 있이 않는 경우를 대비하여 폰트를 브라우저에 삽입하는 기능html에 link 태그로 삽입하거나 @font-face라는 css 문법을 사용한다. @font-face 예시@font-face { font-family: 'CustomFont'; src: url('/fonts/CustomFont.woff2') format('woff2'), ..
빌드한 파일을 실제 배포 환경처럼 실행해보기(serve) 웹팩 같은  걸로 빌드를 하면 devServer와 다르게 실제 배포를 가정하고 테스트해봐야 할 때가 있다.serve 라이브러리를 이용해서 간단한 http 서버를 만들고 실행해보자.(serve는 일반적인 was나 express와 다르게, 서버 사이드 동적 요청 처리가 안되니 주의) 웹팩으로 빌드하여 ./dist 파일을 했다. 이제 serve를 설치하자.npm install -g serve  그리고 package.json에 빌드 파일을 serve 서버로 실행할 커맨드를 설정한다../dist 파일을 실행포트번호는 5000 "scripts": { "start:build": "serve -s dist --listen 5000", },
[프론트엔드] public 폴더와 src 폴더의 차이 프론트엔드 프로젝트를 하면서 asset 파일을 어디에 두어야 할지 고민하던 중 두 폴더의 용도 차이에 대한 고민이 생겼다. 일반적인 번들링 툴에서 public은 가공과정이 필요없는 정적 자산을, src는 가공과정이 필요한 동적 자산을 관리한다. 전자의 대표적인 케이스가 html, 로고 등의 정적 컨텐츠이고, 후자의 예시는 js, jsx, 스타일시트 파일이다. 그렇다면 일반적으로 사용되는 이미지, 폰트, svg는 어디에 두어야 할까? src 폴더 내에 파일을 둘 때 장점웹팩을 통한 최적화src 폴더의 파일은 웹팩으로 처리하여 번들에 포함된다. 이 과정에서 정적 파일은 최적화될 수 있다. 반면 public 폴더에 있는 파일은 번들링 과정에 포함되지 않고 그대로 배포된다.정적 파일의 최적화는 원본 파일의 품질..
[모노레포, 마이크로 프론트엔드(MF)] 호스트 앱과 리모트 앱 동시 실행하기 목차문제 정의해결방안해결과정상위 프로젝트 세팅lerna 설치 및 세팅오류 해결(trouble-shooting) 문제 정의MFA 구조는 호스트 앱과 리모트 앱이 독립적으로 배포 및 실행되어야 한다. 따라서, 로컬 개발 단에서는 1개의 서비스 앱과 n개의 리모트 앱을 일일히 하나씩 실행하고 종료해야 한다. 이 부분은 시간소모를 일으키며 유지보수 시 어떤 앱을 실행해야할지 직접 신경써야 하므로 번거로울 수 있다. 해결방안모든 앱을 포괄하는 상위 프로젝트를 만든 후 호스트 앱과 리모트 앱을 병렬로 실행하는 커맨드를 만든다.해당 커멘드는 lerna 라이브러리를 이용해 설정한다. 해결과정상위 프로젝트 세팅호스트 앱과 리모트 앱을 포함하는 상위 디렉토리 root1을 생성한다. 이 디렉토리가 각 앱을 병렬 실행하는 상..
[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) 개념의존성, 프레임워크공통개발 같은 프로젝트 내 모듈별 분리패키징 & 빌드전체 패키징 & 전체 빌드 모놀리틱 아키텍처란, 여러 서비스를 하나의 프로젝트 아래에 위치시키며 개발 및 운영을 하는 방식이다.예컨대, 웹툰을..
[프로그래밍 일반] MVC, MVP 웹 디자인 패턴에 대해 디자인 패턴이란? 디자인 패턴이란 프로그램을 개발할 때 발생할 수 있는 문제를 방지하고자 만든 규약이다. 프로젝트가 커짐에 따라 코드 간에 복잡하게 얽혀 있으면 무언가를 추가하거나 수정할 때 예상치 못한 문제가 발생하기 쉽다. 따라서 서로 간에 역할을 분리하고 각자의 역할에 집중하기 위한 규칙을 정한다. 프로젝트에 따라 정하는 자체적인 약속이므로 문법이나 예약어처럼 강제성은 없다. 그리고 상황에 따라 구현 방식이 달라지기도 한다. 하지만, 일반적으로 사용되는 공통 패턴이 몇 가지 있는데, 그 중에서 MVC, MVP패턴에 대해 살펴보자. MVC mvc 패턴은 작업들을 model - view - controler로 구분한다. 간단한 역할 model 사이트에 필요한 모든 데이터, 상수를 저장한다. 데이터를 C..

티스토리툴바