ice rabbit programming

최근에 Property or method "blahblah" is not defined on the instance but referenced during render 에러를 몇 번 마주쳐서 삽질을 했던 경험이 있다. 물론 문자 그대로 template에 쓰인 변수/함수/속성인데, undefined일 때 나오는 에러이다. 본인이 겪었던 몇 가지 경우를 아래에 정리하고, 본인의 케이스인지 확인해보면 좋을 듯하다. 1. 선언 후 초기화하지 않았을 경우 자바스크립트를 사용할 경우 let myVar;만 해두고 값을 넣지 않은 경우, 타입스크립트를 사용할 경우에는 타입 체킹으로 이런 실수를 할 위험이 현저하게 줄지만 let myVar: string | undefined; 이후에 값을 넣지 않는 경우가 종종 발생한다..

PATCH 방식 통신 RESTful API로 통신할 때, 수정을 위해서는 주로 PUT 방식으로 request를 날릴 것이다. 다만 좀 세부적으로 들어가면, 전체를 날려서 수정하는 것은 PUT 통신, 일부(partial)를 날려서 수정하는 것은 PATCH 통신을 이용하는 것이 올바른 방식이다. API를 구현하는 측에서 PUT 통신에도 일부만 와서 일부가 null인 경우에는 수정하지 않도록 처리를 해 두었으면 PUT 방식에서도 일부만 request로 보내도 괜찮으나, 만약 그런 처리가 되어있지 않다면 보내지 않는 부분이 null이 되는 불상사가 일어날 수 있다. 그렇기 때문에 partial하게 수정할 수 있는 방식은 PATCH를 명확하게 사용하는 편이 좋다. JSON PATCH 상술한 것처럼 일부만을 보내는..

지난 글에서 앙상블 중 Bagging까지 정리했었다. 앙상블 - 부스팅(Boosting) 부스팅은 여러 개의 약한 모델을 합쳐서 강한 모델을 만드는 기법이다. 랜덤 포레스트 알고리즘이 사용된다. 랜덤 포레스트는 입력 변수에 대해서 복원 추출을 하는 알고리즘으로, 의사 결정 트리와 Bagging 알고리즘이 결합된 형태이다. 여러 개의 나무(트리)로 숲을 생성하는 의미이다. 1. 데이터 SET에서 Bootstrap을 통해 N개의 훈련 데이터 SET을 생성한다. 2. 생성한 N개의 의사 결정 트리를 학습한다. 3. 학습된 트리들의 예측 결과값의 평균 또는 다수결 투표 방식으로 결합한다. 이러한 절차를 거치고, 변수의 중요성(어떤 변수가 중요한지)을 파악할 수 있고 과적합을 방지할 수 있다는 특징을 가진다. A..

Docker는 현재 컨테이너 생태계에서 거의 표준에 가깝게 사용되고 있다. 빌드된 도커 이미지들은 별도의 private한 레지스트리에서 관리할 수도 있지만, github처럼 오픈된 레지스트리를 기본적으로 사용할 수 있다. 이것이 Docker Hub이다. Github와 연동하기 본인이 Docker를 실제로 사용해본 것은 작년이 처음이었고, 개인적으로 사용해본 것은 최근의 일이었다. 이 때 Docker Hub를 사용했는데, Github와의 연동이 상당히 잘 되어 있었다. 만약 본인이 형상 관리를 github로 하고 있다면, Docker Hub에서 빌드 설정에서 연결해줄 수 있다. 위 사진은 필자가 실제로 사용하고 있는 소스 repository이다. 이렇게 연결하면 Docker Hub에서는 Github 코드 ..

의사 결정 트리(Decision Tree)는 복잡하고 이해하기 어려운 모델들을 시각적으로 쉽게 이해할 수 있도록 해준다. 이진 트리(Binary Tree)와 비슷한 컨셉으로 생각하면 되는데, root node부터 출발해서 질문에 따라 분기되어 terminal node까지 연결된다. root node에는 모든 데이터가, terminal node에는 예측값이 들어 있다. 의사 결정 트리는 회귀, 분류 모두에 적용이 가능하다. 의사 결정 트리 - 회귀 위에서 아래로 갈수록 데이터의 구역을 나눈다. 특정 구역에 데이터가 있으면, 그 데이터의 예측값은 해당 구역의 평균값이 된다. 구역은 RSS(데이터 실제값과 예측값의 오차 제곱의 합)가 최소화 되는 구역을 선택 위에서부터 내려오면서 순간마다 최선의 선택(Gree..

한 commit의 변경 사항을 가져오고 싶은 경우가 종종 있다. feature/major-a에 적용한 것을 feature/major-b에 적용하기 위해 가져오거나, 아직 머지하지 않은 브랜치에 master 변경 사항을 가져오고 싶은데 불필요한 커밋이 있는 경우 등이다(사실 PR이 널리 사용되는 git 생태계에서 후자같은 경우는 많이 없을 것이고, 전자가 대부분일 것이다). 그럴 때 사용할 수 있는 기능이 cherry pick이다. 단어 그대로 한 커밋만 골라서 가져오는 기능인데, 아주 쉽게 사용할 수 있다. git cherry-pick {commit-hash} 와 같이 입력하면 적용된다. git cherry-pick 338cebf 물론 체리픽 과정에도 conflict가 발생할 수 있고, 이는 직접 해결해..

이 글을 검색으로 들어온 개발자라면 v-model에 대해서는 능숙하게 사용하겠지만, 앞 부분에서 간단하게만 짚고 넘어가겠다. 아래의 링크들은 모두 vue 공식 문서(한글)로 연결되어 있다. v-model 웹 프론트엔드나 클라이언트 프로그래밍은 사용자에게 직접 데이터를 제공하고 입력받는 UI를 다룬다. 이 데이터를 내부 로직으로 처리하거나 서버로 보내 처리하는 등의 과정이 필요하기 때문에, UI와 데이터 간의 바인딩이 필수적이다. vue에서는 v-model이라는 키워드로 바인딩을 제공한다. 아래처럼 쓸 수 있다. // ... // ... data() { myData: '' } input의 value가 myData로 바인딩되어, 초깃값 설정 및 입력 시 담는 등의 활용이 가능해진다. 컴포넌트 간의 통신 이번..

리스트 렌더링 공식 가이드 : kr.vuejs.org/v2/guide/list.html#Maintaining-State 리스트 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 아래 내용은 본인이 스스로 학습한 내용으로, 실제와 다소 차이가 있을 수 있습니다. 가감없이 피드백 부탁드립니다. :) 렌더링 과정은 꽤나 무거운 작업 중 하나이다. Vue에서는 렌더링을 할 때 효율을 위해, 가상 DOM 트리를 활용하여 변경된 부분만 렌더링을 진행한다. 컴포넌트나 객체가 변경되었는지 여부를 판단하여 데이터를 로드하고 다시 렌더링하게 된다. 배열의 속성을 직접 지정해주거나, 길이를 수정하는 등 Vue가 변화를 감지하지 못하는 경우가 있고, 컴포넌트는 자체 범위가 분리..