타입 단언은 타입에 확신이 있을 때 사용하는 타입 지정 방식이다. 나 같은 경우에는 `Unsafe member access ~~` 에러가 발생했을 때 주로 타입 단언을 통해 해결했었다. 타입 단언 사용방법 타입 단언은 기본적으로 as 키워드를 사용하여 정의한다. const name = '김씨' as string 타입 단언은 타입 에러를 해결하기 위한 좋은 수단이지만 다음 몇가지 사항을 고려해서 사용해야 한다. 타입 단언 사용 시 고려해야할 것들 1. 타입 안정성 : Type Assertion, 즉 타입 단언을 사용하게 되면 Typescript 유형 검사를 우회하게 된다. 따라서 잘못된 타입으로 단언이 되어 있는 경우 런타임 오류가 발생하거나 실제 값과 일치하지 않는 타입 단언으로 인해 사이드 이펙트가 발..
중첩된 객체, 즉 객체 안의 객체 형태의 state 가 존재할 때, 이 state 를 업데이트 하기 위한 onChange 함수를 구현하는 방법을 공유하고자 한다. 에러 발생 상황 제목 그대로 중첩된 객체 형태의 상태가 존재하고, 이를 업데이트 하기 위한 onChange 함수를 구현하는 과정에서 지속적으로 타입에러가 발생했다. 아래 예시코드에서와 같이 state 라는 객체 안에 gym, address 라는 2개의 key가 존재하고, address key는 하위에 city 라는 key와 province 라는 key를 가진 객체를 value로 갖고 있다. 이 때 onChange 이벤트를 활용하여 input에 입력이 발생하면 그에 해당하는 key 의 value 값을 업데이트 하는 기능을 구현하고자 했다. 예시코..
다양한 기술 스택을 공부하고 다양한 기술 스택을 서로 조합하여 프로젝트를 진행할 때, 매번 프로젝트 템플릿 코드를 세팅하기 번거로운 경험이 있을 것이다. 또한 여러 사람이 협업을 할 때도 정해진 템플릿 코드를 공유해서 사용할 때도 있을 것이다. 이런 경우에 기존에 repository의 코드를 내가 원하는 위치로 가져와서 사용해야 한다. 보통은 github fork 를 사용하여 해당 repository 코드를 복사한 나만의 repository를 생성하여 작업을 진행할 수 있지만, 보안상의 이유로 특정 조직 github 내에서 private 하게 사용하는 등의 상황이라면 이런 방법을 사용하지 못하는 경우도 존재한다. git clone 을 활용하면 repository 코드를 간단하게 복사할 수 있다. git ..
거의 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); 결과 이렇게 수정을 하니 화면도 정상 출력되고 콘솔 창..
퇴사하고 거의 2년만의 긴 여정 끝에 진짜 개발자가 되었다. 기록하는 습관을 위해 그동안의 여정을 기록하고자 한다. 지금 이 순간에도 인터넷 곳곳을 누비며 "제 나이가 OO 살 인데, 개발자 될 수 있나요?" 라는 글을 남기고 있는 많은 분들에게 도움이 되길 바라며.. 30대 비전공자 퇴사 후의 타임라인 연도 이벤트 21.07 제약회사 영업직 퇴사 21.08 ~ 21. 09 부트캠프 21.10 부트캠프 연계 인턴 21.12 ~ 22.06 첫 커리어 전환 ⛵️ 23.03 ~ 2번째 직장 23.04 ~ 3번째 직장 🚀 21년 7월, 31살의 나이로 대리 진급을 앞둔 3년차 영업사원이었을 때 과감히 퇴사를 하였고, 위와 같은 시간을 지난 끝에 스타트업에서 프론트엔드 개발자로 일을 하고 있다. (본의 아니게 철..
SOLID 원칙 단일 책임 원칙 (SRP, Single Responsibility Principle) 개방 폐쇄 원칙 (OCP, Open-Closed Principle) 리스코프 치환 법칙 (LSP, Liskov Substitution Principle) 인터페이스 분리 법칙 (ISP, Interface Segregation Principle) 의존성 역전 법칙 (DIP, Dependency Inversion Principle) 서비스의 고도화, 사용자의 니즈 변화 등 다양한 변수에 의해 소프트웨어 또한 지속적인 업데이트가 필요하다. 좋은 설계에 근간을 둔 좋은 소프트웨어는 이런 변화에 유연하게 대처할 수 있는 소프트웨어이다. 이런 소프트웨어의 구현을 위해서는 새로운 요구사항이나 변경사항에 영향을 받는 ..
테스트 코드 작성을 연습해보기 위해 기존에 만들었던 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를 여러사람과 공유해야하는 경우 모든 사람들이 확장 프로그램을 설치하고 사용해야하기에 비효율적이라고 생각하였다. 결론은 헤더를 추가하여 해결할 수 있는 방법을 찾기로 했..
Firebase Realtime Database 101. 1. 구글 파이어베이스 홈페이지에 접속 이렇게 메인 화면에 시작하기 버튼을 클릭한다. 2. 파이어베이스를 적용하기 위한 프로젝트를 추가한다. 3. 프로젝트 이름을 입력한다. 3. 구글 애널리틱스 사용 여부를 결정한다. 구글 애널리틱스는 웹에 대한 전반적인 분석 툴을 제공해주는데, 서비스 배포가 목적이 아닌 mock API 로 사용하는게 목적이므로 나는 굳이 애널리틱스를 사용하지 않고 넘어갔다. 4. Realtime Datebase 생성 여러가지 기능을 제공하지만 api 구현을 위해 realtime database 즉, 실시간 데이터베이스를 클릭해준다. 다음 화면에서 데이터 베이스 만들기를 클릭하면 생성 과정으로 넘어간다. 5. 데이터베이스 생성에 ..
