irrationnelle

Custom hook 을 이용해서 intersection observer 재사용하기

intersection observer api 공식문서 를 참조하면 일반적으로 페이지 스크롤로 이미지나 다른 요소를 지연 평가로 불러오고 싶은 경우 무한 스크롤 페이지를 구현하고 싶은 경우 이런 경우들을 다루기 위해 사용한다고 한다. intersection observer api 를 사용할 때, 브라우저 뷰포트나 대상 element 를 일컫어 root 혹…

서버 사이드 렌더링에 대해

server side rendering (SSR) Single Page App 이 유행하는 최근에는 오히려 접하기 힘든 개념이 되었다. 과거에는 사용자가 웹페이지와 상호작용하기 위해서 서버 사이드 렌더링을 사용했다. 서버 사이드 렌더링을 간략히 설명하자면 다음과 같다. 사용자가 웹페이지에서 요청을 보내면, 서버가 요청에 적합한 연산을 마친 뒤 결과를 토대…

단일 책임 원칙에 대해

들어가기 전 언어 차원에서 인터페이스라는 개념이 존재하지 않는 자바스크립트에서 어떻게 DI 를 적용하는지 알아보기 위해, 먼저 DI 가 무엇인지 다시 공부할 필요를 느꼈다. DI 에 대해 그 필요성과 방법에 대해 토비의 스프링만큼 자세히 설명한 책이 없지만, 자바라는 정적 컴파일 언어 기반으로 설명을 하기 때문에 다음을 기약하기로 했다. 로버트 마틴의 클…

MSW 를 사용해서 실제 API 가 작동하는 것처럼 mocking 하기

수정(21.11.18): act 로 감싼 fireEvent 에 대해 예제 코드에서 를 로 감쌌는데, 는 내부에서 이미 를 호출한다고 한다. Documentation mismatch: fireEvent wrapped in act() 그래서 지금(21.11.18) 예시에 있던 호출을 모두 삭제한다. API 요청에 test double 사용하기 일반적…

vanilla javascript 로 키입력마다 input 이벤트 발생시키기 그리고 테스트

input element 에서 키입력값을 받아오는 방법 위의 방법으로는 키입력을 할 때마다 이벤트가 발생하지 않는다. 키입력마다 이벤트를 발생시키고 싶을 때는 아래처럼 이벤트에 이벤트 리스너를 설정한다. 위와 같이 이벤트 리스너를 설정한 뒤, 철자 하나 하나 입력이 아닌 지금까지 입력한 input 값을 사용하고 싶을 때는 를 사용한다. input 이벤…

firebase 에뮬레이터로 테스트 코드 작성하기

tdd 로 react 앱을 만들다가 firebase 구현 단계까지 왔다. 로그인 버튼을 클릭했을 때 signIn 함수를 호출하는 것까지 테스트하고 있으나 signIn 함수 내부를 테스트 하는 것에 대하여 고민이 좀 있었다. signIn 내부 함수를 유닛 테스트로 다루는 것이 맞는지, 아니면 signIn 함수 내부를 내부 구현 단계로 보고 인터페이스 역할을…

event loop 와 requestAnimationFrame

이벤트 루프 자바스크립트는 기본적으로 싱글스레드에서 작동한다. 그래서 콜스택에 처리할 연산 목록을 쌓아두어 차례차례 실행한다. 콜스택에 연산 목록과 별개로 브라우저 API 요청이 있으면, 우선순위 queue 에다가 보관해놓고 콜스택을 비운 뒤 각 queue 에서 이벤트 루프가 연산들을 가져간다. 이 queue 에는 task queue, microtask …

React 에서 Context API 와 상태관리

Context API 단점 context api 에서 상태값을 변경하면, provider 로 감싼 모든 자식 컴포넌트들이 리렌더링한다. 그래서 context api 를 상태관리 도구로 사용하면 각 자식 컴포넌트들이 리렌더링하지 않도록 방어할 필요가 있다. 결론적으로 context api 는 상태관리 도구로 사용하면 props drilling 을 회피한다는…

다시, 테스트 코드는 왜 스펙인가

다시, 테스트 코드는 왜 스펙인가 약 반년 전에 이런 글 을 작성한 적이 있다. 이번에도 다시 테스트 코드와 스펙에 대한 이야기를 하려고 한다. 저번 이야기와 비슷한 이야기지만, 더 중요한 이야기가 될 것 같다. iOS 에는 단축어라는 기능이 있다. 특정 상황에서 iOS 가 사용자 대신 미리하기로 했던 시나리오를 수행하는 기능이다. 예를 들어 음악앱을 사…

firebase auth 이용하여 google 로그인 구현

firebase 서버리스하면 다들 aws lambda 를 떠올리는 것 같지만, 나는 firebase 를 먼저 손에 꼽는다. 일단 나는 공식 문서의 불친절함과 직관성이 전혀 없는 대시보드 등으로 aws 서비스를 우호적으로 생각하지 않는다. 그래서 개인 프로젝트는 gcp 나 azure 를 시도해보려고 하는데, firebase 는 이중에서도 가장 접근성이 좋다…