더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 31개의 일치하는 문서를 찾았습니다.
- js
[NodeJS] ajax에서 post, patch 요청시 nodejs express에서 request body를 못 가져오는 이슈 해결
Front 앱에서 axios를 사용하여 파라미터를 Body에 담아 서버에 전달하였습니다. 특별한 설정은 없으며 매우 단순합니다. 당연히 잘 동작할거라 생각했었지만 결과는 참담하게도 아무 값도 얻어오지 못했습니다.# Express Node 서버에서 body를 못가져오는 경우body가 아니라 다른데로 넘어오나? 메소드 문제인가? get, post, patch로 바꾸어보고 request의 query, params, body 모두 찾아보아도 빈 값으로만 전달됩니다. 아 ~ query string으로 전달하는 경우에만 res.query로 잘 전달되는 이상한 문제입니다.! 이슈...
Last Modified : 2022-06-30 00:32:45
Created : 2022-06-30 00:10:39 - js
[자바스크립트] axios를 사용하여 비동기 호출시 try catch 구문에서 404 에러의 response를 처리하는 방법
자바스크립트에서 비동기 통신(ajax)을 사용하기 위해 몇 가지 방법들이 있지만 axios를 사용하는 방법이 가장 많이 쓰이고 있습니다. 아래는 이 경우는 자주 사용하는 try catch 구문에서 api의 응답 결과가 404인 경우의 response를 처리하는 방법에 대하여 알아봅니다.# try catch 내부의 axios를 사용하여 호출시 404 응답 처리만약 axios를 사용하여 정상적인 요청과 응답을 받은 경우에는 특별한 문제가 없습니다. 즉 response의 status 값이 200이라면 딱히 처리할 필요가 없죠. 하지만 응답이 항상 정상적인 경우만 존재하지는...
Last Modified : 2022-04-28 10:49:32
Created : 2022-04-28 10:12:24 
js자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법
자바스크립트를 사용하여 캔버스 요소를 이미지로 변환하여 서버에 비동기식 ajax로 전송하는 방법을 알아봅니다.# 자바스크립트 캔버스 이미지 서버로 파일 전달하기HTML5를 사용하여 Canvas 요소를 이미지로 변환하거나 저장할 수 있습니다. 그렇다면 변환된 캔버스 이미지를 서버에 ajax로 전달할 수 있을까요?캔버스 이미지를 서버에 ajax로 전달하기결론부터 얘기하면 가능합니다. 물론 과정은 조금 복잡하며 아래와 같은 순서를 따라야만 합니다.- Canvas 이미지를 데이터로 저장- 저장된 Canvas 이미지를 base64에서 디코딩- 디코딩된 값을 바이트 배열로 변환...
Last Modified : 2020-08-05 22:18:49
Created : 2020-08-05 21:17:49
js자바스크립트 FormData 데이터 전송 알아보기
자바스크립트에서 서버에 데이터를 전달해주는 API(인터페이스) FormData에 대하여 알아보겠습니다.! FormData는 무엇인가?자바스크립트를 사용하여 데이터를 서버에 보낼 수 있으며 Ajax 방식, 비동기식으로 데이터나 파일 모두 전송 가능하다는 점이 장점입니다. 최근 FormData가 많이 사용되는 이유는 비동기식 통신으로 <form></form> 태그를 직접 사용하지 않아도 되기 때문입니다.- key/value 방식으로 입력폼에 값을 쉽게 추가할 수 있음- AJAX 비동기으로 사용이 가능- 데이터 및 파일 전송이 가능# FormData ...
Last Modified : 2019-08-01 08:29:17
Created : 2019-06-27 11:00:29
js자바스크립트 fetch API 알아보기
자바스크립트를 사용하여 AJAX 비동기 통신을 위해 별도의 라이브러리를 많이 사용하고 있습니다. 예를들면 jQuery의 ajax() 메소드를 사용하거나 아니면 axios 라이브러리 등을 단지 AJAX 구현을 위한 목적으로 추가해 사용해왔습니다.왜냐하면 순수 자바스크립트 및 기존 비동기 통신이 어렵고 비효율적이기 때문입니다. 특히 XMLHttpRequest를 사용해서는 원하는 기능을 모두 구현하기 위해서는 매우 복잡하고 Promise 객체를 함께 사용하는 것도 쉽지 않았기 때문이죠.! ES 6의 fetch API를 알아보자자바스크립트의 E...
Last Modified : 2020-03-12 23:31:09
Created : 2019-05-15 01:14:03
jquery제이쿼리 when() 메소드 알아보기
제이쿼리(jquery)에서 사용하는 when() 메소드에 대하여 알아봅니다.# 제이쿼리 when() 메소드제이쿼리의 when()은 ajax의 결과를 리턴받아 처리하도록 도와줍니다. 즉 ajax를 사용하는 경우 발생하는 Promise 객체를 처리할 수 있습니다. 아래는 간단한 문법입니다.$.when(ajax1, ajax2, ...).done(function(resp1, resp2, ...) { ...});여러개의 ajax를 ajax1, ajax2와 같이 사용하고 뒤의 콜백에서 resp1, resp2...로 결과를 처리합니다.! when()은 언제 사용하는가?...
Last Modified : 2019-08-17 12:14:34
Created : 2018-09-12 16:19:14- react native
react native ajax 로딩하는 방법, fetch
react native에서 ajax를 사용하여 네트워크를 사용하는 방법, api를 호출하는 방법을 알아봅니다. react native는 어떻게 사용할까요?# react에서 ajax 호출 네트워크 사용방법먼저 react native에서 ajax를 사용하려면 몇 가지 방법이 있습니다. 가장 먼저 자바스크립트의 XMLHttpRequest를 사용하는 방법과 react native의 fetch()를 사용하는 방법입니다.또 async를 사용할 수 있죠. 아래는 많이 쓰이고 간단한 방법인 fetch()를 알아봅니다.! fetch()를 사용하여 ajax 호출하기fetch의 문법을 ...
Last Modified : 2018-11-05 22:58:06
Created : 2018-08-28 11:27:31 - jquery
jquery post method
jquery에서 서버와 비동기로 통신할 수 있는 ajax()의 단축 메소드 post()에 대하여 알아봅니다.# jQuery post() 메소드제이쿼리의 post()는 ajax인 서버와의 비동기 통신을 가능하게해주는 메소드입니다. ajax() 메소드와 기능적으로는 동일하며HTTP post 방식의 통신에 사용되도록 정해진 단축 메소드입니다. 그렇다면 어떻게 post()를 사용하는지 아래에서 예제로 알아봅니다.# jquery post() 메소드 예제보기ajax()의 단축 메소드이므로 사용 방법은 아주 간단한데 $.post()에 서버 url주소와 전달할 데이터를 바로 넘겨주...
Last Modified : 2018-08-23 21:17:07
Created : 2018-08-22 17:45:07 
js자바스크립트 ajax를 사용하여 비동기 방식 파일 업로드 예제
클라이언트에서 파일을 업로드할 경우 ajax 즉, 비동기 방식으로 업로드는 하는 방법을 알아봅니다. 어떻게 하면 그리고 왜 비동기식 파일 업로드가 필요할까요?# AJAX를 사용한 파일 업로드 알아보기예전에는 주로 form 태그에 몇 가지 속성을 사용하여 submit 방식으로 파일 업로드를 수행하였습니다. 하지만 최근에는 업로드하는 경우 AJAX 방식을 사용한 비동기식 파일 업로드가 많이 사용됩니다. 특히 SPA(Single Page Application)의 경우 더욱 더 많이 사용되지요. 이 경우 blob 방식으로 변환하는 방법도 있고 아니면 FormData 객체를 ...
Last Modified : 2018-02-22 23:54:42
Created : 2018-02-21 06:35:11
webdevetc자바스크립트 이미지핑 기술 알아보기
자바스크립트를 사용하여 서버와 통신하는 다양한 방법이 존재합니다. 오늘은 이미지핑(image ping) 기술에 대하여 알아보고 어떻게 사용하는 예제를 통해 배워보려합니다.# 이미지핑이란?서버와의 통신을 확인할때 한번쯤 ping이란 명령어를 사용해보신 적 있으신가요? 예전에는 인터넷 속도나 연결상태를 확인하기 위해서 커맨드에서 자주 사용하던 명령어입니다. 만약 특정 ip에 ping을 사용하면 일정시간을 주기로 해당 ip에 통신하여 연결상태를 알려주는 역할을 하게됩니다.C:/> ping 1.23.456.7810ms9ms.....오늘 알아볼 이미지핑 역시 이처럼 서버...
Last Modified : 2017-12-22 01:34:07
Created : 2017-12-20 12:30:40