Server & client mismatch problem in Next.js
2022-09-21
이 웹사이트를 실행했을 때, 작동은 잘 되는 것 같은데 콘솔에 아래와 같은 에러 메시지들이 뜨는 문제가 있었다.
When I run this website, it seems to...
카테고리: Computer
Creating GitHub pages using Next.js
2022-09-19
Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 위한 프레임워크이지만,
정적 사이트 생성 (SSG) 기능도 제공한다.
(이 블로그와 같이) 이 기능을 이용하여 GitHub...
카테고리: Computer
Creating a component compatible to CSS-in-JS
2022-09-08
styled-components, Emotion 등의 CSS-in-JS 라이브러리에서는 styled, css 등의 API를 제공하여 컴포넌트에 스타일을 입힐 수 있도록 한다.
C...
카테고리: Computer
Solving "Cannot open display" issue in WSLg
2022-03-31
윈도우의 WSL2 위에 WSLg 기능을 설치하면, VcXsrv 등의 프로그램 없이도 리눅스용 GUI 프로그램들을 실행할 수 있다.
If we install WSLg on the ...
카테고리: Computer
Loader conflict in Storybook Webpack configuration
2022-02-05
Storybook을 사용할 때 Storybook의 기본 Webpack 세팅에 나의 세팅을 합쳐서 사용하는 경우가 있다.
We sometimes merge our Webpack c...
카테고리: Computer
Mixing blur event and click event
2022-01-28
드롭다운 같은 커스텀 UI를 만들 때 겪을 수 있는 이슈가 있다.
onClick()을 사용해서 드롭다운의 옵션을 클릭하면 값이 바뀌며,
onBlur()를 사용해서 드롭다운 밖을 클...
카테고리: Computer
Fix flexbox overflow using min-height
2022-01-22
CSS flex를 사용할 때, 한 자식의 높이가 너무 커서 overflow가 발생하는 경우가 있다.
이 때 시도해볼 수 있는 트릭 중 하나는 해당 자식의 min-height를 0으...
카테고리: Computer
Drawing a triangle using CSS border
2022-01-22
고전적인 CSS 트릭 한 가지를 소개하고자 한다.
CSS border를 이용하면 삼각형을 그릴 수 있다.
이를 박스에 붙여서 아래 이미지와 같이 말풍선 모양을 만들수도 있고,
링...
카테고리: Computer
window object when using SSR (ex. Next.js)
2022-01-22
Next.js 등의 도구들을 이용하여 SSR(Server-Side Rendering)을 할 때,
window 객체를 사용하면 아래와 같은 에러가 날 때가 있다.
When we u...
카테고리: Computer
enum vs string union type in TypeScript
2021-10-19
타입스크립트에서 값의 '종류'를 표현하는 방식은 여러 가지가 있다.
enum을 사용할 수도 있고, string literal의 union type(여기서는 편의상 'string u...
카테고리: Computer
Custom Jest transformer
2021-10-19
Webpack 등의 번들러를 이용하여 프론트엔드 코드를 작성할 때,
url-loader, file-loader, @svgr/webpack, Webpack 5의 asset modul...
카테고리: Computer
CRTP (Curiously Recurring Template Pattern)
2021-06-10
C++에서 CRTP(묘하게 되풀이되는 템플릿 패턴, Curiously Recurring Template Pattern)라는 재미있는 트릭이 있다.
부모 클래스를 템플릿 클래스로 만...
카테고리: Computer
Get the pure text from a HTML text
2021-05-01
자바스크립트 또는 타입스크립트를 이용하여 HTML 텍스트에서 태그 등을 제외한 순수한 텍스트들만 뽑아내야 할 때가 있다.
브라우저 환경이라면, DOM API들을 이용하여 이를 간단...
카테고리: Computer
Generate a union type from an array in TypeScript
2021-04-14
타입스크립트에서 string의 union type을 enum과 유사한 용도로 쓸 수 있다.
In TypeScript, we can use the union type of stri...
카테고리: Computer
Creating a tree using the smart pointer
2021-04-12
C++에서 트리를 만들때, 스마트 포인터 std::shared\_ptr를 활용하면 자식 노드의 메모리 해제를 직접 해주지 않아도 될 뿐만 아니라 여러 트리가 한 노드를 참조하는 상...
카테고리: Computer
Impressive Slipknot live performances
2021-01-18
인상깊은 슬립낫 라이브 영상들
Impressive Slipknot live performances
https://youtu.be/evL9qoHMgxA
(sic) / Ozzf...
카테고리: Music
Preventing iframe from affecting the history
2020-12-29
웹페이지에서 iframe의 src를 변경하면 브라우저의 히스토리가 변경될 수 있다. 이를 방지하는 방법 중 하나는, src가 변경되면 iframe 요소를 지우고 새로 렌더링하는 것...
카테고리: Computer
Routing in GitHub Pages
2020-12-29
깃허브에서는 깃허브 페이지를 통하여 웹사이트를 호스팅하는 기능을 제공한다. 이
때 React Router 등의 라우팅 라이브러리를 사용하여 웹사이트가 마치 여러 개의 페이지로 이루...
카테고리: Computer
Error handling in React.js
2020-12-29
리액트 라우터를 사용할 때, 만약 웹페이지 내부에서 예외가 발생하면 라우팅이 정상적으로 작동하지 않는 경우가 있다. 라우팅을 방해하지 않으면서 예외가 콘솔에 출력되게
하려면, 에러...
카테고리: Computer
Merry Christmas!
2020-12-28
https://youtu.be/GVYPQNi6yZ8
Link: https://avantgarde95.github.io/asciisnow/?image=christmas
Code:...
카테고리: Computer
Customize marked.js renderer
2020-10-11
marked.js 라이브러리를 사용하면 마크다운 문서를 HTML로 변환할 수 있다. 이 블로그도 마크다운으로 포스트를 작성하고 해당 라이브러리로 포스트를 HTML로
변환해서 렌더링...
카테고리: Computer
My guitars
2020-10-11
Guitars
(1) Charvel Pro-Mod San Dimas Style 2-7 HH
7현 기타!
브릿지 픽업은 던컨 나즈굴, 넥 픽업은 던컨 센티언트이다. 어둡고 강력한...
카테고리: Music
Markdown test
2020-10-03
마크다운 테스트
Markdown test
Link
Raw
https://github.com/
https://facebook.com/
https://www.youtube.c...
카테고리: Computer