Frontend7 [TypeScript] interface와 type의 차이가 궁금하다! interface 와 type 은 타입스크립트에서 타입을 정의하는 방법으로, 둘 다 유사한 기능을 가졌지만 몇 가지 차이가 있다. 확장성 : interface는 확장이 가능하다. 같은 이름의 interface를 여러 번 선언하면 자동으로 합쳐진다 interface User { name: string; } interface User { age: number; } // User = { name : string; age: number; } 가 된다. 구문 : type은 다양한 구문을 지원한다. 예를 들어 | & 같은 것들이 사용 가능하다. type User = { name: string; age: number; } | { name: string; }; 결론은 개발자의 성향에 따라 다르고 프로젝트의 진행 방향에.. 2023. 10. 26. [React] 이미지 선택 Input에서 라벨을 눌렀는데 파일 선택 창이 왜 나올까? 원래는 위처럼 파일 선택 버튼과 선택된 파일 없음이라는 라벨? 이 자동으로 나왔었다. 그러나 저 라벨을 누르면 이미지 선택 창이 나오는 부분이 불편하다고 피드백을 받았다. 원래의 코드는 아래와 같다. import React, { useRef, useState } from 'react'; import axios from 'axios'; import { Modal, ModalOverlay } from '../../assets/Modal.jsx'; import Button from '../../assets/buttons/Button.jsx'; import { CancelButton } from './EditProfile.jsx'; import { useAuthStore } from '../../store/st.. 2023. 10. 1. [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. 이전 1 2 다음
