Code Playground

< h1 > Code Playground </ h1 >

처음에 회사에서 서비스 개발 프로젝트를 맡았을 때 내가 작성했던 테스트 코드는 util성 함수들에 대한 unit 테스트 코드가 전부였다. 거기에 조금 더 덧붙여서 Redux Saga의 Generator 함수에 대한 간단한 unit 테스트들을 작성하였는데 방법은 매우 간단했다. Saga Generator 함수들을 실행했을 때 어떤 이펙트들이 순차적으로 실행되는지 각 단계 별로 mocking하여 테스트하는 방식이다. 그 때 내가 작성했던 테스트 코드 한 대목을 가져와봤다. describe('1. success scenario', () => { let gen: any; beforeAll(() => { gen = fetchAllSaga(); }); it('yield user and example API call..

올 해 1월부터 바닐라코딩 부트캠프 6기를 같이 수료한 몇몇 사람들과 시작한 스터디가 있는데, 바로 영어로 된 개발 블로그 글을 번역하고 스터디 멤버들과 함께 공유하는 스터디이다. 이런 스터디를 구상한 이유는 이리 저리 돌아다니면서 요즘 핫하다는 블로그 글을 수집은 많이 하는데 정작 잘 읽지는 않아서이다. 좋은 글을 꾸준히 많이 읽는 것은 정말 개발자에게 특히 중요한 일이지만 혼자서 하면 작심 삼일이 되고 잘 안하게 되기 마련이다. 그래서 시작한 스터디인데 생각보다 많은 글들을 읽게 되어 만족도가 높다. 현재까지 번역해서 노션에 정리한 글이 7개 정도 된다. 물론 1월 중순부터 시작한 것 치고 많지 않아보일 수도 있지만 어쨌든 중요한건 꾸준히 계속 하고 있다는 것이니까! 오늘은 번역한 글들 중에서 정말 ..

어쩌다 회사 회의 시간에 location.href에 string을 할당하는 방식이랑 location.assign을 쓰는 방식 중에 어떤거를 쓰는 것이 더 좋을까에 관한 얘기가 나왔는데 순간 2개의 차이점이 뭔지 헷갈려서 찾아본 내용을 간단히 정리해보았다. window.location read-only 속성을 가진 window.location 은 document의 현재 location 정보를 담은 Location 객체를 리턴해준다. window.location은 read-only Location 객체임에도 불구하고 DOMString을 할당할 수 있다. 이 말인즉슨 대부분의 경우 location이 마치 string인 것처럼 사용할 수 있다는 뜻이다. // 아래 2개는 완전히 같다. location = 'ht..

import { ExampleComponent } from './example'; // ... 회사에서 react-router를 쓰면서 주로 위와 같은 방식으로 routing을 하다가 router v5 버전부터 아래와 같이 Route 컴포넌트 안에 child 컴포넌트를 합성하는 방식이 더 권장되는 것을 발견하고 바꾸었다. import { ExampleComponent } from './example'; // ... 근데 이걸로 바꾸는 순간 한 가지 이슈가 발생했는데... 😨 바로 이 이슈였다. 탭을 이동할 때마다 주소 뒤에 query parameter가 바뀌고, 이 query parameter가 바뀔 때마다 UI가 바뀌는 화면이 있었는데, Routing 방식을 바꾸니까 갑자기 탭을 아무리 클릭해도 화면이..

리액트 상태 관리 리액트로 개발을 할 때 리액트에서 기본으로 제공하는 상태 관리 메소드들을 사용하는 것이 가장 간단하고 편리하겠지만, 약간의 한계는 분명히 있다. 리액트 컴포넌트의 상태는 상위에서 하위로 단방향으로 흘러갈 수밖에 없는데, 이 과정에서 거대한 트리 구조가 만들어지고, 무수히 많은 re-render가 일어난다. 자식 컴포넌트에서 부모 컴포넌트의 상태를 제어하기 위해서는 부모 컴포넌트가 본인이 가지고 있는 상태를 제어할 수 있는 메소드들을 자식 컴포넌트에 전달을 해주어야만 가능하다. 그러니까 자식 컴포넌트에서 상위에서 전달된 메소드들로 무언가 상태를 변경하면 부모 컴포넌트들부터 하위에 연결된 컴포넌트들 전부가 re-render 된다. 리액트에 Context API라는 것이 생기면서 리액트에서도..

JavaScript에서 숫자 타입이 아닌 값을 숫자로 바꿀 때는 주로 Number나 parseInt를 사용한다. Number When used as a function, Number(value) converts a string or other value to the Number type. If the value can't be converted, it returns NaN. Number는 함수로 사용 시 string이나 다른 값들을 Number type으로 변환해준다. 만약에 값을 변환할 수 없을 때는 NaN을 리턴한다. parseInt The parseInt() function parses a string argument and returns an integer of the specified radix..

useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); 대부분 useState hook으로 리액트의 상태 관리를 하게 되는데, 가끔 상태 로직을 상태 변화가 일어나는 컴포넌트로부터 분리시키고 싶을 때 useReducer를 유용하게 사용할 수 있다. useReducer는 주로 복잡한 상태 로직을 가졌거나 다음 state가 기존 state에 의존성을 가질 때 사용된다. 또한 useReducer를 사용하면 하위 컴포넌트에게 callback 함수가 아니라 dispatch 함수를 넘겨줄 수 있어 유지보수 관점에서 매우 편리해진다. (하위 컴포넌트들에게 계속 prop으로 전달, 전달, 전달을 할 필요가 없어지니까!) 사실 Redux의 ..

Kent C. dodds의 Epic React 강의에서 React hooks - useEffect: HTTP requests 챕터를 정리해보려고 한다. 일단 간단하게 API를 호출해서 화면에 API 응답으로 온 랜덤 강아지 이미지를 보여주는 예시를 만들어보려고 한다. const fetchRandomDog = (error) => fetch("https://dog.ceo/api/breeds/image/random").then((data) => { if (error) { throw error; } return data.json(); }); 그리고 에러가 나는 상황을 연출하기 위해 인자로 error가 넘어오면 error를 throw하고, 그 외의 경우에는 fetch받은 data를 JSON format으로 변환해..

정말 오랜만에 글을 쓰려고 블로그를 켰더니 너무 낯설다. 회사 일이 바쁘다는 핑계로 살짝 멀리했었는데 블로그야 미안... 회사 슬랙에 Kent C. dodds의 Epic React 강의에 관심있는 사람 있으면 같이 공동구매해서 듣자는 제안이 올라왔는데 쿨하게 회사에서 지원을 해줘서 공짜로 들을 수 있게 되었다. 🎉 강의 챕터는 요렇게 구성되어있다. 넘나 알찬 구성 🥰 React Fundamentals React Hooks Advanced React Hooks Advanced React Patterns React Performance Testing React Apps React Suspense Build an Epic React App Epic React Expert Interviews 오늘은 React ..

TypeScript의 Utility Type 업무할 때 종종 튀어 나오는 애들인데 내가 잘 모르는 것 같아서 한 번 쭉 정리해보았다. 정리하다보니 진작 알아뒀으면 유용하게 많이 썼을텐데 싶은 것들이 엄청 많다. 심심할 때마다 다시 읽어봐야겠다. Partial 주어진 Type의 모든 property를 optional로 세팅한 Type을 구성한다. 다시 말해 주어진 Type의 모든 부분 집합 type을 return한다. 즉, 아래 Todo interface에 title과 description이 정의되어 있는데, Todo 중에서 일부 속성으로만 이루어진 type을 지정하고 싶을 때, Partial을 사용하면 된다. interface Todo { title: string; description: string; ..