전체 글32 Dart에서 비동기 작업을 처리하는 방법 - 1 (Future) 대표적인 싱글 스레드 언어인 JavaScript는 비동기 작업을 처리하기 위해 Web API와 Event Loop를 활용합니다. JavaScript 엔진 내부에서 직접 비동기 작업을 처리하는 것이 아니라, 작업을 Web API에 위임한 후 **이벤트 루프(Event Loop)**를 통해 결과를 받아와 실행하는 방식이죠.Dart도 이와 유사한 방식으로 비동기 작업을 처리합니다. Dart 내부에서 모든 작업을 실행하는 것이 아니라, Dart VM과 Event Loop를 활용하여 비동기 작업을 관리합니다.공식 문서에서도 Event Queue 에 대해 설명하고 있으며, Dart의 이벤트 루프 동작 방식에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다. Dart Event Loop Dart의 동시성Isol.. 2025. 3. 15. [React] 함수형 컴포넌트를 권장하는 이유? React에 클래스형 컴포넌트를 지양하고 함수형 컴포넌트를 권장하는 이유가 궁금했습니다.우선 클래스형 컴포넌트는 컴포넌트가 언제 렌더링되고 파괴되는지(Lfiecycle), 그리고 각종 정보(DOM node 주소, Component 의 Instance)등을 가지고있습니다.클래스형 컴포넌트함수형 컴포넌트가 등장하기 이전의 컴포넌트 형태입니다.class ParentComponent extends React.Component { constructor(props) { super(props); this.childRef = React.createRef(); // 자식 컴포넌트 참조 this.state = { showChild: true }; } toggleChild = () => { thi.. 2025. 3. 10. [CS] 브라우저에 URL을 입력하면 일어나는 일 멀티 프로세스 브라우저브라우저 프로세스주소 표시줄, 북마크, 뒤로/앞으로 버튼 등 UI 요소 제어다른 프로세스들과의 조율 및 관리 담당렌더러 프로세스웹 페이지 콘텐츠 처리 및 표시탭마다 별도의 프로세스 생성GPU 프로세스여러 탭의 렌더링 작업을 통합 처리하드웨어 가속을 위한 별도 프로세스로 분리플러그인 프로세스웹사이트에서 사용하는 플러그인 제어캡처 플러그인, OneTab 등의 기능 처리유틸리티 프로세스네트워크 요청, 파일 접근 등 권한이 필요한 작업 처리프로세스끼리는 IPC(Inter Process Communication, 프로세스간 통신)을 사용한다.사용자가 브라우저에 URL을 입력 후 웹사이트가 보이기 까지의 과정Handling inputs사용자가 URL에 Text를 입력하면Browser Proce.. 2024. 12. 19. [React] Error Boundary란? Error BoundaryUI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안 됩니다. React 사용자들이 겪는 이 문제를 해결하기 위해 React 16에서는 에러 경계(“error boundary”)라는 새로운 개념이 도입되었습니다.컴포넌트 생성Vite를 통해 생성하면 제공되는 App.tsx의 일부를 수정하였습니다.결과App에서 이미지를 보여주는 내용과 하단에 보이는 텍스트가 props를 받을수 있도록 컴포넌트를 생성했는데, 위 코드에서는 props를 전달해주고 있지 않습니다. 이렇게 되면 에러가 발생하겠죠?ErrorBoundary 적용ErrorBoundary를 적용하지않으면 에러를 캐치하지 못하고 앱이 중단상태가 되어 사용자 경험에도 별로 좋지 않습니다. 이런 상황을 고려.. 2024. 12. 5. [React] React-Query 뽀개기 이번글에서는 React에서 서버측 데이터 캐싱할 때 자주사용되는 React-Query에 대해 알아보겠습니다. https://tanstack.com/query/v5/docs/framework/react/overview TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식문서에 소개된 내용중에 React-Query를 사용하면 좋은점에 대해 소개되어있습니다.1. 애플리케이션에서 복잡.. 2024. 11. 26. [React] 프로젝트 관리 시스템 만들기(feat . Supabase) 안녕하세요! 저는 이번에 React를 공부해보면서 프로젝트 관리 시스템을 만들어 보려고합니다.저는 새로운 것을 배울때 이론적인 부분은 어느정도 공부해놓고, 그 이후에 무언가를 만들어보면서 부족한 부분을 채워나가는 편입니다. 우선 무엇을 만들지 정해야하는데 저는 프로젝트 관리 시스템(Project-Management-System) 줄여서 PMS 라고 표현하겠습니다. 위 내용을 구현하기 위해 저는 Supabase를 이용하기로 했습니다. 저는 백엔드 개발을 할 줄 모르기 때문에 다양한 기능(인증, Edge Function) 등 유용한 기능을 제공하여 개발시간을 단축시켜주고 있습니다.주요 기능PMS는 사용자가 프로젝트와 목표를 관리할 수 있는 시스템인데 아래에서 구현하려는 기능을 요약해보았습니다.기능 소개인증로.. 2024. 11. 21. 이전 1 2 3 4 ··· 6 다음
