분류 전체보기 (51) 썸네일형 리스트형 [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폰트의 굵.. 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.. 이전 1 2 3 4 5 ··· 7 다음
