개발/React10 multipart/form-data 파일 업로드하기 게시판에서 선택한 파일을 multipart/form-data 형식으로 업로드 해야하는 상황입니다. multipart/form-data 는 백엔드 할때도 까다롭게 느껴졌는데 다시 프론트에서 만나게 됐어요. 이제 다시 만나도 당황하지 않기 위해서 첨부파일 업로드 기능을 구현하면서 새롭게 알게된 점을 정리해놓겠습니다! ✔ 개념 Multipart/formdata 란? 이 방식은 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용합니다. hi.png 라는 이름을 가진 파일을 올리려고 할 때, 우리는 hi.png 파일 뿐만 아니라 해당 파일의 이름, 사이즈 등을 같이 저장하고 싶어합니다. 이럴 때 해당 파일과 파일 정보를 같이 전달하기 위해서 multipart/formdata 를 사용합니다. ✔ 해결 방법 For.. 2022. 10. 12. [React] useMutation() 은 a single variable or object 만 넣을 수 있다 게시글 작성 페이지를 구현하면서 useMutation 을 사용하고 있습니다. 그런데 오늘 parameter 두 개 받는 api 를 useMutation 을 사용하여 호출하려고 하는데 도통 안되는 거예요 useMutaion은 object 형태 또는 하나의 변수를 전달해야 하는 것 을 모른 채 타입이 안 맞나? 코드가 문제있나? 하면서 하루종일 저를 의심했어요.... 물론 내 잘못 맞음 난 폭풍 구글링 했는데 왜 몰랐는가 반성하며 useMutation 에 대해 공부하다가 자겠습니다!! ✔ 개념 useMutation() 은 react query를 이용해서 서버에 데이터 변경 작업을 요청할 때 사용합니다. 데이터 조회는 useQuery() 를 사용합니다. useQuery의 경우 기본적으로 컴포넌트가 렌더링 될 .. 2022. 10. 12. [React] react-hook-form 개념, 장점 안녕하세요. 게시판 프론트엔드를 개발하면서 react-hook-form 이라는 것을 알게되었습니다. 개발하면서 모르는게 있을 때는 항상 찾아보긴 하지만, 시간이 조금만 지나면 명확하게 생각이 안나더라고요. 그래서 공부할겸 글로 생각 정리를 해두기로 했어요! 또, 제가 삐약이 시절에 어떤 생각을 하면서 개발했었는지 기록해두면 미래에 재밌을거라고 생각해서요. react-hook-form 을 발견했을 때는 코드 발견 -> -> 이게 뭐지? 왜 썼지? -> 그래서 어떻게 쓰지? 이 순서였어요. 그래서 이 순서로 적어보려고 합니다! ✔ 개념 react-hook-form 이란? form 의 효율적인 validation 이 가능한 리액트 라이브러리 복잡한 form 을 만들 때 간결한 코드 작성에 도움이 된다. 불필요.. 2022. 10. 11. [React] webpack 설치하기 1 create-react-app 명령어 없이 webpack 설치하기 1. npm init 전부 엔터치다가 author 만 입력 author : 본인이름 - > package.json 파일이 생성된다. 2. npm i react react-dom i : 설치 단축어 package.json 파일의 dependencies 에 생성된다 3. npm i -D webpack webpack-cli -D : 개발할때만 쓰인다를 의미하는 옵션. 실제 서비스에는 웹팩 필요 x package.json 파일의 devdependencies 에 생성된다. 4. npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader npm i react-refresh @pmm.. 2022. 2. 15. 이전 1 2 3 다음
