분류 전체보기

불경 읽는 순서와 앱으로 보는 법

불교에 관심이 생기면 가장 먼저 경전을 읽어야겠다는 생각이 듭니다. 하지만 막상 불경을 펼쳐보려 하면 수많은 경전 앞에서 어디서부터 시작해야 할지 막막해집니다.팔만대장경을 전부 읽을 수는 없고, 그렇다고 특정 경전만 읽자니 놓치는 부분이 있을 것 같아 고민이 되기도 합니다. 저 역시 비슷한 고민을 했습니다. 어디서부터 어떻게 읽어야 할지 몰라서 시작도 못 하고 머뭇거린 시간이 길었습니다.그러다가 차근차근 읽어나갈 수 있는 방법을 찾게 되었습니다. 불경은 한 번에 이해해야 하는 것이 아니라, 조금씩 곱씹으며 읽어나가는 것이 중요합니다. 그렇다면 불경은 어떤 순서로 읽는 것이 좋을까요?불경, 어떻게 읽어야 할까? 불경을 처음 접하거나 체계적으로 공부하고 싶다면 다음 순서를 추천드립니다.아함경(니까야) – 불..

ES2021에서 추가된 신기능 5가지

서론 JavaScript는 지속적으로 발전하는 언어로, 새로운 기능이 정기적으로 추가된다. ES2021에서는 보다 직관적이고 효율적인 코드를 작성할 수 있도록 다섯 가지 주요 기능이 도입되었다. 이번 글에서는 ES2021에서 추가된 기능들을 하나씩 살펴보고, 어떻게 활용할 수 있는지 알아본다.추가된 기능1. 논리 할당 연산자 (&&=, ||=, ??=) 기존에는 변수를 조건에 따라 할당할 때 if 문이나 삼항 연산자를 사용해야 했다. ES2021에서는 논리 연산자와 할당 연산자를 결합한 &&=, ||=, ??=가 추가되어, 보다 간결한 코드를 작성할 수 있다.&&= : 기존 값이 true일 때만 새로운 값을 할당한다.||= : 기존 값이 false일 때만 새로운 값을 할당한다.??= : 기존 값이 nul..

React에서 batch 처리와 렌더링 주기: 무한 재렌더링

서론 React는 효율적인 UI 업데이트를 위해 가상 DOM과 상태 관리 시스템을 사용한다. 그러나 상태 업데이트와 렌더링 과정에서 발생하는 Reconciliation은 비용이 큰 작업이다. 이를 최소화하려면 React의 batch 처리와 렌더링 주기를 잘 이해하고 활용해야 한다. 특히 React 18부터 도입된 비동기 배치 처리는 성능 최적화를 위한 핵심 도구이지만, 이 동작을 잘못 이해하면 무한 재렌더링과 같은 문제를 초래할 수 있다.1. React에서 Reconciliation과 Batch 처리의 중요성 Reconciliation은 React가 변경된 가상 DOM을 실제 DOM에 반영하기 위해 차이를 계산하는 과정이다. 이는 매우 비용이 크므로, React는 setState 호출을 최소한의 렌더링 ..

React에서 경로 최적화를 통한 성능 향상

0. 서론  React는 컴포넌트 기반의 UI 라이브러리로, 빠르고 효율적인 사용자 경험을 제공하는 것을 목표로 한다. 하지만 복잡한 애플리케이션에서는 성능이 저하되는 문제가 발생할 수 있다. React의 성능에 가장 큰 영향을 미치는 요소 중 하나는 reconciliation 과정이다. 특히, virtual DOM을 새로 생성하고 diffing 알고리즘을 통해 이전 DOM과 비교하는 과정은 가장 비용이 많이 드는 작업이다. 따라서 컴포넌트 재렌더링을 줄이는 것이 성능 최적화의 핵심이다. 이 글에서는 React에서 컴포넌트의 재렌더링과 이를 최적화하기 위한 전략에 대해 구체적으로 알아본다.1. React에서 컴포넌트 재렌더링 React에서 재렌더링은 render phase에서 컴포넌트의 UI를 다시 계산..

React Hook이란 무엇인가

서론 React Hook은 컴포넌트 계층 구조를 변경하지 않고 상태 관련 로직을 재사용할 수 있도록 도와주는 기능이다. 이를 통해 컴포넌트의 로직을 더 작은 단위로 나눌 수 있으며, React를 클래스 없이 사용할 수 있게 한다. 또한 Hook은 Custom Hook을 통해 특정 로직을 추상화하고 여러 컴포넌트에서 재사용할 수 있도록 만들어준다.Hook을 쓰는 이유 Hook이 도입된 이유는 여러 가지다. 우선 stateful한 로직을 컴포넌트 간에 재사용하기 어려운 문제를 해결하기 위함이다. Hook을 사용하면 상태 로직을 컴포넌트에서 분리하여 독립적으로 테스트하고 재사용할 수 있다. 또한 복잡한 컴포넌트를 더 이해하기 쉽게 만드는 데에도 유용하다. 기존의 lifecycle method를 기준으로 컴포넌..

Redux의 기본 개념

서론 Redux는 애플리케이션의 상태 관리를 단순화하기 위한 JavaScript 라이브러리이다. Redux의 핵심은 모든 상태 변경을 액션이라는 명확한 객체로 설명하는 것이다. 이를 통해 상태가 어떻게, 왜 변경되는지 명확히 알 수 있다. Redux의 철학은 “변화가 발생했다면, 그 이유를 알 수 있어야 한다”는 것이다.  이 글에서는 Redux의 기본 컨셉들과 사용법에 대해 알아보고자 한다Action: 상태 변경의 설명서 Action은 애플리케이션에서 발생하는 일을 설명하는 JavaScript 객체이다. Redux에서 모든 상태 변경은 Action 객체에 의해 발생한다. Action은 type 속성을 반드시 가지고 있으며, 상태 변경에 필요한 추가 데이터를 포함할 수 있다.{ type: 'ADD_TOD..

Redux Middleware와 dispatch의 관계

서론 Redux 톺아보기를 공부하며 “액션을 dispatch만 했는데, Redux는 어떻게 미들웨어를 실행하는 걸까?“라는 질문에 대한 답을 나름대로 내려보는 글이다. 이에 대한 답을 하기 위해서는 Redux의 내부 동작 원리, 특히 applyMiddleware 함수와 compose 함수를 이해해야 하는 것 같다.이번 글에서는 Redux의 dispatch와 미들웨어가 어떻게 연결되고 동작하는지 단계별로 설명한다.기본 dispatch의 동작 Redux의 기본 dispatch는 단순하다.dispatch는 액션을 리듀서로 전달하고, 상태를 업데이트하는 역할을 한다.const store = createStore(reducer);store.dispatch({ type: 'INCREMENT' });// 기본 dis..

JavaScript 이벤트 루프 동작방식: Microtask Queue, Macrotask Queue

console.log(1);setTimeout(() => console.log(2));Promise.resolve().then(() => console.log(3));Promise.resolve().then(() => setTimeout(() => console.log(4)));Promise.resolve().then(() => console.log(5));setTimeout(() => console.log(6));console.log(7);서론 JavaScript의 이벤트 루프는 비동기 작업을 관리하며 프로그램 실행의 중심 역할을 한다. JavaScript 코드가 실행되면 객체와 기본형 변수는 메모리의 힙과 메모리 스택에 로드된다. 이후 함수 호출과 비동기 작업은 콜 스택, 콜백 큐, 마이크로태스크 큐..