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

운영하는 서비스는 보통 개발과 운영 모드로 나뉘어진다. 호출 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의 경우는 더욱 그러하다. (..

(경험한 Extensions가 늘어날때마다 이 글을 수정할 예정임) Git Graph SourceTree와 같은 프로그램으로도 Git history tree UI를 편하게 볼 수 있지만, VScode Extension인 Git Grpah로 활용도 높게 사용할 수 있다. 설치하면 Activity bar 에 아래와 같은 바로가기 버튼이 생성된다. *** 만약 바로가기 버튼이 안보인다면!! 위와 같은 바로가기 버튼으로 이동할 수 있는 Search 화면에서 아래와 같은 SOURCE CONTROL 이 나온다면, 이게 Activity bar 에 있어야 하는데 Search 안에 들어가 있는 것이다. (이유는 아직 모르겠다. 아시는 분은 댓글 환영해요.) Search 화면에서 Git Graph를 봐도 되지만, Sear..

Visual Studio Code에서 git을 설정하여 사용하고있다. React 개발을 하던 중, .history 라는 디렉토리에 views 디렉토리의 js 파일에 대한 누적이 발생하고 있다. (이 디렉토리 뭔지 아시는 분은 댓글 부탁합니다ㅜ) 우선 너무 많아져서 비기싫으니 gitignore에 등록하도록 한다. 처음 하게되면, 구글링하게 되는데 gitignore를 쉽게 할 수 있는 확장 프로그램들도 있지만, (.gitignore 파일이 없는 경우) 직접 .gitignore 파일을 수정하도록 한다. Ctrl + P (윈도우 기준) 로 .gitignore 파일을 열어주고 git에서 관리하기 싫은 directory를 작성한다. # See https://help.github.com/articles/ignorin..

Vue.js 에서 부모 컴포넌트와 하위 컴포넌트 데이터 전달을 위한 props 를 사용하다가 console에서 하기와 같은 오류를 마주친적이 있다. 사실 그동안 무심코 지나쳤다가.. 저런 warning도 지나치지 말자는 다짐으로 이번 기회에 고쳐본다. 나 같은 경우는, 부모 컴포넌트에서 자식 컴포넌트에게 "files"라는 data를 props로 전달하는데, 자식 컴포넌트에서 props로 받은 files를 직접 변경하는 코딩을 하였다. 저 console 메시지를 직역하면 부모 컴포넌트에서 이 props를 re-rendering하여 값을 다시 엎어쓸수도 있으니, 자식 컴포넌트에서는 props로 전달받은 값을 복사하여 사용하라는 말이다. 즉, 부모 컴포넌트에서 전달하는 props는 단방향으로써, 자식 컴포넌트..

java의 직렬화(Serialization)와 역직렬화(Deserialization)에 있어야 하는 SerialVersionUID에 대해 IntelliJ에서 자동으로 생성해주는 단축키가 있는데 매번 까먹는다.. 그래서 기록해두기. file > Settings > Editor > Inspections > Serialization issues > Serializable class without 'serialVersionUID' 체크 그리고나서 생성한 클래스 java 파일에서 클래스명에 커서 클릭 > 'Alt + Enter' > Add 'serialVersionUID' field 선택 끝. serialVersionUID에 대해 이해하고자 하여 설명이 잘 되어있는 블로그의 링크를 포함한다. m.blog.nave..

Vue.js 프레임워크 환경에서 UI component library module을 하나 추가하였다. 로컬/개발/운영 서버가 관리되고 있는데, 로컬/개발에서는 정상동작을 하였으나, 운영에서는 추가한 UI component가 노출되지 않는 문제가 발생하였다. 여기서 의심해보는 부분은, 1. 해당 module import가 구현되지 않았거나, 2. 정상적으로 module이 설치되지 않았거나, 3. webpack에서 해당 module이 bundle로 들어가지 않았거나 원소스로 개발에서 동작하였으니 1번은 문제 없다. 결과적으로 2,3번에 대한 구체적 확인은 되지 않았지만, node_modules 폴더를 삭제하여 다시 전체 module을 설치하는 것으로 해결 방법을 잡아보았다. #. 해결 방법 1. 해당 프로젝..