전체 글400 파일선택을 클릭하면 파일창이 2번 실행됐던 이유? / 이벤트 버블링 "파일 선택" 기능을 커스텀된 UI로 사용하고 싶어 아래와 같이 코드를 작성했는데 .... { console.log('파일선택 클릭 '); fileInputRef.current?.click(); }} > 파일 선택 왠걸 "파일선택"을 클릭하면 파일 탐색기(?) 파일 선택하는 창이 처음 실행이 되고 사진을 선택하니 한번 더 파일선택 창이 열리는게 아닌가 진짜 감이 안와서 (순간 리액트 strict모드인가 했는데 그건 아니었음) 원인을 찾아보니 바로바로 이론적으로(?)만 듣고 체감한적은 없던 "이벤트 버블링"에 따라 발생한 현상이었다. 클릭 이벤트가 onClick 핸들러를 통해 실행되는동안 해당 요소의 부모 요소들한테도 전달이 되어갔던 것!!! 따라서 이벤트 버블링을 막기 위해 stopPropagation(.. 2023. 7. 7. fetch를 통해 요청을 날릴때 headers는 쓰지 않기 fetch를 통해 post요청을 날리려고 할때 const fileInput = document.querySelector('#your-file-input') ; const formData = new FormData(); formData.append('file', fileInput.files[0]); const options = { method: 'POST', body: formData, // header를 아래처럼 셋팅하면 안된다고 한다 // headers: { // 'Content-Type': 'multipart/form-data', // } }; fetch('your-upload-url', options); Content-Type: multipart/form-data; boundary=----WebKi.. 2023. 6. 16. ESM과 CJS CommonJS 자바스크립트의 공식 스펙이 브라우저만 지원했기 때문에 이를 서버사이드 및 데스크탑 어플리케이션에서 지원하기 위한 노력이 있었다. 그걸 위해 만든 그룹이 CommonJS이며 여기선 자바스크립트가 범용적인 언어로 쓰이기 위한 스펙을 정의하고 있다. 그룹을 만들었을 때, 범용적인 언어로 만들기 위해서는 '모듈화의 개념'이 필요했고 이 그룹만의 모듈 방식을 정의하게 되었는데 그것이 바로 CommonJS 방식의 모듈화다. 다른 모듈을 사용할 때는 require 를, 모듈을 해당 스코프 밖으로 보낼 때에는 module.exports 를 사용하는 방식으로, Node.js에선 현재 이 방식을 사용하고 있다. [ 출처 ] https://baeharam.netlify.app/posts/javascript/.. 2023. 6. 15. Failed to load plugin 'jsx-a11y' declared in 'package.json 작업을 하는데 따로 어떤 코드를 추가하지도 않았는데 갑자기 npm start를 실행하니 맞딱드린 오류 [eslint] Failed to load plugin 'jsx-a11y' declared in 'package.json » eslint-config-react-app': Cannot find module 'deep-equal' Require stack: - /node_modules/aria-query/lib/elementRoleMap.js - /node_modules/aria-query/lib/index.js - /node_modules/eslint-plugin-jsx-a11y/lib/rules/aria-activedescendant-has-tabindex.js - /node_modules/eslint.. 2023. 6. 14. Next.js에서 mediapipe를 사용하려다 만난 ESM / CJS 의 차이 리액트에서는 잘만 작동되던 mediapipe를 회사에서 진행중인 nextjs에 끌고와서 사용을 하려고 하다보니 'export' not defined 였나 하는 에러를 만나면서 ESM과 CJS의 차이점에 대해 알게되었다. js가 돌아가는 node.js에는 CommonJS와 ECMAScript Modules 두 가지 모듈 시스템이 존재한다고 한다. CJS는 require/module.exports를 하고 ESM은 import/export문을 사용한다. CJS는 '동기적'으로 작동하고, ESM은 비동기적으로 작동하는데 따라서 ESM에서는 CJS를 import할 수 있지만, CJS에서는 require을 할 수 없다고 한다 (이유 : CJS는 Top-level Await를 지원하지 않는 '동기적'이라서) 따라서 .. 2023. 6. 9. [ Blob ] formData를 보내는데, 왜 blob으로 감싸니 정상적으로 전송이 되었을까? 내가 서버로 post를 날려야했던건 이미지 파일과 json형식의 데이터였는데 그 중 json형식 데이터를 아래처럼 보내고 있었다. formData.append("postDto", JSON.stringify(postDto)); 그러나 계속 발생했던 500 에러!!! json형식으로 만들어 보내는 걸 처음하다보니 어느 부분이 문제인지(받는 쪽 설정 문제인지 내쪽 문제인지조차 헷갈렸다) 하지만 백엔드분께서 금방 시원하게도 해결을 해주셨다 ㅎㅎ (최고>_ 따라서 서버가 JSON 형식의 데이터를 예상하고 있다면, JSON 형식의 데이터를 명시적으로 전달해야 했던 것 [수정 코드] const blob = new Blob([JSON.stringify(postDto)], { type: 'application/json'.. 2023. 6. 6. 이전 1 2 3 4 5 6 ··· 67 다음
