즐겁게, 코드

자바스크립트의 진화 자바스크립트 스펙은 계속해서 추가되고 있는데, 새로운 기능을 사용하려 해도 구버전 브라우저나 런타임 환경(Node.js)에서는 이를 제대로 지원하지 못하는 경우가 종종 있습니다. 따라서 최신 문법을 사용하자니 구세대 브라우저에서는 코드가 동작하지 않고, 그렇다고 항상 과거의 문법으로 코드를 짤 수도 없는 노릇인데요, 이런 딜레마를 해결하기 위해서는 최신 문법을 구버전 환경에서도 실행할 수 있도록 이전 문법으로 치환하는 트랜스파일 이라는 작업을 수행해야 합니다. 트랜스파일 예시 ES6에 새로 도입된 분해 할당 이라는 문법이 있습니다. // index.js const student = { name: "chanmin", age: 25 }; const { name, age } = studen..

목업 테스팅 지난 글에서는 비동기 동작을 테스트하는 방법을 살펴봤는데요, 테스트 코드에서 실제 DB나 API에 접근하면 테스트 코드에서 DB를 잘못 수정할 수도 있는 등 예측할 수 없는 결과를 초래할 수 있다는 문제가 있습니다. // getData.js function getData() { fetch('fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => data) } 예를 들어 테스트 코드에서 위와 같이 데이터를 페칭해오는 코드를 실제로 호출한다면 테스트 단계에서 API 호출 횟수를 소모하게 될 뿐만 아니라, 네트워크 사정이 좋지 않을 때는 타임아웃이 발생해 테스트를 통과하..

비동기 코드 테스팅 지난 글에서 jest 로 기본적인 테스트를 구성하는 방법을 다루었다면, 조금 더 나아가 비동기적으로 동작하는 코드를 테스팅해 보겠습니다. 테스팅 설정 이전 글에서 테스트 코드는 node.js 환경에서 동작한다고 언급했는데요, 따라서 @babel/preset-env 프리셋을 통해 트랜스파일을 수행하면 ES6 문법을 거의 다 사용할 수 있지만, async-await 문법을 사용하려 하면 ReferenceError: regeneratorRuntime is not defined 라는 오류를 만나게 됩니다. 이를 해결하기 위해 @babel/plugin-transform-runtime 이라는 바벨 플러그인을 설치하고 적용해줍니다. yarn add -D @babel/plugin-transform-..

테스팅의 중요성 지금까지 프로젝트를 혼자 진행하면서는 print 나 console.log() 등의 출력을 통해 비교적 단순한 '테스트' 를 진행할 수 있었지만, 어플리케이션의 규모가 커지고 동일한 테스트를 반복해야 하는 상황에서는 테스트 코드를 작성하는 것이 필수적입니다. 이번에는 자바스크립트의 강력한 테스팅 라이브러리 jest 와 리액트 프로젝트용 테스팅 라이브러리 react-testing-library(RTL) 을 통해 기초적인 테스트 방법에 대해 알아보겠습니다. jest 설치하기 리액트 테스팅을 경험하기 전에 일반 자바스크립트 환경에서 jest 를 알아보도록 하겠습니다. 이를 위해 npm init -y 로 프로젝트를 초기화하고, jest 와 @babel/preset-env 를 개발 의존성 파일로 설..

조건부 렌더링 뷰(Vue.js)에서는 특정 조건을 만족할 때만 컴포넌트나 블록을 렌더링하는 조건부 렌더링 을 위해 v-if 와 v-show 라는 두 종류의 지시자(directive)를 사용합니다. v-show를 사용한 블록 v-if를 사용한 블록 그런데, 왜 뷰는 동일한 역할을 수행하는 지시자를 둘이나 구현해둔 걸까요? v-if 지시자 사실 두 지시자는 엄밀히 다른 방식으로 조건부 렌더링을 구현합니다. 먼저 v-if 지시자를 볼까요? v-if를 사용한 블록 [렌더링 결과 : isVisible이 true일 때] v-if를 사용한 블록 [렌더링 결과 : isVisible이 false일 때] v-if 지시자는 조건이 참일 때는 블록을 새로 생성해 DOM 트리에 추가하고, 조건이 거짓으로 변하면 해당 블록을 D..

리액트 개발을 해보신 분들이라면 map 등을 사용해 컴포넌트를 반복적으로 생성할 때 'Warning: Each child in a list should have a unique "key" prop.' 이라는 경고를 보신 적이 있을 것입니다. 과연 key 속성이 왜 필요한 것인지 리액트의 렌더링 원리와 함께 알아보도록 하겠습니다. 요소 트리 리액트는 컴포넌트의 상태나 속성(prop)이 변할 때마다 render() 함수를 호출하는데요, render() 함수는 새로운 리액트 요소 트리를 반환하고 이를 기존의 요소 트리와 비교해 새로운 변경점에 대해서만 재렌더링을 수행합니다. 잠깐 트리를 비교하는 부분을 더 소개하자면 리액트는 O(N) (N = 노드의 개수) 의 시간 복잡도로 두 트리를 비교하기 위해 key 속..

페이스북에서 제작한 전역 상태 관리 라이브러리, recoil.js가 점점 많이 언급되는 것 같아 공식 문서를 살짝 따라가봤습니다. https://recoiljs.org/ko/ A state management library for React. recoiljs.org 따라가다 보니... 헨젤과 그레텔이 과자에 홀린 것처럼 계속 읽게 되었네요. 결론부터 말씀드리면 리코일은 리덕스를 대체할 수 있는 가뭄의 단비같은 라이브러리입니다. 그동안 리액트로 프로젝트를 진행하려 하면 솔직히 리덕스 로직을 작성하기 시작하는게 부담이 되어 컨텍스트 API를 사용하려 하곤 했는데요, 리코일을 사용하면 전역 상태 관리에 대한 부담을 덜 수 있을 것 같다는 희망을 볼 수 있었습니다! 리코일로 간단히 투두앱을 만들어본 후, 리덕스..