본문 바로가기

JavaScript

[JavaScript] Intersection Observer API - 화면 내 보이는 요소 검사 개요 직역하면 교차 지점 관찰자 API. 간단히 말하자면, 페이지 안에서 사용자 눈에 요소가 보이는지, 혹은 페이지 바깥에 있어서 보이지 않는지와 관련된 API라 할 수 있다. 어떨 때 필요할까? MDN docs에서는 이 API가 나오게 된 주요한 이유를 이렇게 설명하고 있다. 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩(lazy-loading) 스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 무한 스크롤(infinite-scroll)을 구현 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정 좀 더 구체적으로 예시를 들어 보자. 만약 스크롤을 .. 더보기
[JavaScript] Unexpected token .. in JSON at position .. 오류 해결하기 문법 오류: 위치 1에서 JSON의 예기치 않은 토큰 r 원인 json구조가 아닌 데이터를 json파일로 생각하고 읽으려고 했을 때 발생한다. 해결방법 콘솔로 데이터의 타입을 확인해보거나, 오타나 따옴표 등의 자잘한 형식오류가 없는지 확인해보도록 하자. 내 경우엔 데이터를 받아온걸 json형식이라고 생각하고 .json()으로 처리한 데이터가 다른 형식이어서 저 오류가 떴고, 형식에 맞춰 다르게 처리를 해주었다. 참고 자료 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/Unexpected_token - https://itprogramming119.tistory.com/entry/%EC%97%90%EB%9F%AC%EC%BD%9.. 더보기
[JavaScript] 커스텀 이벤트 만들기 코딩 중에 커스텀 이벤트를 쓸 상황이 생겨서 애매하게 알고있던걸 이번 기회에 공부해봤다. 커스텀 이벤트 생성 - Event 기존에 존재하는 이벤트(click, mouseover등)를 커스텀으로 변형해서 사용할 수도 있고, 아예 새로운 이름의 커스텀 이벤트를 만들 수도 있다. const event1 = new Event('click'); const event2 = new Event('eventname', { "bubbles" : true, "cancelable" : false, "composed" : true }); bubbles 이벤트 버블링을 하는지 여부 (기본값 false) cancelable 이벤트를 취소할 수 있는지 여부 (기본값 false) composed 이벤트가 Shadow DOM 경계를 넘.. 더보기
[JavaScript] 자바스크립트로 캔버스 제어하기 - 스타일 저장 & 불러오기 (save와 restore) 개요 캔버스의 컨텍스트 영역에서는 한번에 하나의 스타일만 가질 수 있다. 예를 들어, 빨강색의 꽉찬 원과 파란색의 사각형을 그리려면.. 1. 현재 컨텍스트 영역의 채우기 스타일을 빨강색으로 설정한다. 2. 원을 그린다. 3. 현재 컨텍스트 영역의 채우기 스타일을 파란색으로 설정한다. 4. 사각형을 그린다. 한번에 빨강색과 파란색을 설정해두는게 아니라, 위의 예시처럼 스타일 하나를 설정하고 그리고 다시 스타일 하나를 설정하고 그리고.. 하는 방식이다. 그런데 만약, 빨강색 도형을 쭉 그리다가 파란색 도형을 또 쭉 그리다가 다시 빨강색 도형을 쭉 그리다가... 이런 식으로 전에 그렸던 스타일의 도형을 다시 그려야 한다고 하자. 한두번은 그렇다 쳐도, 만약 전에 그렸던 스타일을 자주 다시 그려야 한다면 코드에.. 더보기
[JavaScript] 자바스크립트로 캔버스 제어하기 - 2d 그래픽 그리기 자바스크립트에서 캔버스를 동적으로 제어하는 기능에 대해 공부한 내용 중, 2d 그래픽을 그리는 부분에 대해 정리했다. 캔버스 생성 화면에 createElement로 캔버스 엘리먼트를 생성하고, getContext로 캔버스에 연결된 렌더링 컨텍스트를 정의한다. const myCanvas = document.createElement('canvas'); //캔버스 엘리먼트 생성 const ctx = myCanvas.getContext('2d'); //생성한 캔버스에 컨텍스트를 연결 document.body.appendChild(myCanvas); //body 내에 캔버스를 배치 myCanvas.style.width = 100%; myCanvas.style.height = 100%; 여기서 렌더링 컨텍스트를 정.. 더보기
[JavaScript] JS파일 분리해서 쓰기 (모듈) 모듈이란 js파일 하나에 들어있는 내용이 많아서 분리하게 될 때, 여러 개로 분리한 각각의 파일을 모듈이라고 부른다. 대부분의 브라우저에서 지원되지만, 인터넷 익스플로러에서는 지원되지 않으니 주의. 그리고 모듈은 로컬에서 동작하지 않는다. 로컬 실행 시 라이브 서버 등을 이용할 것. 자바스크립트에서는 일반적인 스크립트 파일과, 불러오기가 가능한 모듈 파일의 타입을 달리 하고 있다. //스크립트 파일 //모듈 파일 모듈 파일은 export 를 사용해 파일 내부의 함수를 외부로 내보낸다. //hello.js export function hello(name){ console.log(`hello, world! I'm ${name}!`); } 모듈 파일을 불러올 때는 import 를 사용한다. 불러오는 함수는 중.. 더보기
[JavaScript] 자바스크립트의 클래스 클래스란 객체 지향 프로그래밍에서 동일한 종류의 객체를 여러 개 생성하기 위한 틀. 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 이루어져 있다. 주로 재사용을 위해 사용되며, 볼륨이 크거나 복잡한 사이트를 만들때 효과적이다. ES6에서 추가된 문법으로, 이전에는 prototype을 기반으로 클래스를 구현할 수 있었다. 클래스 선언 클래스는 함수와 달리 호이스팅 될 때 초기화되지 않는다. 따라서 정의를 먼저 해야 사용할 수 있다는 점에 유의하자. 클래스의 메서드는 클래스의 body(중괄호({}) 내부)에 정의해야 한다. 생성자(constructor) 새 클래스 객체를 생성할 때, 가장 먼저 자동으로 실행되며 객체의 초기 상태를 설정해주는 메서드. 생성자는 클래스 내에 하나만 존재해야 한다. c.. 더보기
[JavaScript] 자바스크립트에서 변수 이름 앞에 오는 달러($), 언더바(_) 다른 사람의 코드를 보다가 변수 앞에 달러 기호($)가 붙어있는 부분이 의문점이 들어서 찾아본 내용을 정리해본다. `${variable}`의 형식이 아닌 변수 이름 자체가 $variable 의 형식이었다. 식별자에서의 $, _ 알아보니 둘 다 일반 문자로, 식별자(변수나 함수) 이름으로 쓰일 때는 알파벳과 똑같이 취급된다. 특수한 기능이 있는 것은 아니고 관습적으로 사용된다. 이 요소를 활용해 변수 이름을 지으면 변수명만 보고도 그 변수의 특성을 쉽게 알아볼 수 있다. 달러 기호($) document.getElementById() 에 대한 바로가기를 나타낼 때 변수명 앞에 달러를 붙여 사용한다. //document.getElementById("test")의 요소를 매개변수로 받는 함수 function t.. 더보기

티스토리툴바