파일업로드

들어가며 프론트단을 개발하면서 데이터를 post 해야하는 상황이 항상 생긴다. 이번에는 유저가 파일과 텍스트를 올렸을 때 그 안의 내용을 post 하는 상황이었다. formData를 처음 써보는거라 많은 고민을 했다. 그리고 백앤드 개발자 분에게 전송이 제대로 되었는지 계속 물어봐야해서 좀 미안하기도 했다.. 아무튼, formData로 데이터 post 하는법을 알아보자~! 본문 먼저 폼을 만들어준다. 나는 유저가 설명을 입력하고 파일을 업로드하도록 만들었다. 제출! 여기서 textarea에 받은 value 값과 input을 이용해 올린 파일이 데이터로 전송될 것이다. 처음에는 리액트쿼리를 이용하지 않고 짰다가 리액트 쿼리를 이용하면 좀 더 간편하게 보여진다고 해서 리액트 쿼리를 이용했다. 리액트 쿼리를 ..

리액트 프로젝트에서 POST 기능을 구현하는데 파일을 업로드하는 부분도 만들어야 했다. 이 페이지는 내가 마크업을 하지 않아서 기능만 구현하고 있었다. 프로젝트 발표 후 웹접근성을 다시 고려해 리팩토링을 하고 있던 도중 문제를 발견했다. 파일업로드 부분은 tab key로 접근이 안된다는 점이다. 마크업을 살펴봤을 때 input이 display: none; 상태여서 접근이 불가능 했다. 그래서 고민을 하다가 tabIndex 를 주자 싶어서 코드를 수정했다. 코드를 수정한 부분은 div에 tabIndex 속성을 부여했다. 근데 여기서 tabIndex 만 주면 밑과 같이 eslint 가 경고를 한다. 이 오류를 해석했을 때 tabindex는 대화형 요소에서만 선언해야 합니다. 라고 알려주는 것이다. 잘 이해가..