Web (13) 썸네일형 리스트형 [JavaScript / ES6] 화살표 함수 화살표 함수는 ES6에 추가된, 함수를 정의할 수 있는 또 다른 방법이다. function order(name, menu) { return `${name}님이 ${menu}를 주문하셨습니다.`) } console.log(order('manzoo', 'pizza')) 화살표 함수를 사용하면 간단하게 함수를 만들 수 있다. function 키워드를 쓰지 않아도 되며, return도 생략 가능하다. (아래와 같이 한 줄로 값을 반환할 때만 생략할 수 있다.) const order = (name, menu) => `${name}님이 ${menu}를 주문하셨습니다.` console.log(order('manzoo', 'pizza')) 파라미터가 없는 경우에는 빈 괄호를 표시하며, 하나일 때는 괄호를 생략할 수 있.. [JavaScript / ES6] 디폴트 파라미터 ES6 명세에 디폴트 파라미터가 추가되었다. 디폴트 파라미터란, 말 그대로 함수 파라미터의 디폴트 값을 의미한다. function order(name="manzoo", menu="pizza") { console.log(`${name}님이 ${menu}를 주문하였습니다.`) } order() // manzoo님이 pizza를 주문하였습니다. 위와 같이 디폴트 파라미터를 설정해놓으면, 함수를 호출할 때 인자를 넘기지 않아도 기본 값이 설정된다. [JavaScript / ES6] 템플릿 문자열 템플릿 문자열은 문자열 연결 대신 사용할 수 있다. 보통, 문자열을 연결하여 출력하려면 + 기호를 사용하여 이어붙여야 한다. console.log("안녕하세요.\n제 이름은 " + name + "입니다. 제 나이는 " + age + "살 입니다.") 하지만 템플릿 문자열에서는 ${ }를 사용해 그 안에 변수를 넣을 수 있다. console.log( `안녕하세요. 제 이름은 ${name}입니다. 제 나이는 ${age}살 입니다.` ) 그레이브 액센트(`) 사이에 문자열을 문자열을 입력하고, 변수는 ${ } 사이에 넣으면 된다. 그러면 + 와 " 로 일일이 이어붙이지 않아도 되며, 탭, 개행 문자, 공백 모두 유지하게 되어 한눈에 파악하기 쉽다. [JavaScript / ES6] 변수 선언 ES6 이전에는 변수를 선언하는 유일한 키워드가 var 이었다. ES6 에서는 두 가지 방법이 추가되었다. 1. const constant는 값을 변경할 수 없는 상수이다. 따라서 상수에 값을 재설정하는 것은 불가하다. const test = true test = false // error const는 변경하면 안되는 값이나 함수, 객체 선언에 주로 사용된다. 함수 예) const func = function() { console.log("const") } ... // error func = function() { } 이미 정의된 함수를 실수로 재정의하게 되는 경우를 막기 위함이다. 객체 예) const menu = { "name": "pizza", "price": 10000 } menu.price = .. [React.js] Fragment React에서 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다. test click 위와 같은 경우에는 보통 div 태그로 많이 감싼다. 다른 태그로 감쌀 필요성이 있는 경우 Fragment를 사용한다. test click 별도의 노드를 작성하지 않고도 자식 노드를 그룹화할 수 있다. https://reactjs-kr.firebaseapp.com/docs/fragments.html Fragments – React A JavaScript library for building user interfaces reactjs.org [Node.js] NPM NPM은 Node Package Manager의 줄임말이다. node.js에서 사용하는 모듈들을 관리한다. 따로 파일을 설치하지 않아도, npm을 사용하여 필요한 모듈을 쉽게 설치할 수 있다. C#의 NuGet과 같은 개념이다. node.js에서 사용하는 모듈이므로, node.js를 설치하면 npm도 자동으로 설치된다. 1) node.js 설치 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) 설치 후 터미널에 npm -v 명령어를 입력하면 버전 확인이 가능하다. 3) 프로젝트에 모듈은 프로젝트 디렉토리로 이동하여 npm install 모듈명 을.. [JavaScript] 객체 자바스크립트에서 객체는 아래와 같이 중괄호 {}를 이용해 생성 가능하다. 콜론의 왼쪽은 키이고, 오른쪽이 속성이다. 객체의 요소에 product[키] 또는 프로퍼티 접근자를 이용해 product.키 로 접근 가능하다. (product.키 방법을 더 많이 사용한다고 한다.) ex. product['제품명'] ===> '7D 건조 망고' product.제품명 ===> '7D 건조 망고' 단, 식별자가 아닌 문자를 키로 사용했을 때는 무조건 대괄호를 사용해야 접근 가능하다. object['with space'] ===> 273 [JavaScript] 콜백 함수 콜백 함수란 매개변수로 전달하는 함수를 말한다. 콜백함수는 보통, 익명 함수로 많이 사용한다. 이전 1 2 다음