![[JavaScript] 배열 메서드(map, filter, reduce)](https://blog.kakaocdn.net/dn/d4qyjP/btsJWTaM0FM/CMAZgpEVL76JyGqCJ7J2yK/img.png)
![[JavaScript] 이벤트 루프(Event Loop)](https://blog.kakaocdn.net/dn/BwEhE/btsKgc1TKbh/D3CSjqXJj83kSgbBJ7gj01/img.png)
📚 자바스크립트의 이벤트 루프(Event Loop)란 무엇인가요?자바스크립트는 싱글 스레드 언어예요. 이는 자바스크립트가 한 번에 하나의 작업만을 처리할 수 있다는 뜻이에요. 하지만 실제로는 자바스크립트가 비동기 작업을 아주 효율적으로 처리할 수 있어요. 이는 이벤트 루프(Event Loop)라는 메커니즘 덕분이에요. 자바스크립트의 이벤트 루프는 요리사 한 명이 있는 레스토랑과 같아요. 요리사는 한 번에 하나의 요리만 만들 수 있지만, 요리를 준비하는 동안 다른 일도 처리할 수 있어요. 예를 들어, 요리사가 면을 끓이는 동안 그 시간에 샐러드를 준비하거나, 주문을 받는 식으로 여러 작업을 동시에 처리할 수 있죠. 요리사(자바스크립트)는 요리를 하는 도중(동기 작업) 다른 일이 생기면 주방 밖에서 손님들..
![[CSS] Position](https://blog.kakaocdn.net/dn/bZMlgo/btsKeWMBX8G/MzwUSgkOcSUDC2nOAX8DFk/img.png)
📚 Position이란 무엇인가요?CSS Position 속성은 HTML 요소를 문서 안에서 어떻게 배치할지를 정의하는 중요한 속성이에요. 이 속성을 사용하면 요소를 정확한 위치에 배치하거나, 고정된 위치에 머물도록 만들 수 있어요. 특히 레이아웃을 구성할 때 고정 배치, 상대 배치, 절대 배치 등을 사용하여 요소를 제어하는 것이 매우 중요해요. Position 속성을 이해하면 웹 페이지에서 요소를 자유롭게 배치하고 레이아웃을 더 정교하게 다룰 수 있어요. Position 속성은 화면 위에서 요소를 원하는 위치로 옮기는 조종 도구와 같아요. 어떤 요소는 고정되어 움직이지 않게 만들고, 어떤 요소는 다른 요소에 따라 움직이게 만들 수 있죠.🖥️ CSS Position의 기본 속성과 활용 예시Positi..
![[React] 생명 주기](https://blog.kakaocdn.net/dn/ZNxZl/btsJ4NIxAYv/IsqLGKYt3TVUTTtOF8xQhk/img.png)
📚 컴포넌트의 생명 주기란 무엇인가요?리액트 컴포넌트는 탄생에서부터 소멸까지 생명 주기(lifecycle)를 가지고 있어요. 이를 컴포넌트 생명 주기라고 불러요. 생명 주기 메서드는 컴포넌트가 어떻게 생성되고, 업데이트되며, 제거되는지를 정의해주는 메서드들이에요. 리액트에서는 클래스형 컴포넌트에서 주로 생명 주기 메서드를 사용하며, 함수형 컴포넌트에서는 주로 훅(Hooks)을 사용해 동일한 동작을 구현할 수 있어요. 비유를 들자면, 컴포넌트의 생명 주기는 사람이 태어나고 자라고 결국 생을 마치는 과정과 비슷해요. 컴포넌트는 생성되고, 사용자 상호작용이나 데이터 변경에 따라 업데이트되며, 더 이상 필요하지 않으면 소멸되죠. 이 모든 과정에서 특정 시점마다 실행되는 메서드나 동작을 생명 주기 메서드라고 해..
![[JavaScript] 이벤트 루프(Event Loop)](https://blog.kakaocdn.net/dn/BwEhE/btsKgc1TKbh/D3CSjqXJj83kSgbBJ7gj01/img.png)
![[JavaScript] 배열 메서드(map, filter, reduce)](https://blog.kakaocdn.net/dn/d4qyjP/btsJWTaM0FM/CMAZgpEVL76JyGqCJ7J2yK/img.png)
![[JavaScript] 화살표 함수와 일반 함수의 차이](https://blog.kakaocdn.net/dn/p1Aze/btsJUk1i8yj/uWvIW5418L8AXjKK3s8iF0/img.png)
![[TypeScript] Never 타입](https://blog.kakaocdn.net/dn/XzGC2/btsJUkBixDW/C9VrKFGma7H2S0loOKlDmK/img.png)
![[TypeScript] 열거형(Enums)](https://blog.kakaocdn.net/dn/bz5iG2/btsJUiJbOFC/jtq8aoL8rwclIzeGdBTIBK/img.png)
![[TypeScript] 타입 가드(Type Guard)](https://blog.kakaocdn.net/dn/bb5PFa/btsGMDjnven/2gm9BuGmkjnaHQX0khfoA0/img.png)
![[React] 생명 주기](https://blog.kakaocdn.net/dn/ZNxZl/btsJ4NIxAYv/IsqLGKYt3TVUTTtOF8xQhk/img.png)
![[React] JSX](https://blog.kakaocdn.net/dn/RgBeH/btsJ3jhFlz6/fuLjMSfSzrkm6wr58u2Bck/img.png)
![[React] useEffect](https://blog.kakaocdn.net/dn/cMYdCQ/btsGl2bwLmJ/S4K7p9xHdLFbtaA0qAKcdK/img.png)