일상을 추억으로

3학년 1반 학생들에게 연필을 나누어 줍니다. 모두에게 6개씩 나누어 주면 딱 맞게 나눠줄 수 있고 8개씩 나누어 주면 16개가 더 필요합니다. 학생의 수와 연필의 수를 구하세요. 연립방정식을 배웠다면 아래처럼 풀 것 입니다. 학생수를 a 라 두고 연필의 수를 b라고 두면 … 초등학교 3학년은 이렇게 풀 수 없습니다. 다음 그림을 보세요...

바벨은 ES6를 EcmaScript로 transpiling하는 도구이다. 바벨을 실행하는 가장 간단한 방법은 nodejs에서 실행하는 것이다. 다음 js는 arrow function이고 오래된 브라우저에서는 작동하지 못하므로 오래된 버전의 js로 변환되어야 한다. var hello = (name) => { return `Hello ${name}`; } 이를 nodejs로 컴파일 하려면 다음을 수행하면 된다. 이 때 위 hello소스는 src\index.js로 저장되어 있다고...

바벨은 ES6를 EcmaScript로 transpiling하는 도구이다. 바벨을 이해하는 가장 간단한 방법은 이것이 컴파일하는 JS소스를 살펴보면 된다. 다음 js는 arrow function이고 오래된 브라우저에서는 작동하지 못하므로 오래된 버전의 js로 변환되어야 한다. var hello = (name) => { return `Hello ${name}`; } 바벨을 실행하는 가장 간단한 방법은 nodejs에서 실행하는 것이다. 이 때 위 hello소스는...

test utilities를 사용한 예제 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {default as ReactTestUtils, act} from 'react-dom/test-utils'; let container; beforeEach(()=> { container = document.createElement('div'); document.body.appendChild(container); }); afterEach(() => { document.body.removeChild(container); container = null; }); it('renders hello name', () => { act(() => { ReactDOM.render(<App/>,...

js의 함수내에서 this를 사용할 때 this의 의미가 호출되는 문맥에 따라 변한다는 사실은 때때로 매우 혼란스럽다. this의 의미를 알아내기 위해 디버깅을 해보기도 하고 console에 로그를 남겨보기도 하면서 그때 그때 문제를 해결해 나가고 있지만 문제 해결을 하고 나면 싹 잊어버리고 지내다가 다시 문제를 만나면 그제서야 다시 공부를 하곤 한다. 이 글에서는 모든...