전체 글 (49) 썸네일형 리스트형 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( .. [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.. [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 이슈를 찾아봤다.여러 가지 해결책이 제시되었지만, 그중 하나는 에디터 코어를 직접 사용하여 해결하는 방법이었다. 해당 이슈에서 한 사용자가 직접 수정한 소스를 공유해 주었는데, 그 링크는 이.. [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.. [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.. [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.. [VUE] Scoped 스타일에서 자식 요소 스타일링 : deep() Vue에서 스타일 캡슐화(Scoped Styles)가 적용되면, 자식 컴포넌트나 특정 HTML 요소에 스타일을 적용하기 어려워진다.:deep()을 사용하면 scoped 스타일이 자식 컴포넌트나 외부 라이브러리의 컴포넌트에도 영향을 줄 수 있다.적용 예시1. 부모 컴포넌트에서 scoped 스타일을 자식 컴포넌트에 적용:deep()을 사용하여 부모 컴포넌트의 scoped 스타일을 자식 컴포넌트에도 적용할 수 있다. 자식 컴포넌트의 텍스트입니다. 2. 라이브러리를 사용한 컴포넌트에 적용Swiper, Vue-datepicker와 같은 외부 라이브러리의 컴포넌트에 scoped 스타일을 적용할 때도 :deep()을 사용하여 스타일을 캡슐화된 범위 내에서 적용할 수 있다. Slide 1 .. [responsively] 반응형 웹 개발 테스트 도구 responsively다양한 기기에서 웹-앱 화면을 한번에 볼 수 있게 해주는 도구.다운로드 링크 Responsively App - A Web Developer's BrowserA dev-tool that aids faster and precise responsive web development.responsively.app 이미 설정되어있는 기기를 추가하거나 커스텀으로 사이즈를 넣어볼 수도 있다. 한번에 여러 디바이스를 체크하며 개발 할 수 있다.개발자 도구도 사용할 수 있고 그 외 여러 기능들이 있는 것 같다. 이전 1 2 3 4 5 ··· 7 다음
