목록전체 글 (128)

개발자로 전향중

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
TpyeScript 어노테이션이란?

(number: string | number): string은 TypeScript의 타입 어노테이션(annotation)입니다. 이 어노테이션은 함수의 매개변수 number가 문자열 또는 숫자 타입이 될 수 있으며, 함수의 반환값은 문자열 타입이라는 것을 나타냅니다. 여기서 string | number는 유니온 타입(Union Type)입니다. 즉, number 매개변수는 문자열 또는 숫자 중 하나가 될 수 있다는 뜻입니다. 함수의 매개변수 타입이 유니온 타입으로 지정되면 해당 매개변수는 문자열 또는 숫자로 전달될 수 있습니다. 함수의 반환값이 string 타입이므로, numberComma() 함수는 항상 문자열을 반환합니다. 예를 들어, 다음과 같이 사용할 수 있습니다. function numberCo..
Typescript 2023. 3. 14. 10:04
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
이틀 고생한 IOS mobileWeb Scroll

step1. 아이폰의 UI는 어쨌든 HTML을 벗어나지 않으므로 html,body에 min-height 값을 준다. html, body { /* 배경 색상 지정 */ background-color: black; /* 사파리 새로고침 막기 */ overflow-x: hidden; /* overscroll-behavior: contain; */ min-height: calc(var(--vh, 1vh) * 100); min-height: -webkit-fill-available; } step2. 상단 새로고침을 없애고 싶을때 나는 overscroll-behavior: contain을 하라고 하지만 나는 졸라게 안먹음..Apple 포럼에서 찾음! addEventListener으로 높이에 도달시 e.prevenD..
Typescript 2023. 1. 19. 18:55
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
Mbti input radio로 선택지 주고싶을때

나중에는 더 간결하게..ㅠ import React, { useEffect, useState } from "react"; import styled from "styled-components"; import { newUserMbti } from "../../../redux/features/userSlice"; import { useAppDispatch } from "../../../redux/hook"; const SelectMbti = () => { const dispatch = useAppDispatch(); const [eClick, setEClick] = useState(false); const [iClick, setIClick] = useState(false); const [sClick, setSC..
Typescript 2022. 11. 28. 16:29
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
typescript redux toolkit 객체 타입 주기

import { createSlice } from "@reduxjs/toolkit"; //작은 slice 를 모아서 store를 만들때는 import type { PayloadAction } from "@reduxjs/toolkit"; interface WearclothesProps { Cap?: { CapClothes: string; index: number; }; Top?: { TopClothes: string; index: number; }; Pant?: { PantClothes: string; index: number; }; Outer?: { OuterClothes: string; index: number; }; Dress?: { DressClothes: string; index: number; ..
Typescript 2022. 11. 4. 12:50
이전 Prev 1 2 3 4 5 6 7 ··· 16 Next 다음