맨틀 이야기

UnoCSS는 단일 CSS 속성을 클래스에 담아 스타일링의 재사용성을 높이는 atomic CSS 철학을 기반으로 하는 CSS 엔진이다. 빠른 빌드타임과 유연한 커스터마이징 기능이 특징이다. 앞으로 UnoCSS를 적극적으로 사용해보려고 해서, Next.js 프로젝트에 UnoCSS를 설치하는 방법을 직접 정리해봤다. 패키지 설치pnpm add -D unocss @unocss/postcss uno.config.ts 생성프로젝트의 root 폴더에 uno.config.ts 파일을 생성해 아래 설정을 추가한다.import { defineConfig, presetUno } from "unocss";export default defineConfig({ presets: [ presetUno(), ],}); po..

위상 정렬은 그래프 형식의 데이터를 탐색할 때 사용할 수 있는 알고리즘이다. 모든 그래프 형식에 사용할 수 있는 알고리즘은 아니다. 방향성이 있고, 순환 구조를 이루는 edge가 없는 그래프만 위상 정렬이 가능하다. 이 두가지 특정 조건을 가진 그래프를 directed acyclic graph(dag)라고 한다. Edge로 이어진 노드들 중 다른 노드를 먼저 거쳐야 도달할 수 있는 노드는 의존성(dependency)을 가진다고 표현한다. 위상 정렬에서는 의존성이 없는 노드를 먼저 탐색하는데, 이때 탐색한 노드는 그래프에서 제거해나간다. 따라서 dag 그래프에서는 노드가 제거될 수록 남은 노드들이 가지는 의존성도 줄어든다. 위와 같은 이유로, 만약 순환되는 구조를 가진 그래프라면 각 노드의 의존성의 유무를..

Vuetify는 Vue.js 전용 UI 프레임워크다. 웹페이지를 만들 때 필요한 웬만한 컴포넌트들이 이미 Vuetify에 준비돼 있어서 손쉽게 가져다 쓸 수 있다. Vue.js에 설치Vue.js 프로젝트에서는 'vuetify' 패키지를 설치하고 createVuetify() 함수로 vuetify 객체를 생성한다. 패키지 설치:pnpm i vuetify main.ts 파일에 객체 추가:import { createApp } from "vue";import App from "./App.vue";// Vuetify 관련 importimport "vuetify/styles";import { createVuetify } from "vuetify";import * as components from "vuetify/co..

퀵 정렬은 파티션(partition)이라는 알고리즘을 사용해 배열을 정렬한다. Big-O 표기법으로는 많은 정렬 알고리즘과 동일하게 n²이지만, 평균적으로는 n * log(n) 정도의 시간복잡도를 가진다고 한다. 파티션파티션 알고리즘에서는 말 그대로 배열을 부배열(subarray)이라는 파티션으로 나눈다. 이때 피벗(pivot)이라는 임의로 고른 원소의 좌우로 부배열이 나눠지게 된다. 좌측 부배열은 피벗보다 작거나 같은 값으로 이루어진 배열이고, 우측 부배열은 피벗보다 크거나 같은 값만 있는 배열이다. 파티션을 나누기 위해 먼저 전체 배열의 마지막 원소를 피벗으로 삼는다. 그런 다음 배열의 첫번째 인덱스부터 차례대로 피벗의 값과 비교하면서 정렬해나가는데, 이미 정렬된 부배열과 정렬해야 되는 부배열을 구분..

정렬 알고리즘은 배열의 데이터를 순서에 맞게 정렬할 때 사용되는 알고리즘이다. 선택 정렬 (Selection sort)배열의 순번을 차례대로 순회하면서 데이터의 순서를 재정렬하는 것이 선택 정렬이다. 선택 정렬에서는 데이터를 순서대로 재배치하기 위해 배열을 반복해 돌면서 가장 작은(또는 큰) 값을 임의로 기억해 두었다가 마지막 인덱스까지 도달한 다음 그 값을 알맞은 위치로 이동시킨다. 반복문에서 찾은 값이 인덱스 j에 있었다고 가정할 때, 배열의 앞쪽인 인덱스 i로 이동시킬 땐 단순히 배열[i]에 있던 값과 자리를 바꾼다. 한번 자리를 바꾼 후에는 인덱스 i에 있는 값은 이미 정렬된 값이라고 볼 수 있기 때문에 그 다음 반복문부터는 i + 1 인덱스부터 배열을 순회하면 된다. 이런 방식으로 데이터를 정렬..

사용자 기기 설정에 따라 화면을 라이트모드나 다크모드로 보여주는 웹앱을 만드는 도중, 사용자의 기본 테마가 다크모드로 설정되어있으면 페이지를 처음 로딩했을 때 라이트모드의 색상이 먼저 보였다가 다크모드로 바뀌는 flickering 현상을 발견했다. 다행히 이미 잘 알려진 이슈여서 해결방안을 빨리 찾을 수 있었다. 다만 MUI 라이브러리를 사용하기 때문에 해결할 수 있는거라, 근본적인 문제에 대한 솔루션은 나중에 따로 찾아봐야 되겠다. 발생 원인SSR로 MUI 컴포넌트를 렌더링할 경우 컴포넌트가 사용할 색상이 사전에 결정되는데, 그걸 서버에서 결정하다보니 웹 API를 통해 사용자의 기기 설정을 읽을 수가 없다. 어쩔 수 없이 디폴트 값인 라이트모드의 색상으로 prerendering하게 되고, 클라이언트에 ..

인코딩과 암호화는 둘 다 데이터를 다른 형태로 바꿀 때 사용하는 기술들이지만, 그 방식과 목적이 다르다. 인코딩이란?인코딩은 전송이나 저장에 용이한 형태로 바꾸는 등, 환경의 요건에 맞는 형식으로 데이터를 변형시키기 위해 사용한다. 인코딩된 데이터는 별도의 제약 없이 되돌리는 것(디코딩하는 것)이 가능하고, 널리 알려진 방식으로 데이터를 바꾼 것이기 때문에 일반적으로는 어떤 포맷으로 인코딩했는지 쉽게 알거나 공유할 수 있다. 그렇기 때문에 데이터의 보안성을 높이기 위한 수단은 아니다. 자주 보이는 인코딩 알고리즘으로 Base64, URL 인코딩, ASCII 또는 유니코드 등이 있다. 암호화란?암호화는 외부인으로부터 데이터를 보호하기 위해 취하는 수단이다. 제3자가 마음대로 데이터에 접근할 수 없도록 암호..

완성하는 프로젝트보다 새로 시작하는 프로젝트가 몇 배는 더 많지만... 그럼에도 불구하고 매번 고민되는 부분 중 하나가 파일 디렉토리를 어떻게 구성할까다. 개발 생태계에는 디렉토리 구조마저 효율적으로 가져가기 위한 다양한 아키텍쳐가 존재하는데, 우연히 다른 프론트엔드 개발자와 대화하다가 Feature-Sliced Design(FSD) 패턴에 대해 알게 됐다. FSD는 기능 단위로 파일을 나눠 모듈화해서 코드의 유지 보수성과 확장성을 높이는 데에 중점을 둔다. 피쳐를 기준으로 코드를 수평적으로 분리해 구조 파악의 어려움을 해소한다. FSD 패턴에서는 코드를 레이어화해서 상위층에서 하위층으로 흐르는 방향을 따른다. 각 레이어별로 명확한 책임을 갖고있으며 레이어는 소분류 역할을 하는 슬라이스(slice)로 구..