시작하는 중

이 글에서 file reader를 활용한 방법을 포스팅해주셔서 참고했다. 일단, 이전의 포스팅한 드래그 앤 드롭 업로드를 통해서 미리보기 이미지까지 구현해볼 것이다. https://developer.mozilla.org/ko/docs/Web/API/FileReader FileReader - Web API | MDN FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 developer.mozilla.org 공식 문서에 따르면, FileReader는 비동기처리를 지원한다. 때문에 이벤트 핸들러를 통해서 데이터 처리를 알려주는 것 같다. 그래서 블로그의..

3줄 정리 1. scripts의 key에 해당하는 것을 입력하면 value에 해당하는 것을 CLI에서 실행시켜준다. 2. scripts는 시스템 환경 변수부터 참조하여 node_modules/.bin의 명령어까지 참조하여 실행시킨다. 3. concurrently 모듈을 통해서 편하게 한 터미널에서 실행시킬 수 있다. // package.json ... "scripts": { "dev": "concurrently \"yarn vite\" \"npx tailwindcss -i ./src/index.css -o ./src/output.css --watch\"", "build": "vite build", "preview": "vite preview" }, ... tailwind css를 도입하니까 css 쪽 관..

React 프로젝트를 진행하면서, 이미지를 업로드할 때 드래그 앤 드롭과 이미지를 보여주는 것으로 구현하고 싶었다. 찾다보니까 본 글인데, drag 이벤트를 활용하는 것이다. https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그 앤 드롭 API - Web API | MDN HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 draggable 요소를 마우스로 선택해 droppa developer.mozilla.org 읽다보면, drag된 아이템은 event의 dataTransfer에 담겨있다. 일단, 블로그 글대로 따라가기..

const [stepContentRef, setStepContentRef] = useState([useRef(null)]); const [stepImgFileRef, setStepImgFileRef] = useState([useRef(null)]); const addStepBtnHandler = () => { const lastIdx = orderArr.length + 1; setStepContentRef((prev) => { const newRefs = [...prev]; newRefs.push(useRef(null)); return newRefs; }); setStepImgFileRef((prev) => { const newRefs = [...prev]; newRefs.push(useRef(null)..