[노드교과서] 프런트엔드 자바 스크립트

1. AJAX

 ⇒ 서버로 요청을 보내는 코드

  - 라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체를 이용해야 한다.

  - AJAX 요청 시 Axios 라이브러리를 사용하는 게 편하다.

 

 ⇒ get 요청을 하는 코드(데이터 없이 서버로 보내는 경우)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	// axios는 프로미스 기반 코드라 async/await를 사용할 수 있다.
	axios.get('https://www.zerocho.com/api/get')
    	.then((result) => {
        	console.log(result);
            console.log(result.data);  // {}
        })
        .catch((error) => {
        	console.error(error);
        });
    
    (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);
        }
</script>

 

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

  - 전체적인 구조는 비슷하나 두 번째 인수로 데이터를 넣어서 보낸다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
(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);
	}
})();
</script>

 

2. FormData

 ⇒ FormData Post 요청으로 보내기

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

(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);
    }
})();

 

3. encodeURIComponent, decodeURIComponent

 ⇒ 주소창에 한글 입력시 인코딩 오류로 인해 서버가 처리하지 못하는 경우가 발생한다.

  - encodeURIComponent로 한글을 감싸줘서 처리를 한다.

(async () => {
	try {
    	const result = await axios.get(`https://zerocho.com/api/search/${encodeURIComponent('노드')}`);
        // encodeURIComponent('노드') -> '%EB%85%B8%EB%93%9C'
        decodeURIComponent('%EB%85%B8%EB%93%9C') // '노드'
        console.log(result);
        console.log(result.data);
    } catch(error) {
    	console.error(error);
    }
})();