Post3 [javascript] 자바스크립트 파일 업로드 (form post) 참고: https://austingil.com/upload-files-with-javascript/ 이 포스트에서는 JavaScript를 사용해 파일 업로드 요청을 만들어 보겠습니다. 또한 파일에 접근하는 방법, HTTP 요청을 생성하는 방법, 이를 재사용 가능하게 하는 방법을 알아보겠습니다. 이벤트 핸들러 설정 File Upload 사용자의 파일에 접근하려면 요소에 type 속성을 file로 지정해야합니다. 파일 업로드를 위해 HTTP request를 만들려면 요소를 사용해야 합니다. JavaScript는 항상 그렇지만 파일에 접근하려면 사용자의 파일 입력이 있어야합니다. 하지만 HTTP 요청은 브라우저가 form 없이 Fetch API를 사용하여 만들어낼 수 있습니다. 하지만 다음과 같은 이유로 여전.. 2023. 5. 12. [javascript] 자바스크립트 fetch로 formdata post 보내기 폼 데이터를 전송할 때 JavaScript의 fetch api를 사용하면 데이터 전송을 세밀하게 제어할 수 있습니다. 이는 submit과 동시에 데이터를 전송하고 새 페이지로 리다이렉션하는 표준 HTML 동작으로 처리하지 않고 최소한의 dom 조작으로 그냥 백그라운드에서 더이터 전송을 처리하고 효율적으로 통신할 수 있도록 합니다. 준비 post 메시지를 보내는 작업을 하기 전에 post로 보낼 form이 필요합니다. 간단하게 사용자 이름과 비밀번호 두 개의 입력필드를 가지는 양식을 만들어보겠습니다. 먼저 index.html 파일을 만들고 다음의 코드를 입력합니다. Submit 위 코드를 실행하면 다음과 같은 화면을 얻게됩니다. form에 submit 이벤트 추가 먼저 폼 항목을 선택하고 submit 이벤.. 2022. 9. 1. [express.js] post 받는 서버 만들기 이 포스트에서는 express.js를 사용해 간단하게 post 메소드를 받는 서버를 만들어 보겠습니다. post 메소드는 HTTP 프로토콜을 통해 데이터를 전달하는 가장 일반적인 방법으로 post 메소드를 사용해 클라이언트가 보낸 정보를 request body에서 가져오는 방법을 알아보겠습니다. 여기 작성한 모든 코드는 macOS에서 작업했습니다. 프로젝트 생성 node.js의 웹 프레임워크인 express.js를 사용해 서버를 만들기 전에 콘솔에서 적당한 위치에 npm 프로젝트를 생성합니다. $ mkdir test-express && cd test-express $ npm init -y 위의 코드로 test-express 라는 디렉토리를 만들고 그 안에서 npm 프로젝트를 초기화 했습니다. 'npm i.. 2022. 9. 1. 이전 1 다음
