Dev Record

오늘은 자바스크립트의 비동기 프로그래밍 중 Promise, async/await에 대해 예시와 함께 알아보겠습니다. 이 글은 프로미스와 async/await의 내용 설명에 대한 모든 것을 담고 있지는 않습니다. 프로미스는 간단하게만 살펴보고, async/await에 대해서는 시뮬레이션과 코드 진행의 흐름 살펴보기 위주로 작성되었습니다. 참고로 콜백에 대한 글이 궁금하시다면 아래 글을 읽고 오셔도 좋을 것 같습니다. Javascript의 비동기 프로그래밍 - (1) 콜백, 뭐라고 생각하세요? 오늘은 자바스크립트의 비동기 프로그래밍에 대해 알아보겠습니다. 이 글은 이벤트 루프의 동작, 호출 스택, 메모리 힙, 태스크 큐 등에 대한 이해를 기반으로 작성되었습니다. 들어가며 자바스 lerryroad.tistor..

오늘은 자바스크립트의 비동기 프로그래밍에 대해 알아보겠습니다. 이 글은 이벤트 루프의 동작, 호출 스택, 메모리 힙, 태스크 큐 등에 대한 이해를 기반으로 작성되었습니다. 들어가며 자바스크립트는 기본적으로 싱글 스레드입니다. 이러한 동기적 처리는 한 작업이 완료될 때까지 다음 작업을 실행하지 않습니다. 동시에 하나의 작업만 처리한다는 뜻입니다. 우리는 여기서 하나의 작업이 다른 작업들의 병목현상이 될 수 있다는 문제를 느끼게 됩니다. 예를 들어, 웹 페이지에서 서버로부터 데이터를 가져오는 동안 사용자 인터페이스가 응답하지 않는 상황이 발생할 수도 있죠. 자바스크립트 엔진’만’ 살펴보면 단일 호출 스택을 사용하기 때문에 충분히 우려되는 문제입니다. 그러나 브라우저에서 자바스크립트 코드가 실행될 때 우려했던..

자료구조별 연습 0️⃣ Map # 선언방법 dictionary = {} or dict() # 딕셔너리 for 문 # 1. 일반적으로 for문을 돌리면 key값이 순회된다. for key in a: ... # 2. value값을 순회하기위해서는 values()를 사용 for value in a.values(): ... # 3. key와 value를 한꺼번에 순회하려면 items()를 사용 for key, value in a.items(): ... # 4. dictionary에서 in 값은 key값에 한해서 동작 # 5. 딕셔너리의 요소 삭제 a = {'alice': [1, 2, 3], 'bob': 20, 'tony': 15, 'suzy': 30} del a['alice'] >>> {'bob': 20, 't..

자료구조별 연습 0️⃣ 스택 * LIFO * 원소의 추가와 삭제가 O(1), 제일 상단이 아닌 나머지 원소들의 확인과 변경이 원칙적으로는 불가하다. * 파이썬, 자바스크립트의 내장 array는 쉽게 스택처럼 동작할 수 있다. (append, pop / push, pop) 1️⃣ 큐 * FIFO * 원소의 추가와 삭제, 제일 앞/뒤의 원소 확인이 O(1), 제일 앞/뒤가 아닌 나머지 원소들의 확인과 변경이 원칙적으로는 불가능하다. * 원소 변경에 따라 큐의 시작을 가리키는 head, 끝부분을 가리키는 tail이 재조정된다. * 원형큐를 사용하면 큐에서의 삭제가 발생할 때마다 생기는 쓸모없는 공간의 낭비를 줄일 수 있다. * 파이썬에서는 deque을 활용하면 큐처럼 동작할 수 있다. from collecti..

들어가며 카카오뱅크 인재영입 페이지를 보면, 위와 같이 목록을 스크롤 함에 따라 강조되는 키워드가 다름을 알 수 있습니다. 스크롤에 따른 인터랙션은 웹에서 자주 사용되는 기능 중 하나로, 이번 포스트에서는 React에서 목록의 키워드를 스크롤에 따라 강조할 수 있는 기능을 구현해 볼 것입니다. 📌 완성된 결과를 미리보면 다음과 같습니다. 스크롤 이벤트란? 스크롤 이벤트는 웹 페이지의 스크롤바가 움직일 때마다 발생하는 이벤트입니다. JavaScript에서는 이를 감지하고, 특정 함수나 동작을 실행하는 데 활용할 수 있습니다. window.scrollY란? window.scrollY는 웹 페이지의 상단부터 현재 보이는 화면의 상단까지의 거리(픽셀 값)를 반환하는 속성입니다. 즉, 이 값은 사용자가 얼마나 많..

🛎 보러가기 🛒 🐱 Github 🐱 live example 🛎 들어가며 프로젝트에서 사용할 모양새로 변경하기 위해 다듬던 중, 정말 저렇게 스타일과 관련된 옵션을 바리바리 내려주는게 좋을까? 하는 의문이 들었다. 로직이 딱 필요한 거면 UI 없이 훅을 리턴하는 식으로 작성할 수도 있을 것이고, 혹은 코어 로직을 따로 분리하여 Headless UI로 독립적인 모듈로 관리하게 할 수도 있을 것 같았다. 로직이 담긴 코어 라이브러리는 추후에 분리하는 작업을 가지기로 하고, 일단은 디자인된 모양새로 사용할 수 있게 불필요해보이는 Props를 제거하고 + 같은 역할이지만 이리저리 분산된 코드들을 좀 더 정돈해보는 건 어떨까 생각했다. 🛎 주요 변경사항 🧹 1. 관심사 분리하기 셀렉터에서는 선택 모드가 day (요..

들어가며 기존에는 styled-components로 스타일링을 작성했었고, 이를 가져와 사용했습니다. import styled from 'styled-components'; export const Wrapper = styled.div` display: flex; justify-content: center; width: 100%; height: 70px; background: #fff; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15); `; export const ContentWrapper = styled.div` display: flex; justify-content: space-between; align-items: center; width: 100%; height: 1..

그리디 알고리즘 현재 상황에서 지금 당장 좋은 것만 고르는 방법 그리디로 얻은 해가 최적의 해를 보장할 수 있는가?에 대한 정당성을 늘 고민할 것 🚀 그리디하게 해결하려고 할 때 다루기 쉬운 자료구조: 배열, 힙, 스택 등 🚀 주요 아이디어: 정렬, 조건에 맞춰 pop 🚀 알고 있는 걸 잘 꺼내자. 문제풀이 ✅ 2839번 설탕배달 (S4) 1931번: 회의실 배정 (1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다. www.acmicpc.net def getInput(): return int(input()) def solution(): n = getInput() total = n bucket = 0 # case 1 if n % 5 == 0: return n // 5 while tot..

업데이트 사항 (w. 2023/08/24) https://lerryroad.tistory.com/136 컴포넌트 props 인터페이스를 대폭 수정, 구현 구조를 변경하여 버전 2.X.X로 업데이트했습니다. outdated된 내용 또한 아래 본문에 표시해뒀는데 오래된 버전에 대한 내용은 🚫, 업데이트된 버전에 대한 내용은 그 옆에 ✅로 작성했으니 참고하시면 좋을 것 같습니다. npm & github 🐱 Github 🐱 live example 현재 Vite + React + Typescript 환경에서 진행했기 때문에 이에 맞춰서 세팅을 진행했습니다. Vite Vue.js 개발을 위한 빠른 개발 도구로 Vue.js 애플리케이션 개발에 최적화되어 있지만, 다른 프레임워크나 라이브러리에서도 호환하여 사용될 수 ..

업데이트 사항 (w. 2023/08/24) https://lerryroad.tistory.com/136 컴포넌트 props 인터페이스를 대폭 수정, 구현 구조를 변경하여 버전 2.X.X로 업데이트했습니다. outdated된 내용 또한 아래 본문에 표시해뒀는데 오래된 버전에 대한 내용은 🚫, 업데이트된 버전에 대한 내용은 그 옆에 ✅로 작성했으니 참고하면 좋을 것 같습니다. npm & github 🐱 Github 🐱 live example 이번 글에서는 간단하게 코드 구조를 살펴보고자 합니다. 0. 디렉토리 구조 🚫 Outdated version 더보기 ./src ├── components │ └── DraggableSelector │ ├── ColumnLabel │ │ ├── index.tsx │ │ └..