2021.07.24 / 2.2장

2.2 프런트엔드 자바스크립트

 

2.2.1 AJAX

AJAX(Asynchronous Javascript And XML) : 비동기적 웹 서비스를 개발할 때 사용하는 기법이다. 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술이다. 

보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보낸다. 

 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	//예제코드
</script>

프론트엔드에서 사용하려면 HTML 파일을 하나 만들고 그 안에 script 태그를 추가한다.

 

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

요청의 한 종류인 GET요청을 보낸다. axtios.get 함수의 인수로 요청을 보낼 주소를 넣는다.

axios.get 내부에 new Promise가 들어있으므로 then과 catch를 사용할 수 있다. result.data에는 서버로 부터 보낸 데이터가 들어있다. 

프로미스이므로 async/await 방식으로 변경할 수 있다. 익명함수이기 때문에 즉시 실행을 위해 코드를 소괄호로 감싸서 호출한다.

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

전체적인 구조는 비슷하지만 두번째 인수로 데이터를 넣어보내는 것이 다르다. GET 요청이면 axios.get을, POST 요청이면 axios.post를 사용한다.

 

 

2.2.2 FormData

HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능이다. 주로 AJAX와 함께 사용된다.

 

const formData = new FormData();
formData.append('name', 'zerocho');
formData.append('item','orange');
formData.append('item','melon');
formData.has('item'); //true
formData.has('money'); //false
formData.get('item'); //orange
formData.getAll('item'); //['orange', 'melon'];
formData.append('test',['hi','zero']);
formData.get('test'); //hi, zero
formData.delete('test'); 
formData.get('test'); //null
formData.set('item','apple');
formData.getAll('item'); //['apple'];

 

생성된 객체의 append  메서드로 키-값 형식의 데이터를 저장할 수 있다. append 메서드를 여러 번 사용해서 키 하나에 여러 개의 값을 추가해도 된다. has 메서드는 주어진 키에 해당하는 값이 있는지 여부를 알린다. get 메서드는 주어진 키에 해당하는 값 하나를 가져오고, getAll 메서드는 해당하는 모든 값을 가져온다. delete 메서드는 현재 키를 제거하는 메서드고, set은 현재 키를 수정하는 메서드다.

 

(async () => {
	try{
    	const formData = new FormData();
        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.error(error);
    }
})();

두번째 인수에 데이터를 넣어보낸다. 

 

 

2.2.3 encodeURIComponent, decodeURIComponet

AJAX 요청을 보낼 때 주소에 한글이 들어가는 경우가 있다. 서버 종류에 따라 한글 주소를 이해하지 못하는 경우 window 객체의 메서드인 endcodeURIComponet 메서드를 사용한다.

한글 주소부분만 endcodeURIComponet 메서드로 감싼다.

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

받는 쪽에서는 decodeURIComponent를 사용하면 된다.

decodeURIComponent('변경된 주소의 문자열'); //노드

 

 

2.2.4 데이터 속성과 dataset

프런트엔드에 데이터를 내려보낼 때 제일 첫번째로 고려할 점은 보안이다. 

보안과 무관한 데이터들을 자유롭게 프런트엔드에 보내도 된다. HTML과 관련된 데이터를 저장하는 공식적인 방법은 데이터 속성이다.

 

<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="ceo">Kero</li>
</ul>
<script>
	console.log(document.querySelector('li').dataset);
    //{ id : '1', userjob : 'programmer' }
</script>

 

데이터 속성의 장점은 자바스크립트로 쉽게 접근 가능한 점이다.