typescript

[TypeScript/Jest] jest.setup.js를 설정했는데도 jest-dom 타입 오류가 뜨는 문제

설치한 라이브러리npm i -D jest ts-jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react   이전에 작성한 jest 설정 코드(jest.setup.js)import '@testing-library/jest-dom'(jest.config.js)const nextJest = require('next/jest')const createJestConfig = nextJest({ dir: './',})const customJestConfig = { rootDir: '.', setupFilesAfterEnv: ['/jest.setup.js'], moduleNameMapper: { '^@/(.*)$': '/app..

[React] useReducer

팀 프로젝트를 하면서 useReducer에 대해 알게 되었다. React 공식 문서와 다른 분들의 글을 보면서 공부한 것을 정리해 본다. 정리 과정에서 타입스크립트도 적용해 보았다. useReducer를 사용하는 이유? useState는 작성해야 하는 코드의 양이 적어 상태 변경이 매우 간단할 때 읽기 쉽다. 하지만 컴포넌트가 커지고 상태 변경 로직이 복잡해지면 가독성이 떨어진다. 또한 많은 이벤트 핸들러에 여러 상태 변경이 분산되면 가독성도 좋지 않을뿐더러, 상태 변경 로직을 관리하는 것이 어려워진다. 이러한 경우 useReducer를 사용하면 상태 변경 로직을 reducer 내부로 옮겨 이벤트 핸들러와 상태 변경 로직을 완전히 분리하면서, 모든 상태 변경 로직을 한 곳에 통합시킬 수 있다. useRe..

[TS] 오류 해결 : EventTarget 형식에 '...' 속성이 없습니다. ts(2339)

타입스크립트로 개발하던 중 마주한 오류... 이전에 다른 프로젝트를 개발할 때, currentTarget을 대신 사용했던 기억이 있어 currentTarget을 사용해 보았는데.. currentTarget이 null로 나왔다. 같은 부모 아래에서 다른 span 태그로 테스트했을 때는 알던 대로 currentTarget과 target이 동일하게 나온 것을 보니 정확한 이유는 모르겠지만 fetch의 then 안에서 사용해서 그런 것 같다. (scope의 문제 같은...) 정확한 이유와 여기서 currentTarget을 사용하는 방법을 아신다면 댓글로 알려주시면 감사하겠습니다..!! currentTarget을 사용할 수 없어 다른 방법으로 해결해 보기로 했다. currentTarget과 target의 차이가 ..

트위터 클론 코딩을 마치며

개발 기간 2023/05/03 ~ 2023/06/07 개발한 트위터 웹 링크 https://imdaxsz.github.io/twitter 계기 React와 TypeScript 강의를 듣고 난 후, 작은 프로젝트를 만들어봐야겠다고 생각했다. 그런 생각을 하던 찰나 Nomad Corder(노마드 코더)에서 React + Firebase로 트위터를 클론 코딩하는 강좌를 발견하게 되었다. Firebase는 학부 시절에도 백엔드로 종종 사용했던 적이 있었고(거의 기억이 나지 않았지만), 아직은 프론트엔드에 좀 더 집중하고 싶었기 때문에 백엔드는 최대한 쉽고 가볍게 하고 싶다는 생각이 있었다. 그래서 이 강좌를 수강하며 Firebase를 React에서 사용하는 방법을 배우고, 아직은 익숙하지 않은 React도 온전..