개발/React11 forEach, for...of, for...in 차이 안녕하세요 react 에서 for문을 사용하였는데 for보다는 forEach를 사용하는게 좋을 것 같다는 피드백을 들었습니다. 그래서 forEach로 바꿔봤더니 더 간단하더라고요! forEach, for of, for in 때에 따라 맞는걸 사용하면 된다고 들었습니다만, 모르니까 공부 시작!! ✔ forEach 문 배열의 요소와 인덱스 모두에 접근할 수 있습니다. 반면 예외를 던지지 않고는 forEach()를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 forEach()가 적절한 방법이 아닐지도 모릅니다. mdn에 forEach 검색하니까 바로 for 문을 forEach() 로 바꾸는 방법이 나왔습니다. 이후가 훨씬 깔끔하죠? const items = ['item1', 'item2', 'item3'].. 2022. 10. 13. 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. 이전 1 2 3 다음
