전체 글

들어가며아마 다른 곳에서 좀 찾아보다 오신 분들은 공감하시겠지만, 생각보다 Nextjs에서 React-Quill에 폰트를 추가하는 레퍼런스가 많지 않았다... 또 어찌어찌 레퍼런스를 뒤져가며 폰트를 추가하더라도, 툴바에서 폰트가 전부 sans-serif로 뜨는 버그 아닌 버그가 있어서, 이 때문에 과정이 더 쉽지 않았던 것 같다. 그래서 이 글에서는 Nextjs에 폰트를 추가한 방법부터 에디터에 적용하기까지의 내용을 최대한 알기 쉽게 정리해두었다. 이 글이 누군가에겐 도움이 되길 바란다. 또한, 이 글은 App라우터 방식을 기준으로 쓰여졌음을 알린다.  1. Next.js에서 폰트 추가하기Next.js에서는 사용자 정의 폰트 등을 최적화하여 사용할 수 있도록 "next/font" 모듈을 제공하고 있다. ..

들어가며우리가 fetch를 통해 요청을 하다보면 서버의 응답이 너무 느린 경우나, 사용자가 요청을 취소 할 수 있게 구현해야 하는 경우가 종종 있다. 혹은 그런 경우가 아니더라도, 취소를 함으로써 error를 발생시켜 어떤 동작을 실행 시키고 싶을 수도 있다. 이런 경우에, AbortController를 사용해서 해결할 수 있다. ChatGPT 사이트의 생성 취소 버튼도 이를 사용한 예시 중 하나다.   AbortController?AbortController는 하나 이상의 웹 요청을 취소하기위해 만들어진 인터페이스이다. 보통 생성자를 통해 새로운 객체를 만들어서 사용하게되고, 주요 사용법으로는 2가지 정도가 있다.  AbortController APIAbortController()생성자이며, new 연..

자바스크립트에서 비동기 처리를?자바스크립트는 싱글 쓰레드 언어이기 때문에 여러 일을 한번에 처리할 수 없다. 즉, 한 작업이 끝난 이후에 다른 작업을 시작할 수 있다. 하지만 자바스크립트는 fetch를 통해 데이터를 가져오는 동안에 다른 작업을 할 수 있다. 분명 자바스크립트는 여러 일을 한번에 처리할 수 없을텐데 말이다. 그렇다면, 싱글 쓰레드인 자바스크립트에서 어떻게 비동기적으로 병렬 처리가 가능한 것일까? 자바스크립트 비동기 병렬 처리 원리결론부터 말하자면, 자바스크립트는 브라우저를 이용해 비동기 병렬 처리를 한다. 브라우저는 멀티 쓰레드로 이루어져 있기 때문에, 메인 자바스크립트 스레드를 차단하지 않고 다른 쓰레드에서 작업이 가능하다. 브라우저는 이 쓰레드들을 Web API를 통해 이용할 수 있게..

문자 집합과 인코딩 문자 집합 (Character Set) 컴퓨터가 이해할 수 있는 문자의 모음 인코딩 (Encoding) 코드화하는 과정 문자를 0과 1로 이루어진 문자 코드로 변환하는 과정 디코딩 (Decoding) 코드를 해석하는 과정 0과 1로 표현된 문자 코드를 문자로 변환하는 과정 아스키 코드 (ASCII Code) 간단한 인코딩 초창기 문자 집합 중 하나 알파벳, 아라비아 숫자, 일부 특수 문자 및 제어 문자 총 8bit 할당 7bit로 하나의 문자 표현 (27개, 즉 128개 정도의 문자를 아스키 코드로 표현 가능) ASCII 표 를 확인해보면 현재 127개의 문자가 아스키 코드로 표현 가능한 것을 확인 가능 8bit 중 1bit는 오류 검출을 위해 사용되는 패리티 비트(parity bit..

정보의 단위 비트(bit) : 0과 1을 나타내는 가장 작은 정보 단위. n개의 bit는 2n개의 정보를 표현할 수 있다. 바이트(byte) : 8bit 킬로바이트(kB): 1000byte 메가바이트(MB): 1000kB 기가바이트(GB): 1000MB 테라바이트(TB): 1000GB 🤔 음... 그런데 1kB가 1024byte 아니었나요? 그 이상 단위들도 그렇구요. ✅ 엄밀히 따지면, 1024개씩 묶은 단위는 kiB, MiB, GiB 와 같은 방식으로 표현합니다. 과거에는 1000개씩 묶으나, 1024개씩 묶으나 큰 차이가 없었기 때문에 혼용해서 사용했었지만, 최근에는 기본적인 정보 단위의 크기가 커지면서 방식에 따라 큰 차이가 나서 구분하여 사용하는 추세입니다. CPU에서의 정보 단위 워드(word..

컴퓨터의 핵심부품 4가지 컴퓨터를 동작시키는 핵심부품은 종류를 막론하고 동일하다. CPU 메모리 보조기억장치 입출력장치 1. CPU 기본적인 내부 구성 부품 ALU = 산술 논리 연산 장치 계산을 위한 회로들의 모음 = 쉽게 말하면 계산기 제어장치 = 컨트롤 유닛 제어 신호를 내보내고, 명령어를 해석하는 장치 제어 신호란 컴퓨터 부품들을 관리하고 작동시키기 위한 전기 신호이다. 그 종류에는 대표적으로 "메모리 읽기 신호"와 "메모리 쓰기 신호" 두가지 정도가 있다. 레지스터 CPU 내부의 작은 저장장치, 보통 내부에 여러개가 존재한다. 요약 CPU는 메모리에 저장된 값을 읽어 들이고, 해석하고, 실행하는 장치다. CPU 내부에는 기본적으로 ALU, 레지스터, 제어장치가 있다. ALU는 계산하는 장치 레지..

1. 도입 배경이번에 진행하고 있는 프로젝트에서 프론트엔드 public 에셋들을 전부 CDN으로 옮기게 됐다. 왜 그런고하니... 현재 프로젝트는 Next.js 14버전에 App 디렉터리 방식의 라우팅을 하고 있는데, public 폴더에 있는 로컬 이미지를 Storybook이 절대경로로 인식하지 못하는 것이 가장 컸다.  당시 코드는 아래와 같다.  해당 코드로 이미지를 받아오게되면 개발 서버에서는 해당 URL에 이미지가 있기 때문에 잘 가져와주지만, storybook 서버를 실행하게 되면 public폴더에 있는 이미지를 불러오지 못하는 것을 볼 수 있다. 이를 해결하기위해 우선 Next.js 공식 docs를 보니, 로컬 파일을 어떻게 불러오는지에 대한 예제가 있었다.import Image from 'n..

💻 에러 당시 배경 평화롭게 storybook과 next.js14 버전을 이용하여 컴포넌트를 구성하던 중, storybook 개발서버를 실행시키니 특정 컴포넌트를 불러올 때 새로운 에러가 날 맞이했다... 해당 컴포넌트 안에서 useRouter(from next/navigation)를 사용했었는데, 이 부분이 문제인 것처럼 보였다. 🤔 문제 원인 이 문제는 Next.js app 디렉터리를 사용해서 나타난다. Storybook은 현재 글을 쓰고 있는 시점에서는 pages 디렉터리를 기본으로 지원하고있다. Next.js 13부터 app 디렉터리를 실험적으로 도입하기 시작했는데, Storybook에서는 app 디렉터리를 사용하든, pages 디렉터리를 사용하든 똑같이 pages 디렉터리 설정으로 만들어주는 것..