전체 글 (49) 썸네일형 리스트형 [Nuxt] useAsyncData 중복 API 호출 막기 Nuxt3 프로젝트에서 페이지를 새로고침을 하거나 같은 데이터를 패칭할 때 API가 두 번 이상 호출되는 문제가 생겼다. 중복 호출이 발생하는 이유Nuxt3는 SSR과 클라이언트 하이드레이션을 동시에 지원한다. 이 과정에서 동일한 데이터 패칭 로직이 서버와 클라이언트에서 각각 한번씩 실행될 수 있다. dedupe 옵션useAsyncData의 dedupe 옵션은 동일한 key로 중복 호출되는 API 요청을 제어하는 기능이다.dedupe 옵션을 사용하여 동일 key의 요청이 동시에 여러 번 발생하지 않도록 보장할 수 있다.cancel (기본값): 새 요청이 들어오면 기존 요청을 취소하고 새로 요청을 처리.defer: 기존 요청이 진행 중이면 새로운 요청을 만들지 않고, 기존 요청이 끝날 때까지 기다림. 사용.. 텍스트 에디터 사용 검토시 참고할만한 글 https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025 Which rich text editor framework should you choose in 2025? | Liveblocks BlogLooking to integrate a WYSIWYG editor into your JavaScript app? This comparison dives into the best frameworks available, including Tiptap, Lexical, BlockNote, and Slate.liveblocks.io Swiper 사용 시 슬라이드가 부모 너비를 넘는 문제 Swiper 너비가 부모의 너비를 넘어 화면이 늘어나는 현상을 발견했다.문제 상황 4개의 이미지를 16px 간격으로 보여주는 레이아웃을 구성하려고 했다.하지만 ImageCard 컴포넌트 내부에서 flex: 1 0 0 스타일이 적용되어 있었고,이로 인해 슬라이드 하나의 너비가 Swiper에서 계산한 너비를 초과하는 문제가 발생했다. ImageCard는 여러 화면에서 재사용되는 컴포넌트이기 때문에,컴포넌트를 직접 수정하기보다는 Swiper 쪽에서 슬라이드의 너비를 조정하는 방식으로 해결하기로 했다. 해결 방법 .swiper-slide { max-width: calc((100% - 48px) / 4); // (100% - 간격) / 화면에 보일 수) b.. [VUE] template render vs render function Vue 3에서 동적 컴포넌트를 임포트하는 두 가지 방식을 적용하고 비교해봤다. 1. 템플릿 방식- 코드가 직관적이고 가독성이 좋음- 일반적인 상황에서 권장되는 방식 2. 렌더 함수(h()) 방식 - 더 세밀한 프로그래밍적 제어가 가능함- 복잡한 렌더링 로직 구현에 유용함- 동적 컴포넌트 생성에 더 많은 유연성을 제공함import { h } from 'vue'const RenderComponent = { setup() { return () => h(currentComponent.value, { ...componentProps.value }); }}; 두 가지 렌더링 방식을 실제로 비교해본 결과, 템플릿 방식이 가독성과 사용성 측면에서 더 좋았다. 렌더 함수(h()) 방식도 .. [Sass] Sass @import의 이해와 @use 마이그레이션 @import는 Sass의 오래된 가져오기 방식으로, Dart Sass 3.0.0부터 완전히 제거될 예정이다. 대신 @use 규칙을 사용하는 것이 권장된다.Sass @import 마이그레이션 경고Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.@import의 주요 문제점전역 범위 문제모든 변수, 믹스인, 함수가 전역적으로 접근 가능라이브러리들은 이름 충돌 방지를 위해 접두사 필요@extend 규칙의 전역성으로 예측이 어려움성능 및 구조적 문제매 @import마다 스타일시트 실행 및 CSS 출력컴파일 시간 증가와 출력 비대화비공개 멤버나 플레이스홀더 선택자 정의 불가 마이그레이션 도구 사용법설치npm install -g sa.. [VUE] API 호출 중 로딩 화면 구현 Vue.와 Pinia를 사용하여 API 호출 중 로딩 화면을 구현하는 방법에 대해 설명한다. 로딩 상태 관리loadingStore.js 파일에서는 Pinia를 사용하여 로딩 상태를 관리한다.// loadingStore.js import { defineStore } from 'pinia';import { ref, computed } from 'vue';export const useLoadingStore = defineStore('loading', () => { // 로딩 상태를 추적하는 변수 const loadingCount = ref(0); // 로딩 카운트 증가 const increaseLoadingCount = () => { loadingCount.value++; }; // 로딩 카운트 감소 con.. [REACT] 기초 문법 학습 REACT장점HTML 재사용이 편리함컴포넌트 단위로 개발하기 때문에 분업하기 좋음React Native를 쓰면 React와 비슷한 문법으로 모바일 앱 개발이 가능프론트와 백 파트 분리 가능단점많은 자바스크립트로 웹페이지 크기가 커짐웹페이지 로드시 SEO에 악영향이 있을 수 있음간단한 사이트도 코드가 쓸데없이 복잡해짐JSX 문법html에 class 넣을 땐 classNamejsx문법에서는 class를 넣고 싶으면 className으로 사용변수를 html에 넣을 땐 {중괄호} { data }변수에 있던 값을 html에 넣는 작업을 데이터바인딩이라고 함html에 style추가시 style={} 안에 {}자료형 이렇게{ 속성명 : '속성값' } 형식으로 작성font-size 처럼 속성명에 대쉬기호를 쓸 수.. @font-face 속성 알고 쓰기 웹개발에서 폰트는 사용자 경험과 디자인에 중요한 역할을 한다. CSS의 @font-face 규칙을 사용하면 웹폰트를 효과적으로 구현할 수 있다.@font-face 기본 구조@font-face { font-family: "폰트 이름"; src: url("폰트 파일 경로") format("폰트 형식"); font-weight: 폰트 굵기; font-style: 폰트 스타일; font-display: 폰트 표시 방식; unicode-range: 유니코드 범위;} font-family폰트의 이름을 지정한다. 이 이름은 CSS에서 폰트를 참조할 때 사용된다. src폰트 파일의 경로와 형식을 지정한다. 여러 형식을 지원하기 위해 쉼표로 구분하여 여러 소스를 제공할 수 있다. font-weight폰트의 굵.. 이전 1 2 3 4 ··· 7 다음
