java에서는 아래와 같이 사용할 수 있다. public class Person{ priavte String firstName = ""; // 클래스 필드에 클래스 멤버 생성 public String getName() { return this.firstName; } } firstName이 생성된 곳을 클래스 필드라고 한다. ES6+이후 javascript에서도 클래스 필드에 선언 할 수 있게 되었다. class Person{ firstName = "Lee"; // 클래스 필드에 인스턴스 변수 선언 } const p = new Person(); // Person {firstname:"Lee"} 클래스필드에 변수를 선언하면 인스턴스의 변수가 된다. 위의 코드는 아래와 같다. class Person{ cons..
static method ES6부터 class가 도입되면서, 클래스 내에서 static method를 사용할 수 있게 되었다. (function에서는 사용할 수 없다) static 키워드를 사용하여 메소드를 정의하면 new "클래스이름" 으로 인스턴스 객체를 생성하지 않아도 해당 메소드를 사용할 수 있다는 장점이 있다. class A{ static a(){ console.log("a"); } } A.a(); // "a" 이와 같은 static 메소드는 A자체의 프로퍼티가 된다. class대신 function을 사용하면 아래와 같다. function A() {} A.a = function(){ console.log("a"); } A.a(); this.a와 static a this.a와 static a를 자..
자바스크립트에서는 함수를 new로 생성하여 객체를 생성할 수 있다. function A(){ this.a = 1; this.hi = function() { console.log("hi") } } const a = new A(); console.log(a) 함수가 이렇게 객체를 생성하는 방식으로 사용될 때 이 함수를 생성자 함수라고 부른다. 자바스크립트에서는 생성자 함수에 대한 구별이 없다. 그냥 함수를 new로 생성하면 생성자 함수가 되는 것이다. ( 이를 구분하기 위해 생성자 함수로 사용될 함수는 첫글자를 대문자로 쓰는 컨벤션이 있다. ) 그럼 모든 함수가 다 생성자 함수가 될 수 있을까? 아니다. 함수에 대해 더 알아보자. 함수 함수도 객체다. 따라서 객체가 가지는 내부슬롯( [[Environment..
일반적으로 함수를 만들때는 하나의 기능을, 단 하나의 함수만 작성하는 것이 좋은 프로그래밍 방법이다. 하지만 어떤 경우에는 이것이 가독성을 해치기도 한다. 기능별로 하나의 함수만 만든다는 것은 그 함수의 output이 다른 함수의 input이 된다는 것을 의미한다. 따라서 코드를 볼 때 거꾸로 타고 계속 올라가야 한다. 많은 사람들이 이런 경우를 경험해 보았을 것이다. 이럴 때 좋은 방법이 Method Chaining Pattern이다. Method Cahining Pattern Method Cahining Pattern은 자기 자신의 객체를 return하여, 계속 그 객체의 함수를 사용할 수 있게 한다. function solution(n) { return parseInt(String(n).split(..
옵셔널 체이닝(Optioinal Chaining) 옵셔널 체이닝은 ?.을 사용한다. const name = person?.name 좌항(person)이 undefined나 null이면 좌항(person)을 반환하고, 그렇지 않으면 우항(person.name)을 반환한다. 옵셔널 체이닝이 도입되기 전에는 && 연산자를 사용했다. &&연산자 const name = person && person.name &&연산자는 좌항(person)이 falsey값이면(0, -0, '', null, undefined, false, NaN) 좌항(person)을 반환하고, 그렇지 않으면 우항(person.name)을 반환한다. &&연산자는 falsy값이 조건이지만, 옵셔널 체이닝은 undefined나 null인 경우가 조건 ..
생각할 점이 많은 글을 발견했다. 최근에 js라이브러리를 이것저것 사용하면서 쓸데없는 js를 너무 많이 사용한다는 생각을 했다. 분명히 좋지 않을텐데... 하고 생각했고 그러다가 npm, node, webpack, babel, 모듈화.... 이것저것 봤다. webpack을 쓰는 이유 중에는 스크립트 용량을 줄이기 위해서도 있다는데.. 왜 그래야하지? 등등 나 같은 생각을 한 사람에게 이 글이 도움이 될 것이다. https://medium.com/little-big-programming/spa-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9A%A9%EB%9F%89-%EC%96%B4%EB%94%94%EA%B9%8C%EC%A7%80-%EC%A4%84%EC%9D%BC-%EC%88%9..
Webpack webpack은 frontend프레임워크에서 가장 많이 사용되는 Module Bundler이다. webpack은 모듈(js모듈, 이미지 폰트 등 전부)의 의존성을 분석하여 하나로 묶어, 병합 및 압축해준다. 여러라이브러리를 하나로 만들어준다고 생각하면 된다. Babel Babel은 코드 변환기이다. javascript는 계속 발전한다. 추가될 기능에 대한 "제안"(proposal)이 정기적으로 등록되고, 가치가 있다고 판단되면 https://tc39.github.io/ecma262/에 추가된다. 그리고 궁극적으로 ECMA명세서(specification)에 추가되는 것이다. 하지만, 엔진(브라우저)이 항상 표준 전체를 지원하지는 않는다.(대표적으로 IE...) 바벨은 transpiler로 이..
spring-boot-devtools를 쓰는 이유 spring boot에서는 static소스를(js, html, css) resources아래에서 관리하기때문에 static소스가 바뀌면 매번 서버를 껐다 켜야 한다. spring-boot-devtools는 이런 문제를 해결해준다. dependency추가 build.gradle에 dependency를 추가한다. dependencies { developmentOnly 'org.springframework.boot:spring-boot-devtools' } gradle을 업데이트한다. IntelliJ Setting File > Setting > Advanced Settings에 들어가서 Allow auto-make to start even if develope..
