금백조의 개발 블로그

서론 각 구현 클래스에서 Exception이 발생할 경우 로그를 생성하는 CreateLog 클래스가 존재했습니다. 로그가 생성될 때 구현 클래스의 종류에 따라 서비스 상태를 업데이트 해야하는 로직이 필요했습니다. 이를 위해 전략 패턴(Strategy Pattern)을 적용한 사례를 글로 써봅니다. 본론 상황 아래의 A,B,CService 클래스가 CreateLog클래스를 참조하여 로그를 생성하고 있다. 요구사항 CreateLog 클래스에서 각 서비스의 상태를 업데이트해야 하는 로직을 구현해야한다. public class AService { public void doSomeThing(){ //AService 구현 로직... try{ } catch (Exception e){ new CreateLog().do..

서론 Docker 웹서버 환경에서 클라이언트 ip를 얻으려는 중에 이슈가 발생했습니다. Docker 내부에서 클라이언트 ip를 얻으려해도 도커 내부에 설정된 ip가 반환이 되었습니다. 이를 해결하기 위해 리버스 프록시를 구성하여 프록시를 통해 클라이언트 ip를 가져와서 해결했습니다. 실제로 저는 웹서버에서 프록시 ip를 얻는 업무만 수행했지만 리버스 프록시를 예제로 구성하여 해보고 싶은 마음에 해당 포스팅을 준비하게 되었습니다. 아래 예제는 다음과 같은 상황을 가정합니다. 가정 nginx 를 이용해 리버스 프록시 구성 windows wsl linux (윈도우 리눅스 서브 시스템)에 nginx 설치 https 인증서는 있다고 가정 (예제 설명엔 abcde.pfx 로 되어있음.) 웹서버는 .NET Core라..

서론 어느날부터 잘되던 Visual Studio 2015가 프로젝트 조차 열리지 않는 상태로 되어버렸다. 그래서 삭제 후 새로 설치하기로 마음을 먹고 시도하는 과정 중 문제 상황과 해결 과정에 대해 포스팅하려고 한다. 실행 환경 Window 11 Visual Studio 2015 Professional 본론 시도 과정 1.처음엔 이전에 공식 홈페이지에서 다운하여 설치에 사용했던 iso 파일을 탐색기에서 탑재하여 vs_professional.exe 를 실행하여 제거를 시도했으나 다음과 같이 도중에 에러가 나서 정상적으로 삭제되지 않았다. 복구를 시도해도 마찬가지였다. 1)복구, 제거 시도 2) 아래와 같이 에러 메세지가 나타나며 설치 실패 2. MS 공식 문서 중 강제적으로 삭제하는 프로그램이 있다고 하여..

문제 DeleteModal.vue에서 Modal.vue을 import 하려고 하는데 다음과 같은 에러가 발생했습니다. 분명 {경로} 에 나타나는 부분에 Modal.vue 파일이 있었는데도 에러가 발생했습니다. 오늘은 이에 대한 해결책에 대해 포스팅하겠습니다. Module not found: Error: Can't resolve ~ Module not found: Error: Can't resolve '@components/Modal.vue' in '{경로}' ERROR in ./src/components/DeleteModal.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node..

현상 Vue 강의를 보며 프로젝트를 진행하던 중 아래와 같은 에러메세지가 크롬 콘솔 창에 나타나면서 자식 컴포넌트가 화면에 나타나지 않았다. [Vue warn]: Property "type" was accessed during render but is not defined on instance. 원인 부모 컴포넌트에서 type 객체를 자식 컴포넌트한테 전달해주려 하는데 자식 컴포넌트에 type이 props 내부에 선언되지 않은게 원인이었다. parentComponent.vue (부모 컴포넌트) childComponent.vue (자식 컴포넌트) 해결 자식 컴포넌트 props 내부에 type을 선언해준다. childComponent.vue (자식 컴포넌트)

현상 vue router를 설치하여 router별 .vue 페이지를 만드는데 index.vue라는 이름으로 파일을 만들고 코드를 작성하니 태그 부분에서 아래와 같은 에러 메세지가 발생했다. "Component name “index” should always be mutli-word" [에러 화면] 원인 eslint의 기본 규칙이 컴포넌트 이름을 정할 땐 두 개 이상의 단어를 사용하는 규칙이어서 컴파일 에러가 났다. 해결 방법 1) .vue 파일 이름을 한 단어가 아닌 두 개 이상의 단어로 지정한다. (예 : myIndex.vue) 방법 2) eslint 규칙 중 vue/multi-word-component-names 규칙을 off로 변경하기 위해 .eslintrc.js 파일의 rule 부분에 아래 규칙을..

서론 input 태그들을 querySelectorAll로 가져와 value를 초기화해주려고 했는데 radio type이 아닌 input만 가져와서 초기화를 해야했습니다. 이 과정에서 알게된 not 연산자를 이용한 querySelectorAll 필터링 방법에 대해 소개하겠습니다. 본론 AND 조건 해석 : input 태그 중 radio type이 아니고 class가 test가 아닌 input 전부 가져오기 const inputs = document.querySelectorAll("input:not([type='radio']):not([class='test'])") OR 조건 해석 : input 태그 중 radio type이 아니거나 class가 test가 아닌 input 전부 가져오기 const input..

Git bash 사용 1.git log로 확인 git log 2.복구할 최상단 Merge 커밋 선택하여 아래 revert 명령어 입력 git revert -m 1 명령어 해석 더보기 해당 명령어는 특정 커밋을 취소하는 revert 작업을 수행합니다. -m 옵션은 merge commit을 revert 할 때 사용되며, 1은 부모 브랜치를 의미합니다. 만약 merge commit이 아닌 일반 커밋을 revert 할 경우 -m 옵션은 생략해도 됩니다. 예를 들어, git revert -m 1 abcdefg 명령어를 입력하면 abcdefg라는 커밋을 revert 하는 작업을 수행하며, 이 커밋이 merge commit인 경우 1번째 부모 브랜치를 사용하여 revert 작업을 수행합니다. 3.그러면 아래와 같이 ..