![]()
현재 만들고 있는 기술블로그(링크)에서 포스팅의 편리성을 위해 이미지 업로드를 할 수 있는 기능이 필요했습니다. 이를 위해 사진 이미지를 미리 보여주는 file input 컴포넌트를 만들었고, 이번 포스트에서는 어떻게 구현했는지 정리해 보고자 합니다. CSS에 대한 포스트가 아님으로 CSS 부분은 최소화하고, 구현 로직에 대해 코드로 설명하겠습니다. 컴포넌트 설계 무엇을 만들기 전에, 내가 만들고자 하는 것의 핵심 기능은 무엇인지, 어떻게 사용할 것인지 정리하는 부분은 정말 중요한 것 같습니다. 핵심기능 제가 구현 하고자 하는 File Input의 핵심기능은 아래와 같습니다. 복수의 이미지 파일들을 버튼을 통해 업로드 할 수 있다. 복수의 이미지 파일들을 preview 쪽에 Drag&Drop으로 업로드 ..
![]()
HTTP 통신에서 사용하는 headers 중 Content-Type과 Accept, 그리고 XHR 프로퍼티중 하나인 responseType에 대해 비교하고 정리해보고자 합니다. Content-Type Content-Type은 Client가 서버로 보내는 HTTP요청의 Message Body가 가지고 있는 리소스 타입에 대해 알려주는 역할을 합니다. 예를 들어, 아래처럼 간단한 HTTP POST요청을 한다고 하였을 때, body에 들어가 있는 타입을 알려주는 역할을 한다는 것입니다. 여기에서는 json 형식이니, "application/json"을 넣어 주었습니다. fetch('some/url', { method: 'POST', headers: { 'Content-Type': 'application/jso..
