개발자로 전향중

구글 확장 프로그램 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과 ..

.parent { display: flex; flex-direction: column; height: 100%; /* 부모 컴포넌트의 높이를 100%로 설정 */ } .header { /* 헤더 스타일 */ } .footer { /* 푸터 스타일 */ } .content { flex: 1; /* 헤더와 푸터를 제외한 모든 공간을 사용 */ overflow-y: auto; /* 내용이 넘치는 경우 수직 스크롤바 생성 */ } 가 기본 원칙 Body에 flex flex-col h-full 넣으면 3단분리 page.ts에 다시 flex flex-col h0full 넣으면 거기서 또 안에서 분리 원하는 content에 flex-1 추가하면 분리되고 분리된 나머지를 채울 수 있다 ㅅㅂ 존나 이거하는데 2시간 걸린..

파일이 캐싱이 되어 같은 파일일 경우 통신은 되지만 서버 전달은 안됨으로 주의! 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..

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 () => ..

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

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}를 통해 불러오기 가능!

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..

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_..