StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위해 작성되어 있다. 그런데 문제를 알아내기 위해 검사하면서 api를 한번 더 호출해버리는 문제가 있다. 하지만 StrictMode는 개발 모드에서만 활성화되기 때문에 production 환경으로 실행시에는 메서드들이 이중으로 호출되지 않는다. 그렇기에 불편을 조금 감수하더라도 큰 문제가 없다면 StrictMode를 놔두는 것이 이득일 수 있다. 물론 그래도 싫다면 main.tsx or main.jsx 에서 를 지워주면 해결이 되긴 한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css';..

타입스크립트를 이용하여 인터페이스를 확장하는 방법은 여러가지가 있다. api를 통해서 데이터를 받을 때, 필요한 데이터 타입은 number일지라도 넘어오는 데이터 타입은 string인 경우가 있다. 인터페이스는 number로 선언했을때 이를 확장하여 string으로 바꿔주는 ResponseTodo 타입을 새로 선언해야한다면, 그냥 인터페이스를 똑같이 작성하면 된다. interface Todo { seq: number title: string description: string } interface ResponseTodo { seq: string title: string description: string } 하지만 위의 방법은 중복이 심해진다. 이럴 때 유틸리티 타입이 도움이 된다. 일단 요약하자면 다음..

회사에서 이런 코드를 보았다. const arr = [1, 2, 3]; const target = []; arr.forEach(target.push); // === arr.forEach((elem) => target.push(elem)) console.log(target) 코드를 실행시켜보니 에러가 뜬다. 원래 의도대로라면 주석처럼 forEach의 arguments가 통째로 target에 push 되어야 한다. 하지만 에러가 난다. this에 대한 제어권을 잃어서 그렇다. 우리는 this에 대해 배울때 함수를 선언한 스코프를 중심으로 설정된다고 배웠다. 하지만 콜백으로 넘기면서 this에 대한 제어권을 잃었다. 어떻게 된 것일까? 일반적으로 함수를 실행시키는건 문제가 없지만 콜백으로 함수 자체를 넘길경우..

Proxy와 Reflect | 기원's Study(ing) Proxy와 Reflect 개인적으로 조그만한 프로젝트를 하고 있는데, api를 이용해 외부에서 데이터를 가져오는 작업을 했었다. 그런데 response가 Proxy라는 객체로 들어오고 [[target]]이라는 프로퍼티 내부에 giwonn.github.io (이 글은 위의 링크에서 작성한 글을 티스토리로 옮긴 글입니다.) 개인적으로 조그만한 프로젝트를 하고 있는데, api를 이용해 외부에서 데이터를 가져오는 작업을 했었다. 그런데 response가 Proxy라는 객체로 들어오고 [[target]]이라는 프로퍼티 내부에 원하는 데이터가 들어있었다. 그 당시에는 변수 뒤에 target을 붙여서 데이터를 가져와서 사용했었는데 궁금증은 해결하는게 맞기에..

조건이 많아지면 많아질수록 if문과 switch문은 보기 더러워진다. 조건이 값식문같은 명확한 조건이면, if문이나 switch문을 쓰지 않고도 구현이 가능하다. 코드가 클린해지게 리팩토링해보자. if문 코드를 보기만 해도 머리 아프다. 내부로직을 생략해서 그렇지 아찔하다. if (category === 'total') { // ... } else if (category === 'a') { // ... } else if (category === 'b') { // ... } else if (category === 'c') { // ... } else if (category === 'd') { // ... } else if (category === 'e') { // ... } else { // ... } S..

Vite를 사용할 때 '@/components/Helloworld.vue' 이런 식으로 경로를 설정하고 싶을때 사용하는 방법입니다. javascript는 vite.config.ts만 설정해줘서 손쉽게 가능합니다. 이 방법은 vite를 사용하는 react, vue, svelte 등 모든 프레임워크에서 사용가능합니다. Javascript vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src') } } }) Typ..

[원글] 1. Node의 핵심 개념 | 기원's Study(ing) 1. Node의 핵심 개념 노드는 브라우저가 아닌 다른 환경에서 Javascript를 사용할 수 있게 해주는 런타임이다. 크롬의 V8엔진에 libuv(비동기 I/O 라이브러리)를 추가해 만들어졌다. Node의 특징은 다음과 giwonn.github.io 1. Node의 핵심 개념 노드는 브라우저가 아닌 다른 환경에서 Javascript를 사용할 수 있게 해주는 런타임이다. 크롬의 V8엔진에 libuv(비동기 I/O 라이브러리)를 추가해 만들어졌다. Node의 특징은 다음과 같다. 싱글 스레드이며 이벤트 루프 기반 논 블로킹(Non-blocking) 방식으로 동작 Javascript를 사용함 V8 엔진이란 V8 엔진은 크롬에서 자바스크립트..

지금 사용하는 이 티스토리를 일상 블로그로 전환하고, 기술 블로그로 깃허브 블로그를 만드는 중이다. 그런데 값을 복사하려고 전개연산자를 사용하는데 뭔가 이상했다. 이 코드의 출력 값은 무엇이 나올까? const obj1 = { a : 1, b : 2, } const obj2 = {...obj1}; console.log(obj1 === obj2); // ? 답은 false다. 뭐 당연한거다. 전개연산자로 분해했다가 다시 만들었으니 참조가 풀린 것이다. 이렇게 보면 마치 깊은 복사가 된 것 같지만... 사실은 가장 겉부분만 깊은 복사가 이루어진 상태다. 이번엔 내부 값까지 확인해보자. const obj1 = { a : 1, b : 2 }; const obj2 = {...obj1}; console.log(ob..

최근에 자바스크립트에서 replaceAll을 지원하기 시작했다. 하지만 그건 어디까지나 브라우저에서 제공하는거고.... node는 얄짤없다. replace에 정규식을 쓰도록 하자..... 추가사항 (2022-05-04) Node v15부터 replaceAll을 지원한다!

페이지이동 이걸 몰라서 한참 헤맸다... 왜 안되나 했네 @click이 아니라 @click.native로 작성해주어야 한다.

Web Storage란? 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공하는 API Web Storage의 종류 Web Storage는 sessionStorage, localStorage 두 가지가 있는데, 이름 그대로 세션과 로컬에서 동작한다. 또한 Window 객체를 통해 사용할 수 있다. ex) Window.sessionStorage, Window.localStorage sessionStorage 페이지 세션에 한정해서, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장한다. 데이터를 절대로 서버로 전송하지 않는다. 저장 공간이 쿠키보다 크다. (최대 5MB) localStorage 유효기간 없이 데이터를 저장하고, Javascript를 사용하거나 캐시 또는 로컬 저..

이벤트 위임 (Event Delegation) 이벤트 위임이란 동적으로 하위 노드를 생성하고 삭제할 때, 상위 노드가 하위 노드들의 이벤트를 직접 탐지하고 관리하는, 디자인 패턴 중 위임 패턴을 뜻한다. 같은 이벤트를 노드 개수만큼 걸어주는 대신, 상위 노드에게 이벤트를 걸어주는 것이다. 이해가 안될 수도 있어 예제를 준비했다. 이벤트 버블링이나 캡처링을 알고 이벤트 위임을 공부하는 것이 맞지만, 일단 실전부터 해보자. 코드 예제 위의 예제처럼 parent라는 div에 child를 1000개 만들었다고 해보자. child 버튼에 이벤트를 걸어주고 싶다면 class 선택자를 이용해서 반복문으로 1000개의 요소에 이벤트를 생성해주면 된다. javascript 실행 이후 button이 1000개가 있다면 이..