JavaScript/Core API 3

navigator, geolocation 사용자의 GPS 다루기

web에서는 기본적으로 navigator라는 obj를 제공해준다.여기서 사용자의 gps 데이터를 얻는 방법은 아래 코드와 같다 navigator.geolocation.getCurrentPosition( //사용자의 현재 위치를 받아오는 함수, 이 함수를 실행 시 웹에서 접근권한 허용 메세지가 뜬다. (data: GeolocationPosition) => { const { latitude, longitude } = data.coords; //여기에 데이터가 있다. const y: number = latitude; const x: number = longitude; console.log(x, y); }, ..

JavaScript/Core API 2024.09.20

Blob(), Blob으로 이미지 파일 핸들링

프로젝트를 만들면서 가장 큰 기술적 문제에 직면하게 되었다.그것은 바로 글 수정 기능을 구현하면서, 서버에서 img를 받아올 때 일어난 문제다.데이터 베이스에는 단순하게 이미지의 이름 만이 string으로 저장되어 있기 때문에, 주인장은 이미지의 이름만을 가지고 데이터를 input 태그의 올라간 File 타입으로 변환하여 State에 저장해놔야 하는 상황에 처했다! (그래야지 글 수정하기 버튼을 눌렀을 때 기존 이미지들이 그대로 저장될거 아닌가? 유저한테 이전 이미지들 다시 올려주세요. 할 수도 없으니 말이다.)그냥 img를 요청해서 File에 쑤셔박으면 해결되지 않을까?서버에서 불러온 이미지는 당연히 타입이 맞지 않았다.당연하다.내가 저장한 State의 타입은 File의 배열인데, 이는 input 태그..

JavaScript/Core API 2024.09.20

Observer, IntersectionObserver 사용하기

프로젝트 코드는 워낙 개판이라 올리는게 의미가 없을 것 같아서 주로 사용한 메인스택들의 사용방법을 정리하기로 했다.먼저 Observer, 아마 대부분이 JS로 처음 넣게되는 시각적 이벤트가 아닐까 싶다.1. 옵저버 클래스 생성기본적으로 IntersectionObserver는 아래와 같이 생성할 수 있다. const observer = new IntersectionObserver(콜백함수,옵션);1-1. 콜백함수옵저버에는 기본적으로 entries를 뱉어내는데, 이를 통해 옵저버를 컨트롤할 수 있다. (구조분해 할당이 아니기 때문에, 이름은 마음대로 해도 상관없다.)(entries) => { console.log(entries) //대충 forEach로 뽑아 확인해보자. 주로 사용하는 값들은 아래와 같..

JavaScript/Core API 2024.09.11