개발/JAVASCRIPT10 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. NodeJS, NPM설치 하기 - 자바스크립트(Javascript) , macOS 자바스크립트 ES6개발 환경을 구축하기 앞서 npm을 설치 해야합니다. nodeJS개발 환경에서 npm은 필수이지만 프론트엔드 개발 환경에서 npm은 필수가 아닙니다. 하지만 프론트엔드 개발에서 ES6를 사용한다면 npm을 사용하는 것이 훨씬 편리해집니다. npm을 통해서 빌드도구인 gulp와 트랜스컴파일러인 babel을 설치 할 수 있습니다. npm은 node를 설치할 때 같이 설치 됩니다. nodejs홈페이지에서 node를 다운 받아서 설치 하면됩니다. 설치 버전은 stable버전인 LTS버전을 설치하면 되겠습니다. macOS버전 기준으로 node-v12.16.1.pkg을 받았습니다. 우클릭->열기를 통해 인스톨러를 실행하면 아래와 같이 보안경고창이 뜹니다. 여기서 열기를 클릭하여 실행합니다. 해당 .. 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. 이전 1 2 다음
