: 기존재하던 프로젝트를 clone 받아서 작업을 할 일이 생겼는데, 해당 프로젝트의 노드 버전이 >= 18 이었다. 하지만, 다른 프로젝트에서는 다른 노드 버전을 쓰고 있었기 때문에 나중에 심신의 안정(?)을 위해 해당 프로젝트에서만 18.18.0을 쓰고자 했다. 이

기획을 확인하고, 모듈을 만들 때, 하나의 메서드에 하나의 기능 혹은 기획 단위를 넣으려고 했는데, 그것보다는 내 입장에서는 오히려 번거롭지 않을까? 스러웠던 세부 기능 단위로 쪼개서 메서드를 제공하는 편이 좋을 것 같다. 특정 기능 혹은 플로우 단위로 메서드를 만들면

: 골머리를 썩혀오던 문제를 Konva.Ring으로 해결할 수 있을 것 같다!. 내일 완벽하게 해결할 예정!https://konvajs.org/docs/shapes/Ring.htmlhttps://konvajs.org/docs/events/Pointer

Today I Learned window.screen.avail[Width/Height] : avail[Width or Height] 는 브라우저에서 작업 표시줄 등을 제외한 순수 화면의 사용 가능한 너비와 높이를 반환해준다. window.screen.availWid

Today I Learned Svg, Circle 이용해서 도넛 모양 마우스 커서 만들기 canvas, svg의 viewBox Attribute 등을 보면 기본적으로 (0,0)을 기준으로(보통 화면의 왼쪽 상단이 0,0이 됨) 얼마나 떨어져 있는 지점에서 시작할건지를

'you are looking rather dazed today, is something wrong?': Dazed는 어제 잠을 못잤거나 다른 것에 정신이 팔려서 멍한 상태일 때 쓰는 표현이다. 회사에서 정신 못차리는 동기한테 너 왜이렇게 멍하니 있어?? 라고 할 때

: 명쾌한, 분명한 vs 암시된, 내포된전부터 explicit이 나올 때마다 궁금해서 찾아봤던 것 같아서 이번에 좀 제대로 보고자 찾아봤다. 근데 뭔가 예시가 시원한(?)게 없었던 것 같다. 그나마 좀 도움이 됐던 것은 교육법 중에 명시적 교육법 혹은 설명(explic

: 이터러블과 관련해서 공부를 하다가 나온 지연 평가라는 말이 있다. 지연 평가란 일반적으로 loop를 돌 때 배열을 생성해놓고, 이를 순회하는 경우가 많은데, 이 경우처럼 데이터를 미리 메모리에 확보하는 게 아니라 데이터가 필요한 시점에 데이터를 생성한다는 의미라고

: 개발을 하던 도중 svg와 circle 태그로 만든 동그라미 마우스 커서에 attribute로 준 fill-color와 konvaJS로 만든 캔버스에 그은 Konva.Line의 stroke-color 값에 동일한 값을 줬음에도 커서의 색깔과 선의 색깔이 다른 에러를

: 'probability'는 우리말로 '확률'에 딱 맞아 떨어지는 단어이고, 'possibility'는 우리말로 '가능성'에 딱 맞아 떨어지는 단어이다. 사실 확률과 가능성을 거의 동일하게 쓰는데, 좀 더 구체적인 차이를 알아보자. Possibility : 이게 가능

The globalCompositeOperation property sets or returns how a source are drawn over a destination.: source(이제 그리려고 하는 것) 가 destination(이미 캔버스에 그려져 있는 것)

프랑스어로 빠르다(Quick)를 의미하는 vite!(그만큼 빠르다를 강조하고 싶었나보다). 특정 프레임워크에 종속된 것이 아니고 React, Vanilla, Svelte 등 프론트엔드 개발 어디서든 사용할 수 있다.vite는 크게 2가지 역할을 한다.Dev Server

: airbnb를 클론코딩 해보면서 바닐라 자바스크립트로 할 수 있는 것들을 토대로 html, css, js를 복습한다는 방향으로 공부해보자. : 먼저 위의 카테고리 header를 구현해보자.항상 정중앙 정렬을 할 때(물론 transform, top, left, pos

알아두면 좋을 Chrome Console 기능들

위의 코드는 for loop 안에 너무 많은 관심사가 겹쳐져 있다. 이를 심플하게 3개의 for문으로 먼저 분리해보자.하지만 여전히 문제가 있다. 일단 문제는 제쳐두고 여기에 품절 처리를 하는 로직만 추가해보자여기까지 명령형 프로그래밍 방식을 써서 구현을 해봤는데, 이

DOM Node들을 sorting 하는 방법에는 뭐가 있을까? : 혼자 토이 프로젝트로 vanilaJS 만을 써서 todolist와 비슷한걸 만들고자 했다. 이 때, todolist 제목을 기준으로 정렬하는 기능도 만들었는데, 여기서 dom api 가 제공하는 chil

: 최근에 FE 면접 질문을 공부하던 도중에 stopImmediatePropagation 에 대해서 알게 됐다. 그리고 이에 대해 정리해보고자 글을 쓴다.: 그전에 stopPropagation에 대해서 먼저 알아보자. stopPropagation은 간단하게 설명해보면

: 호이스팅, 실행 컨텍스트, 스코프 이렇게 세가지 키워드를 바탕으로 JS 실행 로직(코드 예시 등을 통한)을 살펴보고자 한다.: 호이스팅이란 일단 용어 그대로 해석하면 뭔가가 끌어올려지는 현상이라고 생각할 수 있다(동사라고 했을 때 끌어올리다 이다). 그럼 뭐가 끌어

1) 리액트는 같은 위치에 같은 컴포넌트가 있는지를 바탕으로 state를 유지할지 지울지를 결정한다. Same component at the same position preserves state It’s the same component at the same posit

: Proxy에 관련해서 공부를 하다 Object를 중간에 가로채서 get, set 등의 내부 메서드를 쓸 수 있다는 것을 알게 됐고, 이 로직을 이용하면 DOM API를 통해 코딩할 때 좀더 편리하게 리렌더링 로직을 짤 수 있을 것 같아서 직접 만들어봤다.이름을 입력