주니어 개발자 성장기

정말 오랜만에 하는 포스팅이다. Vue.js 강의 들으면서 프로젝트에 관한 것들을 많이 고민하다보니 블로그의 존재를 그만 잊어버린 듯 하다.. (지금 보다는 더 자주) 포스팅 주기를 좁혀야 겠다. 여튼 회사 프로젝트도 해야하고 백엔드 개발자로서 관리자 웹페이지 정도는 간단하게 만들 줄 알아야 한다는 생각이 들어서 9월말 부터 Vue.js를 공부하면서 코드도 짜보고 있다. 어제 아는 형의 코드를 보던 도중, 이해할 수 없는 부분을 발견했다. export default { mthods: { var vm = this // ... // ... }, } Vue 내부에서 this를 쓰는 것이 아니라, this 대신 vm을 사용하는 것 이었다. 그래서 직접 물어봤는데 현업 개발자 분이 실무에서도 이렇게 쓴다고 이렇게..

Modules - 자바스크립트 모듈화 방법 ES5에서는 모듈화 방법이 없어서 모듈화를 위해 모듈 로더 라이브러리(AMD, Common JS)를 사용했었다. 모듈이란? 특정 기능을 수행하는 한 단위다. 자바스크립트 모듈 로더 라이브러리 기능을 js 언어 자체에서 지원 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음 // libs/math.js export function sum(x,y) { return x + y; } export var pi = 3.141593; //main.js import {sum} from 'libs/math.js'; sum(1, 2); ES5는 자바 스크립트는 파일을 나눠도 자바처럼 스코프가 달라지지 않았다. 범수의 유효범위 즉, 안전성의 측면에서 모듈을 지원 제일 많..

Enhanced Object Literal (향상된 객체 리터럴) 1. 속성 메서드의 축약 객체의 속성을 메서드로 사용할 때 function 예악어를 생략하고 생성가능 var dictionary = { words: 100, // ES5 lookup: function() { console.log("find words"); }, // ES6 lookup() { console.log("find words"); } }; 2. 속성명의 축약 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능 var figures = 10; var dictionary = { //figures: figures, figures };

화살표 함수 함수를 정의할 때 function 이라는 키워드를 사용하지 않고 => 로 대체 흔히 사용하는 콜백함수의 문법을 간결화 // ES5 함수 정의 방식 var sum = function(a, b) { return a + b; }; // ES6 함수 정의 방식 var sum = (a, b) => { return a + b; }; 사용 예시 // ES5 var arr = ["a", "b", "c"]; arr.forEach(function(value) { console.log(value); // a , b , c }); // ES6 var arr = ["a", "b", "c"]; arr.forEach(value => console.log(value));

ES5까지는 기본적으로 변수 선언에 var을 사용했다. 하지만, ES6부터는 const와 let을 사용한다. ES5 특징 ES5는 { } 에 상관없이 스코프가 설정되었다. 즉, 블록에 상관없이 전역변수가 된다. Hoisting Hoistiong 이란 선언한 함수와 변수를 해석기가 가장 상단에 있는 것처럼 인식한다. js 해석기는 코드의 라인순서와 관계 없이 함수선언식과 변수를 위한 메모리 공간을 먼저 확보한다. 따라서, function a()와 var 는 코드의 최상단으로 끌어 올려진 것(hoisted) 처럼 보인다. ES6 특징 블록 단위 { }로 변수의 범위가 제한되었다. const: 한번 선언한 값에 대해서 변경할 수가 없다. (상수 개념) let: 한번 선언한 값에 대해서 다시 선언할 수가 없다...

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ 자바스크립트 비동기 처리와 콜백 함수 (중급) 중급 자바스크립트 개발자가 되기 위한 자바스크립트 비동기 처리와 콜백 함수 이해하기. 콜백 지옥과 해결 방법 등 joshua1988.github.io https://joshua1988.github.io/web-development/javascript/promise-for-beginners/ 자바스크립트 Promise 쉽게 이해하기 (중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch()..