프로젝트-빵오더5 [React] No Image를 처리해보자 이미지가 처리되지 않으면 alt값과 엑박(?) 이 나오는 부분이 보기 싫었다. img 에 onError 처리를 하면 된다고 했다. 우선 handleImgError.js 라는 파일을 만들고 아래의 함수를 만들었다. export const handleImgError = (e) => { e.target.src = './noImage.png'; }; 그리고 img 요소 부분에 onError 처리를 했다. 아래 화면처럼 렌더링 된다. 그러나 이미지가 꽉 찬 부분이 보기 싫었다. 나같은 경우는 이미지 에러를 처리하는 함수 부분에 스타일을 주었다. export const handleImgError = (e) => { e.target.src = './noImage.png'; e.target.style.width = '.. 2023. 9. 30. [React] 이미지를 서버로 업로드하는데 왜 400 에러가 뜰까? 프로필 수정, 리뷰 작성 기능을 구현하는데 계속 이미지 부분에서 에러가 나서 원인을 찾아봤다. 생각보다 간단한 문제였다. const handleUpload = async (event) => { event.preventDefault(); const formData = new FormData(); formData.append('image', inputRef.current.files[0]); // input 태그를 통해 사용자가 선택한 첫 번째 파일 try { const response = await axios.post( `${process.env.REACT_APP_API_URL}/api/member/image`, formData, { headers: { 'Content-Type': 'multipart/for.. 2023. 9. 29. [Tailwind] 이미지의 정중앙에 텍스트를 넣어보자 위처럼 이미지 가운데에 텍스트를 넣는 방법이다. 흰 박스는 이미지라고 가정한다. 해결법 (tailwind) // 부모 요소에 relative // StoreImage 라는 styled-components를 만들어놨다고 가정 강남구 TOP 10 tailwind 를 이용하면 위처럼 작성하면 된다. 해결법 (css) {/* 부모 요소에 relative */} {/* StoreImage 라는 styled-components를 만들어놨다고 가정 */} 강남구 TOP 10 relative 요소를 원래 있어야 할 위치로부터 상대적으로 ~~만큼 이동한다. 반대로 이동한다고 생각하면 된다. div { position: relative; top: 20px; left: 20px; } 이 코드에선 아래로 20px, 오른쪽으로.. 2023. 9. 28. [React] 해시값을 인식하고 바로 이동하게 하기 메인 페이지에서 즐겨찾기 더보기를 눌렀을 경우 localhost:3000/mypage#favorite 로 이동하게 되는데, 가장 첫 페이지인 리뷰 탭이 보였다. useEffect(() => { const hash = window.location.hash; if (hash === '#review') setCurrentTab('리뷰 관리'); if (hash === '#order') setCurrentTab('주문 내역'); if (hash === '#favorite') setCurrentTab('즐겨찾기'); }, []); 이처럼 해시 값을 받아 브라우저 렌더링 시 해당 해시값으로 이동하도록 수정하였다. 2023. 9. 27. 이전 1 2 다음
