끄적이고 기록하는 나의 블로그

운영하는 서비스는 보통 개발과 운영 모드로 나뉘어진다. 호출 API 도메인, DB server, Git branch 등 인프라 및 개발환경 측면에서 그 종류는 다양하다. Vuejs로 SPA 개발시 특히나 링크URL, API 도메인 등 모드별 분기 처리 로직이 불가피하였다. 이 경우, FE 도메인으로 로컬/개발/운영을 판단하여 API 도메인을 결정하는 분기 코딩을 적용하였다. 이도 운영상 문제가 되지 않으나, 서로 다른 Component, 서로 다른 객체에서 분기 코딩이 중복되거나 cache clean 등 부수적인 작업들을 요하였다. 이를 적절히 해결하기 위한 방법으로 환경변수를 활용할 수 있다는 점을 알게되었다. 환경변수 장점 사용자 실행 모드를 추가할 수 있다. 실행 모드별로 필요한 환경 변수를 다르게..

⚠️ 발생 이슈 Vuejs로 구현된 SPA 환경이고, 브라우저에서 도메인 접속 시도하면 화면이 뜨지 않고 console 오류가 발생된다. local에서 또는 개발서버에서는 화면이 정상적으로 뜨는데, 운영서버에서만 화면이 뜨지않고 console 오류가 발생되고 있다. 오류가 발생되는 script를 보면 정상적으로 구현된 소스를 볼 수 있다. 다만, 부분부터 코드 인식이 안되는 것으로 보여진다. 🤔 원인 분석 해당 오류가 발생되는 원인은 아래 세가지의 경우로 볼 수 있다.(from chatGPT) 배포된 파일 경로가 올바르지 않은 경우 서버 설정이나 라우팅 문제로 파일이 올바르게 제공되지 않는 경우 개발 모드에서는 동작하지만 프로덕션 모드에서 문제가 발생된다면, Vue CLI의 환결 설정이 잘못된 경우(빌드..

one source로 멀티 도메인 서비스를 하는 경우, 드러날 필요 없는 조건으로 결과물을 달리 해야하는 경우가 있다. javascript 영역 말고도, DOM에서도 마찬가지이다. Vue Component에서의 DOM에 대한 조건문 제어는 경우에 따라 다르지만 Vue Lifecycle hook 함수를 통해 처리하는 경우가 많다. 하지만 태그라던지, index.html 영역에 있는 DOM에 대한 제어는 생각보다 깔끔한 처리가 어렵다. 시도해볼 수 있는 방법은 if 조건문 또는 조건연산자로 내에서 처리할 수 있지만, 복잡한 case의 경우 코드에 대한 가독성이 좋지 않아 운영 관점에서도 어려움을 느낄 수 있다. 그 중에서도 서비스 도메인에 대한 웹 페이지 정보를 담고있는 meta의 경우는 더욱 그러하다. (..