웹 스토리지(Web Storage)브라우저 내에 key-value 형태로 데이터를 저장할 수 있는 저장소로 localStorage 와 sessionStorage 가 존재한다.주요 특징네트워크 요청 시 서버로 전송되지 않는다.최소 2MB 혹은 그 이상의 데이터를 저장할 수 있다.모든 웹 스토리지 객체 조작은 자바스크립트 내에서 실행된다. 따라서 서버가 http 헤더를 사용하여 스토리지 객체를 조작할 수 없다.웹 스토리지 객체는 domain, protocol, port 로 정의되는 origin 에 묶여 있으므로 protocol 과 sub-domain이 다르면 데이터에 접근할 수 없다.storage 이벤트web storage 에서 데이처가 갱신되면 storage event 가 실행된다.key - 변경된 데이터..
본 포스팅은 Fault Tolerance 를 의역한 내용입니다. 잘못된 내용이 있을 수 있습니다.Fault Tolerance현대 앱은 움직이는 수 많은 파트들과 복잡한 프로세스로 만들어 진다. 때때로 이것들은 동작을 멈추거나 문제가 생긴다. 우리는 이것들을 미연에 방지하려고 할 수는 있지만, 현실적으로 완전히 error-free 하게 만들 수 는 없다. 따라서 우리는 항상 예상치 못한 방식으로 무언가 고장날 수 있음을 인지하고 이를 적절하게 관리할 수 있어야 한다.다른 말로 우리는 fault tolerance 가 있어야 한다.Fault tolerance is the property that enables a system to continue operating properly in the event of ..
타입 단언은 타입에 확신이 있을 때 사용하는 타입 지정 방식이다. 나 같은 경우에는 `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..
