webpack
-
[webpack] 환경변수 직접 선언 : dotenv, dotenv-webpackEnvironment(개발환경)/Configs 2022. 10. 11. 07:54
🧐 서론 회사에서 KTLO(Keeping the lights on) 건으로 미뤄지던 환경변수 선언방식을 개선하는 작업을 할당받아 진행하게 되었다. React나 Next를 쓰게 되면 보편적으로 Prefix (React_APP_...) 를 붙여 사용하게 되지만, 우리 프로젝트에서는 Webpack의 플러그인을 통해 직접 주입하는 방식을 사용하고 있었다. 물론 문제가 큰 방법은 아니지만, 환경변수를 JS모듈로 관리하는만큼 모든 환경의 파일이 번들에 포함되거나 토큰같은 인증정보가 배포버전에 포함될 수 있다는 등의 문제점은 있다. 그렇기에, .env(환경변수 파일) 기반의 관리방법에 대해 찾아보았고 dotenv를 비롯한 다양한 방법들을 알 수 있었다. 이번 포스팅은 이러한 방법들을 정리하고, 각각의 특징과 장점 등..
-
[Craco] Craco 란?Front-End(Web)/React - 프레임워크(React, Next) 2022. 1. 18. 03:21
이전에 CRA(Create-React-App)로 React 프로젝트를 생성할 땐 Webpack의 커스텀 필요성을 잘 느끼지 못했다. 하지만, 이번에 Boiler Plate를 제작하면서 추가적으로 설정할 부분들이 생겼다. (절대경로 alias 컴파일, Less Loader) CRA에서는 설정파일이 숨겨져 있고, 이를 추출해서 각 config, babel 등 설정을 적용해야 하는 번거로움이 있기 때문이다. 그렇기에, React에서는 이러한 번거로움과 위험성을 없앨 수 있는 다양한 커스터마이징 패키지들이 존재한다. 오늘은 그 중 하나인 Craco(Create-React-App Configuration Override)에 대해 알아보고, 이후 포스팅에선 실제 적용사례로 이어가겠다. 💙 CRA Webpack 설정..
-
[Next.js + TS] 초기세팅 - (3) Babel 개념Front-End(Web)/React - 프레임워크(React, Next) 2021. 10. 22. 00:33
이번엔 초기세팅 마지막 시리즈가 될 것 같다! 주제는 Babel 이다. 이전, Babel과 Webpack 에 대해 간단히 공부하면서, Babel은 단순히 트랜스파일러의 역할 정도로 알고 있었떤 툴이다. 하지만, 프로젝트에서 절대경로나, SSR 등을 위해서까지 사용해보면서 Babel의 다양한 기능을 정리해보고자 했다! 💛 Babel 이란? 바벨(Babel)은 최신버전(ECMAScript 2015+) 의 JS코드를 상대적으로 구식 브라우저(IE 등) 환경에서 호환되도록 버전을 변환하는데 주로 사용되는 자바스크립트 컴파일러(트랜스파일러)이다. (그렇기에, 입력과 출력 모두 JS) 위가 바벨의 주된 기능이며, 현재는 JSX문법(React), TS같은 정적 타입언어, 코드압축, 제안단계(정식문법X) 문법 등을 사..