본문 바로가기

JS30

[JS]내 기기의 위치를 확인하는 방법 목차1. 사용 브라우저의 상태를 갖는 객체2. 어떤 것들이 있을까?3. 언제 쓸 수 있을까? 최근 네비게이션관련 앱을 개발하면서 알게된 사용자의 위치를 추적할 수 있는 방법을 공유하고자 한다.1. 사용 브라우저의 상태를 갖는 객체어떤 사이트에서 제공하는 기능 중 지도 위에서 내 위치를 표시하는 것을 본 적이 있을 것이다. 물론 내 위치를 정보를 제공하겠다는 권한을 허용해줘야 하지만 어떻게 이것이 가능할까? 1) 사용 브라우저의 상태를 갖는 객체  브라우저에는 내 기기의 상태와 정보를 담은 `Navigator`이라는 객체가 존재한다. 이 객체는 읽기 전용으로 스트립트를 사용하여 기기의 필요한 정보를 조회하거나 특정 행위를 할 때 사용한다. 2) 언제 생긴 것 일까? 자바스크립트를 공부할 때 몇몇의 전역객체.. 2024. 11. 1.
try ~ catch 목차1. try catch문?2. 왜 써야할까?3. 사용법1. try catch문?예외를 처리하는 구문코드를 작성을 할 때 해당 부분이 문제가 날 수 있을지 없을지 애매한 경우가 있다. 이 때 try catch를 사용한다. try catch는 발생할 수 있는 에러를 뜻하는 예외를 처리하는 것으로 일반적으로 처리하는 작업과 에러가 발생했을 때 수행하는 작업으로 구분된다.  2. 왜 써야할까?코드가  에러가 발생하면 그 즉시 프로그램은 종료된다. 단순한 테스트를 하기 위한 코드면 몰라도 운영 중인 서버가 종료되면 해당 서비스를 사용하던 유저에 불편을 겪을 수 있고 자칫하면 실질적인 경제적 손실까지 발생할 수 있다. 따라서 개발자는 try catch를 잘 사용하여 프로그램이 종료되지 않도록 해야한다.3. 사용.. 2024. 6. 27.
비동기 통신 ajax 목차1. ajax2. 비동기 통신을 해야하나?3. XMLHttpRequest로 비동기 통신 해보기 4. XMLHttpRequest의 단점1. ajaxAsynchronous JavaScript and XML자바 스크립트와 xml을 이용한 비동기 정보교환 방식웹 개발을 ajax에 대해 자주 듣는다. 그런데 여러 정보들을 보면 ajax는 어떤 라이브러리를 사용하여 서버와 비동기적으로 통신이 이루어지는 것처럼 나와있지만 사실은 비동기 통신 방식을 자체를 의미하며 특정 외부 라이브러리를 사용하지 않고도 구현이 가능하다. 다만 기능적으로 다소 불편한 부분이 있어 많이 사용하는 라이브러리들이 있는데 추후 알아보도록 하자 2. 비동기 통신을 해야하나?그냥 form으로 정보를 전달하고 받지 굳이 왜 복잡하게 보이는 비동.. 2024. 6. 24.
FETCH API 목차1. FETCH API?2. 사용법3. 기존 ajax와 차이점은?1. FETCH API?AJAX를 발전시킨 Promise기반 비동기 통신 라이브러리Fetch API는 비동기 통신 라이브러리로 기존에 XMLHttpRequest의 단점을 보완하여 보다 편리하게 서버와 통신할 수 있다. 서버와 통신을 하기 위해 브라우저 내에 탑재된 라이브러리이기 때문에 별로도 설치하거나 CND로 코드를 가져올 필요는 없다.2. 사용법프로미스 기반이기 때문에 then catch 또는 async/await를 사용하여 통신의 결과를 확인할 수 있다. 기존 XMLHttpRequest보다 사용하는 방법이 간편하다.fetch(url,option).then(result=>{ // 성공시 실행할 코드}).catch(error=>{.. 2024. 6. 23.

티스토리툴바