프로그래밍/프론트엔드

Frontend 효율적으로 배포하기 (React + Nginx + Docker)

프로젝트를 진행할 때, 프론트엔드 배포는 주로 nginx를 base image로 하여 빌드된 결과물을 nginx가 서빙하는 폴더 내에 위치시켜 보여주는 식으로 진행했다. 인터넷에 React 배포 / React + Docker 배포 검색했을 때 가장 쉽고 많이 찾을 수 있어 당연하게 했던 것 같다. 그러던 중 프론트엔드 도커 파일을 작성할 일이 있었다. 당연히 위 방식으로 진행했다. 근데 특히나 오타나 약간의 UI 변경 등 잦은 수정이 필요한 프론트엔드에서 위의 방식대로 진행하면 비효율적이라는 피드백을 받았다. nginx 이미지가 변경되는 것이 아닌 굳이 오타 수정하는데 해당 이미지도 다시 받고 올린다는 게 맞는가? 에 대한 얘기였다. 빌드 파일만 달라지지 nginx 이미지 자체에 대해서는 변경이 없다는 ..

Vite Alias 설정하기

파일 구조가 복잡해질수록 다른 디렉터리의 파일을 import 하는 게 지저분해진다. (ex) ../../pages/signUp/index) 이때 path alias 설정을 해주면 보다 깔끔한 코드 작성이 가능하다! 프로젝트 환경은 Vite + Typescript 기준이다. Alias란? 경로에 별칭을 붙이는 것으로 ../../pages/signUp/index 을 @/pages/signUp/index 로 변경 가능하다. Alias 적용하기 yarn add -D path yarn add -D @types/node vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from..

[Vue.js] Watch vs Computed

watch와 computed의 차이점에 대해 알아보려고 한다. watch와 computed는 둘 다 Vue 인스턴스 내에 정의된 데이터 값에 변경이 일어나는지를 감시하고 변경될 때마다 정의된 함수가 실행된다. ✅ computed 만약 message라는 문자열을 뒤집어서 출력하고 싶다면 여러 가지 구현 방법이 있다. 1. 첫 번째로 문자열 표현식인 이중 중괄호를 이용하여 내부에서 연산을 하여 데이터 값을 보여준다. message: {{ message }} revsersedMessage: {{ message.split("").reverse().join("") }} 2. 두 번째로 함수를 이용하여 데이터 값을 보여준다. message: {{ message }} revsersedMessage: {{ messag..