Fe-Dev

react.js 를 공부하면서 알고 넘어가야할 JSX의 간단한 사용법을 정리하는 글이다. react에서는 공통적으로 재사용해야하는 요소들을 컴포넌트별로 분할해서 사용하게 되는데 이 컴포넌트를 만들때 유용하게 사용되는 문법이 JSX이다. ✔︎JSX를 사용하는 이유 JSX를 사용하지 않고 React에서 위 화면처럼 hello world! 를 표출하기 위해서는 const hello = React.createElement("div", { className: "App"} , React.createElement("h1", null, "hello world!")); ReactDom.render(hello, document.getElementById('root')); React.createElement 로 컴포넌트를 ..

ES8에서 도입된 async/await에 대해 정리하는 글이다. 이전에 Promise를 사용하여 비동기처리를 하는 패턴에 대해 공부를 했었는데 이와 관련하여 비동기처리를 동기처럼 동작하도록 구현할 수 있는 async/await에 대해 알아보고자 한다. 기본적으로 async/await는 프로미스를 기반으로 동작한다. async/await를 사용하면 프로미스의 then/catch 등 후속처리메서드에 콜백함수를 전달해서 비동기 처리결과를 후속처리할 필요없이 마치 동기처럼 프로미스를 사용할 수 있다. 1. async async function hello() { return "hello"; } hello().then((res) => {console.log(res)}); async 함수는 반드시 promise를 반..

ES6에서 도입된 프로미스에 대해 간략히 정리하는 글이다. 자바스크립트는 비동기 처리 결과값을 상위 스코프로 가져갈 수 없기 때문에 비동기 처리를 하는 함수 내부에서 로직을 구현하거나 콜백 함수를 이용하여 결과값을 전달한다. function taskA(a, b, cb){ setTimeout(() => { const res = a + b; cb(res); }, 3000) } function taskB(a, cb){ setTimeout(() => { const res = a * 2; cb(res); }, 1000) } function taskC(a, cb){ setTimeout(() => { const res = a * -1; cb(res); }, 2000) } taskA(2, 3, (a_res) => { ..

ES6에서 도입된 spread 연산자에 대하여 간략하게 정리하는 글이다. 1. 결합의 기능 스프레드 연산자(...)는 배열, 문자열, 맵 등 과 같이 반복가능한 객체에 한하여 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들어주는데 두개의 같은 타입의 다른 값을 가진 데이터를 결합할 때 유용하게 쓰인다. // 배열에서의 spread let arr1 = [1, 2, 3, 4] // [1, 2, 3, 4]를 개별 요소로 분리한다. -> 1 2 3 console.log(...arr1) //1 2 3 4 // 2개의 배열을 한 개의 배열로 결합 let arr2 = [...arr1, 5, 6] console.log(arr2) // [1, 2, 3, 4, 5, 6] // 문자열에서의 spre..

템플릿 리터럴 사용법에 관한 간단한 정리를 위하여 작성하는 글이다. 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 객체 리터럴에서의 사용법은 아래와 같다. const person = { name : "kihoon", age : "22", sayHi(){ return `Hi, my name is ${this.name} and ${this.age} years old.` } }; console.log(person.sayHi()); // Hi, my name is kihoon and 22 years old. 위와 같이 템플릿 리터럴은 작은 따옴표나 큰 따옴표 대신 백틱(``)을 사용하여 표출한다. ${표현식}을 이용하여 간단한 표현식을 넣는 것도 가능하다. 참고로 템플릿 리터럴 안에서 백틱을 사용..

ES6에서 도입된 화살표 함수(arrow function) 내부에서 사용되는 this에 대해 정리하는 글이다. 화살표 함수는 함수선언문으로 정의할 수 없고 함수표현식으로 정의해야 한다. 일반적인 사용법은 아래와 같다. const add = (x, y) => {return x + y}; add(2, 3); // 5 1) 매개변수가 한 개 인경우 소괄호()를 생략할 수 있다. 2) 매개변수가 없는 경우 소괄호()를 생략할 수 없다. 3) 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호{}를 생략할 수 있다. -> 이때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 return을 작성하지 않아도 암묵적으로 return 한다. 4) 객체 리터럴을 반환하는 경우 객체 리터럴을 소..

react를 공부하면서 자연스레 ES6 공부도 같이 하게 되었다. 그 중 첫번째로 기초중에 기초이지만 변수선언의 방법에서부터 전 직장에서는 줄 곧 var를 사용하여 변수를 선언하였는데 ES6를 공부하게 되면서 var에는 여러가지 단점이 존재한다는 것을 알게되었고 이를 보안하기위해 ES6에서 부터 도입된 let, const가 var과 어떤 차이점이 있는지 짚고 넘어가고자 한다. 우선 var에 대해서 알아보자. 1) 함수레벨스코프 var는 함수레벨스코프를 지원하는데 함수레벨스코프란 함수 내에서 선언된 변수는 함수 내에서만 참조가 가능하며 외부에서는 참조가 불가능한 것을 말한다. 즉, 함수 외부의 제일 밖에서 선언된 var 변수는 전역변수이다. var result = 0; for (var i = 0; i < ..