'Frontend' 카테고리의 글 목록

Cloudinary를 활용한 이미지 프로세싱

2026.02.03·

Frontend/Processing

Cloudinary이미지와 비디오를 대규모로 관리, 변환, 최적화 및 전달할 수 있는 클라우드 기반 미디어 플랫폼.이미지 스토리지로써 Cloudinarycloudinary는 저장할 이미지를 받을 때 몇가지를 기대한다. 1. multipart/form-data 요청2. formData로 감싸진 데이터3. formData의 "file" 필드에 Blob으로 변환된 이미지 데이터4. formData"의 upload_preset" 필드에 설정된 프리셋 값const uploadImage = (blobImage) => { const formData = new FormData(); formData.append("file", blobImage); formData.append("upload_preset", CLOUD..

React + Vite

2026.01.30·

Frontend/React

React + Vite빠른 개발 서버와 번들링 성능을 제공하는 모던 React 개발 환경 조합Npmnpm create vite@latest . // 현재 폴더 위치에 생성폴더 구조 index.html○ Vite 프로젝트의 진입점.○ CRA와 달리 public이 아닌 프로젝트 루트에 있음. src/main.tsx○ React 엔트리 포인트.○ React 앱을 DOM에 마운트. src/App.tsx○ 최상위 컴포넌트.○ 라우터, 레이아웃의 시작점. src/assets/○ import해서 사용하는 이미지, 폰트 등을 담는 폴더.○ 번들 대상. public/○ 빌드 과정없이 그대로 복사되는 정적 파일 등을 담는 폴더. vite.config.ts○ Vite의 전역 설정 파일.○ 번들링, 개발 서버, 플러그인, 경..

Tiptap

2026.01.30·

Frontend/Tiptap

TiptapWYSIWYG 에디터 라이브러리.Npm에디터 핵심 엔진npm install @tiptap/core 에디터 React 바인딩npm install @tiptap/react 에디터 기본 Node(heading, paragraph, image..),Mark(bold, italic..) extensionnpm install @tiptap/starter-kit에디터 생성import { EditorContent, useEditor } from "@tiptap/react";import StarterKit from "@tiptap/starter-kit";import './App.css'function App() { const editor = useEditor( { extensions: [ ..

Dynamic

2024.08.24·

Frontend/Next.js

Dynamic동적으로 컴포넌트를 로드하는 기능을 제공하는 Next.js의 내장 기능/** @toast-ui/react-editor는 WYSISYG 에디터 라이브러리*/const Editor = dynamic(() => import('@toast-ui/react-editor') .then(mod => mod.Editor), { ssr: false });○ 위 코드에서 사용하는 위지위그 에디터가 서버에서 실행될 수 없고 클라이언트에서만 실행할 수 있을 땐 다이나믹처리를 해줄 수 있다.

Image

2024.04.15·

Frontend/Next.js

Image이미지를 최적화하는 Next.js의 내장 컴포넌트. 화면에 보일때만 로드하는 Lazy loading 기법 사용.사용법import Image from "next/image"const Product = () => { return( )} ○ Image 컴포넌트는 width, height 말고도 fill 이라는 속성으로 크기를 지정할 수 있다. fill은 포지셔닝이 된 부모요소를 기준으로 크기가 정해진다.○ src 속성은 public 폴더를 기준으로 상대 경로를 적는다.public 폴더 외부에 있는 이미지 파일을 사용할 때module.exports = { images: { remotePatterns: [ { protocol: 'https', ..

Tanstack Query

2024.02.21·

Frontend/Tanstack query

Tanstack Query서버 상태를 관리하기 위한 데이터 패칭 라이브러리Npmnpm install @tanstack/react-querynew QueryClient()캐싱 데이터와 상호작용할 수 있게 해주는 객체를 제공하는 생성자 함수.import { QueryClient, QueryClientProvider } from "@tanstack/react-query";const queryClient = new QueryClient();const App = ({ Component, pageProps }) => { return ( );};export default App;○ QueryClient() 생성자함수로 생성된 queryClient 객체는 쿼리 관리, 캐싱, 오류 처리, 인..

Axios

2024.01.19·

Frontend/Axios

AxiosPromise 기반의 HTTP 클라이언트 라이브러리Npmnpm install axiosGET 요청import axios from "axios";const Home = () => { const response = axios.get("https://learn.codeit.kr/api/members");}export default Home;○ 첫번째 인자는 앤드포인트, 선택적으로 두번째 인자에 config객체를 넣을 수 있다○ axios.get()이 반환하는 promise 객체에 있는 PromiseResult 객체의 data 프로퍼티 값은 fetch의 json()이 반환하는 Promise 객체의 PromiseResult 값과 동일하다POST 요청import axios from "axios";cons..

React Router Dom

2024.01.14·

Frontend/React Router Dom

React Router Dom리액트 애플리케이션에서 라우팅을 구현하기 위한 표준 라이브러리Npmnpm install react-router-domBrowserRouter라우팅 범위를 지정.import { BrowserRouter } from "react-router-dom";const App = () => { return ( {/* ... */} );}export default App;○ BrowserRouter 는 라우팅 범위를 감싸며, 내부에는 렌더링 시킬 컴포넌트들이 들어간다○ 렌더링 시킬 컴포넌트들은 같은 src폴더에 있어야 한다. (외부에 있으면 에러)Routes, Route렌더링 시킬 컴포넌트와 범위를 지정import { BrowserRouter, Routes, Ro..

create-react-app ※ 이젠 사용하지 않음

2024.01.14·

Frontend/React

Npmnpx create-react-app .폴더 구조 - index.html : React 애플리케이션이 렌더링될 DOM요소를 지정한다. React 애플리케이션은 이 루트 요소 안에 렌더링된다. - App.js : 페이지의 구조 및 레이아웃을 정의하고, 다른 컴포넌트들을 조합하여 렌더링한다. - index.js : React 애플리케이션의 진입점 파일로, 애플리케이션을 실제로 DOM에 렌더링하는 역할을 한다.리액트 실행- 프로젝트 폴더에서 npm run start (프로젝트 폴더가 아닌 폴더에서 실행시 오류)

React Hook Form

2024.01.13·

Frontend/React Hook Form

React Hook Form리액트 환경에서 폼의 유효성을 검사하는 라이브러리Npmnpm install react-hook-formuseForm유효성 검사를 위한 여러 프로퍼티들과 메서드들을 가진 객체를 반환하는 메서드import { useForm } from "react-hook-form";const Form = () => { const formTools = useForm({ mode: "onChange", // 실시간 감지 defaultValues : { // 필드 초기 값 email: "", password: "", } }); return ( );};export default Form;○ useForm의 인자에 { mode: "onChange" } 를 ..

Next.js v16

2024.01.10·

Frontend/Next.js

Next.jsReact기반의 풀스택 웹 프레임워크Npmnpx create-next-app@latest .폴더 구조.├─ app/│ ├─ favicon.ico│ ├─ globals.css│ ├─ layout.tsx│ └─ page.tsx│├─ public/│├─ .gitignore├─ next.config.js├─ package.json├─ package-lock.json├─ tsconfig.json└─ eslint.config.mjs app 폴더○ next.js의 App Router에서 사용하는 핵심 폴더로, 페이지, 레이아웃, API 라우트 등을 파일 기반 시스템으로 자동 라우팅하는 곳.○ URL이 루트일 경우 app/page.tsx가 페이지 컴포넌트가 되고, URL이 /login일 경우 app..

Context API

2024.01.10·

Frontend/React

Context API프롭 드릴링을 방지하기 위한 React의 내장 모듈createContextcontext를 생성하는 함수import { createContext, useState } from "react";const LanguageContext = createContext();const LanguageProvider = ({ children }) => { const [language, setLanguage] = useState("ko"); const toggleLanguage = () => { language === "ko" ? setLanguage("en") : setLanguage("ko"); } return( {children} )}export default ..

티스토리툴바