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 로 컴포넌트를 ..

node.js 에서 패키지 생성 방법 및 외부패키지 사용에 대해 간략히 정리하는 글이다. 이전 글에서 node.js에서 기능별로 모듈을 관리하고 사용하는 방법에 대해 공부했었다. 패키지란 node.js에서 사용할 수 있는 이런 모듈들을 패키지형태로 저장한 것을 말하고 npm(node package manager)은 다른 사람들이 올린 이런 패키지들을 자유롭게 사용할 수 있는 오픈소스 라이브러리이다. 1. 패키지 생성 터미널에서 원하는 경로에서 npm init 명령어를 사용하여 패키지 생성이 가능하다. 위와 같이 패키지에 대한 정보를 하나씩 입력 하고 yes를 입력하면 패키지 생성이 완료된다. 패키지 생성가 되고 나면 해당 경로에 package.json 파일이 생성된 것을 확인할 수 있다. package...

node.js 에서 module.exports의 사용방법에 대해 정리하는 글이다. 하나의 js 파일에 모든 함수를 작성하여 관리하는 방법 보다는 기능별로 함수들을 묶어서 관리하는 편이 후에 재사용 및 유지보수에도 용이한데 node.js 에서는 commonJs에서 제공해주는 module 기능을 사용하여 기능별로 나누어 관리할 수 있다. module.exports 를 사용하여 다른 곳에서 끌어다 사용할 수 가 있는데 간단한 예제로 calc.js 에 두개의 숫자를 받아 덧셈을 수행하는 함수와 뺄셈을 수행하는 함수를 정의하고 위와 같이 module.exports 안에 각각 객체의 프로퍼티처럼 키값과 해당 객체를 작성해주면 된다. index.js에 위와 같이 작성하고 calc.js의 add 함수와 sub 함수를 ..

react.js 를 공부하면서 node.js의 설치가 필요하게 되어 간략하게 정리하는 글이다. node.js는 브라우저에 한해서만 사용 가능했던 자바스크립트를 브라우저외에서도 사용가능하게끔 해주는 자바스크립트 런타임(구동환경)이다. node.js는 react.js에서 필요로 하는 모듈들을 간편하게 다운받을 수 있도록 npm 서비스를 제공한다. react.js는 node.js를 기반으로 사용할 수 있는 기술이기 때문에 node.js의 설치방법을 정리해보고자 한다.(mac os 기준) 1. https://nodejs.org/ko 접속 및 다운로드 먼저 node.js를 설치하기 위해 node.js의 공식 홈페이지로 접속한다. 접속하면 운영체제에 맞는 두가지의 다운로드 버전을 제시해주는데 왼쪽에 있는 LTS는 ..

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. 위와 같이 템플릿 리터럴은 작은 따옴표나 큰 따옴표 대신 백틱(``)을 사용하여 표출한다. ${표현식}을 이용하여 간단한 표현식을 넣는 것도 가능하다. 참고로 템플릿 리터럴 안에서 백틱을 사용..