Front-End/JS

JS JSON: JavaScript Object Notion

JSON: JavaScript Object Notion JavaScript 객체 표기법으로 작성된 텍스트 기반의 방식입니다. JSON은 쉽게 읽고 작성할 수 있고, 소프트웨어에서 파싱 및 생성하기도 쉽습니다. 때문에 주로 컴퓨터간 데이터 교환 형식으로 쓰입니다. JSON 표기법 {}로 데이터를 묶고 key: value로 구성 데이터는 ,로 구분합니다. {중괄호}는 객체를 구성 [대괄호]는 배열을 구성 // 예제 1 '{"name":"kim", "age":25, "address":null}' // 예제 2 { "students":[ {"name":"kim", "age":25}, {"name":"lee", "age":30}, {"name":"choo", "age":18} ] } JSON ↔ JS 객체 파싱 ..

JS JQuery ( + JQuery 사용 방법 )

사실 JQuery가 무거워서 일를 사용하기 보다는 기존 JS를 이용하여 개발을 하는 것이 더욱 좋은 퍼포먼스를 낼 수 있다는 말도 있습니다. 실제로 프로트엔트 커리큘럼 한 자료에서는 JQuery가 빠졌을 정도로 대체가 가능하지만 그래도 아직은 사용하는 곳이 많은거 같기 때문에 간단하게라도 봐보도록 하겠습니다. JQuery JQuery란 화면의 동적 기능을 JS(자바스크립트)보다 쉽게 개발할 수 있게 해주는 JS 기반 라이브러리입니다. DOM과 이벤트 객체는 브라우저 종류가 다를 경우 다른 결과 값을 나타낼 수 있다는 단점이 있습니다. 이런 호환성 문제는 JQuery를 이용함으로 해결되었습니다. 호환성 문제만이 아니라 JQuery는 다양한 애니메이션과 효과를 지원하는 메서드를 지원하기 때문에 개발 시간을 ..

JS Web API ( storage, fetch, geolocation )

Storage API Web Storage API는 브라우저에서 Key-Value 구조 데이터로 저장하고 검색하기 위한 방법을 제공합니다. window.localStorage 특정 웹사이트의 로컬 저장소에 대한 접근을 제공 해당 도메인에 대한 데이터를 저장, 읽기, 수정, 삭제 할 수 있습니다. 데이터는 만료일이 없이 저장되어 브라우저를 닫아도 삭제되지 않습니다. localStorage.setItem("name", "Kim"); // 저장소에 데이터 저장 localStorage.getItem("name"); // 저장소에서 데이터 항목 검색 window.sessionStorage localStorage 객체와 세션에 저장한다는 차이점만 빼면 똑같습니다. 세션에 저장하기 때문에 브라우저를 닫으면 데이터가 ..

JS BOM( Browser Object Model ): 브라우저 객체 모델

BOM: 브라우저 객체 모델 브라우저에 내장된 객체를 브라우저 객체라고 합니다. window는 브라우저 객체의 최상위 객체이고, window 객체에는 하위 객체가 포함되어 있습니다. window window 객체는 브라우저의 창을 나타냅니다. 모든 전역 변수, 객체, 함수들은 window 객체의 멤버가 됩니다. 심지어 DOM의 document도 window 객체에 포함되기 때문에 아래 두 코드는 같은 결과를 나타냅니다. window.document.getElementById("header"); document.getElementById("header"); window 객체 window.open("URL", "새 창 이름", "새 창 옵션") - 새 창 열기 window.close() - 현재 창 닫기 w..

JS DOM( Document Object Model ): 문서 객체 모델

DOM: 문서 객체 모델 문서 객체 모델(DOM)은 HTML 문서 구조를 말합니다. HTML 문서의 구조에서 최상위 객체로는 이 있으며, 그 하위 객체로는 와 가 있습니다. 모든 HTML 태그는 객체 또는 노드라 합니다. Document는 document 노드라 하고 태그들도 모두 노드입니다. HTML 태그 내의 텍스트 역시 텍스트 노드라 하고 주석도 주석 노드라 합니다. 위 그림 처럼 노드들은 트리 구조를 구성기 때문에 태그를 루트 노드가 되고, 태그와 태그는 루트 노드의 자식 노드가 됩니다. 이 같은 노드들은 모두 JS를 통해 접근할 수 있고 조작할 수 있습니다. 예를 들어 태그는 document.body로 접근할 수 있고 텍스트 노드는 innerHTML속성으로 접근할 수 있습니다. DOM 노드 탐색..

JS async & await

async & await async와 await은 JS의 비동기 처리 방식인 Promise를 더 쉽게 작성하고, 가독성이 좋게 만들어주는 문법입니다. async function 함수명() { await 비동기_처리_메서드명(); } async는 함수가 Promise를 반환하도록 하는 키워드입니다. await은 async 함수 내에서 사용할 수 있는 키워드로 함수 실행을 일시 중지하고 Promise가 처리되면 결과와 함께 함수가 다시 실행됩니다. async async는 function 앞에 붙이는 키워드로 함수가 Promise를 반환하도록 하는 키워드입니다. 만약 Promise가 아닌 값을 반환하더라도 Promise.resolve("반환값") 형식인 이행된 Promise가 반환됩니다. 아래 예시를 보면 "..

JS Promise를 사용한 비동기 처리

비동기 처리 비동기 처리란 코드가 끝나기를 기다리지 않고 다음 코드를 실행하는 것을 말합니다. 비동기 처리 예제 setTimeout(function(), ms) console.log("first"); setTimeout(function () { console.log("second"); }, 3000); console.log("third"); 위 예제 코드에 대한 결과는 다음과 같습니다. "first" 출력 "third" 출력 "second" 출력 setTimeout은 지정한 초(예제에서는 3초) 만큼 기다린 후에 코드가 실행됩니다. 하지만 비동기 방식으로 실행되기 때문에 기다리는 동안 다음 코드가 실행됩니다. Promise 사용 전 비동기를 위한 방법: 콜백 함수 JS에서 비동기 처리에 대한 글을 보면 ..

JS addEventListener 사용법 ( + capturing, bubbling )

addEventListener() addEventListener()는 지정된 요소에 하나 이상의 이벤트 핸들러를 등록할 수 있습니다. removeEventListener() removeEventListener()는 addEventListener()로 연결된 이벤트 핸들러를 제거합니다. 이때 주의할 점은 반드시 addEventListener()를 사용했을 때와 마찬가지로 매개 변수를 설정해주어야 한다는 점과 addEventListener()과 같은 단계에 있어야 한다는 점입니다. element.addEventListener(event, function, useCapture) 1. element document, window 같이 이벤트를 적용할 요소입니다. 2. event 첫 번째 매개변수로 이벤트 유형을..