본문 바로가기

Frontend/JavaScript55

JavaScript : JSON(JavaScript Object Notation)에 대하여 JSONJSON은 JavaScript 객체 문법을 따르는 문자 기반의 데이터 포맷으로, JSON 표현식은 사람과 기계 모두 이해하기 쉽고 용량이 작아서 데이터를 전송 등에서 많이 사용된다. JSON의 기본적인 형태는 {key : value}이고, key값이나 value는 항상 쌍따옴표(텍스트 형식)를 이용하여 표기한다. JSON형식에는 null, number, string, array, object, boolean 을 사용할 수 있다. function, date, undefined의 경우 JSON에서 사용이 불가능 하다. {"데이터이름": "값"}JSON 값 변환JSON.stringfy(value, replacer, space)- value : javascript의 값이나 객체를 JSON문자열로 변환- .. 2024. 9. 2.
JavaScript : 웹 스토리지 (3) - IndexedDB의 keyRange / index / opencusor IndexedDB에서 데이터를 효율적으로 검색하고 조작하는데 KeyRange, Index, OpenCursor를 사용할 수 있다.  KeyRange인덱스나 객체 저장소에서 키의 범위를 제한하는 역할을 한다. 이를 통해 특정 키 값이나 범위에 해당하는 항목만 선택할 수 있다. IDBKeyRange를 통해서 사용한다.함수설명lowerBound(value, lowerOpen)조회하려는 최소값 지정, lowerOpen이 true일 경우 값을 포함하지않음upperBound(value, upperOpen)조회하려는 최대값 지정, upperOpen이 true일 경우 값을 포함하지않음bound(lower, upper, lowerOpen,upperOpen)조회하려는 최대값과 최소값 지정only(value)특정 값에 해당.. 2024. 8. 18.
JavaScript : 웹 스토리지 (2) - IndexedDB란? 앞서 Cookie와 Local Storage, Session Storage에 대해 공부했었다. 웹 스토리지의 경우에는 소량의 단순한 데이터를 효율적으로 저장하는데 적합하다. 대량의 구조적 데이터를 처리하기 위해서는 IndexedDB라는 API를 사용하여 대규모의 복잡한 데이터를 관리할 수 있다. indexedDB는키-값 쌍으로 데이터를 저장하며, 비동기 방식(함수 호출 시 결과를 반환하지 않는 대신, 함수를 종료할 때 동작할 콜백함수를 전달함. 요청한 동작이 종료되면 success, error와 같은 이벤트를 받아 다음 동작을 진행)으로 동작한다.  IndexedDB은 다음과 같이 사용한다.데이터베이스 생성 및 열기데이터베이스에 objectStore(객체저장소) 생성 : objectStore에 저장된 객.. 2024. 8. 18.
JavaScript : 웹 스토리지 (1) - Cookie와 Web Storage HTTP 프로토콜(웹 브라우저가 서버와 통신하는 규칙)의 경우 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어진다. 즉 로그인정보다 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화 된다. 이러한 문제점을 해결하기 위해 데이터를 저장할 수 있도록 쿠키, 웹스토리지가 나오게 되었다. Cookie 쿠키는 클라이언트의 정보를 여러 세션동안 유지하기 위해 사용하는 기술로, 브라우저에 저장되는 만료기간이 존재하는 작은 텍스트 파일의 데이터이다. 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 자동으로 서버에 전송한다. document.cookie쿠키는 클라이언트 측에서 정보를 유지할 수 있게 해 주며, 서버와 클라이언트 간에 상태를 공유하는 데 유용하다. 하지만 쿠키는 몇 .. 2024. 8. 17.
JavaScript: location 객체란? LocationLocation객체는 웹 브라우저의 url과 관련된 정보를 처리하는데 사용한다. 객체가 연결된 인터넷 상에서의 위치(url)에 대한 정보 제공 및 속성을 가져올 수 있다.속성설명location.href주소영역에 참조주소를 설정하거나 URL을 반환location.hashURL에 해시값(#에명시된값)을 반환location.hostnameURL에 호스트이름을 설정하거나 반환location.hostURL에 호스트이름과 포트번호를 가져옴location.portURL에 포트번호를 반환location.protocol URL에 프로토콜을 반환location.searchURL에 쿼리(요청값)을 반환location.reload()새로고침이일어난다 2024. 8. 15.
JavaScript: Screen 객체 Screen 객체는 사용자의 모니터 정보를 제공하는 객체로, 사용자 화면의 너비 및 높이 등에 대한 정보를 얻을 수 있다. 현재는 media query가 나오면서 사용 빈도가 줄었다.  종류설명screen.width화면의 너비screen.height화면의 높이screen.availWidth작업표시줄을 제외한 화면의 너비screen.avail.Height작업표시줄을 제외한 화면의 높이screen.colorDepth화면의 표현 가능한 컬러 색상 수 반환screen.pixelDepth화면의 픽셀당 비트 수 반환  See the Pen Untitled by coding-ji (@coding-ji) on CodePen. 2024. 8. 15.