JavaScript (11) 썸네일형 리스트형 [JavaScript] Intersection Observer API 정리 Intersection Observer Intersection Observer는 target과 root의 교차 발생을 비동기적으로 관찰하는 Web API이다. 메인 thread에 영향을 주지 않고, callback를 실행할 수 있도록 한다. 매번 layout을 새로 그려 render tree를 새로 만들지 않고 callback를 실행하므로 브라우저의 성능을 향상시킬 수 있다. ⭐ syntax new IntersectionObserver(callback(entries, observer), [options]); Callback target과 root가 교차되어 화면에 보이게 되었을 때 호출되는 함수 callback은 entries, observer를 매개변수로 받는다 ▪ Entries Intersection.. [JS] setTimeout(), setInterval() 사용 ⭐ setTimeout(callback, [timeout], [param1], [param2]...) 우리가 지정한 시간이 지나면 우리가 지정한 콜백 함수를 호출한다. callback 지정한 시간이 지난 후 호출되는 함수나 문자열. 문자열도 전달할 수 있지만 권장하지는 않는다. timeout 함수의 호출 전 대기 시간 시간의 단위는 ms(1000분의 1초) 정확히 보장된 시간이 아니라 최소 시간을 나타낸다. 만약 값을 생략하면 0이 값으로 사용 값을 0으로 지정해도 함수가 바로 실행되지는 않는다. param1, param2... 지정한 시간이 지난 후 callback 함수에 전달되는 매개변수 // callback 함수를 직접 입력 setTimeout(function() { console.log('hi').. [Navbar] Navbar color change animation - Html, CSS, JS ⭐ Navbar color change animation Navbar 높이만큼 스크롤 했을 때 투명한 Navbar의 색이 변하는 애니메이션 See the Pen oNYzoPp by Eunji Jeon (@emcjrl) on CodePen. E U N J I Home About Skills Work Contact * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; margin: 0; box-sizing: border-box; } a { text-decoration: none; color: #ffffff; } button { background-color: transparent; cursor: pointer; border: none.. [Web] 자바스크립트 동작 원리 - JavaScript Runtime Environment 자바스크립트는 Single threaded language이다. 하지만 브라우저의 Web APIs와 Task Queue, Event Loop를 사용하여 Multi-threading이 가능하다. fetch를 이용히서 백엔드에서 데이터를 받아 온다거나 setTimeout을 이용해서 일정시간이 지난 후 우리가 등록한 콜백함수를 실행하는 등의 일을 동시적으로 수행할 수 있다. Web APIs를 통해서 등록한 함수는 어떻게 자바스크립트 엔진과 서로 동작을 하게 되는걸까? 자바스크립트 엔진에는 Memory Heap과 Call Stack이 있다. Memory Heap은 선언하고 할당한 모든 변수와 객체가 저장되는 공간이다. 구조화 되지 않은 넓은 메모리 영역이다. Call Stack은 우리가 등록한 함수를 실행 순서.. [Web] 프로세스와 스레드의 차이(Process vs Thread) 프로세스와 스레드의 차이(Process vs Thread) 프로세스(Process) 컴퓨터 운영체제 위에서 연속적으로 실행되고 있는 프로그램. 각각의 프로세스는 메모리 위에서 독립적으로 실행한다. 하나의 프로세스에 문제가 발생해도 해당 프로세스만 죽게 된다. 프로세스는 각각의 리소스, 즉 독립된 메모리 영역(code, data, stack, heap)을 할당받는다. 프로그램을 위해 작성된 Code. 프로세스 안에서 코드의 동작 순서가 저장되는 Stack. 오브젝트를 생성하거나 데이터를 만들 때 그 데이터가 저장되는 Heap, Data. heap에는 동적으로 할당된 변수가 저장되고, data에는 전역 변수나 static변수가 저장된다. 스레드(Thread) 한 프로세스 안에서 동시에 기능을 수행하는 여러개.. [Navbar] Change Menu Color - Html, CSS, JS Change Menu Color See the Pen abBbvxm by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS body { display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family:Georgia, 'Times New Roman', Times, serif; } .menu { display: flex; justify-content: center; } .menu_link { font-size: 1.2em; color: rgb(183, 202, 209); padding: 0 20px; list-style: .. [Navbar] Sliding Menu Indicator - Html, CSS, JS Sliding Menu Indicator See the Pen ExNxVJy by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: Georgia, "Times New Roman", Times, serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .navbar { position: relative; display: flex; } .navbar a { position: relative;.. [JS] getBoundingClientRect() - Viewport를 기준으로 하는 위치 값 가져오기 getBoundingClientRect() element.getBoundingClientRect() element의 크기(width, height)와 뷰포트(viewport)를 기준으로 한 위치(left, top, right, bottom, x, y), 이렇게 총 8가지 속성이 있는 DOMRect 객체를 리턴한다. width와 height은 contents뿐 아니라 padding과 border까지 포함한다. width와 height를 제외한 모든 속성은 뷰포트(viewport)의 top-left 를 기준으로 하며, 뷰포트(viewport)를 기준으로 하는 상대적인 값이기 때문에 scroll로 인해 위치가 변경 될 때마다 값이 변경된다. hello body { padding: 0; margin: 0; } .. 이전 1 2 다음
