Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS (v)
06. 미니프로젝트-2W (v)

08. SpringFramework , SrpingBoot
09. React JS [Front-end]
10. 중간프로젝트 (1M)
11. Linux 명령어
12. AWS 클라우드
13. DevOps - Docker
14. App - Android
15. 최종프로젝트 (1M)

---

JS(Java Script)

AJAX(Asynchronous Javascript and XML) - 비동기 통신

• 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술
• 비동기(순차적으로 진행하지 않음)적인 방식으로 원격에 있는 어떤 데이터를 요청해서 가져옴

promise객체

• JS에서 비동기 작업을 처리할 떄 사용되는 객체
• 비동기 작업이 완료되었을 떄 그 결과를 처리할 수 있게 도와주며, 비동기 작업이 성공, 실패, 또는 대기중인 상태를 추적할 수 있게 해주는 객체

상태

• 대기(pending)

: 초기상태, 비동기 작업이 아직 완료되지 않은 상태

• 이행(fulfilled)

: 비동기 작업이 성공적으로 완료

• 거부(rejected)

: 비동기 작업이 실패

메서드

• then()

: Promise가 이행되었을 때 실행할 콜백 함수 지정

• catch()

: Proimse가 거부되었을 때 실행할 콜백 함수 지정

• finally()

: 무조건 실행되는 콜백 지정

   <script>
       function some(){


           // fetch('hi.txt').then(function(response){
           //     response.text().then(function(data){
           //         alert(data);
           //     })
           // })




           // 2nd
           // promise에서 사용하는 형태
           // pendding(대기중)
           // fulfilled(성공)
           // reject(거절)

           // var promise = fetch("hi.txt"); // 프로미스객체 반환
           // promise.then(function(response){

           // })
           // console.log(promise);

           // 비동기 - 실행순서가 1 3 2 (순서를 보장하지 않음)
           // console.log(1);
           // fetch("hi.txt").then(function(response){
           //     console.log(response);//
           //     if(response.status==200){
           //         //... 성공에 대한 처리...
           //         console.log(2);
           //     }
           // })
           // console.log(3);



           //3nd
           // fetch('hi.txt').then(function(response){
           //     if(response.status==200){
           //         // response 안에 body에 요청에 대한 데이터가 들어 있음
           //         // text() - text로 파싱항
           //         // json() - json으로 파싱함
           //         // 둘다 promise객체를 반환
           //         response.text().then(function(data){
           //             alert(data);
           //         })
           //     }
           // })



           // 4nd - json데이터
           fetch('hi.json')
           .then(function(response){
               // response.json().then(function(data){
               //     console.log(data);
               // })
               return response.json();
           })
           .then(function(data){ // 첫번째 then의 리턴값을 받음
               return data;
           })
           .then(function(data){ // 두번째 then의 리턴값을 받음
               return data;
           })
           .then(function(data){
               console.log(data);
           })
       }

   </script>