ice rabbit programming

vue 앱의 npm 패키지들을 업데이트 하다가, TypeError: this.getOptions is not a function 라는 에러가 발생하는 것을 확인하였다. 찾아보니, sass-loader의 최신 버전이 11인데, 이것은 vue 3.0 이상에서만 동작하는 것이 원인이었다. 일전의 글에서도 언급했듯이, 아직 vuetify 등 UI 프레임워크들이 vue 3.0를 지원하지 않기 때문에(공식 사이트 목표 배포는 2021 3Q이다) 본인은 2.6.12를 아직 사용하고 있다. 그래서 sass-loader를 10 버전을 이용해야 한다. package.json 혹은 yarn.lock에 씌어 있는 버전을 ^10.0.2로 수정한 후에 npm install / yarn install을 실행하거나, 아예 npm u..

Git에서 취소하고 싶은 경우는 생각보다 자주 있다. 이 때 사용하는 것이 reset 명령어이다. add 취소하기 기본적으로 git에서 파일들은 unstaged 상태에 있고, git add 명령어를 통해 stage에 올린다. 이는 commit 이전에 임시로 올리는 공간이라고 생각하면 된다. add를 취소하기 위해서는 다음 명령어를 입력하면 된다. git reset HEAD \[optional : 파일명\] 만약 파일명을 입력하지 않으면 올라갔던 파일 전체가 내려온다. (주의 : rm 명령어는 add의 반대가 아니다! git에서 이 파일을 제거한다는 의미이다.) commit 취소하기 add로 추가한 파일들은 git commit 명령어로 commit한다. commit을 되돌리고 싶은 경우는 commit 자체..

본인은 Vue에서 UI 프레임워크로 Vuetify를 애용하고 있다. 물론 본질적으로는 Vue의 컴포넌트, 이벤트 등을 이용하여 구현된 것이기 때문에 타 프레임워크를 사용하거나, 직접 만들어도 원리는 같다. 입력을 위해서 v-text-field 등을 사용하는 경우가 많은데, 유효성 검사를 위해서 rules 속성을 사용하는 경우가 많다. 가장 많이 사용하는 비었는지 여부부터 해서, 정규식을 사용하기도 한다. 흔히 회원 가입 창에서 보는, 맞지 않는 규격일 경우에는 빨간 테두리가 쳐지면서 에러 문구가 아래에 출력되는 것이 디폴트 동작이다. (참고로 rules 속성에는 boolean 함수/변수들을 넣을 수 있으나, async-await(Promise)는 넣을 수 없다. 우회하는 방법이 있으나 이는 추후에 시간이..

로드 밸런싱은 서버에 가해지는 부하를 분산해주는 컴퓨터 네트워크 기술로, 서버 풀(pool) 앞에 위치한다. 본인은 학부 때 클라우드 VM을 사용하면서 처음 접해보았다. Scale Up vs Scale Out 서비스 초창기, 혹은 개발 단계에서는 서버를 한 대만 구축할 수 있다. 이 때는 트래픽이 많지도 않고, 한 대 뿐이므로 분산할 수도 없다. 하지만 점점 커지면서, 이러한 요청들을 처리(수행)하기에 빡빡해지는데, 보통 두 가지의 선택지가 있다. Scale Up : 서버 자체의 성능을 확장하는 것으로, 쉽게 말하면 서버의 사양을 높이는 것. RAM 메모리 용량을 키운다거나, CPU 성능을 높이는 등이다. Scale Out : 여러 서버를 증설하여 운영하는 것이다. 즉, 같거나 비슷한 수준의 서버를 여러..

docker run을 할 때 -v 옵션을 주어 volume을 줄 수 있다. 그런데 자꾸 이런 에러가 발생할 때가 있다. Are you trying to mount a directory onto a file (or vice-versa)? check if the specified host path exists and is the expected type. 근본적으로는 이것은 -v로 넘겨주는 것이 파일이 아니라 디렉토리라 발생하는 에러이다. 아마 이 에러를 검색해서 들어오신 분은 volume으로 넘겨주는 파일명을 잘못(오타를 냈거나 잘못 지정했거나) 적었을 확률이 크다. 만약 넘겨주는 파일명이 존재하지 않으면, 자동으로 mkdir이 된 후에 docker run이 실행되기 때문에.. 엉뚱한 위와 같은 에러가 발..

CSS, SCSS를 사용할 때 color 값 지정은 굉장히 많이 발생한다. 자주 쓰이는 색깔들은 표준적으로 정해져 있기도 하지만, 투명도를 조절하거나 정해져 있지 않는 경우에는 아래와 같이 hex값(#ffffff 등)이나 RGBA(rgba(255,255,255,0.5) 등)를 사용하여 지정한다. .element { color: #ffffff; } 예시로 든 것은 그냥 흰색이지만, 만약 키워드가 없는 색상을 굉장히 많이 지정해야 한다면? 프로그래밍을 맨 처음 배울 때의 변수의 필요성과 같이, 반복 및 유지보수 용이성을 위해서는 색상을 키워드로 하는 것이 좋을 것이다. vuetify와 같은 UI 프레임워크를 사용한다면, 이전에 vuetify에서 색상 지정하는 글에서 썼던 것처럼 color를 지정하고, cla..

공식 문서 설명 : router.vuejs.org/kr/guide/essentials/history-mode.html HTML5 히스토리 모드 | Vue Router HTML5 히스토리 모드 vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기 위해 라우터의 router.vuejs.org vue는 SPA로, 처음에 모든걸 받아서 내부 router를 이용해 이동한다. 디폴트 모드로 사용하면 경로에 hash(#)가 들어가있는 것을 볼 수 있다. 예를 들어 https://my-page.com/#/home과 같은 식이다. 이 때 vue router 설정에서 history mode를..

프론트엔드를 개발하다 보면, window 객체를 종종 사용하는데, 기본적으로 있는 속성 외에 추가해서 사용해야 할 경우도 있다. 자바스크립트라면 문제가 되지 않겠지만, 타입스크립트는 아는 타입의 경우에는 해당 객체에 있는 속성인지까지 미리 체크를 하기 때문에 문제가 발생한다. console.log(window.tempProperty) 이런 식으로 없는 속성을 사용하려면, 에러가 발생한다. 물론 타입스크립트의 오류를 끄거나 할 수 있지만, 오류를 끄고 any를 남발할수록 굳이 타입스크립트를 쓰는 의미가 퇴색되므로 바람직하지 않다고 생각한다. 아래처럼 속성을 추가해 declare하면 해결된다. declare global { interface Window { tempProperty: string; } }