wan-blog

Quasar 프레임워크 설치 Quasar란 이번에 프로젝트하면서 팀원분중에서 quasar라는 프레임워크를 도입하게되어 알게된 프로젝트인데 정말 편리합니다. Quasar는 vue cli를 한번 Wrapping한 프레임워크입니다. Quasar를 이용하면 빠르게 반응형 웹/앱을 만들 수 있습니다. 다음은 Qusar가 가지는 이점입니다. SPAs (Single Page App) SSR (Server-side Rendered App) (+ optional PWA client takeover) PWAs (Progressive Web App) Mobile Apps (Android, iOS, …) through Cordova or Capacitor Multi-platform Desktop Apps (using Elec..

Git Commit 전에 ESLint 자동 검사 하기 보통 프론트엔드에서는 2인 이상 개발할 때 코드 컨벤션을 잡아주는 ESLint 오픈 소스를 사용합니다. 그런데 실제로 커밋을 하기전에 lint 검사를 하지 않거나 build 명령어를 실행하고 커밋하지 않는 이상 ESLint 코드 컨벤션을 어긴 코드들이 커밋될 수 있습니다. 이러한 문제점을 해결해주는것이 husky, lint-staged, prettier가 있습니다. 이것에 대해 간단히 알아보겠습니다. husky 깃 커밋 또는 푸쉬전에 eslint, test 등을 실행 해볼 수 있는 도구입니다. 만약 테스트 또는 eslint 문법을 어겼다면 방금 커밋하려고했던 파일들은 커밋이 되지 않습니다. husky 설치 npm install husky --save-..

Angular 데이터 바인딩 원리 Angural는 angular context가 존재한다. angular context 내에는 digest loop가 존재하는것을 볼 수 있다. 이 digest loop는 watch list를 루프를 돌며 $watch를 통해 모델의 변경을 체크하고 변경되었을경우 뷰를 업데이트한다. Angular js에서 데이터 바인딩 전략은 Model을 변경했을때 어떻게 이벤트를 발생시키도록 할까가 아니라, 언제 Model이 변경되는가 이다. 뷰에서 사용자 입력이 일어나면 모델이 변경된다. 어떤식으로든 모델의 변경이 되었다는것을 알리는 이벤트가 있어야한다 여기에서 중요한점은 Model은 HTML이 아니라 Javascript객체이기 때문에 이벤트가 발생할 일이 없다. Angular에서는 모..

자바스크립트 Execution Context 실행 가능한 코드(Executable Code) Global code, eval code, Function code 들을 만날때마다, 처음에는 Global context가 생성되고 그다음 실행가능한 코드들을 만날때마다 Execution context가 생성되고 그안에 또 Excution context들이 스택처럼 쌓인다. 각각의 Context는 언제나 1개의 변수 환경(Variable Environment), 1개의 Lexical Environment, 그리고 1개의 ThisBinding 속성, 총 3개의 부분으로 구성되 있다. LexicalEnviroment 구성환경객체(Lexical Environment Object): 해당 Context안의 함수, 변수 ..