개발 블로그

HTML head 태그 안에 자바스크립트 파일을 임포트 했을 때, 어떤 속성이냐에 따라 다운로드, 실행되는 방법이 달라진다. 1. 속성이 없는 경우 1 2 3 cs html을 파싱하다가 script를 만나면 html 파싱을 중단하고 우선 script 파일을 다운로드한 후 실행을 한다. 이어서 나머지 html를 파싱한다. script를 실행하는 구간에서 html 파싱이 잠시 멈추게 되어 시간이 걸린다. 2. async 1 2 3 Colored by Color Scripter cs async 속성은 html을 파싱하다가 script 파일을 만나면 html과 script가 병렬적으로 동시에 다운로드 되고, 다운로드가 빨리 끝난 script 파일부터 실행하게 된다. script 파일이 실행이 되는 구간에는 ht..

Intersection Observer API는 대상 요소와 상위 요소 또는 최상위 문서의 뷰포트의 교차점에서 변경 사항을 비동기식으로 관찰하는 기능이다. 즉, 기본적으로 뷰포트를 기준으로 화면에 요소가 보이는지의 여부를 구별할 수 있는 기능이다. 원하는 요소가 특정한 영역에 들어왔을 때 알려주는 관찰자이다. IntersectionObserver 클래스가 생성될 때 callback 함수와 options 인자가 필요하다. let observer = new IntersectionObserver(callback, options); callback 요소가 영역에 들어올 때 호출되는 콜백 함수이다. 콜백 함수의 인자로 entries와 observer를 받는다. let callback = (entries, obse..

공공데이터포털의 Open API를 활용하여 프로젝트를 진행했다. 코로나19 예방접종센터 조회 API를 활용해 지역을 선택하면 그 지역의 예방접종센터 목록이 표시되고, 지도보기를 누르면 모바일의 경우 새 창으로 지도를 열고, PC의 경우 같은 화면에 지도가 바로 표시되도록 했다. 주요 기능 설명 1. 지역 선택 -세부 지역을 json 파일로 구조화한 후 앞에서 선택한 지역에 따라 해당 json 데이터를 받아와서 option을 동적으로 생성하도록 하였다. -지역을 선택할 때마다 api를 통해 받아온 객체의 지역(key)이 사용자가 선택한 지역과 동일한지 비교 후, 최종 배열이 filter 되도록 하였다. - 2. 목록 표시 -검색 버튼에 이벤트가 발생하면 위의 필터된 최종 배열을 전달하여 html 태그를 생..

영화진흥위원회 api를 이용해서 날짜에 따른 박스오피스 정보를 출력해보았다. api를 이용하려면 아래의 영화진흥위원회 홈페이지에서 회원가입 후, 키 발급/관리 메뉴에서 키를 발급 받으면 된다. www.kobis.or.kr/kobisopenapi/homepg/main/main.do 영화진흥위원회 오픈API OPEN API 서비스 영화진흥위원회 영화관입장권통합전산망에서 제공하는 오픈API 서비스로 더욱 풍요롭고 편안한 영화 서비스를 즐겨보세요. www.kobis.or.kr 오픈 API 탭 > 제공서비스에서 다양한 API를 확인할 수 있다. 나는 이 중 일별 박스오피스를 이용했다. JSON을 이용할 거라서 아래와 같이 .json으로 적고 바로 뒤에 발급받은 키를 붙여 넣었다. 키는 앞에 ?(물음표)를 넣어주어..

이벤트 핸들러(Event Handler) 이벤트가 발생하면 브라우저에서는 이벤트라는 오브젝트를 만들어서 콜백함수에 전달해준다. 이벤트타겟을 상속하는 모든 요소(=모든 엘리먼트)는 이벤트 핸들러를 등록할 수 있다. 이벤트 메서드(api)에는 아래의 3가지가 있다. -addEventListener : 이벤트 추가 -removeEventListener : 이벤트 제거 -dispatchEvent : 인위적으로 이벤트를 전달 버블링과 캡처링(Bubbling and Capturing) : 브라우저에서 이벤트를 처리하는 방법 -capturing : 부모 컨테이너(연회색)에서부터 시작해서 회색, 진회색까지 캡처링을 통해 내려오며 자식요소에 등록된 이벤트 핸들러를 호출하게 된다.(캡처링 단계에서 무언가를 처리하는 일은 ..

렌더링이란 브라우저에서 URL을 입력했을 때의 과정, 브라우저가 HTML, CSS, JavaScript를 화면에 표시되는 일련의 단계을 말한다. 렌더링 과정을 최적화하면 웹 성능을 향상시킬 수 있다. 렌더링(Critical Rendering Path)은 아래의 7단계를 거쳐 진행된다. ①Request/Response : 브라우저가 HTML 파일을 요청한다. ②Loading : 파일을 받아와서 로딩한다. ③Scripting : DOM으로 변환, CSSOM으로 변환한다. ④Rendering : 브라우저 윈도우에 표기를 준비한다. ⑤Layout : 최종적으로 계산된 CSS를 배치하고 위치시킨다. ⑥Paint : 요소를 어떻게 배치했느냐에 따라서 레이어 별로 화면에 픽셀(이미지)을 준비한다. 이 단계는 레이어가..

CSSOM CSS Object Model은 JavaScript에서 CSS를 조작할 수 있는 API 집합이다. HTML 대신 CSS가 대상인 DOM이라고 볼 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법이다. CSSOM은 DOM과 CSS를 병합해서 만들어진다. (DOM+CSS=CSSOM) 정의한 스타일뿐만 아니라 브라우저에서 기본적으로 설정된 모든 속성값들과 Cascading rules에 따라서 합쳐진 모든 CSS값들이 정의되어 있다. = computed style(모든 계산된 스타일) Render Tree Render Tree는 DOM과 CSSOM을 합쳐 만들어진다. (DOM + CSSOM = Render Tree) Render Tree는 최종적으로 사용자에게 보여지는 것들만 ..

1. window 오브젝트의 기능 window는 자바스크립트의 전역객체(global object)이며, 곧 브라우저를 의미한다. winodw 객체에서 사용할 수 있는 기능은 다음과 같다. -DOM : 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다. -BOM : 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다.(navigator, location, fetch, storage 등) -JavaScript : 자바스크립트와 관련된 객체(array, map, date) 2. 브라우저가 HTML을 이해하는 과정 우리가 어떤 페이지의 URL을 입력하고 엔터를 치면, 브라우저는 서버에 html 파일을 요청하게 된다. 브라우저는 받아온 html 파일의 태그를 분석해서 Node..