서론 당신은 스프링부트에 대해서 들어봤을 것입니다. 스프링부트는 단 140여 글자로 스프링 웹 어플리케이션을 만들 수 있 습니다. 그런데 이게 무엇을 뜻하는지 아시나요? 스프링부트에 강력한 기능을 제공하고 스프링 개발을 쉽게하도록 하는 기능은 무엇일까요? 이것이 바로 이번 포스팅에서 살펴볼 내용입니다. 이번 포스팅에서는 스프링부트의 자동설정, 스타 터 디펜던시, 스프링부트 CLI, Actuator, Spring Initializer에 대해 깊게 살펴보겠습니다. 이것들은 대부분 Spring 기반 Java 웹어플리케이션을 개발할 때 발생했던 고통과 어려움을 없애주는 기능입니다. 먼저 본론으로 들어가기전, 스프링 자바 기반 개발을 할때 발생하는 문제들을 되짚어봅시다. 스프링은 의심할 여지없이 훌륭한 프레임워크..
현재 Rest API 개발과 함께 풀스택을 지향하며 Vuejs를 학습하며 서버와 클라이언트를 모두 학습중입니다. 직장에서는 서버 API 개발을 하면서 실무에서 배워가면 학습을 하고 있는 편입니다. 그런데 API를 먼저 TDD를 통한 개발방법, Postman으로 테스트해보면서 Vue 프레임워크를 이용해서 프론트를 입히는 작업을 하는 도중 한가지 이슈에 봉착하게 되었습니다. 바로 교차출처 리소스 공유인데요. 흔히 CORS라고 축약되어 부르는 단어입니다. 이는 기존에 많은 SI에서 채택한 Spring, JSP를 이용한 개발에서는 확인하기 힘든 이슈였습니다. 이유는 서버사이드 렌더링으로 모든 페이지들을 불러오고 필요한 데이터 호출은 Ajax로 처리하던 기존의 방식은 서버와 클라이언트의 출처(Resource)가 ..
오늘은 지난 번 ES6 포스팅 중 var let const 의 차이점에 대해서 포스팅했던 것에 이어서 ES6에서 업데이트된 화살표함수(Fat Arrow Function)에 대해서 포스팅해보겠습니다. - 함수 선언을 화살표로 선언한느 방식인데요. function 키워드를 쓰지 않고 => 키워드로 대체하는 방식입니다. - 흔히 사용되는 콜백함수(callback)의 문법을 간결화하는데 탁월합니다. var sum = function(a, b) { return a + b; }; 위와 같은 기존 함수 표현식을 아래와 같이 변경할 수 있습니다. // 1. var sum = (a, b) => { return a + b; }; // 2. 축약버전 var sum = (a, b) => a + b 첫번째 function을 =..
안녕하세요. 오늘은 자바스크립트에서 객체를 표현하는 방법중 ES6에서 추가된 내용을 포스팅해보려고 합니다. 먼저 객체를 선언할 때, 변수와 함수를 다음과 같이 프로퍼티로 표현할 수 있었습니다. var obj = { property1 : 100, function1 : function() { console.log('call function1'); } }; obj.property1; //100 obj.function1(); //call function1 흔하디 흔한 객체 선언입니다. 프로퍼티명 : 값, 프로퍼티명 : 함수 그런데 이부분을 ES6에서는 다음과 같이 표현할 수 있게 되었습니다. 먼저, 함수부분입니다. var obj = { function1() { console.log('call function1'..
2015년에 Javascript에 엄청난 업데이트가 발생하게 됩니다. 흔히 이야기하는 ES6 업데이트 인데요. 기본 ES5에서 많은 부분이 업데이트된 대규모 업데이트입니다. 이번 포스팅에서는 그 중에서 가장 흔하게 접할 수 있는 변수 선언 방식에 대해서 설명하고자 합니다. ES5 특징 - 변수의 스코프(범위) - 기존의 자바스크립트 ES5는 괄호{ } 에 상관없이 스코프가 설정되었다. var sum = 0; for(var i = 1; i
이번 포스팅에서 자바스크립트의 this 키워드와 this가 할당되는 시나리오들에 대해서 살펴볼 것입니다. 이번 포스팅을 이해할 가장 좋은 방법은 예제로 드리는 코드들을 직접 브라우저의 콘솔탭에서 실행해보는 것입니다. 아래 단계를 확인하시고 크롬 브라우저에서 따라해보시기 바랍니다. 1. 크롭에서 새탭을 켠다! 2. F12를 눌러 개발자도구를 켠다! 3. 콘솔탭으로 간다. 4. 예제코드를 실행한다. Objects는 자바스크립트의 기본구성요소입니다. 자바스크립트에서 사용할 수 있는 하나의 특수객체인 this 객체가 있습니다. 자바스크립트 소스에서 매번 봐왔을 코드입니다. 자바스크립트의 this 키워드의 값은 코드가 어떻게 실행되 는지에 따라서 결정될 것입니다. this에 대해서 살펴보기전, 먼저 자바스크립트 ..
안녕하세요. 오늘은 Vue.js의 인스턴스에서 this 키워드에 관하여 포스팅해보고자 합니다. 일반적으로 자바스크립트에서의 this키워드는 다음과 같이 사용됩니다. var obj = { num : 10, plusNum : function(){ this.num++; } } obj.plusNum(); console.log(obj.num); //11 obj이라는 변수에 num과 num에 +1을 더하는 plusNum이라는 함수를 정의하였을 때, num++하는 부분에서 this 키워드가 사용되는 것을 볼 수 있을 것입니다. 자바스크립트에서는 일반적으로 객체의 인스턴스를 가져올 때 this키워드를 사용합니다. this를 내부에서 obj 변수처럼 활용하는 것이지요. 하지만 Vue 인스턴스를 생성했을 때는 약간 다르게..
모든 객체는 자신의 prototype으로부터 constructor 속성을 상속하게 됩니다. var obj = {}; obj.constructor === Object; // true var obj = new Object; obj.constructor === Object; // true var array = []; array.constructor === Array; // true var array = new Array; array.constructor === Array; // true var n = new Number(3); n.constructor === Number; // true 객체의 생성자 표시 다음은 프로토타입이 Tree인 그 형의 객체 thrTree를 만듭니다. 그 다음 객체 theTree의 c..