이전에 한 Fetch API 의 경우 예시를 만들어서 보내고 받았습니다. 이번에는 실전에서 사용하고 있는 값들의 경우에 대해 공부해보았습니다 fetchdata의 경우 회사, 프로젝트에서 주어지는 API 명세를 보고 어떤 값을 전달해야하는지 파악후 형식에 맞춰서 작성해 줍니다. 위는 예시입니다. 해당값을 fetch 를 이용해서 작성해 보았습니다 Promise를 좀더 구체적으로 써서 resolve와 reject가 잘 보이게 하였고, fetch() 의 첫번째 인자로는 url을 이후에는 option을 전달하였습니다 일단 기본적으로 headers method body는 기본으로 들어가야 하며, headers 또한 api 명세에 따릅니다. 프로젝트에 맞춰 https://developer.mozilla.org/ko/..

이전에 만들었던 버튼 이후 text 란과 option 값을 주고 ajax 통신 버튼을 만들었다. 지금 하는 것은 충분히 value로 alert를 할 수 있지만, fetch 함수를 통해 비동기적으로 구성되도록 하였다. 추후 페이지 개발시에는 페이지 이동 없이 로그인 기능을 구현 할 수 있다. text에 입력 받은 값을 비교 후 alert를 하고, 나이가 10대일 경우 입장이 불가하다는 alert를 구현해보았다. jsp 코드] 먼저 jsp 코드를 보면 result 라는 객체(Object 를 값으로 전달한다. 값을 text필드의 값과 select의 value를 넣고 추후 구분을 위한 rule과 auth를 선언하였다. body: JSON.stringify(result) fetch api가 전달하는 파라미터중 b..

저번에 공부한 Ajax기법은 XMLHttpRequest 객체를 이용해서 웹 서버와 비동기로 통신하고, DOM 을 이용해서 웹 페이지를 동적으로 바꿔주게 하는 기법이다. 요즘 XML은 거의 사용 안하고 JSON을 많이 사용하기 때문에 Fetch를 많이 사용한다. 게다가 Fetch는 Promise로 구성되어 있기 때문에 비동기적기고 then과 catch 등을 이용해 가독성이 뛰어나다 게다가 기본 API라 바로 사용 가능한 잇점도 있다. 기본 문법] default : GET CRUD 의 READ와 비슷하다 fetch 는 HTTP 요청을 전송한 URL, HTTP 요청 메소드 (GET POST PUT DELETE 등), HTTP 요청 헤더 등을 파라미터로 받아 전달한다.fetch() 에서 요청 메소드를 지정하지 ..