신비한 개발사전

Flux 패턴은 데이터의 흐름과 관련해 상태 관리 개선을 위해 고안된 아키텍처 관련 패턴이다. 상태의 단방향 흐름이 특징으로, 4가지 요소로 이루어진다:Action: 앱에서 발생하는 모든 이벤트를 뜻한다. 유저 입력이나 서버 응답 등 모든 데이터 변화는 Action을 통해 표현된다.Dispatcher: Action을 Store로 전달하는 역할을 한다. 각 Action이 알맞는 Store로 전달될 수 있게 한다. (Flux의 중심)Store: 앱의 상태를 저장해두는 곳이다. Store는 상태와 관련된 로직을 포함하며, Action을 통해 상태가 업데이트되면 해당 변경 사항을 View에 알린다.View: UI를 렌더링한다. 컴포넌트가 주로 이 역할을 수행한다. Store로부터 상태를 받아와 화면에 표시한다...

우리가 웹개발을 할 때 지속적으로 필요한 데이터들(사용자 계정 정보 등)은 어딘가에 저장해두고 써야 하는데, 이런 데이터를 모아둘 수 있는 저장소가 바로 데이터베이스다. 웹 개발에서 데이터베이스와 애플리케이션 간의 데이터 교환은 필수적인 작업이다. 데이터베이스는 관계형 테이블로 데이터를 저장하고 관리하는 반면, 애플리케이션은 객체 지향적으로 데이터를 처리한다. ORM(Object-Relational Mapping)은 이러한 두 세계를 잇는 중요한 개념으로, 데이터베이스의 데이터를 객체 지향 프로그래밍에서 쉽게 다룰 수 있도록 돕는다. ORM은 객체와 데이터베이스 간의 매핑을 의미한다. 객체 지향 프로그래밍에서 데이터는 클래스와 객체로 모델링되고, 관계형 데이터베이스에서는 테이블과 열로 구조화된다. 이 두..

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

Nuxt.js에서는 서버에서 미리 HTML 문서를 렌더링해 클라이언트로 보내는 서버사이드 렌더링(SSR)과 클라이언트에서 자바스크립트를 실행해 hydration하는 단계까지 포괄적으로 유니버설 렌더링이라고 부른다. 유니버설 렌더링으로 빠른 초기 로딩을 보장하면서 SPA처럼 동작하게 한다는 것이다. 공식 문서에서는 SSR, CSR 등을 렌더링 "모드"라고 표현하고 있다. Nuxt.js에서의 SSR 설정Nuxt.js는 SSR 설정이 매우 간단하다. nuxt.config.js 파일에서 ssr: true로 설정하면 된다. 기본적으로 Nuxt는 유니버설 렌더링을 지원하도록 설계되어 있어, 특별한 복잡한 설정 없이도 쉽게 적용 가능하다.export default { ssr: true, // 서버 사이드 렌더링 활..

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하게 되고, 클라이언트에 ..