Dev Record

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

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

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

* 본 글은 Figma의 'How Figma's multiplayer technology works' 글을 키워드 중심으로만 간략히 살펴보고 이것저것 적은 내용입니다. 원문의 완벽한 번역글이 아니므로, 자세하고 정확한 내용은 아래 본문을 보시면 좋을 것 같습니다! How Figma’s multiplayer technology works A peek into the homegrown solution we built as the first design tool with live collaborative editing. www.figma.com 들어가며 Figma에서 멀티플레이어 기능을 개발하기 시작했을 때, 그들은 자체적인 솔루션을 개발하기로 결정했다고 한다. 다른 디자인 도구에서는 멀티플레이어 기능을 제공..

타입스크립트에서 객체의 key값에 enum을 사용하기 위한 예제입니다. 📁 types/users.ts export enum GradeScope { ETC = 'etc', SILVER = 'silver', GOLD = 'gold', PLATINUM = 'platinum', } import { GradeScope } from '../types/users'; const gradeMap: { [key in GradeScope]: number } = { [GradeScope.ETC]: 0, [GradeScope.SILVER]: 1, [GradeScope.GOLD]: 2, [GradeScope.PLATINUM]: 3, }; 만약 모든 키를 포함하지 않으려면, 옵셔널로 사용해줍니다. import { GradeScop..

트리 자료구조를 중심으로 DOM 탐색 과정 살펴보기 WebKit 의 getElementById 구현부 간략히 살펴보기 추측 및 주관적인 생각이 많이 들어가 있어 잘못된 부분이 있을 수 있습니다. 틀리거나 오해한 부분은 댓글로 알려주시면 감사하겠습니다. 들어가며 🐠 DOM (Document Object Model) 이란 무엇일까요? 🐟 DOM은 브라우저가 전달받은 문서를 해석, 구조화해놓은 결과물입니다. 이 DOM을 기준으로 브라우저는 일련의 과정을 거쳐 실제 화면을 보여줍니다. 우리가 크롬, 사파리같은 브라우저를 통해 특정 URL에 접속했을 때를 상상해봅시다. 브라우저는 그 URL에 해당하는 페이지를 달라고 서버에게 요청하고 서버는 해당 요청에 대한 적절한 응답을 브라우저에게 내려줍니다. 여기서 '적절한..

공부한 내용을 기록합니다. 잘못된 내용이 있으면 댓글 남겨주시면 감사하겠습니다. React 에서의 테스트, 오늘 살짝 실습해보자! 🧪 출처 먼저 기재합니다. https://learn-react-test.vlpt.us/#/ https://ykss.netlify.app/translation/unit-testing-with-jest-react-and-typescript/?utm_source=substack&utm_medium=email https://meetup.toast.com/posts/174 https://www.daleseo.com/react-testing-library/ 지난 시간에는 테스트의 기초에 대해 알아봤습니다. Testing on React (1) 공부한 내용을 기록합니다. 잘못된 내용이 있..

공부한 내용을 기록합니다. 잘못된 내용이 있으면 댓글 남겨주시면 감사하겠습니다. React 에서의 테스트, 오늘 살짝 맛보자! 🧪 출처 먼저 기재합니다. https://learn-react-test.vlpt.us/#/ https://ykss.netlify.app/translation/unit-testing-with-jest-react-and-typescript/?utm_source=substack&utm_medium=email https://meetup.toast.com/posts/174 https://www.daleseo.com/react-testing-library/ 🧪 Test Overview 💡 테스트란? 보통 QA (Quality Assuarance) 과정에서 하는 행동을 살펴보면 이해가 쉬울 ..

공부한 내용을 기록합니다. 잘못된 내용은 댓글 달아주시면 감사하겠습니다! Destructuring assignment Destructuring assignment은 구조 분해 할당이라고도 하며 구조화 된 배열과 같은 이터러블, 또는 객체를 destructuring(비구조화, 구조파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다. 말로만 듣고서는 잘 와닿지 않을 수 있으니 예시를 함께 볼까요? const aplha = ['A', 'B', 'C']; // 이터러블 const [one, two, three] = aplha; console.log(one, two, three); // A B C const apartment = { firstFloor: 'Lerry', secondFloor: 'Loo..

공부한 내용을 기록합니다. 잘못된 내용은 댓글 달아주시면 감사하겠습니다. 프로젝트에서 Next.js 사용하다 클라이언트 사이드 렌더링과 서버 사이드 렌더링에 대한 정리가 필요하겠다 싶어 글을 남깁니다. 참고로 이 글은 각 라이브러리, 프레임워크 동작에 대한 깊은 내용은 없습니다. 렌더링 방식에 대한 큰 그림을 그리기 위해 정리한 글이니 이 점 참고해주시면 감사하겠습니다. frontend server, backend server 먼저 웹에서의 각 구성요소들이 어떤 상호작용을 갖는지 전체적인 그림을 살펴봅시다. 일단 서버(server)는 네트워크를 통해 클라이언트에게 자원을 제공하는 컴퓨터를 의미하고, 어떤 대상이 요청을 보내면 요청에 대한 응답을 넘겨주는 모든 주체를 서버(server)라고 합니다. 웹 환..