Frontend

인용 블로그 글: https://armadillo-dev.github.io/html/css/webfont-optimize/ 들어가며 웹폰트는 사용자 로컬에 폰트가 저장되어있지 않더라도 특정 폰트를 렌더링 할 수 있도록 도와준다. 이는 사용자 경험을 향상시키기 위한 다양한 방법 중 하나로 사용되고 있다. 이번 글에서는 현재 진행 중인 프로젝트에 웹폰트를 적용하며 발생한 문제점과 그 해결 방법을 공유하고자 한다. 문제점 진행 중인 프로젝트에서 발생한 문제점은 2가지였다. 웹폰트 깜빡임 현상 프로젝트에서는 아이콘을 표시하기 위해 Material Icons 웹폰트를 사용하고 있었다. 그런데 웹폰트가 로드되기 전, 아이콘에 대응되는 영단어가 표시되었다가 로딩이 완료되면 아이콘으로 바뀌는 현상이 발생했다. 서비스에..

Vue3: 프론트엔드 개발 프레임워크 Nuxt: Vue 개발 프레임워크, SSR 적용, SEO 적용, 개발 생산성 증가. 메타데이터, 쿠키 등의 솔루션 또한 제공 Quasar: 가장 대중적인 Vue UI 프레임워크(Capacitor 지원) Vite: 프론트엔드 웹팩, 롤업 등 패키지 관리 프레임워크 Vitest: Vite에서 제공하는 테스트 라이브러리(Jest와 같은 성격의 통합 테스트 툴) Pinia: 글로벌 스토어 라이브러리(Vuex, Redux와 같은 성격) Axios: 자바스크립트에서 가장 대표적인 RestAPI 라이브러리 Capacitor: 아이오닉을 이용해 앱, 웹, PWA 등 거의 모든 프론트 디바이스의 빌드를 지원하는 툴

캘린더 라이브러리를 쓰다가 문득 직접 만들어 보고 싶어서 vue3로 커스텀 캘린더를 만들었습니다. 뭔가 옛날스런 느낌으로 만들고 싶었기에 조악한 디자인... 을 갖고 있지만ㅋㅋㅋㅋㅋㅋ 소스코드 시작: {{ option }} {{ option }} {{ option }} ~ 끝: {{ option }} {{ option }} {{ option }} 생각보다 소스코드가 긴데 간단합니다. 기본적으로 Date() 객체를 사용하여 핸들링 했으며 윤년처리, 시작과 끝 날짜 에러 처리, 날짜 스트링 처리 등의 코드로 양만 많은 것이므로 쫄 것 없이 읽어보면 쉽게 이해됩니다.

각 마우스 포인터의 액션에 따른 태그의 형태를 지정할 수 있습니다. 1. a:link{ a 태그의 기본 속성을 지정할 때 사용합니다. } 2. a:hover{ a 태그에 마우스 오버시 속성을 지정할 때 사용합니다. } 3. a:visited{ 방문한 경우의 속성을 지정합니다. } 4. a:active{ 누르는 순간을 지정합니다. } 5. a: focus{ 포커싱 되는 경우의 속성을 지정합니다. } 5번의 경우에는 input태그 등이 다음 입력으로 인한 focus를 얻을 시 하이라이트를 주는 등의 액션에 이용될 수 있습니다.(예: 설문지, 이용약관 등) 방문함 방문안함 출처: https://rongscodinghistory.tistory.com/18 [악덕고용주의 개발 일기]

store.ts import { combineReducers, createStore, Reducer, Store } from 'redux' import {tokenReducer} from './token' const rootReducer:Reducer = combineReducers({ token:tokenReducer, }) const store:Store = createStore(rootReducer) export default store; token.ts import{ TokenState, TOKEN_REQUEST, TokenRequestAction } from './token.type' export const tokenState: TokenState = { token: 'test', } expor..