본문 바로가기
Jest Cannot find module 에러 jest 에서 모듈을 찾을 수 없을 때 발생하는 에러입니다. jest.config.js 파일에서 moduleNameMapper에 에러가 발생한 경로를 추가해 주면 수정됩니다. 만약 수정했는데도 오류가 발생한다면 jest를 한번 종료했다 실행하시면 정상 작동합니다.
Next.js TypeScript 환경에서 Jest 초기 설정 create next app(CNA)에 typescript 옵션을 붙여 프로젝트를 생성한 후 Jest를 설정하는 방법입니다. CNA 을 사용할 경우 Jest 세팅이 되어 있지 않기 때문에 별도로 세팅을 해 주어야 합니다. 공식 문서 링크 Testing | Next.js Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library. nextjs.org 1. 필요 패키지 설치 테스트에 필요한 파일들을 설치합니다. $ yarn add -D @testing-library/dom @testing-library/jest-dom @testing-library/r..
Jest import (ESM)기능 활성화하기 (with 프로그래머스 과제관) 프로그래머스 과제관의 vanilla.js 과제를 복기하던 도중 문제가 생겼다. 프로젝트가 기본적으로 Ecmascript modules(이하 ESM)를 지원하지 않아서 import 구문을 사용할 수 없었다. 이 문제같은 경우에는 단순히 ESM을 사용한다는 것만 명시해주면 되기 때문에 수정이 어렵지 않았다. // index.html // package.json { "type": "module" } 문제는 ESM을 활성화하니 Jest에서 에러가 났다. node 기반의 테스트 환경이기 때문에 ESM을 기본적으로는 지원하지 않기 때문이다. 이전에는 이 에러를 수정하고 ESM을 사용하기 위해서 상당한 삽질(?)이 필요했던 것 같은데, Jest 25.4.0 버전 이후로는 설정이 매우 간단해졌다. [Meta: Nati..
hls.js를 사용한 웹 라이브 스트리밍 클라이언트 최근에는 라이브 스트리밍 서비스를 쉽게 찾아볼 수 있습니다. 예전부터 조금씩 성장해왔던 즐길거리 위주의 개인방송 뿐만 아니라, 최근에는 라이브 커머스 등 다양한 산업에서 라이브 스트리밍이 이용되고 있어요. 웹에는 이러한 서비스를 위한 다양한 프로토콜이 있습니다. 대표적으로 MPEG-DASH, HLS, MSS, HDS 등이 있는데요. 그 중 HLS 라는 프로토콜은 HTTP에 기반한 만큼 사용이 간편해 대중적으로 사용되고 있습니다. HTTP 기반이라 인기있다니... 뭔가 REST Api가 떠오르네요🙂. 검색해보니 실제로 비슷한 이유로 다른 프로토콜보다 선호되는 경향이 있다고 합니다. HTTP를 사용하기 때문에 다른 프로토콜에 비해 방화벽 설정이 쉽고, 기존 웹 서비스를 위한 인프라를 그대로 사용할 수 있어 ..
Redux 개념 이해하기 Flux 패턴 redux는 Flux 패턴의 구현체입니다. 따라서 Flux 패턴을 먼저 이해하면 자연스럽게 Redux를 이해할 수 있습니다. facebook은 우리가 흔히 알고 있는 MVC 패턴을 사용하는 대신, Flux라는 새로운 방식의 아키텍처를 사용하고 있습니다. Flux의 가장 큰 특징은 데이터가 한쪽 방향으로만 흐른다는 것입니다. 이를 단방향 데이터 흐름 이라고 표현합니다. 아래의 글을 읽으면 Flux가 얼마나 직관적인지 알 수 있습니다. Flux 패턴에서 모든 데이터의 변경은 action 으로 표현됩니다. 예를 들면 '카운터 증가' 를 다음과 같이 액션으로 정의할 수 있습니다. const increaseCounterAction = { type: "INCREASE_COUNTER" }..
[번역글] react functional component에서 setState를 동기식으로 사용하기 react 프로젝트에서 본격적으로 functional component를 사용한 이후로 처음 맞닥뜨린 이슈는 useState가 비동기로 동작하는 것이었습니다. setter를 호출한 뒤, 바로 값을 가져다 쓰면 업데이트 되지 않은 값이 참조되는😥 문제인데요... 아마 함수형 컴포넌트를 사용하시는 분이라면 한번쯤 고민해봤을 문제라고 생각합니다! 그리고 저처럼 왜 react는 이걸 비동기로만 쓰게 해놓은거야😡 라며 화내보신 분도 분명.. 분명 한분쯤은 있으리라 생각합니다. 글의 원문은 함수형 컴포넌트에서 useState를 동기식으로 사용하는 방법과, react 팀이 왜 이 기능을 기본 기능으로 추가하지 않는지를 모두 설명해 줍니다! 원문을 참조하시려면 useStateWithPromise: a custom ho..
RN에서 TS사용시 styled-components/native type import 에러 1. 증상 및 환경 - window10 - styled-components 5.2.1 - @types/styled-components 5.1.7 2. 원인 native.d.ts 를 찾지 못해서 발생 3. 해결책 1) @types/styled-components를 설치했는지 확인한다. 2) 타입스크립트에서 noImplicitAny 옵션을 끈다. 초기에 styled components에 타입이슈가 많았을 때 쓴 방법이라고 한다. 그냥 에러로 잡지 않는 것이기 때문에 해결책이라 보기는 어렵다. 3) @types/styled-components 대신 @types/styled-components-react-native를 사용한다. github.com/dooboolab/hackatalk/pull/331 Fix St..
vscode에서 expo react native 디버깅 유튜브에 동영상이 있는데, 동영상대로 하면 제대로 디버깅 되지 않습니다. react native tools 공식 문서를 따라하면 제대로 설정됩니다. 1. React native tools 설치 및 설정 - vscode 에서 react native tools extension을 설치합니다. - 설정에 들어갑니다. - packager 포트를 19001로 변경합니다. 2. launch.json 설정 - vscode 디버그 탭에 create a launch.json file 클릭해 launch.json 파일을 생성합니다. - 아무거나 선택해 줍니다. 저는 VS Code Extension Development 선택했습니다. - Add configuration을 클릭한 후, Debug in Exponent를 선택합..

티스토리툴바