개발소발닭발

추후 예정

ES6는 자바스크립트의 새로운 버전이다. 오래된 새로움이지만... 우리가 ES6를 써야하는 이유는 '편하다'이다. 공부를 하고 나면 새로운 JS가 편하고 강력하게 느껴지길 바란다. ES6를 제대로 써보려면 두가지 작업 환경을 세팅해야 한다. - Babel : ES6 코드를 ES5 코드로 바꿔준다. - Webpack : 의존 관계에 있는 여러 스크립트 파일들을 하나의 파일로 묶어준다. (이미지와 css까지도!!) 10분이면 끝나니 같이 해보자. 먼저 Babel부터. 먼저 폴더를 하나 만들고 1. package.json 파일을 만들자. npm init -y - 바벨 설치 npm install --save-dev @babel/core @babel/cli 2. 바벨 프리셋 설치 - 기본 바벨 환경 설치. npm..

자바스크립트를 개발하다 보면 apply와 call을 사용하는 경우가 생깁니다. 1. this 변수에 원하는 값을 할당하고 싶을 때. 2. '파라미터를 담은 배열'을 이용할 때. 하나씩 알아보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function thisTest() { console.log(this); } thisTest(); thisTest.apply(5); thisTest.call({x:10}); function drawPage() { var str; str = '버튼 클릭' createBtn(); //createBtn.call(this, str); //createBtn.apply(this, [str]); } function creat..

자바스크립트를 사용하다 보면 this를 이용하는 경우가 많이 있습니다. 이번 시간에는 실행 문맥 내에서 this 바인딩이 어떻게 이루어지는지 알아보겠습니다. this란 무엇인가. 일반적으로 함수 내에서 사용되는 특정 키워드 변수입니다. 자바스크립트는 함수를 실행할 때 몇 가지 단계 거치며 동작하는데요, 그중 한 가지 단계가 this 변수를 만드는 일입니다. 그런데 자바스크립트가 this라는 키워드에 어떠한 값을 할당할지는 경우에 따라 조금 다릅니다. 당연히 헷갈리겠죠. 이러한 this를 예측 가능하도록 사용하고, 이에 더해 원하는 값을 this 키워드에 할당할 수 있습니다. 먼저 우리가 좋아하는 검정 화면입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var test = { x:..

추후 예정

자바스크립트를 제대로 알기 위해서는 객체에 대한 이해가 필요합니다. JS의 모든 것이 객체로 이루어져 있기 때문입니다. 자 같이 공부해 봅시다. 자바스크립트에는 클래스가 있는가? 객체지향 개발이 가능한가? 이 질문에 대답하기위해 우리는 클래스와 객체를 구분해야 합니다. 클래스는 틀입니다. 사람이라는 틀이 있고 그 틀로 찍어내듯 만든 "이석규"라는 인간이 있죠. 만들어진 "이석규"라는 인간은 객체입니다. 사람이라는 클래스의 인스턴스죠. "자 그럼 자바스크립트에는 클래스가 있는가?" 그렇습니다. 본래 자바스크립트에는 클래스 문법이 없었습니다. ES6에 들어와서 제공되기 시작한 거죠. 두 번째 질문인 "객체지향 개발이 가능한가?" 매우 그렇습니다. 그렇다면 ES6에서 클래스가 제공되고 난 후에야 JS로 객체지..

추후 강좌

자바스크립트에는 호이스팅이라는 특성이 있습니다. 처음 JS를 사용할 때 놀래키는 녀석 중 하나죠. 호이스팅이란 자바스크립트에서 실행 문맥을 동작할 때 함수와 변수의 선언을 해당 컨텍스트의 최상위로 끌어올리는 것을 의미합니다. 실제로 끌여올려지는 것은 아니며, 실행문맥과 활성 객체에 대한 이해가 있어야지만 호이스팅을 정확하게 이해할 수 있습니다. 이게 뭔 소리야? 우리는 검정 화면을 좋아하는 개발자니 코드로 보면서 확인해 봅시다. 1 2 3 4 5 6 7 printAge(17); function printAge(age){ console.log("내 나이가 벌써" + age + "라니?"); } Colored by Color Scripter cs 아무 문제없이 실행됩니다. 이제는 익숙해서 당연하게 느껴지네요..

1. VueJS는 무엇인가? VueJS는 프레임워크다. 프레임워크는 라이브러리와 다르다. 개발구조의 껍대기, 뼈대, 밑바닥 원한다면 전체 구성을 담당한다. 쉽게 말해서 개발의 틀을 마련해준다. (필요에 의한 탄생이 해당 프레임워크의 방법론이다.) 틀이기에 강제하기도 하고 답답하게 느껴지기도 한다. 그렇다면 어떤 틀인가? 컴포넌트라는 틀이다. 우리는 VueJS를 이용해 재사용 가능한 컴포넌트를 설계하고, 조립해 나가면서 개발해 나갈 것이다. 2. VueJS의 장점은 무엇인가? 1. View 는 Vue에게 돔 생성과 업데이트에 관한 업무는 해당 분야의 프로인 Vue에게 맡기자. 우리는 비지니스 로직에 집중하면 된다. React처럼 특정 랜더 시점에 개입하지 않아도 된다. 전적으로 믿어주자. Vue는 가볍고 ..

VueJS 에 관심이 가는 개발자들은 다음 부류중 하나의 사람일 것이다.1. 컴포넌트 방식의 개발 패러다임이 필요한 프론트엔드 개발자.2. 컴파일과 빌드 시스템이 필요한 SPA 개발자.3. 일단 핫한걸 좋아하는 사람. 프론트엔드 개발자라면 모두가 생각은 했지만 만들지는 못(않)했던 VueJS를 같이 탐험해보려 한다.일단 https://kr.vuejs.org/ 에 기본적인 Vue의 개념이나 사용법이 자세히 나와 있지만 개인적으로 프로젝트를 하면서 얻고 체험한 내용과 함께 써보려 한다.그럼 다같이 고고싱 ; )