Blog

이 웹사이트를 실행했을 때, 작동은 잘 되는 것 같은데 콘솔에 아래와 같은 에러 메시지들이 뜨는 문제가 있었다. When I run this website, it seems to...

Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 위한 프레임워크이지만, 정적 사이트 생성 (SSG) 기능도 제공한다. (이 블로그와 같이) 이 기능을 이용하여 GitHub...

styled-components, Emotion 등의 CSS-in-JS 라이브러리에서는 styled, css 등의 API를 제공하여 컴포넌트에 스타일을 입힐 수 있도록 한다. C...

윈도우의 WSL2 위에 WSLg 기능을 설치하면, VcXsrv 등의 프로그램 없이도 리눅스용 GUI 프로그램들을 실행할 수 있다. If we install WSLg on the ...

Storybook을 사용할 때 Storybook의 기본 Webpack 세팅에 나의 세팅을 합쳐서 사용하는 경우가 있다. We sometimes merge our Webpack c...

드롭다운 같은 커스텀 UI를 만들 때 겪을 수 있는 이슈가 있다. onClick()을 사용해서 드롭다운의 옵션을 클릭하면 값이 바뀌며, onBlur()를 사용해서 드롭다운 밖을 클...

고전적인 CSS 트릭 한 가지를 소개하고자 한다. CSS border를 이용하면 삼각형을 그릴 수 있다. 이를 박스에 붙여서 아래 이미지와 같이 말풍선 모양을 만들수도 있고, 링...

CSS flex를 사용할 때, 한 자식의 높이가 너무 커서 overflow가 발생하는 경우가 있다. 이 때 시도해볼 수 있는 트릭 중 하나는 해당 자식의 min-height를 0으...

Next.js 등의 도구들을 이용하여 SSR(Server-Side Rendering)을 할 때, window 객체를 사용하면 아래와 같은 에러가 날 때가 있다. When we u...

Webpack 등의 번들러를 이용하여 프론트엔드 코드를 작성할 때, url-loader, file-loader, @svgr/webpack, Webpack 5의 asset modul...

타입스크립트에서 값의 '종류'를 표현하는 방식은 여러 가지가 있다. enum을 사용할 수도 있고, string literal의 union type(여기서는 편의상 'string u...

C++에서 CRTP(묘하게 되풀이되는 템플릿 패턴, Curiously Recurring Template Pattern)라는 재미있는 트릭이 있다. 부모 클래스를 템플릿 클래스로 만...

자바스크립트 또는 타입스크립트를 이용하여 HTML 텍스트에서 태그 등을 제외한 순수한 텍스트들만 뽑아내야 할 때가 있다. 브라우저 환경이라면, DOM API들을 이용하여 이를 간단...

타입스크립트에서 string의 union type을 enum과 유사한 용도로 쓸 수 있다. In TypeScript, we can use the union type of stri...

C++에서 트리를 만들때, 스마트 포인터 std::shared\_ptr를 활용하면 자식 노드의 메모리 해제를 직접 해주지 않아도 될 뿐만 아니라 여러 트리가 한 노드를 참조하는 상...

인상깊은 슬립낫 라이브 영상들 Impressive Slipknot live performances https://youtu.be/evL9qoHMgxA (sic) / Ozzf...

깃허브에서는 깃허브 페이지를 통하여 웹사이트를 호스팅하는 기능을 제공한다. 이 때 React Router 등의 라우팅 라이브러리를 사용하여 웹사이트가 마치 여러 개의 페이지로 이루...

웹페이지에서 iframe의 src를 변경하면 브라우저의 히스토리가 변경될 수 있다. 이를 방지하는 방법 중 하나는, src가 변경되면 iframe 요소를 지우고 새로 렌더링하는 것...

리액트 라우터를 사용할 때, 만약 웹페이지 내부에서 예외가 발생하면 라우팅이 정상적으로 작동하지 않는 경우가 있다. 라우팅을 방해하지 않으면서 예외가 콘솔에 출력되게 하려면, 에러...

https://youtu.be/GVYPQNi6yZ8 Link: https://avantgarde95.github.io/asciisnow/?image=christmas Code:...

marked.js 라이브러리를 사용하면 마크다운 문서를 HTML로 변환할 수 있다. 이 블로그도 마크다운으로 포스트를 작성하고 해당 라이브러리로 포스트를 HTML로 변환해서 렌더링...

Guitars (1) Charvel Pro-Mod San Dimas Style 2-7 HH 7현 기타! 브릿지 픽업은 던컨 나즈굴, 넥 픽업은 던컨 센티언트이다. 어둡고 강력한...

마크다운 테스트 Markdown test Link Raw https://github.com/ https://facebook.com/ https://www.youtube.c...

환영합니다! Welcome!