함수를 가장 간단하게 서술하는 방법은 function type 표현식을 사용하는 것이다. 이런 타입은 화살표 함수와 비슷하게 나타낼 수 있다.위 예시에서 (a: string) ⇒ void의 의미는 다음과 같다.string 타입의 인수 a를 받는다void형태의 값을 re

정적 콘텐츠를 제공하는 블로그에서 검색 기능은 필수이다.본인도 공부하며 기록해둔 포스팅을 뒤적거릴 자주있어 검색 기능을 추가하기로 결정했다.웹 사이트에 검색을 도입하기 위해서는 아래 세 가지 컴포넌트가 필요하다.search indexsearch index는 데이터를 조

git의 특정 커밋 히스토리에 mongo url, 계정, 비밀번호 제거하기.gitignore에 .env를 추가한 이후에도 git 히스토리에 남아있는 .env 파일 제거하기지금까지 rebase를 merge와 같이 두 개의 branch를 병합하는 용도로만 알고 있었다. 하

JS는 문맥에 따라 형변환(coercion)이 발생한다. Falsy한 값은 Boolean context에서 false로 간주된다.아래는 JS에서 Falsy한 값이다.false0\-00n"", '', \`\`nullundefinedNaNNullish한 값은 JS에서 명시

HTML의 폼 요소는 React의 DOM 요소와 다르다. 왜냐하면 form 요소는 자체적으로 내부 상태를 갖는다. 일반적인 HTML 코드에서는 아래와 같은 방식으로 사용자로부터 입력을 받아 form으로 submit할 수 있다.위 코드를 React에 삽입했을 때 역시 똑

이번 포스팅은 오늘 하루 여닫을 수 있는 소식 목록을 구현하며 겪은 문제들을 정리하기 위해 작성한다.기존 코드에서 객체 배열의 n번째 원소에 더 빠르게 접근하기 위해 인덱스로 타겟 객체를 직접 조작했다. useState의 세터함수에서 이전 상태를 인자로 받을 때 직접

신뢰성을 위해 3-way-handshaking, 4-way-handshaking한다.데이터가 유실되었다면 재전송한다.즉, 신뢰성이 높다연결형 서비스이다가상 회선 방식을 통해 패킷을 교환한다.전송 순서가 보장된다.전송 속도가 느린 편이다.Port 번호의 범위 때문에 연결

… reactive programming is a delcarative programming paradigm concerned wiht datat streams and the propagation of change - wikipidea위 인용에서 키워드는 다음과 같다.

Publisher-Subscriber 패턴, 줄여서 PubSub 패턴,은 여러개의 모듈을 직접적으로 의존하지 않고도 소통할 수 있도록 고안되었다. PubSub 패턴은 서비스의 결합도를 낮추는 좋은 방법이고 JS에서 흔히 사용된다.다만, 디커플링이 무조건 추구해야할 것은

JavaScript V8 엔진 내부에서 메모리가 어떻게 관리되고 사용되는지 알아보자. V8 엔진은 NodeJS, Deno, Electron과 같은 런타임 및 Chrome, Chromium, Brave와 같은 웹 브라우저에서 사용된다. V8 엔진은 C++로 작성되었기 때

프론트엔드 어플리케이션에서 데이터 로딩을 관리하는 것은 점점 어려워지고 있다. 이러한 이유 때문에, 프론트엔드 생태계의 다양한 상태관리 라이브러리들이 등장했따.React팀은 이러한 문제를 인지하고 있었고, Suspense는 React 컴포넌트의 Loading state

이 글은 React v18.0.0 공식페이지에 있는 코드 분할 문서를 정리한 것입니다.코드 분할대부분 React 앱들은 Webpack, Rollup, Browserify 같은 툴을 통해 여러 파일을 하나의 파일로 번들링 한 다음 한 번에 전체 앱을 로드한다.CRA, N

객체 지향 언어에서 함수에서 자기가 속해져있는 객체를 가르킨다. JS도 비슷하게 동작할 것이라고 예상하기 쉽지만, JS에서는 자기 자신이라는 단어가 다소 모호하다. 그 이유는 JS의 함수는 일급 객체이기 때문이다. 따라서 this는 실행 환경에 따라 매우 달라진다.한

Mocking Service Workwer는 Service Worker API를 통해 실제 요청을 가로채서 API를 mocking할 수 있는 라이브러리이다.Service Workers는 캐싱을 목적으로 요청을 잡아채는 기능을 갖고 있다. msw는 service work

Flux 패턴은 페이스북이 Single Page Applications를 제작하기 위해 제안한 패턴 중 하나이다. 이전 페이스북의 Client Side가 MVC 패턴으로 동작했을 때, 유저가 현재 읽지 않은 알람의 개수가 동적으로 관리되지 않는 버그를 갖고 있었다. 페

프로그래머스에서 과제형 테스트를 연습하다 다음과 같은 요구사항을 만났다."가급적 컴포넌트 형태로 추상화 하세요."해설에서는 이 요구사항이 DOM에 접근하는 부분을 최소화하고, 명령형 프로그래밍보다 선언적으로 프로그래밍 방식으로 접근하라는 의미를 지닌다고 설명했다.명령형

https://www.youtube.com/watch?v=jrKcJxF0lAU TypeScript is Language build on top of JS superset of JS made by MS Features catch Error early in developm

이번에 CORS 에러를 핸들링 하면서 공부하게 된 내용을 정리해보려 한다.(정작 그 문제는 CORS와 연관이 없었다😂)개발자가 보통 CORS 에러를 겪는 상황은 프론트앤드애서 백앤드로 요청을 보낼 때이다. 처음에는 Host와 port만 맞춰주면 되는 줄 알았는데 아니