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; 이후에 값을 넣지 않는 경우가 종종 발생한다..

이 글을 검색으로 들어온 개발자라면 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가 변화를 감지하지 못하는 경우가 있고, 컴포넌트는 자체 범위가 분리..

typescript 강의를 들으면서 정리한 마지막 글에서 Type Guard를 다루었다. 이후에 또 다른 기초 강좌를 수강할 기회가 있었고, 이미 들었던 내용이 대부분이었지만 좀 더 익숙해지고자 수강했는데, 다른 부분은 이전에 정리한 내용과 비슷했지만 Type Assertion과 Type Compatibility 관련 내용은 이전에 정리한 내용에 없어서, 추가로 포스팅하게 되었다. Type Assertion Type Assertion은 명시적 타입 캐스팅과 비슷하게 사용할 수 있다. 다만, 실제로 타입이 변경되는 것은 아니고 이런 타입이 들어올 것이라는 것을 프로그래머가 명시해주는 것이다. 다음처럼 사용할 수 있다. let a; let b = a as string; // 강제로 들어오는 type 지정 /..

이전에 Python에서 linter를 적용하는 포스팅을 했었다. 이번 포스팅은 Vue.js에서 eslint를 적용해보겠다. python만큼은 아니라고 생각하지만, vue도 스타일 가이드(공식 스타일 가이드)가 꽤나 깐깐하다. 문법적으로 틀린 것이 아니라도, 강제로 ESLint를 끄지 않는 이상 필수적인 스타일 가이드를 위반하면 실행 단계에서 오류가 발생한다. 공식 가이드를 보면, 필수적인 것과 추천해주는 것 등이 있다. 어떻게 정할지는 개인 혹은 팀마다 자유이나, 최대한 일관적으로 유지하면 좋고 또 자동으로 수정해주는 부분이 많기 때문에 본인은 recommended를 사용하였다. prettier를 부가적으로 설치해서 사용할 수도 있지만, VS Code에서는 ESLint가 자동으로 formmating까지 ..

오늘 포스팅은 간단한 기능 팁에 관련한 글이다. 최근에 아이콘 이미지를 서버에 보내거나, groovy 빌드 시 로그를 남길 때 base64로 인코딩/디코딩 처리가 필요한 적이 있었다. base64는 문자 그대로 8비트 이진 데이터를 64진법으로 변환하는 인코딩 기법이다. 문자 코드에 구애받지 않는 ASCII 코드를 활용하여 데이터의 변조 없이 송수신함이 보장하는 인코딩이기에, 미디어나 전자 메일을 통한 데이터의 송수신 등에 많이 쓰인다. 대부분의 언어에서 내장 패키지로 base 64 인코딩/디코딩을 지원한다. 본인이 최근에 자바스크립트(와 bash도 처리하긴 했지만)로 변환을 처리했기 때문에 javascript의 메소드를 간단히 소개하겠다. const example = '{"myExample":"hi"}..

이전 글에서도 언급했듯이, Decorator와 Type Guard를 마지막으로 typescript 개념 정리는 1차적으로 마칠 예정이다. 추후에 다른 강의를 듣거나, 사용하다가 팁 등을 알게 되면 올릴 것 같다. Decorator Decorator는 Class, Method, Parameter, Property에 붙일 수 있는 특수한 선언이다. @를 붙여서 표현하는데, 생김새는 자바의 annotation과 흡사하다. @뒤에는 선언에 대한 정보와 함께 런타임에 호출되는 함수여야 한다. 역시 아래 코드를 보자. class decorator function hello(constructFuntion: Function) { // signature는 생성자를 인자로 지정하는 것 } function helloFact..

Typescript의 중요한 개념들의 정리는 거의 마무리되었고, Iterator, Decorator, Type Guard에 대해서 다루면 Typescript 정리 포스팅은 일단 마무리될 것 같다. 이번에 사용하기 위해 기초 강의를 들었고, 이를 정리했다. 아마 사이드 프로젝트로 nest.js를 사용해볼 것 같은데, 이게 ts를 사용하니 기회가 된다면 좀 더 발전된 내용을 가지고 돌아올 수도 있겠다. 각설하고, 이번 포스팅에서는 iterator(반복자)에 대해서 다룰 것이다. 반복문 우선 반복문을 한 번 짚고 넘어가자. for문의 사용은 이 글을 읽는 분들은 모두 아실 테니 넘어가고, ES5냐 ES6이냐 혹은 배열이냐 그 외이냐에 따라서 다르다. ES5 : array.forEach 사용. break가 불가..