전체 글159 상품 이미지 여러장 등록하기 / img파일, text를 formData로 보내기 상품 이미지 여러 장 등록하기 제가 이번 프로젝트에서 맡은 역할 중 빌려줄 상품에 대한 정보를 등록하는 페이지가 있습니다. 바로 저희가 많이 사용했던 번개장터나 당근마켓처럼 사진을 업록드 하고 상품에 대한 글을 적는 페이지입니다. 먼저, 사진을 여러 장 업로드할 수 있는 기능을 만들어 보려고 합니다. 저는 우선 사진을 최대 5장까지 업로드할 수 있도록 하고 싶었습니다. 5장으로 상품 사진을 보여주기에 충분하다고 생각하였고 5장이 넘어가면 정해진 사이즈를 벗어난다고 생각하였기 때문입니다. 상품을 등록할 input 태그를 만들어 file을 첨부할 수 있게 하였고 label을 통해 커스터마이즈를 하였습니다. handleAddImages의 함수에서는 imageLists에 상품 사진을 올린 사진을 저장합니다. i.. 2023. 7. 16. 찜하기 기능 구현 (with 500error, 코드 문제점) const addInterestMutation = useMutation((productId: string) => axios .post(`${process.env.REACT_APP_API_URL}/api/members/interests`, { memberId: '1', productId: productId, }) .then((res) => { const { data } = res; setInterestId(data.interestId); }), ); const removeInterestMutation = useMutation( (interestId: string) => axios.delete(`${process.env.REACT_APP_API_URL}/api/members/interests`, { data.. 2023. 7. 16. React Hook Form 사용하기 제가 이번 프로젝트에서 빌려줄 상품에 대한 정보를 올리는 페이지를 만들어야 했습니다. 처음엔 form 태그를 이용하여 input 값을 전송하려고 하였습니다. 하지만 해당 상품 정보에 필수적으로 입력해야 하는 input 항목이 상품 사진, 최소 대여시간, 고정금액, 1일 당 추가금액, 연체료, 제목, 내용, 카테고리 총 8개의 항목을 적어야 했습니다. 이렇게 되면 하나의 항목이 변경될 때 마다 실시간으로 동기화되고 리렌더링이 됩니다. 이러한 점은 성능과 유지보수 관련하여 좋지 못하다고 생각이 들었습니다. 위의 문제점을 해결하기 위해 저는 React Hook Form 라이브러리를 사용하였습니다. 🤔 React Hook Form 이란? React Hook Form은 React 기반의 폼 관리 라이브러리 중 하.. 2023. 7. 12. CORS 에러 프리프로젝트 중 드디어 만나야 할 자식을 만났다. 지금까지 프론트 쪽은 대략적인 UI는 다 구현은 한 상태이고, 아직 백엔드에서 완벽하게 api를 만들지 않았지만 급하게라도 테스트 할 수 있게 배포된 api를 건내주었다. 🥹 이 전에 팀장님이 node.js로 간단하게 서버 만들어 놓은 걸로 데이터 받아와 로컬에서 테스트를 하고 있어서 axios 주소 변경을 하고 post를 해보았더니 위의 사진과 같은 에러가 났다. 😈 CORS에 대해 간단히 정리해보자면.. CORS는 Cross-Origin-Resource-Sharing 으로 교차 출처 리소스 공유 정책이다.,, 참고로 교차출처는 다른 출처라고 생각하자. 그럼 출처는 뭘까? 출처(Origin) : 우리는 Protocol, Host, 포트번호만 생각하자. .. 2023. 6. 21. [React] Link로 데이터 전달 프리프로젝트를 진행하다가 각 질문에 대한 질문을 클릭할 때, 질문 상세페이지에 해당 질문 데이터들을 넘겨주고 싶었습니다. 컴포넌트에 props로 데이터를 넘겨주기는 많이 하였는데, react-router-dom의 Link 태그로 감싸져 있는 태그는 어떻게 전달해야 할지 궁금했습니다. React Router 공식문서에서 보면 Link 혹은 Navigate을 사용할 수 있는데 이번에 나는 Link로 전달하는 방법을 알아보겠습니다. state state 속성을 사용하여 히스토리 상태 내에 저장되는 새 위치에 대한 상태 값을 설정할 수 있습니다. 이 값은 나중에 useLocation()을 통해 액세스 할 수 있습니다. let { state } = useLocation(); 위의 방법으로 사용하면 쉽게 데이터를 .. 2023. 6. 18. 이전 1 ··· 4 5 6 7 8 9 10 ··· 32 다음 728x90
