전체 (39) 썸네일형 리스트형 [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.. [Navbar] 햄버거 메뉴 애니메이션2 - Html, CSS, JS ⭐ 햄버거 메뉴 애니메이션2 2nd bar가 옆으로 out되고, 1st, 3rd bar가 회전하며 X표시. See the Pen qBqZEje by Eunji Jeon (@emcjrl) on CodePen. body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333; } .menu-trigger, .menu-trigger span { display: inline-block; transition: all 0.4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 50px; height: 44px; } ... [Navbar] 햄버거 메뉴 애니메이션1 - Html, CSS, JS ⭐햄버거 메뉴 애니메이션 1 2nd bar는 투명하게 사라지고, 1st, 3rd bar가 회전하며 X표시. See the Pen ExNKxGR by Eunji Jeon (@emcjrl) on CodePen. body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333; } .menu-trigger, .menu-trigger span { display: inline-block; transition: all 0.4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 50px; height: 44px; } ... [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] Call Stack - 자바스크립트의 콜 스택 Stack LIFO(Last In First Out) 제일 나중에 들어온 것이 제일 먼저 나가는 자료구조 Call Stack 자바스크립트 안에서 실행되는 모든 함수의 호출을 기록하고 추적한다. 모든 process와 thread안에는 각각 저마다의 Call Stack이 들어있다. 일을 수행할 때 어디서 왔고, 어디로 다시 가야 하는지에 대한 정보를 기억해야 하기 때문이다. 1. Javascript가 실행되면 Global Execution Context(anonymous)을 생성 Call Stack에 추가. main 함수를 제일 먼저 호출한다. 2. main 함수를 Call Stack에 추가하고, main 함수 내부에 있는 first 함수를 호출한다. 3. first 함수를 Call Stack에 추가하고, .. [Web] 프로세스와 스레드의 차이(Process vs Thread) 프로세스와 스레드의 차이(Process vs Thread) 프로세스(Process) 컴퓨터 운영체제 위에서 연속적으로 실행되고 있는 프로그램. 각각의 프로세스는 메모리 위에서 독립적으로 실행한다. 하나의 프로세스에 문제가 발생해도 해당 프로세스만 죽게 된다. 프로세스는 각각의 리소스, 즉 독립된 메모리 영역(code, data, stack, heap)을 할당받는다. 프로그램을 위해 작성된 Code. 프로세스 안에서 코드의 동작 순서가 저장되는 Stack. 오브젝트를 생성하거나 데이터를 만들 때 그 데이터가 저장되는 Heap, Data. heap에는 동적으로 할당된 변수가 저장되고, data에는 전역 변수나 static변수가 저장된다. 스레드(Thread) 한 프로세스 안에서 동시에 기능을 수행하는 여러개.. 이전 1 2 3 4 5 다음
