보노보노의 개발 일기 보노보노의 개발 일기

01. npm이란 무엇인가? npm은 어떻게 구성되어있을까? npm은 세 개의 컴포넌트로 구성되어있습니다. the website - 패키지 탐색, 프로파일 설정, 개인 npm histoty 관리CLI ( the Command Line Interface ) - 개발자와 npm이 소통하는 방법으로 터미널에서 동작the registry - 자바스크립트 소프트웨어의 공용 데이터베이스 및 메타 정보 npm은 언제 사용할까? 앱에 패키지를 적용시키거나, 통합시키고 싶을 때바로 사용할 수 있는 독립된 툴을 다운받고싶을 때npx를 사용하여 다운로드받는 것 없이 패키지를 실행하고 싶을 때조직을 만들어서 유지보수, 개발 협업하고 싶을 때어디서든 npm 사용자와 코드를 공유하고 싶을 때코드 활용을 특정 개발자들로만 제한하고..

nuxt.js 공식 가이드에서 필요한 내용만 정리한 글입니다. 1. Nuxt.js starter 템플릿을 통해 빠르게 사용하기. > npm install -g vue-cli #vue-cli가 설치되지 않았다면, 해당 명령어로 설치해야한다.> vue init nuxt-community/starter-template > cd > npm install> npm devvue-cli 설치하지 않은 상태에서 vue init 실행하려 할 때, 아래와 같은 메시지가 나타난다.Command vue init requires a global addon to be installed.Please run yarn global add @vue/cli-init and try again. 개발모드[Development]> npm ru..

유튜브 영상 The Vue Tutorial for 2018 - Learn Vue 2 in 65 Minutes 중 몰랐던 내용 정리한 글입니다. 1. Vue-CLI 설치하기 Vue-CLI를 통해 Vue 프로젝트를 빠르고 쉽게 생성할 수 있다.> mkdir vue-toy> cd vue-toy > npm install -g @vue/cli -- Vue-CLI 설치> vue create vue-voca -- Vue 프로젝트 생성[ vue create 프로젝트이름 ]2018.04.09추가) yarn 설치 후, yarn을 통해 Vue-Cli 설치하는 방법> npm install -g yarn> yarn global add @vue/cli 뷰 프로젝트를 생성하면 다음과 같은 프롬프트를 볼 수 있다.Vue CLI v3..

뷰에서는 $refs 속성을 이용해 DOM에 접근할 수 있습니다. 템플릿 안의 엘리먼트에 ref 속성을 추가함으로서, 뷰 인스턴스에 이 엘리먼트에 대한 정보를 줄 수 있습니다.또한, 우리는 이 엘리먼트에 접근할 수 있습니다. ref 속성은 HTML의 표준속성이 아니며, 심지어 DOM의 일부가 아니기도 합니다. 그래서, HTML 렌더링 후, 우리는 콘솔창에서 ref 속성을 찾을 수 없습니다. $refs 객체의 키는 엘리먼트의 ref속성에 정의한 값이 되며, 값은 해당 DOM 엘리먼트입니다.우리가 엘리먼트에 접근할 수 있다는 것은 곧, 엘리먼트를 변경할 수 있다는 것과 같습니다. 물론, 우리는 순수 자바스크립트의 querySelector을 이용해 DOM 엘리먼트에 접근할 수 있습니다.하지만, ref 속성은 좀..

jquery-3.3.1.js jquery 소스 내부를 분석해볼 것이다. 가볍게 구조를 파악하는 정도..? 그 후, 자주 사용했던 jquery 메서드들 중 몇 개도 분석을 해볼거다. ( function( global, factory) { ....... // (1) factory( global ); })(typeof window !== "undefined" ? window : this, function( window, noGlobal){ // (2) ........ // (3) }(.....); jquery 파일을 열어보면 위와 같은 코드가 처음으로 등장한다. 위와 같은 함수를 즉시 실행 함수라고 하며 함수를 정의함과 동시에 바로 실행되는 특징이 있다. 즉시 실행 함수 내부에서 변수와 함수들을 정의해서 함수..

call과 apply 메소드를 이용하여 명시적으로 this 바인딩을 할 수 있다. 모든 함수의 부모 객체인 Function.prototype 객체의 메서드라서 모든 함수에서 호출 가능하다. Function.prototype.apply()fun.apply(thisArg, [argArray])fun 메서드를 호출할 때, fun 내부의 this를 매개변수인 thisArg로 바인딩 시킨다. argArray는 fun 메서드에서 인자로 사용된다. *argArray : 배열리터럴, Array 객체 Function.prototype.call()fun.call(thisArg[,arg1[,arg2[,....]]]) apply와 기능이 같으며, 배열형태가 아닌 각각의 하나의 인자형태로 값을 넘긴다는 차이점이 있다. 추가적으..

단위테스트(Unit Test)가 필요한 이유?프로그램을 작은 단위로 쪼개서 내가 짠 프로그램이 내가 원하는 결과대로 동작하는 지 테스트할 수 있다.단위테스트를 거치면 프로그램의 안정성이 높아지며, 단위테스트를 믿고 리팩토링을 할 수 있다. 자바스크립트로 짜여진 프로그램에서 오류를 찾을 때, 단위테스트를 거치지 않은 프로그램의 경우는 전체 흐름을 파악해가며 원인을 찾아야한다. 원인을 찾아 수정한다해도 이 결과가 어떤 이펙트를 가져올지 예상하기가 어려울 수 있다. 사실 단위테스트를 해본 적도 없고 잘 모른다. 자바스크립트 코딩을 테스트 할 때 alert 또는 console.log를 이용하는 방법 밖에 모르니깐.. mocha 자바스크립트 테스트 프레임워크 1. 셋팅하기 (Windows8)mocha는 node...

1. 상속function Person(name){ this.name = name; } Person.prototype.name = null; Person.prototype.introduce = function(){ return 'My name is' + this.name; } var p1 = new Person('egoing'); document.write(p1.introduce()); //My name is egoing상속을 하기 위한 준비 작업. 객체의 프로퍼티 정의 방법은 생성자를 이용하는 것과 프로토타입을 이용하는 것이 있다. Person 객체에는 prototype이라는 속성이 있는 데 그 안에는 어떤 객체가 있다. .name을 통해 그 객체에 값을 줄 수 있다. function Person(nam..