목록Frontend (27)
신비한 개발사전

Insomnia는 백엔드 RESTful API를 테스트해볼 수 있는 다양한 툴 중 하나다. 작성한 API를 JSON 파일 형태로 손쉽게 공유가 가능해서 같은 Insomnia 워크스페이스 멤버가 아니더라도 API를 테스트할 수 있다. 만약 백엔드로부터 Insomnia에서 돌리는 JSON 파일만 받은 상황이라면 아래 순서대로 불러오면 된다. 1. Collection 접근워크스페이스 멤버로 초대된 경우 해당 워크스페이스의 Collection을 클릭해 들어간다. 따로 워크스페이스가 없을 경우 무료로 제공되는 내 워크스페이스에서 새 Collection을 직접 생성해서 들어가도 무방하다. 2. JSON 파일 importCollection명을 클릭해 메뉴에서 [From File] 옵션을 선택하면 JSON 파일을 가져..
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..
Flux 패턴은 데이터의 흐름과 관련해 상태 관리 개선을 위해 고안된 아키텍처 관련 패턴이다. 상태의 단방향 흐름이 특징으로, 4가지 요소로 이루어진다:Action: 앱에서 발생하는 모든 이벤트를 뜻한다. 유저 입력이나 서버 응답 등 모든 데이터 변화는 Action을 통해 표현된다.Dispatcher: Action을 Store로 전달하는 역할을 한다. 각 Action이 알맞는 Store로 전달될 수 있게 한다. (Flux의 중심)Store: 앱의 상태를 저장해두는 곳이다. Store는 상태와 관련된 로직을 포함하며, Action을 통해 상태가 업데이트되면 해당 변경 사항을 View에 알린다.View: UI를 렌더링한다. 컴포넌트가 주로 이 역할을 수행한다. Store로부터 상태를 받아와 화면에 표시한다...
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..

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

완성하는 프로젝트보다 새로 시작하는 프로젝트가 몇 배는 더 많지만... 그럼에도 불구하고 매번 고민되는 부분 중 하나가 파일 디렉토리를 어떻게 구성할까다. 개발 생태계에는 디렉토리 구조마저 효율적으로 가져가기 위한 다양한 아키텍쳐가 존재하는데, 우연히 다른 프론트엔드 개발자와 대화하다가 Feature-Sliced Design(FSD) 패턴에 대해 알게 됐다. FSD는 기능 단위로 파일을 나눠 모듈화해서 코드의 유지 보수성과 확장성을 높이는 데에 중점을 둔다. 피쳐를 기준으로 코드를 수평적으로 분리해 구조 파악의 어려움을 해소한다. FSD 패턴에서는 코드를 레이어화해서 상위층에서 하위층으로 흐르는 방향을 따른다. 각 레이어별로 명확한 책임을 갖고있으며 레이어는 소분류 역할을 하는 슬라이스(slice)로 구..
프론트엔드 개발을 할 때 접근성에 대한 얘기를 많이 접하게 된다. 접근성은 신체적으로 불편한 사용자도 우리의 웹 프로덕트를 사용할 수 있을지를 나타낸다. 그리고 ARIA(Accessible Rich Internet Applications)는 이에 대한 표준을 제시한다. HTML에는 사용자 접근성을 높이기 위해 사용되는 스크린리더 등의 기기와도 상호작용할 수 있도록 앞에 aria- 키워드가 붙는 속성이 따로 있다. 이해하기 쉬운 대표적인 속성으로는 role과 aria-label이 있다.저장하기 위처럼 ARIA 관련 속성을 갖고 있으면 스크린리더를 사용하고 있는 사용자가 해당 엘리먼트를 탭했을 때 스크린리더가 aria-label과 role의 값을 읽어준다. [저장 버튼]이라는 것을 사용자에게 알려주는 것이다..