본문 바로가기
Ajax4-5. Axios - 응답 스키마 목차 요청에 대한 응답 정보 응답 정보 확인 #1. 요청에 대한 응답 정보 { data: {}, status: 200, statusText: 'OK', headers: {}, config: {}, request: {} } data : 서버가 제공하는 응답 status : HPPT 응답 상태 코드 statusText : HTTP 상태 메시지 headers : HTTP 헤더 config : 요청을 위해 Axios가 제공하는 옵션 request : 응답으로 생성된 요청 / 브라우저에서 XMLHttpRequest / node js에서는마지막 ClientRequest 인스턴트 [참고] 모든 헤더 이름은 소문자, 객체의 속성에 접근하는 괄호표기법 ['']를 통해 접근 가능 response.headers['conte.. 2022. 3. 7.
Ajax4-4. Axios - config 기본값 설정 목차 전역 기본값 설정 커스텀 인스턴트 기본값 설정 #1. 전역 기본값 설정 방법 -모든 요청에 적용될 config 기본값 설정 1. 문법 axios.defaults.옵션명 = '' 2. 예시 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; #2. 커스텀 인스턴트 기본값 설정 1. 문법 (1) 인스턴스 생성 시 기본값 설정 const 변수명 = axios.create({ 옵션명 : 내용' }); (2) 인스.. 2022. 3. 7.
Ajax4-3. Axios - API 목차 axios()의 매개변수 인 config 옵션 설정 axios 인스턴스 생성 요청 config의 옵션 #1. axios객체 속성 및 메서드의 매개변수 기본적으로 명령어 메소드 사용 시에는 url, method, data 속성을 config에서 지정할 필요가 없다. 즉, 요청 메소드 명령어 사용 시 아래의 1~3의 방법중 하나로 url, method, data 속성 지정 가능하다. 1. 속성값으로 요청 메서드 작성 후 나머지는 config로 지정 axios.get(config) 또는 2. 속성값으로 요청메서드 작성, 첫번째 매개변수로 url, 나머지는 config로 지정 axios.post(url[,config]) 또는 3. 속성값으로 요청 메서드 작성, 첫번째 매개변수로 url, 나머지는 confi.. 2022. 3. 7.
Ajax2-2. 코드_로그인페이지 #4-2를 전부 읽어볼 시간이 없고, 코드만 확인하고 싶다면 이 글을 보면 된다! signin.html 아이디 : 비밀번호 : userController.js exports.signInPost = (req, res) => { const {userid, userpw} = req.body const param = [ userid, userpw ] try { pool.getConnection((err, conn) => { conn.query(SQL.signInPost, param, (error, result) => { if(result[0]!= undefined){ delete result[0].pw const item = result[0] const token = createToken(item) res.se.. 2022. 3. 7.
Ajax2-1. 기본_로그인 페이지 AJAX 통신으로 로그인 페이지 구현 사용자, 로그인페이지에서 아이디와 비밀번호 입력 후 제출 사용자가 입력한 데이터, 바로 백엔드 서버로 전달되는 것이 아니라 AJAX통신을 통하여 프론트에서 백엔드로 요청객체로 전달 프론트의 요청을 전달받은 백엔드는 연결되어 있는 DB의 정보와 비교하여 로그인 검증 백엔드, 로그인 검증 결과를 프론트에 응답 프론트, 응답받은 내용에 대한 처리를 사용자에게 제공 목차 백엔드 서버에 요청보내기 요청 바디에 내용 넣기 요청 헤더 조작 응답받고 응답에 대한 처리 작성해보기 1. 요청 보내기 1-1. XMLHttpRequest 메서드 사용 function ajax() { const xhr = new XMLHttpRequest() //1. 요청보내기 xhr.open('POST',.. 2022. 3. 7.
AJax1. 기본 개념 목차 Ajax란? HTTP 요청객체 생성 서버로 부터 받은 응답 처리 방법 #1. AJAX란? Asynchronous JavaScript and XML의 줄임말 즉, 서버와 통신하기 위해 자바스크립트의 특정함수 인 XMLHTTPRequest 객체를 사용한다는 뜻 AJAX는 JSON, XML, HTML, and text files를 포함한 다양한 형식으로 정보를 주고받을 수 있다 가장 두드러지는 특징은 '비동기' 통신이란 점. 즉 전체 브라우저 페이지를 새로고침할 필요 없이 서버와 통신하고, 데이터를 주고받으며 페이지를 업데이트 할 수 있다 Ajax는 어플리케이션을 좀 더 빠르고, 유저의 행동의 더 반응적이게 만들었다. 과거의 Ajax모델에서는 XML을 통하여 정보를 담았지만, 요즘에는 JSON을 주로 사.. 2022. 3. 4.

티스토리툴바