개발소발닭발

VueJS는 컴포넌트 기반의 프레임워크다. 화면 속 보이는 랜더 영역이나 특정 기능들을 컴포넌트 단위로 나누어 개발하게 되고 이를 화면에 넣었다 뺏다, 업데이트하면서 동작한다. 그리고 이러한 컴포넌트는 Template과 Script로 구성된다. (원한다면 Style 포함 가능. Template 제외 가능) 당연하게도 이러한 이유로 Template는 어떠한 마크업 태그 안에 들어 있어야 한다. 위와 같은 동작을 하다 보니, 컴포넌트들은 필연적으로 생명주기를 가지게 되는데 이를 잘 알아두어야 개발할 때 편하다. VueJS 공식 문서에서 제공하는 생명주기 다이어그램은 다음과 같다. 1. beforeCreate 가장 먼저 실행되는 훅이다. this.$el로 대변되는 DOM이 아직 생성되지 않았기에 접근할 수는 ..

4학년 졸업을 앞두고 취업준비를 하다보면 GET, POST 방식의 차이점에 대해 줄줄 외게 됩니다. TCP, UDP의 차이와 더불어서요. 이제는 레벨업(?)을 했다고 치고 GET, POST 그리고 그 외의 HTTP 메서드에 대해 알아 봅시다. 마지막으로는 기본적인 HTTP 응답 코드 몇가지에 대해서도 간략하게 알아 봅시다. 1. GET - 가져오다 라는 의미 - URL에 요청 데이터를 포함시켜 전송합니다. - http Header에 포함되어 전송합니다. - 전송 데이터 길이에 제한이 있다. - 캐싱 가능. 2. POST - 제출하다 라는 의미 - URL에 데이터가 노출되지 않습니다. - http Body에 포함되어 전송합니다. - 전송 데이터 길이에 제한이 없다. - 캐싱 불가능. 3. PUT - POS..

서버와 통신하는 어플을 개발 하다보면 Rest api에 대해 알게 되고 이를 이용해 개발 하게 됩니다. Restful api를 설계하고 만드는 일은 백엔드 개발자의 몫이지만, 사용하는건 클라이언트 개발자의 몫인거죠. 우리가 사용할 서버측의 api가 어떻게 구성되어 있는지 알아야 전반적인 데이터의 흐름을 알 수 있고 용이하게 사용 할 수 있습니다.. 그럼 시작해보겠습니다. 1. Rest란 무엇인가. Representational State Transfer 의 약자입니다. 해석하기가 난해한데요, "대표되는 상태 전달" 보다는 "상태의 변화를 표현" 이라 이해하는게 더 다가올 것 같습니다. 2. http 메서드. http 메서드에는 GET, POST 이외에도 PUT, DELETE가 있습니다. (PATCH, O..

자바스크립트는 객체지향을 클래스로도, 프로토타입으로도 구현할 수 있다. 클래스는 es6 문법이니 추후 포스팅할 예정이고 이번에는 프로토타입에 대해 알아보자. 이것은 클래스 방식보다 더 강렬하고 강력하게 느껴질 수도 있다. 언제나 그렇듯 검정화면. 1 2 3 4 5 6 7 8 function Person(age){ this.age = age this.printAge = function(){ console.log(this.age); } } var leesukkyu = new Person(34); cs #1 자바스크립트의 클래스는 함수로 구현이 가능하다. 이러한 함수를 생성자 함수라 부른다. (보통 대문자로 시작) #8 34세의 사람 인스턴스를 생성자 함수를 통해 생성. #2 인스턴스의 멤버 변수로 age 등..

Javascript array에는 다양한 내장 함수들이 있습니다. ES6에서 새롭게 생긴 함수들은 아니지만, 이른바 선언형 프로그래밍을 하게 될 때 많이 사용하게 되는 Array 함수들입니다. 장황한 설명은 필요치 않은 것 같아, 간단하게 정리해봤습니다. var arr = [1,2,3,4,5] 1. forEach - 전체를 순회할 때 // 전체를 순회. arr.forEach((item, index, array) => { console.log('돈다'); }) 2. map - 원본 배열 안 건들고 새로운 배열을 만들 때 - 이건 전부다 해당 // 모든 배열의 값을 1 증가. arr.map((item, index, array) => { return item + 1 }) 3. some - 원본 배열 중 하나 ..

이번 시간은 ES6에서 Symbol과 함께 나름 고급 개념이라 생각되는 프록시와 리플렉트에 대해 알아보겠습니다. 리플랙트는 이전에도 있었지만 둘 다 처음 듣는 분도 계실겁니다. 먼저 프록시부터 시작하겠습니다. 프론시는 대리자라는 개념입니다. 어떤 의미인지 감이 안 오신다고요? 먼저 인터셉터라는 개념을 먼저 알아야 하는데요. 개발을 진행하다 보면 하나의 레이어를 만들어 어떤 기능을 가상화하는 경우가 생깁니다. 이게 무슨 소리냐! 검정 화면으로 이해해 보겠습니다.

구조 분해 할당 이건 정말 완전 쿨하다. 화살표 함수가 this를 변수에 담아두는 행동(_this, _self의 추억이여...)들을 사라지게 했다면, 이건 더 많은 부분들을 사라지게 해준다. 그렇다면 구조 분해 할당이 무엇인지 바로 검정 화면으로 알아보자. (이름에 어떤 기능인지 설명이 되어 있다는 사실!) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // #1 구조 분해 사용 케이스 1 var a, b; [a, b] = [10, 20]; // #1 이용 안한 케이스 1 var a, b; a = 10, b = 20; // #2 구조 분해 사용 케이스 2 var a, b, rest; [a, b, ...rest] = [10, 20..

추후 예정

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..