Front-End 자바스크립트

서버로 요청을 보내는 코드

Axios 사용하기

• 라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체 이용
• AJAX 요청 시 Axios 라이브러리를 사용하는 게 편함.
• HTML에 아래 스크립트를 추가하면 사용할 수 있음.
• FormData를 통해 데이터를 전달할 수 있다.

GET 요청 보내기

Get 요청 보내기

• axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다.
• 프로미스 기반 코드라 async/await 사용 가능.
  • axios가 프로미스를 지원하는지, callback을 지원하는지는 코드만 봐서는 알 수 없기 때문에 공식문서를 확인 해야한다.

POST 요청 보내기

Post 요청 보내기

• POST 요청을 하는 코드(데이터를 담아 서버로 보내는 경우)
• 전체적인 구조는 비슷하나 두 번째 인수로 데이터를 넣어 보냄

FormData

HTML form 태그에 담긴 데이터를 AJAX 요청으로 보내고 싶은 경우 FormData 객체 이용(이미지, 동영상 전송할 때 사용)

FormData를 이용해 객체 전송

formdata Post 요청으로 보내기

 

• FormData 메서드
  • Append로 데이터를 하나씩 추가
  • Has로 데이터 존재 여부 확인
  • Get으로 데이터 조회
  • getAll로 데이터 모두 조회
  • delete로 데이터 삭제
  • set으로 데이터 수정

• Axios의 data 자리에 formData를 넣어서 보내면 됨

encodeURIComponent, decodeURIComponent 

가끔 주소창에 한글 입력하면 서버가 처리하지 못하는 경우 발생

• encodeURIComponent로 한글 감싸줘서 처리(그냥 한글로 보내게 되면 오류가 발생할 때가 있기 때문)
• 노드를 encodeURIComponent하면 %EB%85%B8%EB%93%9C가 됨
• decodeURIComponent로 서버에서 한글 해석\

data attribute와 dataset 

HTML 태그에 데이터를 저장하는 방법

data attribute와 dataset

• 서버의 데이터를 FrontEnd로 내려줄 때 사용
• 태그 속성으로 data-속성명
• 자바스크립트에서 태그.dataset.속성명으로 접근 가능
  • data-user-job -> dataset.userJob
  • data-id -> dataset.id
• 반대로 자바스크립트 dataset에 값을 넣으면 data-속성이 생김
  • dataset.monthSalary = 10000 -> data-month-salary=“10000”