티스토리

코드조각가

검색하기

블로그 홈

코드조각가

bom2zzang.tistory.com/m

맛있는취나물 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Nuxt] useAsyncData 중복 API 호출 막기 Nuxt3 프로젝트에서 페이지를 새로고침을 하거나 같은 데이터를 패칭할 때 API가 두 번 이상 호출되는 문제가 생겼다. 중복 호출이 발생하는 이유Nuxt3는 SSR과 클라이언트 하이드레이션을 동시에 지원한다. 이 과정에서 동일한 데이터 패칭 로직이 서버와 클라이언트에서 각각 한번씩 실행될 수 있다. dedupe 옵션useAsyncData의 dedupe 옵션은 동일한 key로 중복 호출되는 API 요청을 제어하는 기능이다.dedupe 옵션을 사용하여 동일 key의 요청이 동시에 여러 번 발생하지 않도록 보장할 수 있다.cancel (기본값): 새 요청이 들어오면 기존 요청을 취소하고 새로 요청을 처리.defer: 기존 요청이 진행 중이면 새로운 요청을 만들지 않고, 기존 요청이 끝날 때까지 기다림. 사용.. 공감수 0 댓글수 0 2025. 4. 26.
텍스트 에디터 사용 검토시 참고할만한 글 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 공감수 1 댓글수 1 2025. 4. 12.
Swiper 사용 시 슬라이드가 부모 너비를 넘는 문제 Swiper 너비가 부모의 너비를 넘어 화면이 늘어나는 현상을 발견했다.문제 상황 4개의 이미지를 16px 간격으로 보여주는 레이아웃을 구성하려고 했다.하지만 ImageCard 컴포넌트 내부에서 flex: 1 0 0 스타일이 적용되어 있었고,이로 인해 슬라이드 하나의 너비가 Swiper에서 계산한 너비를 초과하는 문제가 발생했다. ImageCard는 여러 화면에서 재사용되는 컴포넌트이기 때문에,컴포넌트를 직접 수정하기보다는 Swiper 쪽에서 슬라이드의 너비를 조정하는 방식으로 해결하기로 했다. 해결 방법 .swiper-slide { max-width: calc((100% - 48px) / 4); // (100% - 간격) / 화면에 보일 수) b.. 공감수 0 댓글수 0 2025. 4. 12.
[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()) 방식도 .. 공감수 0 댓글수 0 2024. 12. 11.
[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.. 공감수 0 댓글수 0 2024. 11. 29.
[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.. 공감수 0 댓글수 0 2024. 11. 20.
[REACT] 기초 문법 학습 REACT장점HTML 재사용이 편리함컴포넌트 단위로 개발하기 때문에 분업하기 좋음React Native를 쓰면 React와 비슷한 문법으로 모바일 앱 개발이 가능프론트와 백 파트 분리 가능단점많은 자바스크립트로 웹페이지 크기가 커짐웹페이지 로드시 SEO에 악영향이 있을 수 있음간단한 사이트도 코드가 쓸데없이 복잡해짐JSX 문법html에 class 넣을 땐 classNamejsx문법에서는 class를 넣고 싶으면 className으로 사용변수를 html에 넣을 땐 {중괄호} { data }변수에 있던 값을 html에 넣는 작업을 데이터바인딩이라고 함html에 style추가시 style={} 안에 {}자료형 이렇게{ 속성명 : '속성값' } 형식으로 작성font-size 처럼 속성명에 대쉬기호를 쓸 수.. 공감수 9 댓글수 5 2024. 11. 16.
@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 댓글수 1 2024. 11. 15.
FormData와 JSON을 함께 보내는 방법 웹 개발을 하다 보면 서버로 데이터를 전송할 때 파일과 JSON 데이터를 동시에 보내야 하는 경우가 종종 있다. 이런 상황에서 multipart/form-data와 application/json 두 가지 Content-Type을 어떻게 함께 사용할 수 있을까?Blob 객체를 활용한 해결책이 문제의 핵심은 Blob 객체를 사용하는 것이다. Blob(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다루기 위한 객체다. 하지만 여기서는 JSON 데이터를 Blob으로 변환하여 FormData에 추가하는 방식으로 활용한다. 구현방법const formData = new FormData();formData.append('file', file);formData.append( .. 공감수 0 댓글수 0 2024. 11. 11.
[React + CKEditor] 이미지 서버 업로드 기능 구현 CKEditor로 이미지 서버 업로드 기능 구현하기.CKEditor 5에서는 기본 빌더를 통해 필요한 기능을 선택하여 에디터를 손쉽게 구성할 수 있다.먼저 CKEditor 5 Builder를 사용하여 필요한 기능을 고르고 에디터 기본 구성을 설정한다. CKEditor 기본 설정 - BasicEditor 컴포넌트// BasicEditor.jsximport { useState, useEffect, useRef } from "react";import { CKEditor } from "@ckeditor/ckeditor5-react";import { API_URL } from "@/constants/apiUrls";import UploadAdapterPlugin from "./UploadAdapter";impor.. 공감수 1 댓글수 1 2024. 11. 1.
[React18] TOAST UI Editor 적용 기록 React 18에 toast ui editor를 적용해보았다.설치 및 의존성 충돌 문제우선, @toast-ui/react-editor 패키지를 설치했다. npm install --save @toast-ui/react-editor하지만 React 18에서는 @toast-ui/react-editor와 의존성 충돌이 발생했다. 지금은 React 19의 베타 버전까지 나온 상황인데, 여전히 이 문제가 해결되지 않은 걸 보니 호환성 업데이트가 더 필요해 보였다. 해결 방법동일한 문제를 겪은 사람들이 많아서 관련된 GitHub 이슈를 찾아봤다.여러 가지 해결책이 제시되었지만, 그중 하나는 에디터 코어를 직접 사용하여 해결하는 방법이었다. 해당 이슈에서 한 사용자가 직접 수정한 소스를 공유해 주었는데, 그 링크는 이.. 공감수 0 댓글수 0 2024. 10. 24.
[React] useEffect 두 번 호출 : Strict Mode 검색 로직을 적용하기 위해 useEffect를 사용해보았다.그런데 렌더링 될 때 두 번씩 호출하고 있다. React 18부터는 Strict Mode에서 개발 중 일부 useEffect 훅이 두 번 실행되는 것이 의도된 동작이라고 한다.이로 인해 처음 마운트될 때 의도치 않게 두 번 호출되는 문제가 발생할 수 있다.Strict Mode// main.jsximport { StrictMode } from "react";import { createRoot } from "react-dom/client";import App from "./App.jsx";import "./index.css";createRoot(document.getElementById("root")).render( ,);Stri.. 공감수 2 댓글수 1 2024. 10. 18.
[vue-dompurify-html] a태그 새 창 열기 HTML 코드를 안전하게 추가하기 위해 v-html 대신 vue-dompurify-html 라이브러리를 사용하고 있다. 그런데 a 태그에 target="_blank"를 설정해도 새 창으로 열리지 않는 문제가 발생했다.이 문제는 DOMPurify의 기본 설정에서 target 속성을 제거하기 때문이다. 이를 해결하기 위해 DOMPurify의 Hooks 기능을 사용하여 target="_blank"를 강제로 추가할 수 있었다.// main.jsimport { createApp } from 'vue';import VueDOMPurifyHTML from 'vue-dompurify-html';const app = createApp(App);app.use(VueDOMPurifyHTML, { // DOMPurify는 h.. 공감수 0 댓글수 1 2024. 10. 16.
[React] createBrowserRouter와 <Routes>: 프로젝트에 맞는 라우팅 방식 선택하기 Next.js를 사용하면 라우터를 따로 작성하지 않아도 되지만, SSR이 필요 없는 가벼운 프로젝트를 만들기 위해 React로 프로젝트를 시작했고, 라우터를 직접 작성하게 되었다.React Router를 사용하는 방식에는 크게 두 가지가 있다.1. createBrowserRouterimport { createBrowserRouter, RouterProvider } from "react-router-dom";import Layout from "./Layout";import PublicPage from "./PublicPage";import LoginPage from "./LoginPage";import ProtectedPage from "./ProtectedPage";import { fakeAuthProv.. 공감수 2 댓글수 0 2024. 10. 10.
[VUE] Scoped 스타일에서 자식 요소 스타일링 : deep() Vue에서 스타일 캡슐화(Scoped Styles)가 적용되면, 자식 컴포넌트나 특정 HTML 요소에 스타일을 적용하기 어려워진다.:deep()을 사용하면 scoped 스타일이 자식 컴포넌트나 외부 라이브러리의 컴포넌트에도 영향을 줄 수 있다.적용 예시1. 부모 컴포넌트에서 scoped 스타일을 자식 컴포넌트에 적용:deep()을 사용하여 부모 컴포넌트의 scoped 스타일을 자식 컴포넌트에도 적용할 수 있다. 자식 컴포넌트의 텍스트입니다. 2. 라이브러리를 사용한 컴포넌트에 적용Swiper, Vue-datepicker와 같은 외부 라이브러리의 컴포넌트에 scoped 스타일을 적용할 때도 :deep()을 사용하여 스타일을 캡슐화된 범위 내에서 적용할 수 있다. Slide 1 .. 공감수 0 댓글수 1 2024. 10. 7.
[responsively] 반응형 웹 개발 테스트 도구 responsively다양한 기기에서 웹-앱 화면을 한번에 볼 수 있게 해주는 도구.다운로드 링크 Responsively App - A Web Developer's BrowserA dev-tool that aids faster and precise responsive web development.responsively.app 이미 설정되어있는 기기를 추가하거나 커스텀으로 사이즈를 넣어볼 수도 있다. 한번에 여러 디바이스를 체크하며 개발 할 수 있다.개발자 도구도 사용할 수 있고 그 외 여러 기능들이 있는 것 같다. 공감수 2 댓글수 1 2024. 9. 30.
[VUE3] swiper 부드럽게 흐르는 슬라이드, 일시정지 기능 추가 Swiper 카드 슬라이드가 천천히 흐르며, 일시정지/재생 버튼과 마우스를 올리면 슬라이드가 자동으로 일시정지되는 기능을 만들었다. 스와이퍼의 기본 멈춤 기능을 사용하면 슬라이드가 멈추긴 하지만, 이동이 완료된 후에야 멈추기 때문에 완전히 정지하는 데 시간이 걸린다. 이를 해결하기 위해 마우스를 올리거나 일시정지 버튼을 누르는 즉시 슬라이드가 멈추도록 controlSwiper 함수를 활용해 autoplay 멈춤 기능을 구현했다.스와이퍼가 부드럽게 흐르도록 하기 위해 swiper-wrapper 클래스에 transition-timing-function: linear !important;를 추가했다.또한, 스와이퍼 안의.. 공감수 0 댓글수 0 2024. 9. 26.
프로젝트에 유용했던 레퍼런스 모음 계속 추가할 예정. 1. 토스https://toss.im/ 토스금융의 모든 것, 토스에서 쉽고 간편하게toss.im 2. 토스 채용https://toss.im/career 토스 채용지금 바로, 토스커뮤니티에 합류하세요.toss.im 3. 그리팅https://www.greetinghr.com/ 그리팅 | 채용에 경쟁력을 더하다6000+ 기업이 선택한 채용관리(ATS) 및 인재풀관리(TRM) 솔루션 그리팅. 탁월한 지원자 경험으로 채용 프로세스를 혁신합니다. 그리팅은 당신의 채용경쟁력입니다.www.greetinghr.com 4. 바이브https://vibe.naver.com/about/ VIBENAVER VIBEvibe.naver.com 5. 네이버 웨일https://whale.naver.com/ko/ 네.. 공감수 1 댓글수 0 2024. 9. 25.
[VUE3] v-bind로 동적 css 처리 v-bind()를 사용하여 동적 스타일 제어 스크롤 이벤트에 따라 스타일이 동적으로 변하는 코드를 작성해야 할 일이 생겼다.스크립트에서 스타일을 강제로 적용할 수도 있었지만, 이번에는 v-bind를 활용해보기로 했다. 예제 v-bind-in-cssvue 공식 사이트에 정리된 예제다.한눈에 다 알아 볼수 있다. 저렇게 간단하다니. hello 활용스타일에 들어갈 변수를 선언하고 스크롤 이벤트를 받아 특정 케이스에서 변수의 값을 변경시켰다.강제로 element에 style을 변경시키는 것보다 깔끔하게 코드를 작성할 수 있다/ 안녕 공감수 0 댓글수 0 2024. 7. 31.
[VUE3 router] Navigation Guards로 로그인 페이지 이동 처리 라우터 네비게이션 가드를 활용하여 로그인 여부 체크 및 페이지 이동 프로젝트마다 라우터 네비게이션 가드를 사용해 로그인 상태를 확인했다.버전이 업데이트될 때마다 약간씩 수정해보았지만, 전체적인 구조는 비슷한 것 같다. routes meta 필드 추가라우터의 meta 필드에 requiresAuth를 추가했다.requiresAuth가 true인 경우: 로그인이 필요한 페이지 - 마이페이지requiresAuth가 없거나 false인 경우: 로그인 체크가 필요 없는 페이지 - 로그인, 회원가입// routerconst routes = [ // 마이페이지 { path: '/my-page', name: 'myPage', meta: { title: '마이페이지', requiresAuth: true, }.. 공감수 0 댓글수 1 2024. 7. 23.
[Pinia] Setup Stores 방식에 pinia-plugin-persistedstate 사용하기 기본적인 persist 적용 방법을 기록한다.설치$ npm i pinia-plugin-persistedstate 설정// main.jsimport { createPinia } from 'pinia'import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()pinia.use(piniaPluginPersistedstate) 사용setup 방식에서 저장할 값은 return 처리를 해야한다.// authStore.jsimport { defineStore } from 'pinia';import { ref } from 'vue';export const useAuthStore = defineStore( 'au.. 공감수 0 댓글수 0 2024. 7. 16.
[메일폼] mobile mail form font size 탐구 PC에서 메일을 확인할 때는 글씨가 적당한 크기로 잘 보이지만, 같은 메일을 모바일에서 확인할 때 글씨가 깨알만하게 작아져서 잘 보이지 않는 경우가 있다. 이 문제는 특히 네이버 메일 앱에서 발생하는데, 동일한 메일을 구글 메일 앱에서 확인할 때는 폰트 크기가 잘 보인다.(좌 네이버, 우 지메일, 케세이퍼시픽 메일)네이버와 구글 메일의 차이점네이버와 구글 메일 앱에서의 폰트 크기 차이는 scale 처리 방식에서 비롯된 것으로 보인다.네이버 메일네이버 메일에서는 모바일 메일로 전환 시 transform scale을 사용하여 비율에 맞춰 줄이면서 글자 크기도 함께 줄어든다. ... 이때, 메일 상단의 "글자가 더 잘 보이도록 해드려요." 버튼을 누르거나 가+ 로 폰트 크기를 키우면, 폰트가 있는 태그마다 .. 공감수 0 댓글수 0 2024. 7. 11.
[JS] FileReader를 사용하여 file을 Base64 문자열로 변환하기 보통 파일 업로드를 할 때 폼데이터(FormData)를 사용하여 파일을 전송하지만, 이번에는 서버 측에서 Base64 문자열로 파일을 전송해 달라는 요청을 받았다. FileReader를 사용하여 파일 읽기readAsDataURL 매서드를 사용하여 base64 문자열로 변환했다. // 파일 -> base64 로 변환하는 함수 async getFileBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); // 파일을 Base64 데이터 URL로 읽음 reader.readAsDataURL(file); // 파일을 읽는데 성공했을 때 호출.. 공감수 0 댓글수 0 2024. 7. 9.
[Angular] @ViewChild를 활용한 스크롤 이벤트 처리 div의 스크롤이 바닥까지 갔는지 체크하고 동적으로 class 변경하는 처리@ViewChild 활용스크롤 영역에 템플릿 참조 변수 추가// html // 내용 생략 블라블라 @ViewChild를 사용하여 요소에 접근// tsimport { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';@Component({ selector: 'app-test-scroll', templateUrl: './test-scroll.component.html',})export class TestScrollComponent implements AfterViewInit { @ViewChild('scrollAreaWrapper', { static: .. 공감수 0 댓글수 0 2024. 6. 17.
[Jenkins] build script node version 변경 webpack에서 vite로 전환한 프로젝트를 젠킨스에서 빌드하는데 오류가 발생했다.1. 오류 로그 확인import { performance } from 'node:perf_hooks' ^SyntaxError: Unexpected token { at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12).. 공감수 1 댓글수 0 2024. 5. 28.
[Vite] webpack에서 vite로 전환하기 Webpack에서 더 빠르고 간편한 Vite로 전환한 기록 Vite로 전환하는 방법 두가지1. 기존 프로젝트를 수정하여 Vite로 전환하기2. 신규 프로젝트를 Vite로 생성하고 기존 소스를 이동하기 1. 기존 프로젝트를 수정하여 Vite로 전환하기vite 라이브러리 설치$ npm install vite @vitejs/plugin-vue --save-dev vite.config.js 파일 생성// vite.config.jsimport { fileURLToPath, URL } from 'node:url';import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';// https://vitejs.dev/config/export defau.. 공감수 0 댓글수 0 2024. 5. 27.
[CSS] 모바일 영역을 고려한 CSS 단위 (아이폰 사파리 100vh) 반응형 웹사이트를 만들 때, 아이폰 사파리에서 주소창의 높이로 인해 이상한 스크롤이 생기는 문제가 있어 이를 해결하기 위해 다양한 접근 방법을 고려해 보았다. 해결 방법 3가지1. -webkit-fill-availableApple 기기에서만 작동하는 방법이다.단순히 높이를 구하는게 아니라 위아래 값을 계산해야 했는데, 이 방법은 효과적이지 않았다. @supports (-webkit-touch-callout: none) { height: -webkit-fill-available; } 2. JS & CSSJavaScript로 뷰포트 높이를 계산하고 CSS 변수로 설정하여 사용하는 방법이다.// jsconst appHeight = () => { const doc = document.documentEl.. 공감수 0 댓글수 0 2024. 5. 19.
PING TIMEOUT . 개발 테스트 URL로 로컬 주소를 넘겼다. 로컬과 테스트환경 모두 같은 와이파이에 연결되어있었지만 테스트 URL에 연결하면 브라우저에서 TIMEOUT이 발생했다. 정확한 확인을 위해 테스트환경에서 ping [192.168.xx.xx]를 보냈다. 여기서도 타임아웃이나네? DNS FLUSH를 시도했다 -> 실패 호오옥시나해서 네트워크를 확인하니 랜선이 쎄하다. 랜선에 연결된 IP주소로 로컬주소를 전달하고 있었다. 와이파이 설정에 있는 IP주소로 다시 전달드렸다. 성공...! 공감수 0 댓글수 0 2024. 4. 22.
[JS+VUE] 자바스크립트로 툴팁 위치 제어하기 ( 스크롤 영역 툴팁 ) 스크롤이 가능한 화면에서 툴팁이 잘리는 문제를 자바스크립트로 툴팁 위치를 잡아서 해결했다. 1. 문제 부모 요소 overflow scroll 2. 시도 z-index 처리 부모 overflow x와 y의 속성을 다르게 주기 3. 해결 문제 상황 재연을 위해 W3Schools을 참고하여 간단한 화면을 만들었다. Hover over me Tooltip {{ i }} html에 툴팁으로 사용할 div id="tooltip"을 추가하고 기존 툴팁 영역에는 @mouseover, @mouseout 이벤트를 추가했다. Hover over me 스타일 파일에는 기존 hover 관련 css코드를 제거하고 새로 생긴 #tooltip css를 추가했다. 툴팁 position은 absolute로 넣었다. .tooltip-te.. 공감수 0 댓글수 0 2024. 3. 13.
[VUE3] 새로운 데이터 바인딩 패턴: defineModel 활용하기 지금까지는 주로 props와 emit을 사용하여 데이터 흐름을 관리해왔다. 하지만 최근에 더 편리하게 데이터를 교환할 수 있는 defineModel이 나와 사용해봤다. 1. Props와 Emit 부모 컴포넌트는 자식 컴포넌트에게 데이터를 props로 전달하고, 자식 컴포넌트는 이벤트를 emit하여 부모 컴포넌트에게 데이터를 전달한다. 이 방식은 간단하고 직관적이지만, 깊은 컴포넌트 트리에서 데이터 전달이 번거롭다. 2. V-model 양방향 바인딩을 사용할 수 있는 디렉티브다. 3. defineModal vuv3.3에서 새롭게 추가된 기능이다. 커스텀 컴포넌트에 직접 v-model을 적용할 수 있다. 3-1. 활용하기 vite.config.js 수정 webpack을 사용하는 경우 vue-loader@^1.. 공감수 0 댓글수 0 2024. 3. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.