뚝딱뚝딱 코딩 기록_

[Typescript_ HTMLInputElement] ❓ 문제 리액트 + 타입스크립트로 작업하던 중 change event (event.target.checked)의 타입 오류가 발생했다. label 태그의 onChange 이벤트로 체크박스의 체크 여부를 확인하는 과정에서의 타입 선언이 잘못 된 것이었다. type을 any로 선언해 주어도 되지만 any는 지양해야 한다는 얘길 들었기 떄문에.. 다른 방법을 찾아보았다. ❗ 해결 알고보니 label이 아니라 input에서 onChange 이벤트를 추가해서 React.ChangeEvent 타입으로 선언해 주면 되는 것이었다...! event 타입 문제 때문에 타입스크립트를 사용하기 어려웠는데 이번 기회에 정확하게 타입 공부를 해야 할 것 같다. 내가 보려고..

[React_input[type='file']] 같은 파일 연속 업로드 시 생기는 문제에 대해 알아보자 input 태그를 이용하여 이미지 첨부 및 미리보기 포스팅 👉 [리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 👉 [리액트] input 이미지 미리보기_🎨 ⚡ input file 업로드 코드 같은 파일 (이미지)를 연속으로 업로드 하는 경우 onChange 이벤트가 실행되지 않는 오류가 발생되었다. 즉, 같은 파일이 연속적으로 추가되지 않는 문제였는데 바로 input 으로 파일 추가시 value를 초기화하지 않으면 이전 값을 그대로 가지고 있기 때문이었다. ❓ 해결방법 💡 onClick 이벤트 발생시 value 초기화하기 e.target.value = null}> -..

[React] input 으로 첨부한 이미지 파일을 서버로 전송하는 방법에 대해 알아보자 1. 이미지 첨부하기 (input 태그 사용) import React from 'react'; export default function App() { return( ) } 2. 첨부한 파일 state에 저장하기 import React, {useState} from 'react'; export default function App() { const [image, setImage] = useState(); const addImageFile = event => { setImage(event.target.files[0]); }; return( addImageFile(event)} /> ) } onChange 이벤트를 이용..

input으로 첨부한 이미지 미리보기에 대해 알아보자 1. 파일 첨부 지난 포스팅에서 input 파일을 첨부하고 버튼 꾸미는 방법에 대해 소개했다. 궁금하다면 포스팅 참고하기 👉[리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 2. 이미지 경로 추가할 state 생성 `````` import React, { useState } from 'react'; // 생략 `````` const [imgPath, setImgPath] = useState(); // 단일 이미지 const [imgPath, setImgPath] = useState([]); // 여러 이미지 💡 이미지를 여러장 보여줄 경우 배열로 state를 생성한다. 3. label 태그에 onChange 이벤트 추..

input 파일 첨부 폼 꾸미는 법에 대해 알아보자    파일을 첨부하고 싶은 경우에 input 태그에 있는 type='file'을 사용한다. 그러면 아래 사진처럼 기본 폼이 나타난다.하지만 이렇게 나타나는 것은 예쁘지 않으니 label을 사용하여 꾸며보자  1. label로 감싸고 htmlFor를 이용하여 input과 연결하기 업로드 // 버튼에 들어갈 원하는 글자     💡 input : 반드시 label 안에 들어갈 필요는 없음 - 원하는 위치에 놓으면 됨    ❗ 주의할 점 : label의 htmlFor과 input의 id를 동일하게 입력해야 함  2. CSS로 label을 버튼처럼 꾸미기    - 예시.inputFile { display: none;}.inputFileLabel { co..