리액트(react)에서 이벤트 버블링(bubbling)과 캡쳐링(capturing) 사용하기

이벤트 버블링 / 캡쳐링특정 DOM 노드에서 발생한 이벤트는 부모 또는 자식으로 전파됩니다. 자기자신(currentTarget)에서 부모로 전파되면 이벤트 버블링(event bubbling)이라 하고, 부모에서 자기 자신으로 전파되면 이벤트 캡쳐링(event capturing)이라 합니다. 이벤트가 발생하면 우선 window부터 target node까......

[nextjs] nextjs는 어떻게 동작하는가?

nextjs로 프로젝트를 진행한지도 반년 가까이 흘렀습니다. nextjs는 서버사이드렌더링(SSR)과 code splitting 등을 지원하는 reactjs 전용 프레임워크입니다. 2년도 채 안되는 시간에 벌써 5.x(곧 버전 6도 나올것 같네요) 버전까지 등장했습니다. 그만큼 많은 사람들의 관심속에 발전하고 있다는 뜻이겠죠. 사용법은 충분히 익숙해졌......

[react] v16.3.0, 무엇이 바뀌었나?

react v16.3.0 이 릴리즈 되었습니다. 개인적인 생각으로는 가장 큰 변화는 두가지 정도입니다. 첫번째는 몇몇 lifecycle method 가 deprecated 되었습니다. 그리고 새로운 Context API 가 추가되었습니다. 그 외에 몇가지 변화를 요약해보면 아래와 같습니다.새로운 Context API새로운 Refs APIlifecycl......

[CSS] styled-jsx 버그 보고 경험기 (사실은 stylis js 버그)

CSS는 일련의 가중치에 따라서 어떤 속성을 우선적으로 적용할 것인지 결정합니다. 우선순위에 대한 정보는 조금만 검색해보면 나오므로 간단히 링크로 대체합니다.현재 회사에서는 nextjs를 사용한 프로젝트를 진행하고 있습니다. nextjs는 서버사이드렌더링(SSR)을 지원하는 리액트 전용 프레임워크입니다. create-react-app처럼 non-con......

[Jest] mock 함수를 이용하여 함수 호출 테스트 하기

React 프로젝트에서 가장 많이 사용되는 테스트 모듈로 Jest가 있습니다. react와 Jest 둘 다 페이스북이 만든 오픈소스 프로젝트입니다. 같은 회사에서 만든 오픈소스기 때문에 서로 호환이 잘 될거라는 믿음으로 사용하고 있습니다. 호환성과 무관하게 Jest를 이용하면 모듈, React DOM 등의 테스트는 무리없이 진행할 수 있습니다. 무설정......

[javascript] this는 어렵지 않습니다.

this는 어렵지 않습니다.this를 어렴풋이 알고는 있지만, 누가 물어봤을때 제대로 대답해 줄수 있도록 정리해보겠습니다. 많은 개발자들이 javascript의 this를 혼란스러워합니다. 사실 개념 자체가 어렵진 않습니다. 다만, 다른 프로그래밍 언어들과 사용법에 차이가 있을 뿐이죠. 언어마다 조금은 차이가 있겠지만 대표적으로 JAVA같은 객체지향 ......

[javascript] async, await를 사용하여 비동기 javascript를 동기식으로 만들자

async, await는 ES8(ECMAScript2017)의 공식 스펙(링크)으로 비교적 최근에 정의된 문법입니다. async, await를 사용하면 비동기 코드를 작성할 때 비교적 쉽고 명확하게 코드를 작성할 수 있습니다. 자바스크립트는 싱글 스레드 프로그래밍언어기 때문에 비동기처리가 필수적입니다. 비동기 처리는 그 결과가 언제 반환될지 알수 없기......

[번역] Tasks, microtasks, queues and schedules

원본: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/의역, 오역이 가득합니다. 개인적으로 정확한 개념을 잡기 위한 번역입니다. 불필요하다 생각한 내용은 과감히 제거했습니다.테스트는 원본 페이지에서 확인 가능합니다.아래 자바스크립트 코드를 살펴보자.console.log('sc......

[ES6, react] 리액트에서 화살표 함수(arrow function)는 선택이 아닌 필수

리액트를 개발하다보면 이런 코드를 본적 있을것입니다.this.someFunction.bind(this);this(아마도 react 클래스 객체)에 속한 어떤 메서드를 다시 this에 bind한다라?? 굳이 왜 이런짓을 해야하는지 의문이 들만합니다.리액트에서 이러한 코드가 빈번하게 작성되는 이유를 알기 위해서 우선 bind()가 무슨 역할을 하는지부터 ......

[번역] 프레젠테이션 컴포넌트와 컨테이너 컴포넌트

원본 : https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d02년이나 지난 글이지만, 컴포넌트를 어떻게 구현해야 하는 문제에 있어서는 이만한 가이드가 없다고 생각해서 번역해보았습니다.자연스럽지 못한 부분, 의역이 다수 포함되어 있을 수 있습니다.리액트 어플레케이션을 만들때 제가 ......