728x90 반응형 JavaScript25 [JS] JSON(JavasScript Object Notation)에 대해 알아보자 JSON(JavasScript Object Notation)은 자바스크립트의 객체를 문자열로 표현하는 방법이다. 매우 직관적이고, 사람이 읽고 쓰기에도 편하다는 장점이 있다. JSON 데이터를 사용하는 과정 1. 서버는 브라우저로 데이터를 보낼 때 JSON 형태로 전송한다. 2. 데이터를 수신한 브라우저는 자바스크립트를 통해 파싱하고 문서에 반영한다. 객체를 문자열로 변경하는 법 => JSON.stringify() let pi = 3.14; let str = 'string'; JSON.stringify(pi); // "3.14" JSON.stringify(str); // ""string"" 문자열로 값이 반환되는 것을 확인할 수 있다. 배열을 JSON.stringify() 하면 어떻게 될까? let ar.. 2023. 2. 22. [JS] 데이터 속성 사용하기 (data-) data-{어쩌구} 속성은 HTML 요소에 추가 정보를 저장할 수 있게 해준다. HTML 문법 어느 엘리먼트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 보이지 않게 글이나 추가 정보를 엘리먼트에 담아둘 수 있다. ... JS에서 접근하는 법 값을 읽기 위한 완전한 HTML 이름에 dataset 속성을 사용하면 된다. dataset 객체를 통해 data 속성을 가져오기 위해서 속성 이름의 data- 뒷 부분을 사용한다. 참고로 대시들은 camelCase로 전환된다. 각 속성은 문자열이고, 읽고 쓸 수 있다. 만약 article.dataset.columns에 5를 할당하면 해당 속성은 "5"로 변경된다. Let article = document.getElementById('electr.. 2023. 2. 20. [JS] 위쪽으로 트리를 순회하는 Element.closest()에 대해 알아보자 JS, HTML, CSS만 사용해서 코딩하는 연습을 하다가 처음 보는 것이 있어서 정리하게 되었다. 언젠가 알아두면 써 먹을 일이 분명히 있을 거 같다! Element.closest() Element의 closet() 메서드는 매개변수로 준 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다. 구문 closet(selectors) 매개변수: 'CSS 선택자' 반환 값: 자기 자신 또는 가장 가까운 조상 엘리먼트, 일치하는 요소가 없으면 null 예제 // HTML Here is div-01 Here is div-02 Here is div-03 // js const el = document.getElementById('div-03').. 2023. 2. 20. [JS] async / awiat(Promise의 간결판!) 제목에서도 알 수 있듯이 async/await은 Promise를 조금 더 간결하고 동기적으로 실행되는 것처럼 보이게 만들어 준다. (그래서 async/await을 syntactic sugar라고도 한다.) async 함수 앞에 async 키워드를 쓰면 자동적으로 함수 안의 코드 블럭이 Promise로 변환된다. await await은 반드시 async 함수 안에서만 유효하다. await 대상은 Promise를 반환하는 API 함수이다. await 키워드 뒤의 행동이 끝날때까지 기다려준다. 다시 말해, 비동기 작업이 끝날 때까지 기다렸다가 다음 문장 코드를 처리한다. async 함수 동작 방식 1. async 함수가 호출되어 await 키워드가 있는 비동기 작업이 실행되면 2. await은 이벤트 루프를 .. 2023. 2. 20. [JS] fetch 성공 여부 확인하기 fetch를 사용할 때는 response.ok를 사용하여 성공 여부를 꼭 확인해야 한다. fetch는 네트워크에 오류가 있거나, 서버의 CORS 설정이 잘못된 경우 fetch를 거부한다. 그러나 이 2가지 경우는 권한 등 설정의 문제고, 404와 같은 응답은 네트워크 오류가 아니기 때문에 fetch를 거부하지 않는다. 위와 같은 이유로 fetch()가 성공했는지를 정확히 알아내려면 response.ok 속성의 값이 true인지도 확인해야 한다! fetch('flowers.jpg') .then((response) => { if (!response.ok) { throw new Error('네트워크 응답이 올바르지 않습니다.'); } return response.blob(); }) .then((myBlob) .. 2023. 2. 20. 이전 1 2 3 4 5 다음 728x90 반응형
