프론트엔드 관련24 React로 이미지 업로드 (with Blob, FileReader) 서론백엔드에서 이미지를 url로 보내주세요~라고 요청을 했는데, url?? 도대체 무슨 소리지...파일을 어떻게 보내지? 라는 생각이 들었다. Blob과 File 그리고 url 사이에서 무슨 소리지? 싶어서 찾아보았다.BlobBlob은 Binary Large Object의 약자로 주로 이미지, 오디오, 비디오와 같은 멀티미디어 파일 바이너리를 객체 형태로 저장한 것을 의미한다. 멀티미디어 파일들은 대다수 용량이 큰 경우가 많기 때문에, 이를 데이터베이스에 효과적으로 저장하기 위해 고안된 자료형이다. 이 Blob 객체는 blobpart와 optional type로 나누어져 있다. 먼저, blobpart는 Blob | BufferSource | String을 속성으로 지닌 값의 배열이다. optional t.. 2024. 7. 23. React Do not use or you will be fired 리액트 관련 글을 작성하면서 여러 가지를 테스트 중에 발견함.쓰지말라면 쓰지말라구~~ 2024. 7. 23. Node/React spawn einval 오류 단순히 CRA(create react app)을 해도 spawn EINVAL이라면서 명령어가 실행이 안되는 오류가 발생하였다.node.js를 LTS, v20.15.1 버전을 설치했더니 이런 오류가 발생하는 것이다. 이 이슈는 2024년 node의 보안 정책 업데이트로 발생한다. Node.js — Wednesday, April 10, 2024 Security ReleasesNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 단순히 node 버전을 다운그레이드해도 해결가능하다. 2024. 7. 15. 모달 컴포넌트를 통한 React 동작 원리 분석(with 자바스크립트 비동기와 리액트 동작 원리) 서론학교에서 후배랑 같이 코딩하는데, 후배가 인강을 보다가 코드가 제대로 작동이 안된다고 해서 그 원리를 세세하게 파악해보겠다. 먼저 단순히 버튼을 누르면 타이머가 돌아가고, 그 타이머의 동작이 끝나면 모달이 열린다.코드는 다음과 같다.(후배의 정확한 코드는 모르고 최대한 비슷한 환경을 구성하였다.) 모달 컴포넌트forwardRef랑 useImperativeHandle을 사용해서 재사용성있게 모달 컴포넌트(ResultModal)를 구현한 코드이다.useImperativeHandle을 사용했기 때문에, 모달 컴포넌트의 바깥에서 open() 함수를 통해 모달을 열 수 있다. import { forwardRef, useImperativeHandle, useRef } from "react";import { cr.. 2024. 7. 15. [React] vercel 배포시 http, https axios 통신 제대로 하는법 create-react-app으로 vercel 배포시 axios 오류가 발생했다.create-react-app으로 만든 리액트 웹 어플리케이션을 vercel를 통해서 간단히 배포할려 했는데 axios에서 제대로 url이 보내지지 않는 오류가 발생하였다. vercel로 백엔드 통신을 하기위해 axios를 이용하는데, axios.create로 만든 기본 url이 vercel의 기본 주소 url로 되어 있었다..env 설정을 "http://주소~~"로 추가하다보니까 "를 나타내는 %22가 url에 같이 추가된 모습니다. 해결법먼저 루트 디렉토리에 vercel.config 파일을 만들고 다음과 같이 작성한다.{ "version": 2, "rewrites": [ { "source": "/api/.. 2024. 6. 11. [React] 카카오맵 vercel 배포시 cors 해결법(kakao map with vercel) 카카오맵을 사용하는 도중 다음과 같이 401에러가 발생하였다. 이유를 알아보니까 proxy에러도 뭐도 아닌 그냥 간단한 이슈였다...카카오 맵 api의 도메인을 그냥 localhost로만 해둬서 그런 것이였다. 사이트 도메인을 추가함으로써 정상적으로 돌아왔다. 아래의 링크에서 내 어플리케이션 들어가고, 플랫폼에서 web의 도메인을 수정하면 된다.https://developers.kakao.com/console/app 카카오계정 accounts.kakao.com 2024. 6. 11. 이전 1 2 3 4 다음
