전체 글61 path를 따라가는 로딩화면 구현하기 ✈️path를 따라가는 로딩화면 구현하기import React from 'react';type LoadingProps = { width?: number;};export default function Loading({ width = 1200 }: LoadingProps) { return ( {/* 비행 경로를 따라 선을 그리기 위한 경로 */} {/* 비행기 모양 */} );}useLoadingrouteChangeStart(url, { shallow }) - 라우트.. 2024. 8. 16. ReferenceError: document is not defined (feat. Next.js + lottie) 프로젝트 잘 진행하다가 dev실행했을 때 갑자기 오류가 났다.... 팀원이 lottie를 적용한 toastify를 수정 후 그 PR이 develop 브랜치에 머지 후에 갑자기 아래와 같은 오류가 발생했다.. 보니 lottie가 문제. document is not defined 오류는 Next.js의 서버 측 렌더링(SSR) 환경에서 클라이언트 전용 코드가 실행될 때 발생한다. Lottie 애니메이션을 사용할 때 이 오류가 발생하는 이유는 Lottie 라이브러리가 DOM 요소에 접근하려고 하기 때문이다.해결하기 위해서는 클라이언트 측에서만 Lottie 애니메이션을 렌더링하도록 설정해야 한다.해결 방법) Lottie 컴포넌트 클라이언트 전용으로 설정하기// Lottie 컴포넌트를 클라이언트에서만 렌더링하도록.. 2024. 8. 14. Toast 공통 컴포넌트 만들기 (feat.react-toastify) react-toastify로 토스트 구현하기공통컴포넌트로 만들기 (성공, 실패, 에러, 멘트 프롭으로 받기)https://fkhadra.github.io/react-toastify/icons Icons | React-ToastifyBuilt-in iconsfkhadra.github.io error)react-toastify의 타입스크립트 사용 시, position 속성이 string 타입으로 정의되어 있어서 발생하는 오류다. position 속성은 ToastPosition 타입으로 설정해야 한다.import React from 'react';import { ToastContainer, ToastPosition, toast } from 'react-toastify';import 'react-toastify.. 2024. 8. 8. axios interceptors 설정하기(feat.cookie) 🍪axios interceptors 설정하기(feat.cookie)1. axios 인터셉터 설정const axiosInstance = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL, headers: { 'Content-Type': 'application/json', },});2. 요청 인터셉터 설정axiosInstance.interceptors.request.use( async (config: InternalAxiosRequestConfig) => { const excludedUrls = ['/auth/tokens']; if (excludedUrls.some((url) => config.url?.includes(url))) {.. 2024. 8. 6. react-hook-form + yup = 회원가입/로그인(feat.쿠키) ✨회원가입react-hook-form & yup으로 폼 제출하기👇🏻기본 틀 const { register, handleSubmit, formState: { errors, isValid }, trigger, } = useForm({ resolver: yupResolver(authSchema), mode: 'all', }); // confirmPassword를 제외하고 폼 제출 const onSubmit: SubmitHandler = ({ confirmPassword, ...data }) => { console.log('폼 제출', data ); }; return ( .. 2024. 8. 2. input 공통 컴포넌트로 만들기 (feat. react-hook-form + yup) 리액트 훅 폼+yup을 사용해 input 공통 컴포넌트 만들기✨초기작업타입에 따라 input 분기처리하기import { passwordOffIcon, passwordOnIcon } from '@/libs/utils/Icon';import Image from 'next/image';import React, { useState } from 'react';import { FieldError, UseFormRegisterReturn } from 'react-hook-form';type InputProps = { label: string; name: string; type?: 'text' | 'password'; placeholder: string; register: UseFormRegisterRetur.. 2024. 8. 1. 라이브러리 없이 state로 폼 만들기 주요 기능폼 POST 요청폼 입력값 유효성 + 오류 메시지 출력하기아이돌 검색등록 후 list 페이지로 이동✅api GET으로 있는 아이돌 목록 띄우기페이지사이즈를 크게해서 모든 데이터를 다 불러오기… // get: 리스트 보여주기 const getIdolsData = async () => { setLoading(true); const result = await getIdols({ pageSize: 10000 }); const idolsList = result.list; // 기존 아이돌 리스트 뒤에 연달아 나와야 함 setIdolsData(idolsList ); }; useEffect(() => { getIdolsData(); }, []);🌻폼 채우고 데이터 .. 2024. 7. 31. [모던 리액트 Deep Dive] 15장. 마치며 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [15장] 마치며15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항✨유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자리액트 16.8에서 훅이 소개됐고, 훅 덕분에 함수형 컴포넌트의 개념이 정립됐다.17 버전은 기능.. 2024. 7. 31. [모던 리액트 Deep Dive] 14장. 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com[14장] 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈코드의 규모 증가 = 보안 취약점 노출 확률 증가14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS)웹사이트 개발자가 아닌 제3자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점✨da.. 2024. 7. 30. 이전 1 2 3 4 5 ··· 7 다음 반응형
