본문 바로가기

전체 글

 (55)
태스크 큐(Task Queue)의 종류와 우선순위 이해 안녕하세요 :) JavaScript는 싱글 스레드로 동작하는 언어입니다. 하지만 비동기 작업으로 인해 여러 작업을 동시에 처리하는 것처럼 보이게 하는데요. 이 비동기 작업의 핵심 원리는 이벤트 루프와 태스크 큐를 이용한 작업 관리에서 비롯됩니다. 이번 글에서는 비동기 작업의 구조와 실행 순서, 이벤트 루프와 태스크 큐의 역할을 단계별로 알아보도록 하겠습니다. 우선 태스크 큐(Task Queue or Callback Queue)가 무엇인지, 어떤 역할을 하는지 먼저 살펴보겠습니다. Task Queue란?태스크 큐는 JS에서 비동기 작업을 대기시키고 관리하는 공간입니다. JS가 싱글 스레드 기반으로 동작하는 언어라서 한 번에 한 가지 작업만 처리할 수 있지만, 웹 브라우저나 Node.js 환경에서 비동기 작..
Context API로 전역 상태 관리하기 안녕하세요 :) 오늘은 React의 상태 관리 Hooks인 Context API에 대해 알아보겠습니다. 프론트엔드 개발을 하다 보면 컴포넌트 간의 데이터 전달이 생각보다 까다롭다는 것을 느낀 적이 있을 겁니다. 한 페이지에서만 사용하는 데이터라면 props로 그냥 보내버리면 되지만, 애플리케이션 전체에서 필요한 데이터를 여러 컴포넌트로 전달해야 할 때나, 너무 멀리있는 상위 컴포넌트의 데이터를 하위 컴포넌트에서 사용하고 싶은 경우가 한 번씩 있으셨을 거라고 생각합니다. 모든 컴포넌트를 거쳐가며 데이터를 전달하는 것은 너무 불편한 과정입니다. 그럼 어떻게 중간 단계를 거치지 않고 필요한 컴포넌트가 데이터를 바로 사용할 수 있도록 할 수 있을까요?Context API를 사용하면 위와 같은 고민을 조금 줄일 ..
JWT란 뭘까? 안녕하세요 :) 오늘은 JWT에 대해 알아보겠습니다. 현실 세계에서 사람이 각자 자신의 신분을 보증하는 것처럼, 웹 환경에서도 사용자 개개인을 인증하는 어떤 방법이 필요합니다. 웹 환경에서는 JWT가 그 역할을 해주는데요.이 글에서는 JWT가 무엇인지, 어떻게 구성되고 작동하는지, 실제 인증 과정에서 어떤 역할을 하는지 살펴보도록 하겠습니다.  JWT란?Json Web Token의 약자이며, 웹 애플리케이션에서 사용자 인증과 데이터 교환을 위해 사용되는 토큰 기반 Stateless(무상태)인증 방식입니다. 여기서 무상태 인증 방식이란 무엇일까요?서버가 사용자 인증 정보를 별도로 저장하지 않고, 클라이언트가 매 요청마다 토큰을 서버로 보내어 인증을 유지하는 방식을 말합니다. 이 방식을 사용하게 되면, 서버..
useRef란? 안녕하세요 :) 오늘은 React Hooks 중 하나인 useRef에 대해 알아보겠습니다. React 개발에서 상태 관리는 중요하게 적용되는 요소 중 하나인데, 상태 변화가 화면에 바로 반영되지 않아도 되는 상황들이 있습니다. 그럴 때는 불필요하게 렌더링이 되는 걸 막는 방법이 필요하게 됩니다. 이 글에서는 useRef라는 훅을 소개하고, 언제 어떻게 사용하는지, 같은 상태 변화를 담당하고 있는 useState와는 뭐가 다른지를 살펴보겠습니다. useRef란?React 공식 문서에서는 useRef를 '렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 React Hook'이라고 소개하고 있습니다.useRef is a React Hook that lets you reference a value that’s..
대용량 데이터 처리, 어떻게 하는 걸까? 안녕하세요:) 오늘은 대용량 데이터를 어떻게 처리하는지에 대해 알아보려고 합니다. 유튜브나 구글 같은 대형 플랫폼에서는 매일 수십억 명의 사용자가 콘텐츠를 소비하고, 이로 인해 엄청난 양의 데이터가 실시간으로 처리됩니다. 이러한 대규모 데이터를 처리하고 저장하는 기술이 없다면, 서비스는 속도가 느려지고나 심한 경우 중단될 수도 있습니다. 대용량 데이터를 어떻게 효율적으로 관리하면서 처리할 수 있을까요?? '분산 스토리지 시스템'을 통해 알아보도록 하겠습니다. 분산 스토리지 시스템Distributed Storage System(DSS)이란, 데이터를 한 곳이 아니라 여러 곳에 나누어 저장하는 시스템입니다. 한 서버(컴퓨터)에 모든 데이터를 저장하는 대신, 여러 서버에 데이터를 나누어 저장함으로써, 더 많은..
SSH에 대해 알아보자. 안녕하세요:)오늘은 SSH에 대해 알아보도록 하겠습니다. SSH는 개발자나 서버 관련 일을 하게 된다면 쉽게 접하게 되는 일종의 도구인데, 서버같은 원격 컴퓨터에 안전하게 접속할 수 있게 해주는 기술입니다. 쉽게 말하면, 인터넷을 통해 다른 컴퓨터에 명령을 내리거나, 파일을 전송하는 방법인데, 중요한 건 SSH를 사용함으로써 보안이 잘 지켜진다는 점입니다.  조금 더 구체적으로 알아볼까요? SSH를 접하게 되는 순간보통 서버에 접속해서 뭔가를 할 때 처음 SSH를 접하게 될 거라고 생각합니다. 예를 들어, AWS나 네이버 클라우드와 같은 클라우드 서비스를 사용해서 서버를 만들면, 서버에 접속하려고 SSH를 사용하게 됩니다. 이때, 서버에 접속할 때 필요한 인증 파일을 받는데, 이걸 pem 파일이라고 부릅..
Polling과 SSE, 실시간 통신에서 무엇이 더 적합할까? 안녕하세요 :)오늘은 외주 프로젝트를 하나 받게 되었습니다.이미지에 보이는 것처럼, '사용자가 업로드한 동영상을 처리한 후, 보행 파라미터 시각화 결과를 웹앱에서 보여주는' 작업이었습니다.프로젝트를 시작하기 전에 '어떻게 하면 처리된 데이터를 실시간으로 빠르게 시각화할 수 있을까?'를 고민하게 되었고, 이에 대한 해결책으로 Polling과 SSE(Server-Sent Events)를 고려하게 되었습니다. 처음에는 SSE가 적합할 것 같았지만, 팀원과 논의 후 Polling이 더 나은 선택이라는 결론에 도달하게 되었습니다. 이 글에서는 Polling과 SSE의 차이점을 설명하고, 왜 Polling이 더 적합하다고 생각했는지를 정리해보겠습니다.우선 Polling과 SSE가 뭔지 알아야겠죠? 먼저 Pollin..
JavaScript가 싱글 스레드인 이유 안녕하세요 :)자바스크립트는 웹 브라우저 환경에서 동작하는 언어로, 동기와 비동기 작업을 모두 처리하면서 싱글 스레드 구조를 유지하고 있습니다. 오늘은 자바스크립트가 어떻게 이러한 구조를 선택하게 되었으며 싱글 스레드가 어떤 이점을 제공하는지 알아보도록 하겠습니다. JS가 싱글 스레드(Single Thread)인 이유를 알기 위해서는 싱글 스레드가 무엇인지부터 알아야겠죠? 싱글 스레드란?싱글 스레드는 한 번에 하나의 작업만 순차적으로 처리할 수 있는 구조를 말합니다. 하나의 스레드가 모든 작업을 처리하며, 한 작업이 끝나야만 다음 작업이 실행될 수 있습니다. 이러한 싱글 스레드의 장점은 무엇일까요? 가장 큰 장점은 복잡한 스레드 관리가 필요 없다는 것입니다. 여러 스레드를 동시에 처리하는 환경에서는 경쟁..

티스토리툴바