Hello Jay's Programming World!

오늘 공부해볼 ES6 JavaScript는 구조 분해 할당입니다. ES6에서 정말 많이 쓰는 문법 중 하나입니다. 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 합니다. 배열 구조 분해 var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two);// "two" console.log(three); // "three" 가장 기본적인 구조 분해 할당입니다. foo 배열은 "one", "two", "three" 세개의 문자열 요소를 가지고 있습니다. 각각의 문자열 요소를 one, two, three라는 이름의 변수에 구조 분해할당하고 있습니..

오늘은 템플릿 리터럴에 대해서 알아보겠습니다. ES6이전에는 템플릿 스트링(Template Strings)라고 불렸습니다. 템플릿 리터럴은 문법적으로 더 편하게 문자열을 생성하는 방법입니다. 템플릿 리터럴은 백틱(``)을 이용합니다. 그리고 $와 중괄호(${expression})을 이용하여 표현식을 표기할 수도 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러시를 삽입하면 됩니다. `\`` === "`" // --> true Multi-line strings 템플릿 리터럴에서 source내에 삽입되는 Newline Characters(\n)은 템플릿 리터럴의 일부가 됩니다. 아래와 같이 편리하게 사용할 수 있습니다. let msg = "Hello world!\nShow me the..

객체 리터럴이란 중괄호({})로 감싸진 하나 이상의 속성 이름과 속성 값의 리스트라고 말할 수 있습니다. 일반적으로 객체를 생성하는 방법을 생각하시면 됩니다. 오늘은 객체 리터럴에 대해 알아보도록 하겠습니다. 먼저 확인할 부분은 ES6이전에도 사용가능했던 부분입니다. 이 부분을 먼저 공부해보겠습니다. 객체 리터럴 var sales = 'Toyota'; function carTypes(name) { if (name === 'Honda') { return name; } else { return "Sorry, we don't sell " + name + "."; } } var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }; conso..

JavaScript에는 class가 없었습니다. 그래서 많은 개발자들은 JavaScript에서 객체지향 프로그래밍을 위해 함수를 이용하여 class처럼 동작하게 구현하여 사용했습니다. 프로토타입 체인과 클로저등으로 상속, 캡슐화등을 구현할 수 있기 때문입니다. 이러한 불편함을 알고 있었는지 ES6에서는 드디어 class 문법이 발표되었습니다. 그렇다고 전혀 새로운 것이 생긴 것은 아닙니다. 기존에 있던 프로토타입 기반 객체지향 프로그래밍을 조금 더 보기 좋고 쉽게 만들어준 것이라고 생각하면 될 것 같습니다. 그럼 하나 하나 살펴보도록 하겠습니다. 클래스 정의 클래스는 사실 함수입니다. 함수를 정의하는 방법이 함수 선언과 함수 표현식이 있는 것처럼 클래스도 두 가지 모두 제공하고 있습니다. 먼저 클래스를 ..

일반적으로 ES5에서 함수를 표현할 때는 function 키워드를 사용합니다. ES6에서는 함수를 짧게 표현할 수 있는 방법을 제공합니다. 그것이 바로 화살표 함수입니다. 화살표 함수를 어떻게 표현하는지 알아보겠습니다. // ES5 function let getDouble = function(num) { return num * 2; } // ES6 화살표 함수 let getDouble = (num) => { return num * 2; } getDouble(2);// 4 가장 기본적인 함수 표현입니다. 숫자 num을 입력받아 두 배로 곱한 값을 반환해주는 함수 입니다. 기존 function에서 화살표 함수로 바꾸려면 function 키워드를 제거하고 소괄호와 중괄호 사이에 => 키워드를 사용하면 화살표 ..

맥도날드에서 새로운 해피밀 장난감을 선보였습니다. 그것은 바로 랜덤 미니언즈 피규어입니다. 미니언즈를 평소에 너무 좋아하기 때문에 회사 동료들과 함께 해피밀을 먹으며 맥도날드 미니언즈 피규어를 수집하고 있습니다. 그런데, 이런 생각이 들었습니다. 35종을 모두 수집하기 위해서는 얼마나 많은 햄버거 세트를 먹어야할까? 계산하기 위한 수학적인 공식이 있겠지만, 저는 프로그래머이기 때문에 프로그래밍으로 해봤습니다. 코드는 아래와 첨부합니다. 최적화를 염두하고 만들진 않아 속도는 많이 느린 것 같습니다. 몇 가지 조건을 두고 테스트를 해보았습니다. 1. 5천만 국민이 테스트한다고 가정하고 5천만번 반복 2. 골든 미니언은 제외. 순수 35종만 수집한다고 가정 3. 모든 미니언은 동일한 등장 확률을 갖는다. 이러..

constructor() 컴포넌트 생성 시점에 호출 constructor 함수는 생명주기 함수는 아니지만, 클래스형 컴포넌트가 생성될 시점에 호출되므로 생명주기에 포함. render() 컴포넌트가 그려질 때 호출 componentDidMount() 컴포넌트가 처음 화면에 그려지면 호출 componentDidUpdate() 화면이 업데이트되면(새로 그려지면) 호출 componentWillUnmount() 컴포넌트가 사라질때 호출. 아래 diagram을 참고하시면 좀 더 이해하기가 좋을 것 같습니다. https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interactive and ..

함수에 프로퍼티를 추가하는 방법으로 결과(반환 값)를 캐싱하여 다음 호출 시점에 복잡한 연산을 반복하지 않게 하는 패턴을 Memoization(메이모제이션) 패턴이라고 한다. var func = function(param) { if (!func.cache[param]) { console.log(param + ' is not cached!'); func.cache[param] = Math.pow(2, param); } else { console.log(param + ' is cached!'); } return func.cache[param]; } func.cache = {}; func(2); // 2 is not cached! func(4); // 4 is not cached! func(2); // 2 i..

개발자로 일한지 꽤 오래된 것 같은데, 크게 성장하지 못한 내 모습을 생각하며 후회를 할 때가 종종있다. 지금의 내 모습에 만족한다면 다행이지만, 만족은 못하고 후회만 반복하고 있다. 이렇게 지내다가는 후회만하다 개발자로서의 인생을 마무리 할 것 같은 두려움도 생긴다. 이왕이면 개발자로서의 마지막 모습이 최고의 실력을 가진 개발자는 아니더라도 주위에서 괜찮은 개발자였다는 평을 듣고 마무리하고 싶다. 그렇게 되기 위해서는 좀 더 노력해봐야하는 게 아닐까 생각한다. 올해는 조금 덜 후회하는 한 해를 보내기 위해, 그 중간의 시기에서 회고해보고자 한다. 첫 회고다보니 정리가 잘 될까 걱정이 들지만, 그래도 시작이 중요하니까 한 번 써내려가본다. 1. 회사 1-1. Scrum Master 2017년 초에 Scr..

Unity 개발을 하다보면 Sprite를 동적으로 변경해야하는 경우가 발생합니다. 이때 어떻게 처리를 해야하는지 살펴보도록 하겠습니다. 오늘은 Resources.LoadAll API를 이용할 예정입니다. 먼저 선행되어야할 작업은 Sprite의 경로를 확인하는 것입니다. Resources.LoadAll API를 이용하여 Sprite를 가져오기 위해서는 반드시 Resources 폴더내에 Sprite가 존재해야합니다. 그래야 정상적으로 Sprite를 로드할 수 있습니다. 위 이미지와 같이 Resouces/Sprites/Player 폴더에 있는 "Player01"이라는 Sprite를 가져온다고 가정해보겠습니다. 그렇다면 아래와 같은 소스를 이용하여 Sprite를 가져올 수 있습니다. Sprite[] sprite..