중첩된 객체, 즉 객체 안의 객체 형태의 state 가 존재할 때, 이 state 를 업데이트 하기 위한 onChange 함수를 구현하는 방법을 공유하고자 한다. 에러 발생 상황 제목 그대로 중첩된 객체 형태의 상태가 존재하고, 이를 업데이트 하기 위한 onChange 함수를 구현하는 과정에서 지속적으로 타입에러가 발생했다. 아래 예시코드에서와 같이 state 라는 객체 안에 gym, address 라는 2개의 key가 존재하고, address key는 하위에 city 라는 key와 province 라는 key를 가진 객체를 value로 갖고 있다. 이 때 onChange 이벤트를 활용하여 input에 입력이 발생하면 그에 해당하는 key 의 value 값을 업데이트 하는 기능을 구현하고자 했다. 예시코..
거의 5시간을 찾아 헤맸던 msw 에러.. 에러 메시지 serializeResponse.ts:14 Uncaught (in promise) TypeError: Failed to execute 'text' on 'Response': body stream already read at serializeResponse (serializeResponse.ts:14:26) at Emitter. (createRequestListener.ts:79:25) at Emitter.onceListener (Emitter.js:40:22) at Emitter.js:75:22 at Array.forEach () at Emitter.emit (Emitter.js:74:19) at source.emit (pipeEvents.ts:19..
에러 메시지 '() => RestHandler[]' 형식에는 반복기를 반환하는 '[Symbol.iterator]()' 메서드가 있어야 합니다. ts(2488) 에러 발생 상황 이전에 두 프로젝트에서 msw 를 사용해보았기에 새로운 프로젝트에서도 가벼운 마음으로 msw 코드 작업을 시작하려는데!!! 딱 하고 저 에러 메시지에 막혀버렸다. 에러 발생 이미지 1 에러 발생 이미지 2 시도했던 방법 // 기존의 에러 코드 export const worker = setupWorker(...organizationListHandler); // 수정해본 코드 export const worker = setupWorker(organizationListHandler); 결과 이렇게 수정을 하니 화면도 정상 출력되고 콘솔 창..
테스트 코드 작성을 연습해보기 위해 기존에 만들었던 Todo 프로젝트에서 App.test.tsx 파일을 생성하여 아래와 같은 테스트 코드를 작성하고 테스트 코드를 실행시키자 `Jest encountered an unexpected token` 에러가 발생했다. 에러 메시지를 잘 살펴보니 nanoid 라이브러리를 export 하는데서 에러가 발생한 것으로 보였다. import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/todolist/i); expect(lin..
CORS 에러 Firebase Realtime Database 프로젝트를 생성하고 json 파일을 추가하여 초기 data를 넣어준 뒤 호기롭게 get request 를 날려보았으나 아래와 같이 CORS 에러가 발생하면서 response를 받을 수 없었다. 시도했던 방법 프론트 서버는 localhost 이며, Firebase 의 실시간 db는 당연히 localhost가 아닐테니 발생하는 에러라고 짐작했다. mock API를 사용하기 위해 프록시 서버를 구성하는 것은 맞지 않는 것 같았고, 크롬 확장 프로그램을 사용하는 것은 만약 해당 API를 여러사람과 공유해야하는 경우 모든 사람들이 확장 프로그램을 설치하고 사용해야하기에 비효율적이라고 생각하였다. 결론은 헤더를 추가하여 해결할 수 있는 방법을 찾기로 했..
새로 시작한 프로젝트에서 styled-component 남용을 방지하기 위해 emotion을 도입하여 사용하기로 했다. Emotion 도입 이유 간단한 스타일이 필요한 요소는 별도로 styled-component로 생성하지 않고 시맨틱 태그와 함께 inline style을 적용하여 구현한다면 코드도 더욱 간결해지고 시멘틱 태그의 적절한 사용으로 더나은 SEO에 기여할 수 있을 것으로 생각되었기 때문이다. 에러발생 코드 ... import { css } from '@emotion/react'; const Layout = ({ children }: LayoutProps) => { return ( {children} ); }; 위와 같이 Layout 컴포넌트에 emotion을 사용하여 inline-style을..
