본문 바로가기

ES69

Javascript ES6 - 템플릿 문자열 템플릿 문자열 자바스크립트에서 문자열안에 값을 써야 하는 경우가 아주 많습니다. ES6이전에는 이러한 처리를 다음과 같이 문자열 병합으로 해결 했었습니다. var value = 5; console.log("값은 "+ value + "입니다."); //값은 5입니다. 하지만 ES6에서는 템플릿 문자열이라는 기능을 제공합니다. 마치 C언어에서 FormatString과 같이 문자열에 값을 바인딩 하여 사용 할 수 있습니다. 다음은 위 코드를 템플릿 문자열을 사용하여 value를 문자열에 바인딩 한 예입니다. var value = 5; console.log(`값은 ${value}입니다.`); //값은 5입니다. 템플릿 문자열을 사용할때는 작은 따옴표' 나 큰따옴표" 를 사용하지 않고 백틱(backtick)문자 .. 2020. 3. 31.
Javascript ES6 - 함수(function) 정리 4 / 화살표 표기법 12. 화살표 표기법 자바스크립트 ES6에는 화살표 표기법이 도입 되었습니다. 화살표 표기법은 function이라는 단어와 중괄호를 줄이려고 고안된 단축 문법이라고 합니다. 화살표 함수에는 세 가지 단축 문법이 있습니다. function을 생략 함수에 매개변수가 단 하나 뿐이라면 ()도 생략할 수 있음. 함수 바디가 표현식 하나라면 중괄호와 return도 생략할 수 있음. 화살표 함수는 또한 항상 익명이기 때문에 변수에 할당 할 수 있지만 이름이 있는 함수를 만들 수 없습니다. const f1 = function() { return "hello"}; const f2 = ()=> "hello"; //function 생략 const f3 = function(name) { return `hello ${name.. 2020. 3. 31.
Javascript ES6 - 함수(function) 정리 3 지난번 Javascript ES6 함수 정리 1, 2에 이어서 계속 ES6의 함수에 대해서 알아 보겠습니다. https://lucidmaj7.tistory.com/127 Javascript ES6 - 함수(function) 정리 1 1. 함수 선언 자바스크립트에서 함수 선언은 function 함수명(인자,인자..) 형태로 선언됩니다. 그 예는 아래와 같습니다. function sayHello() { console.log("Hello !!"); console.log("hi"); } sayHello(); //.. lucidmaj7.tistory.com https://lucidmaj7.tistory.com/128 Javascript ES6 - 함수(function) 정리 2 5. 함수를 결정하는 것 보통 다른.. 2020. 3. 30.
Javascript ES6 - 함수(function) 정리 2 5. 함수를 결정하는 것 보통 다른 프로그래밍 언어에서는 함수의 시그니처에 매개변수가 포함됩니다. C++에서 f()와 f(int a)는 다른 함수이죠. 하지만 자바스크립트에서는 매개변수가 다르더라도 함수의 이름이 같다면 같은 함수를 가리킵니다. function foo(x) { console.log(`x는 ${x}`); } const param = 5; foo(); //x는 undefined foo(param); //x는 5 6. 매개변수 해체 자바스크리트 함수의 매개변수는 해체 될 수 있습니다. 그 예는 아래와 같습니다. 프로퍼티 이름은 반드시 유효한 식별자여야 하고 들어오는 객체에 해당하는 프로퍼티가 없는 변수는 undefined를 할당 받습니다. function getSentence({subject,.. 2020. 3. 24.
Javascript ES6 - 함수(function) 정리 1 1. 함수 선언 자바스크립트에서 함수 선언은 function 함수명(인자,인자..) 형태로 선언됩니다. 그 예는 아래와 같습니다. function sayHello() { console.log("Hello !!"); console.log("hi"); } sayHello(); // 함수 호출 Hello! 함수를 선언하고나서 함수를 call해야 실행이 됩니다. 2. 함수의 반환(return) 함수는 호출 후 값을 반환 할 수 있습니다. 이때 return이라는 키워드를 통해 함수를 즉시 종료하고 값을 반환합니다. 그 예제 코드는 다음과 같습니다. function sayHello() { return "hello!!"; //값 리턴 } let val = sayHello(); // 함수 호출 값 저장 console... 2020. 3. 24.
macOS 10.15 카탈리나에서 npm 패키지 설치시 권한 오류 macOS 10.15카탈리나에서 npm 패키지 설치시 권한 오류가 발생 하는 경우가 있습니다. sudo 명령어를 같이 써줘도 권한문제가 발생합니다. Error: EACCES: perminsion denided 이때 npm의 기본 경로를 유저 홈디렉터리 밑으로 옮겨주고 환경변수를 다시 설정하여 권한 문제를 해결 할 수 있습니다. 1. 유저 디렉터리에 설치경로 생성 Wonheeui-MacBookPro:~ lucidmaj7$ mkdir ~/.npm-global 2. npm config set prefix Wonheeui-MacBookPro:~ lucidmaj7$ npm config set prefix '~/.npm-global' 3. 환경변수 설정 Wonheeui-MacBookPro:~ lucidmaj7$ e.. 2020. 3. 22.
자바스크립트 ES6 개발 환경 - 걸프(gulp), 바벨(babel) / macOS 10.15 자바스크립트 ES5는 현재 최신 브라우저라면 거의 모든 기능을 지원하고 있습니다. 하지만 ES6 제대로 지원하는 브라우저는 많지 않습니다. 아래는 kangax의 github페이지에서 브라우저별 es6문법 호환 비교표입니다. 많은 브라우저들이 ES6 문법을 일부 지원하고 있는 것을 볼 수 있지만 아직까지 완벽하게 지원되지 않는 것 같습니다. 때문에 ES6를 선택하고 개발하고자 한다면 트랜스컴파일이라는 작업을 해줘야 합니다. ES6코드를 ES5로 말이죠. 이번 글에서는 그중에서도 babel과 gulp라는 툴의 사용법을 간단히 적어보려 합니다. Gulp (걸프): 반복적인 개발 작업을 자동화하는 빌드 도구 babel(바벨): ES6코드를 ES5코드로 변환해주는 트랜스컴파일러 그전에 우선 npm부터 설치 하여야.. 2020. 3. 22.
Javascript ES6 문법 - 변수 선언 var, let, const 차이 ES6 이전의 Javascript에서는 var키워드가 변수 선언방법의 유일한 방법이였습니다. 하지만 ES6에서는 var, let, const라는 키워드를 통해 변수를 선언 할 수 있습니다. ES6에서 var로 변수 선언하기 ES6에서 var로 변수를 선언하면 재 할당과 재 선언이 가능해집니다. var 변수의 유효 범위는 전역범위에서는 전역적으로 유효하며, 함수 안에서는 해당 함수에서만 유효합니다. 하지만 이러한 특성은 혼동을 주며 버그의 원인이 되기도 합니다. var변수의 선언은 코드가 실행되기 전에 처리되므로 어느 곳에서 선언을 하던 맨위에서 선언 하는 것과 같은 효과를 나타냅니다. 이러한 동작을 'Hoisting'이라 부릅니다. var x = 1; function faaa(){ var x = 5; c.. 2020. 3. 13.
ECMAScript 6 알아보기 ES6 ECMAScript 6? ECMAScript 6는 ES6라고 흔히 알려져 있으며 ECMAScript 2015라고도 불립니다. ECMAScript 2015 Edition이라고 하죠. 그렇다는 이야기는 2016버전도 있고 2017버전도 있고.. ES6, ES7 .. 계속 있다는 이야기 입니다. 하지만 현재 ES6 스팩도 제대로 구현된 웹브라우저는 없다고 하네요. 보통 ES5를 호환 하고 있습니다. ES6에는 다양한 기능들이 추가 되었는데요. 상수, let 키워드, 화살표 함수, Templte literals등 좀 더 복잡해진 애플리케이션을 만드는데 유용한 기능들이 추가 되었습니다. https://www.taniarascia.com/es6-syntax-and-feature-overview/ ES6 Syntax.. 2020. 3. 11.

티스토리툴바