목록React (26)

개발자로 전향중

FE 렌더링 최적화 히스토리

구글 확장 프로그램 light house을 통해 분석 첫 분석 시 1. 첫번째 이미지! Next Image를 사용하여 Swiper image 해결 20점 상승! 2. https://maybe-b50.tistory.com/67 windowing 라이브러리 애플리케이션에서 긴 목록을 렌더링 하는 경우 ' Windowing' 이라는 기법을 사용하는 것을 추천합니다. 이 기법은 주어진 시간에 목록의 부분 목록만 렌더링 하며, 컴포넌트를 다시 렌더링하는 데 maybe-b50.tistory.com 사용해 봤으나 긴 목록이 아니었고 사용하더라도 성능이 오히려 떨어졌음..? Next hydrate가 더 효과적 나중에 많은 리스트를 렌더링할때 시도해보면 좋을 것 같다 3. 이부분을 해결해야하는데 기존에 page.js과 ..
React 2023. 11. 1. 13:44
Cloudflare 200MB이상 다이렉트 업로드

파일이 캐싱이 되어 같은 파일일 경우 통신은 되지만 서버 전달은 안됨으로 주의! const App = () => { useEffect(() => { const uppy = new Uppy({ debug: true, autoProceed: true, }) const onUploadSuccess = (el: string) => (file: File, response: any) => { const li = document.createElement('li') const a = document.createElement('a') a.href = response.uploadURL a.target = '_blank' a.appendChild(document.createTextNode(file.name)) li.appe..
React 2023. 10. 17. 15:17
CloudFlare Stream Cloud에 다이렉트 업로드

const UploadVideo = () => { const apiUrl = `https://api.cloudflare.com/client/v4/accounts/${accountId}/stream/direct_upload` const data = { maxDurationSeconds: 3600, } const [selectedFile, setSelectedFile] = useState(null) const [uid, setUid] = useState('') const [go, setGo] = useState(false) const handleFileChange = (e) => { setSelectedFile(e.target.files[0]) } const handleUpload = async () => ..
React 2023. 10. 17. 10:33
Buffer image 데이터 base64으로 만들기

fetch('/api/get-image') .then((data) => data.json()) .then((res) => { const base64EncodedText = Buffer.from(res.data, 'utf8').toString( 'base64' ) setUrl(base64EncodedText) }) const base64 = 'data:image/jpeg;base64,' var image = base64 + url //src={image}를 통해 불러오기 가능!
React 2023. 2. 1. 11:21
TypeScript 환경변수 설정하고 싶을때

1. .env 파일을 src밖에 만든다. 2. REACT_APP_NAVER 이런식으로 앞에 REACT_APP_을 꼭 붙인다 3. react-app-env.d.ts 파일을 만들어 타입을 지정! .d.ts 만 붙이고 앞에는 자유 /// declare namespace NodeJS { interface ProcessEnv { NODE_ENV: 'development' | 'production' | 'test'; REACT_APP_NAVER_CLIENT_ID: string; REACT_APP_NAVER_CLIENT_SECRET: string; REACT_APP_KAKAO_CLIENT_ID: string; REACT_APP_GOOGLE_CLIENT_ID: string; REACT_APP_GOOGLE_CLIENT_..
React 2022. 12. 2. 19:06
Redux-Toolkit TypeScript 여러개의 객체를 배열 추가할때

interface basketInfoProps { clothes: string; index: number; } interface basketproductProps { basketInfo: basketInfoProps[]; } 타입 정하기 basketproduct: { basketInfo: [{ clothes: "", index: 0 }], }, initialState basketproduct: (state, action: PayloadAction) => { state.basketproduct.basketInfo = [ ...state.basketproduct.basketInfo, ...action.payload.basketInfo, ]; }, createSlice dispatch( basketproduc..
React 2022. 11. 24. 18:40
React 체크박스 여러개 체크할 때 체크 value

const BuyProductSection = styled.section` width: 100%; height: 250px; .buyProductSection--header { height: 27px; border: 1px solid #cecece; border-radius: 13px; font-family: "Roobert"; font-style: normal; font-weight: 400; font-size: 18.3881px; display: flex; align-items: center; justify-content: center; color: #000000; } `; const BuyProductWrapper = styled.div` display: flex; justify-content: s..
React 2022. 11. 2. 15:27
react 표 만들고 싶을 때 참고

import React, { useEffect, useCallback, useState } from "react"; import styled from "styled-components"; import BackgroundImg from "../assests/image/DIP01.png"; import axios from "axios"; import { getCookie, setCookie } from "../utils/cookie"; const Main = () => { const [userName, setUserName] = useState(""); useEffect(() => { axios.get("http://dip.kia.co.kr:8000/sso/autologin", {}).then((res) =..
React 2022. 10. 26. 11:03
이전 Prev 1 2 3 4 Next 다음