이벤트 HTML 요소의 대한 어떠한 사건의 발생을 의미합니다. 이벤트 리스너 요소에서 이벤트가 발생할 경우, 해당 이벤트를 처리하는 함수 이며 이를 이벤트 핸들러 라고 합니다. 대충 우리가 알고 있는 addEventListener 가 대표적 입니다. 아래 링크를 통해 addEventListener의 대한 자세한 설명을 알 수 있습니다. 링크: [https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener] function eventHandler() { console.log('event'); } // 이벤트 등록 window.addEventListener('mousedown', eventHandler); // 이벤트 제거 window..
이벤트 루프 어떤 작업이 발생하여 이벤트 발생 시 내부에서 호출되는 함수들을 태스크 큐(Task Queue)에 전달하고, 콜 스택(Call Stack)에 쌓여있는 함수가 없을 때, 태스크 큐(Task Queue)에 담겨있는 함수들을 콜 스택(Call Stack)으로 넘겨줍니다. 이러한 이벤트 루프를 제공함으로써, 자바스크립트는 싱글 스레드지만, 비동기 방식으로 동시성을 지원합니다. 자바스크립트 언어에는 이벤트 루프가 없고 자바스크립트 런타임 환경을 제공하는 브라우저, Node가 담당한다. 이벤트 루프 동작 setTimeout을 하는 순간 백그라운드를 걸쳐 태스크 큐로 갑니다. 아래 순서를 봐보자. const start = () => console.log('2'); console.log('1'); setT..
클로저(closure) 내부 함수 내에서 외부 함수의 변수에 접근하는 것을 말한다. (그 반대는 안됨!) 외부 함수에서 변수를 선언하고 그 변수를 내부 함수가 사용하고 있다면, 내부 함수가 끝날 때까지 소멸하지 않는다. 예제 function outFunc() { var out = 'outFunc'; function inFunc() { var inf = 'inFunc'; return console.log(out + ', ' + inf); } inFunc(); } outFunc(); // outFunc, inFunc 해당 함수를 실행하면, 내부함수 안에 out이라는 변수가 존재하여 값이 outFunc, inFunc 가 나오는 것을 볼 수 있다. 그렇다면, 내부함수에서 out을 빼보고 inFunc 안에 브레이..
자바스크립트의 this 자바스크립트의 this 는 상황에 따라 달라집니다. 자바스크립트의 일반적인 this 는 전역 객체를 바라봅니다. 또한 use strict 모드에서는 this 는 undefined 입니다. // 일반함수 (전역객체) function normal() { console.log(this); // Window // 내부함수 (전역객체) 함수의 함수를 선언해도 this 는 Window 로 같습니다. function inside() { console.log(this); // Window } inside(); } normal(); // 콜백함수 (전역객체) // 화살표 함수 (전역객체) const cb = { callback: function() { setTimeout(function() { c..
비동기 특정 작업이 완료될 때까지 기다리지 않고, 다음 작업을 이어서 실행해 나가는 것을 말합니다. 자바스크립트는 기본적으로 싱글 스레드 기반으로 동기적으로 실행되는데, 이렇다 보니 웹에서 계속 동기적으로 기능이 동작하다 보면, 속도가 느린 것처럼 보이게 되는 현상이 발생합니다.. (그렇기 때문에 비동기를 써야 함!) 콜백 콜백 함수는 함수의 인수로 넘기는 함수인데, 콜백함수는 비동기 프로그래밍에서 아주 유용한 녀석입니다. 콜백 함수를 이용하면, 비동기 방식에 시점을 잡아 특정 시점에 호출할 수가 있다. 간단하게 아래와 같이 콜백 함수를 이용하여 비동기를 처리할 수 있습니다. const myCallBack = () => console.log('콜백!'); // 5초 뒤, myCallBack 호출!! se..
자바스크립트 최적화 웹 개발을 하게 되면, 웹페이지의 성능 문제를 만나게 됩니다... 거기서 대부분의 문제는 리플로우와 리페인트가 발생(돔을 건드리면.. 아주 큰일..나는 거야..) 하며, 시간을 잡아먹습니다... (특히, 자사 웹페이지 또는 솔루션을 개발하다 보면 이와 같은 이슈를 더 많이 만나게 됩니다... 슬픔..) 하지만, 이런 리플로우나 리페인트가 발생하는 것은 어쩔 수 없는 것입니다. 하지만, 이러한 현상을 얼마나 최소하면서 최적화 시킬 수 있는지가 성능을 개선할 수 있는 요지입니다.. 브라우저 렌더링 Dom, Cssom 생성 => RenderTree 생성 => 레이아웃 => 페인트 브라우저 렌더링은 HTML, CSS 문서를 파싱 후, DOM Tree와 CSSOM Tree를 생성 이후에, 이 ..
- Total
- Today
- Yesterday
- docker
- Vite
- cors
- vscode
- Storybook
- React
- 스벨트
- Github Actions
- NUXT
- 네이버 서치 어드바이저
- 오블완
- nuxt2
- 티스토리챌린지
- dockerfile
- nodejs
- nextjs14
- svelte
- Git
- webpack
- Embedding
- seo
- NextJS
- 깃허브
- AWS
- openAI
- vue router
- vue composition api
- 타입스크립트
- nextjs13
- 서버 to 서버
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |