[JS] 동작원리

👀 JS 엔진과 구동 환경자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다.Google에서 만든 V8 엔진이 가장 대표적인 예시이다. 자바스크립트 엔진은 Memory Heap과 Call Stack으로 이루어져 있다.Memory Heap : 메모리 할당이 일어나는 곳으로 변수와 함수 같은 객체 등이 담기는 곳이다.Call Stack : 함수를 호출들이 쌓이는 스택이다.자바스크립트 엔진 자체는 싱글 스레드이다. 실제 자바스크립트가 구동되는 환경인 웹 브라우저는 멀티 스레드로 동작하기 때문에 비동기 처리가 가능한 것이다.정확히는 Web API가 멀티 스레드로 동작하는 것이다. 따라서 자바스크립트의 런타임 환경은 위의 그림과 같다.Web APIs : 브라우저에서 제공하는 API들로, 비동기 처리를 ..

• format_list_bulleted HTML,CSS,JS
• · 2024. 8. 5.
• textsms

[개발] Debounce와 Throttle

Debounce와 Throttle은 이벤트나 함수 호출의 빈도를 줄여서 성능을 최적화 시키기 위해 사용되는 개념들이다.검색하는 상황을 예시로 들어보자.한 글자 입력시 마다 요청을 보내는 것보다, 입력 중간중간 특정 시점이나 입력이 끝난 후 요청을 보낸다면 api 호출의 수가 줄어들게 된다.이 때, Throttle은 특정 시점에 api를 호출하는 것이고 Debounce는 입력이 끝난 후에 api를 호출하는 것이다.👀 Debounce연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식이다.주로 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용한다. 요청이 들어오고 일정 시간이 지난 후에 요청을 수행한다.일정 시간 안에 같은 요청이 추가로 들어오면 이전 요청은 취소된다. 이벤트를 실행하는 기점..

• format_list_bulleted 개발
• · 2024. 8. 2.
• textsms

[WEB] 이벤트 전파와 이벤트 위임

❗️이벤트 전파(Event Propagation)자바스크립트에서 이벤트가 발생하면 세가지 단계를 거친다.캡쳐링 단계상위 요소 -> 하위 요소 DOM 트리의 가장 상위 요소인 document에서 이벤트가 발생한다.document부터 하위 요소들을 타고 target 요소까지 내려온다.target 단계이벤트 target에 도달이벤트가 target에 도착하면, 콜백 함수를 통해 이벤트를 처리한다.버블링 단계하위 요소 -> 상위 요소다시 이벤트가 target부터 상위 요소들을 타고 document까지 올라간다.캡쳐링 단계와 동일하게 모든 부모 요소를 지나간다.한 줄 요약하자면!이벤트 캡쳐링 : 가장 상위 요소에서 이벤트가 발생한 타겟 요소까지 내려가는 것이다.이벤트 버블링 : 타겟 요소에서 이벤트가 발생했을 때,..

• format_list_bulleted WEB
• · 2024. 8. 2.
• textsms

[WEB] 웹 레이아웃

웹 사이트를 들어갔는데 필요한 정보를 한 번에 찾을 수 없다면 매우 불편하다.또한 화면의 구성이 이상하다면 정보를 보는데 방해가 될 수가 있다.이러한 점들을 고려해서 웹 레이아웃을 정해야 한다. 🌟  반응형 vs 적응형- 반응형화면 크기가 변경됨에 레이아웃이 달라지는 방식이다.깃허브 사이트가 반응형 사이트의 예시이다.화면의 크기가 변함에 따라 요소들의 크기가 변하다가 어느 순간이 되면 레이아웃이 변경되는걸 볼 수 있다. 장점웹/모바일 모두 동일한 사용자 경험을 제공한다.하나의 디자인에서 레이아웃만 변경하면 된다. 단점레이아웃을 세밀하게 조정해야 하기 때문에 반응형보다 까다롭다.모든 콘텐츠를 불러와서 화면 크기에 따라 자동으로 조정하기 때문에 로딩시간이 적응형에 비해 오래 걸린다. - 적응형모바일, 태블..

• format_list_bulleted WEB
• · 2024. 7. 31.
• textsms

[CSS] Border vs Outline

🌟 Border vs Outline- 공간 차지border은 공간을 차지하기 때문에 width가 200px인 요소에 5px의 border를 적용한다면 총 width는 (200 + 5 + 5) = 210px 이 된다.outline은 공간을 차지하지 않기 때문에 요소 자체의 길이에는 변화가 없다. - 주변 요소의 영향border를 적용하면 해당 요소의 크기가 변하기 때문에 레이아웃에 영향을 줄 수 있다.outline은 주변 요소를 가리거나, 주변요소에 가려질 수 있다. - 스타일링border는 border-top, border-left와 같이 한 쪽에만 border를 적용해 줄 수 있다.outline은 한 쪽에만 적용할 수 없다. - CSS Box Modelborder은 CSS Box Model에 포함되지..

• format_list_bulleted WEB
• · 2024. 7. 31.
• textsms

[Git] Squash Merge..

내 브랜치가 오래된 브랜치란 사실과 pull을 받지 않았다는 사실을 잊은 채 merge를 시도했다.merge가 안된다는 오류가 떴고, rebase를 해야겠다고 결심했다.그래서 rebase를 했는데 계속해서 conflict가 생겼고.. conflict를 해결하다가 정신을 놓아버린 나머지 merge까지 시켰다.. 그 결과 그래프가 난리가 났고 ㅋㅋㅋㅋㅋㅋㅋ 기본 merge가 squash merge로 변경되었다.. 이래서 신입사원한테 merge 권한 안준다는 깨달음을 팀장 오빠에게 안겨주었다ㅎㅎ..- Merge 대부분 사용하는 방식으로, 커밋 이력이 모두 남는다. - Squash MergeSquash는 여러 개의 커밋을 하나로 합치는 것을 의미한다.Squash Merge를 하게 되면 이전에 했던 커밋 히스토리..

• format_list_bulleted Git
• · 2024. 7. 15.
• textsms