개발여행

디자인 패턴은 주어진 문제를 해결하기 위해 따를 규칙을 정해놓은 것을 말한다. 어떤 식으로 객체를 생성하고 객체 간의 관계를 형성할지와 같은 질문을 토대로 특정 상황이나 목적에 알맞는 효율적인 코드 구조를 짠다.싱글톤 패턴싱글톤 패턴에서는 하나의 클래스로부터 하나의 인스턴스만 생성해 사용한다. 인스턴스를 여러개 생성하지 않아서 인스턴스 생성에 드는 비용을 줄일 수 있다.class Singleton () { constructor() { // 한 번만 실행되는 코드 (이후에는 항상 Singleton.instance가 존재할 것이기 때문) if (!Singleton.instance) { Singleton.instance = this; // 처음 생성하는 인스턴스(this)를 Singlet..

WebAssembly는 코드지만, 우리 개발자가 직접 읽고 쓰는 프로그래밍 언어는 아니다. WebAssembly는 자바스크립트 외의 언어로 작성한 코드가 웹 브라우저에서 실행될 수 있도록 컴파일링된 특수한 코드다. 사람보다는 컴퓨터가 이해할 수 있는 바이너리 형태의 코드라서 우리가 직접 코드를 짜는 것은 아니다. C++, Rust, Go 등 웹개발을 위한 언어가 아닌 것들로 짠 코드도 웹브라우저가 이해하고 실행시킬 수 있도록 만들어진게 WebAssembly다. 기계 언어에 더 가까워서 자바스크립트보다 실행 속도도 빠르다고 한다. 브라우저가 자바스크립트를 돌리려면 먼저 자바스크립트 코드를 파싱을 하고, 이후 바이너리로 컴파일한 다음에야 브라우저가 읽게 되는데, WebAssembly는 애초에 바이너리 형태다..

Konva는 HTML의 요소를 쓰기 쉽게 만들어주는 라이브러리다. 캔버스 안에 오브젝트 하나 그리려고 일일이 lineTo()와 moveTo()를 쓰지 않아도 되는 편리함을 제공한다.  관련 라이브러리는 Konva 외에도 Fabric.js, EaselJS 등 다양하지만 Konva를 선택한 이유는 리액트에서 사용할 때 깔끔해 보여서다. Fabric.js가 제일 인기있는 모양이지만 샘플 코드에서 useEffect를 쓰는 것을 보고 Konva를 써보기로 했다. * 리액트에서 Konva를 쓰려면 konva와 react-konva 둘 다 설치해야 한다. 기본 구조Konva의 캔버스는 컨테이너인 컴포넌트 안에 각 그림을 컴포넌트별로 나뉘는 구조를 갖고 있다. 캔버스 오브젝트는 이 와 의 영역 안에 구현한다. ..

리액트 생태계에 react-calendar가 있듯, Vue 생태계에는 v-calendar 라이브러리가 있다. 현재 깃헙에 수많은 이슈들이 오픈되어 있지만, 간단한 캘린더를 구현할 땐 특별히 큰 문제는 없어서 나도 계속 사용할 것 같다. 다만 v-calendar의 주간 view 컴포넌트에 버그가 있어서 해결하기 위해 이런저런 시도를 해봤고, 그 끝에 나름대로의 대안책을 찾았다. v-calendar는 view prop을 통해 주 단위로 보여주는 캘린더를 구현할 수 있다. 추가로 attributes prop을 전달하면 캘린더 날짜에 이벤트가 있음을 나타내주는 표시와 팝업도 넣을 수 있다. 그런데 주간 view와 과거 날짜의 이벤트가 포함되어 있는 attributes를 함께 설정하면 제일 오래된 이벤트가 발생한..

CSS를 쓸 때 가장 어려운 부분이 명시도(specificity)인 것 같다. BEM을 아무리 잘 따라도 사람이 사람과 코드를 짜는 이상 절대적인 컨벤션에 도달하기 어렵다고 생각한다. 만약 styled-components나 Tailwind 같은 툴을 쓰지 않는다면 CSS 클래스 네이밍에 신경써야 할 텐데, 이때 활용해볼 수 있는게 @scope다. @scope는 CSS 규칙을 적용할 범위를 스코핑해주는 아주 중요한 키워드다. 투명한 선을 그어서 네 구역 내 구역을 나눠주는 셈이다. 클래스끼리 엮는 것보다는 명시도가 가장 낮은 DOM 엘리먼트를 타겟팅해야 하는 상황에서 더 빛을 발하는데, 예시로 아래처럼 사용할 수 있다.@scope (.card) { img { border-color: green; ..

이제까지 계속 fetch만 고집하다가 드디어 Axios를 써보기로 했는데, 시작하자마자 에러와 씨름하게 됐다. 어째선지 axios 패키지 자체를 import할 수 없는 모양이다. 검색해보면 CDN으로 해결하는 방법은 나와있지만, 패키지 설치만으로는 이렇다할 해결책을 찾을 수 없었다. 혹 프레임워크에서도 문제일지 실험해볼 겸 리액트와 Next.js에서도 써봤더니 에러 없이 잘 import되는 것을 확인했다. 프론트엔드 프레임워크를 사용하면 import 문제가 없고, 바닐라 JS 환경에서 패키지만 설치해 쓰려고 하면 모듈을 찾을 수 없다는 에러가 뜬다. 이 부분을 바탕으로 해결책을 더 찾아보기로 했다. 파일을 번들링해도 문제가 발생할지 확인해보기 위해 먼저 바닐라 JS 환경에 웹팩을 설치해 번들링을 해봤다...

Vue 3 버전 기준, Vue의 컴포넌트는 SFC(Single File Components)라고 부르는 하나의 *.vue 파일에 만들어 활용할 수 있다. SFC 파일에는 자바스크립트의 동적 기능, 페이지에 렌더링할 HTML DOM 태그, 그리고 CSS 스타일링까지 한꺼번에 작성해서 하나의 독자적인 컴포넌트로 사용할 수 있는데, 우연히 이런 SFC 컴포넌트 내에서 CSS 스타일을 적용할 때 유의해야 하는 점을 알게 됐다. SFC 컴포넌트에서 태그를 사용할 때, 특정 클래스명에 스타일을 부여하면 해당 클래스명을 사용하는 외부 모든 컴포넌트들에도 스타일이 적용된다. 각 .vue 파일에 선언할 수 있어서 해당 파일이 렌더링하는 요소들에게만 적용되는 고유한 스타일이라고 생각했는데, 사실은 아니었던 것이다. 태..

이벤트 emitVue에서는 자식 컴포넌트가 부모 컴포넌트에게 어떤 이벤트에 대한 시그널을 보내는 emit 기능을 활용할 수 있다. 자식 컴포넌트에 defineEmits()로 이벤트의 명칭을 선언하면, 부모 컴포넌트는 자식 컴포넌트를 렌더링할 때 v-on 디렉티브를 통해 해당 이벤트에 listen할 수 있다. v-on 디렉티브에 이벤트가 감지됐을 때 실행할 콜백을 전달하고, 그 콜백은 자동으로 자식 컴포넌트가 이벤트를 emit하면서 보낸 데이터를 인자로 받는다. console.log(msg)" /> 이벤트 emit은 Click me 컴포넌트 prop자식 컴포넌트가 prop을 받을 땐 defineProps()에 명시한다. 타입스크립트의 경우 defineProps() 안에다가 명시하는 대신 제네릭을 사..