Node.js(프론트앤드 자바스크립트)

AJAX

서버로 요청을 보내는 코드

-라이브러리 없이는 브라우저가 지원하는 XML HttpRequest 객체 이용
-AJAX요청시 Axios 라이브러리를 사용하는게 편함
-HTML에 아래 스크립트를 추가하면 사용할수 있음.

<script src = "https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  //여기에 코드를 넣으세요.
<script>

GET요청 보내기

axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 됨

프로미스 기반 코드라서 async / await 사용가능.

axios.get('https://www.zerocho.com/api/get')
.then((result)=>{
console.log(result);
console.log(result.data);
})
.catch((error) =>{
console.log(error);
});


-------
(async () => {
  try{
    const result = await axios.get('https://www.zerocho.com/api/get');
    console.log(result);
    console.log(result.data);
  }
  catch(error){
	console.log(error);
  });

POST요청을 하는 코드(데이터를 담아 서버로 보내는 경우)

(async () =>{
  
  try{
    const result = await axios.post('https://www.zerocho.com/api/post/json',{
      name:'zerocho',
      birth:1994,
    });
    
    console.log(result);
    console.log(result.data);
    
  }catch(error){
    console.log(error);
  }
})();

FormData

:form태그에 담긴 데이터를 AJAX요청으로 보내고 싶은경우

FormData POST요청으로 보내기

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

(async () => {
  try{
    const formData = new FormDate();
    formData.append('name','zerocho');
    formData.append('birth',1994);
    const result = await axios.post('https://www.zerocho.com/api/post/formdata',
                                    formData);
    
    console.log(result)
    console.log(result.data);
  }catch(error){
    console.log(error);
  }
})();

encodeURIComponent, decodeURIComponent

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

encodeURIComponent로 한글 감싸줘서 처리.

(async () => {
  try{
    const result = await axios.get(`htts://www.zerocho.com/api/search/
                                   ${encodeURIComponent('노드')}`);
    
    console.log(result);
    console.log(result.data);
  }
  catch(error){

    	console.log(error);
  }
})();

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

-서버의 데이터를 프론트엔트로 내려줄 때 사용
-태그 속성으로 data-속성명
-자바스크립트에서 태그 .dataset. 속성명으로 접근 가능

data-user-job -> dataset.userJob
data-id -> dataset.id

-반대로 자바스크립트 dataset에 값을 넣으면 data-속성이 생김

dataset.monthSalary = 10000 -> data-month-salary = "10000"

<ul>
  <li data-id = "1" data-user-job = "programmer">Zero></li>
   <li data-id = "2" data-user-job = "designer">Nero></li>
   <li data-id = "3" data-user-job = "programmer">Hero></li>
   <li data-id = "4" data-user-job = "ceo">Kero></li>
</ul>