[노트장] 적으며 정리해 보는 이론/웹개발기본8 [웹개발기본] async / await문 ◼ async / await 비동기 코드를 처리하기 위한 문법이며, 가독성을 높이고, 비동기코드를 동기적으로 처리할 수 있도록, ECMAScript 2017(ES8)에 만들어 졌다. async 함수 await 표현식 Promise 객체와 동일한 상태와 성공여부를 가진 promise 객체를 return 한다. async 함수 내에서만 사용 await 키워드를 사용하여 다른 async 함수나 Promise가 완료될 때까지 기다릴 수 있다 await 키워드를 사용하면 promise가 처리될 때까지 코드의 실행을 일시 중단하고, promise가 이행되면 그 결과를 반환한다 비동기성을 유지하면서 코드를 동기적으로 작성한다 실행예시 async function fetchData() { // async 키워드 선언 t.. 2024. 3. 12. [웹개발기본] Promise ◼ Promise 객체 비동기 작업을 처리하고 관리하기 위해 사용한다. new Promise로 새 poromis객체를 생성할 수 있고, fetch함수에도 사용한다. 가독성을 높여 콜백 헬(callback hell)이라는 문제를 해결하기 위해 promise를 많이 사용한다 promise에서 사용되는 함수, 메소드가 몇가지 적어보았다 비동기 실행 함수 setTimeout setInterval addEventListener promise 메소드 then(): Promise가 이행됐을 때, 거부됐을 때, 또는 상태가 변할 때 호출할 콜백 함수를 등록합니다. catch(): Promise가 거부됐을 때 호출할 콜백 함수를 등록합니다. then() 메서드에서 발생한 에러를 처리하는 데 사용됩니다. finally().. 2024. 3. 12. [웹개발기본] Fetch ◼ Fetch 함수란 ?? JavaScript에서 네트워크 요청을 만들고 처리하기 위해 사용되는 메서드입니다. 일반적으로 웹 브라우저에서 사용되며, 서버로부터 데이터를 가져오거나 서버로 데이터를 보낼 때 주로 사용한다. fetch 함수는 Promise를 반환하며, 네트워크 요청을 비동기적으로 처리한다. JSON파일을 가져올때 사용되는 함수 중 하나다. fetch(url,{옵션}) .then(response => { return response.json(); }) .then(data => { console.log(data); }) ◼ then ~ catch fetch에서 요청한 데이터가 성공했을 때 실행된다. fetch(url,{옵션}) // HTTP 요청을 보내고 .then(response => { //.. 2024. 3. 11. [웹개발기본] HEAD Content-Type ◼ Content-Type종류 서버에게 전송하는 데이터의 유형을 알려주어 서버가 올바르게 데이터를 처리하고 해석할 수 있도록 하기 위해서다. 타입이 text인 경우 타입이 image인 경우 타입이 audio인 경우 타입이 video인 경우 타입이 application인 경우 일반 텍스트 : text/plain image/bmp : bmp 이미지 audio/mp4 : mp4 오디오 video/mp4 : mp4 비디오 application/json : JSON 데이터 CSS 코드 : text/css image/gif : gif 이미지 audio/ogg : ogg 오디오 video/H264 : H264 비디오 application/octet-stream : 확인되지 않은 바이너리 파일 HTML 코드 : tex.. 2024. 3. 11. [웹개발기본] Request의 종류 ◼ Requset 종류 reauest에는 조회, 추가, 수정, 삭제 종류가 있다. 아래와 같은 메소드로 불린다. JS 메소드 : 리퀘스트 데이터베이스 처리( CRUP작업) POST : 추가 CREATE GET : 조회 READ PUT : 수정 (기존 데이터에 새 데이터로 전체를 덮어씌움) UPDATE DELETE : 삭제 DELETE + 추가 정보 + PATCH:수정(새 데이터로 기존 데이터의 일부만 수정) HEAD get과 동일 하며, body정보는 없고, head정보만 받음 2024. 3. 11. [웹개발기본] 직렬화, 역직렬화 : 데이터를 다른 형식으로 ◼ 직렬화, 역직렬화 데이터를 JSON string으로 아니면 JS의 objec로 변환할 때가 있다. fetch로 데이터를 파싱 해야할때 '역질렬화'를 JS 객체를 JSON string 파일로 변환해서 추가, 수정할 때는 '직렬화' 작업을 수행한다 Serialization: 직렬화 JS(Objec) => JSON(string) (자바스크립트 객체를 string 타입의 JSON 데이터로 변환) const obj = { x: 1, y: 2 }; // JS 객체 const jsonString = JSON.stringify(obj); //stringify 메소드로 JSON 문자열로 변환 Deserialization: 역직렬화 JSON(string) => JS(Objec) (string 타입의 JSON 데이터를 .. 2024. 3. 11. [웹개발기본] JSON ◼ JSON이란?? JavaScript Object Notation약자며, 데이터를 표현하기 위한 경량의 데이터 형식이다. 텍스트 기반의 데이터 교환형식이고, 사람과 컴퓨터가 이해하기 쉽게 표현되어 있다 서버 간에 데이터를 주고받을 때 사용되며, 클라이언트와 서버 간에 데이터를 교환하는 데에 널리 사용된다 JSON은 JavaScript 객체의 형식을 따르며, 키-값 쌍으로 이루어진 데이터 구조이다 ◼ JS객체랑 JSON문법 비슷하지만 다르다 JS객체 문법과 JSON의 문법은 같아 보이지만, 다른 부분이 많다. 각각의 다른 점과 같은 점을 적어 놓았다 //JS 객체 : ("")더블쿼터를 붙여도되지만, Object Literal방식을 사용할때는 안 붙여도 된다. const member = { name: 'J.. 2024. 3. 11. [웹개발기본] Request & Response ◼ Request & Response Request : 클라이언트가 서버에게 보내는 정보 Response : 서버가 클라이언트에게 보내는 정보 서로 요청을 보내고 응답을 받는 과정에서 사이트가 그려진다. ◼ 한페이지 Request & Respone가 얼마나 일어날까? 접속 하는 페이지마다 다르다. 그중 같은 사이트여도 조금씩 다를 수 있다! 예시로 구글메인을 보자. 한 페이지 Load에 총70개 정도의 requests가 일어난것이 보인다. '70 requests'는 70번의 'repuest-response'가 일어난 거로 생각하면 된다. 이미지에 js, img 등 써놓은 곳에 여러 파일 중 한 줄의 파일이 한 번의 'repuest-response'의 행동을 하여 가져온 것이다. 처음 한 번의 요청으로 J.. 2024. 3. 11. 이전 1 다음
