많은 사람들이 "NodeJS는 싱글 쓰레드다." 라고 말합니다.하지만 대부분은 "왜" 싱글 쓰레드로 만들어졌는지 알지 못합니다. 이번 글에서는 노드를 만든 Ryan Dahl이 왜 싱글 쓰레드로 설계했는지,노드에 담긴 철학이 무엇인지 설명드리겠습니다. 블로그에 개발관련 글을 작성중이니 많은 관심 부탁드립니다.1. 병렬 처리대부분의 시스템은 쓰레드를 이용해 병렬 연산을 수행합니다.쓰레드는 자원을 공유하고 동시 접근 가능한 특징이 있습니다. 바로 이 지점에서 문제가 발생하는데요.데드락, 동시 수정, 동시 접근 등등 수많은 오류가 나타납니다. 이 오류를 해결하기 위해 쓰레드가 자원에 락을 걸고 사용후에는 해제하고,다른 쓰레드는 손가락만 빨며 기다리고... 수많은 오류가 나타납니다. 순차적 처리와 달리 병렬 처리..

See the Pen Untitled by Aierse (@Aierse) on CodePen.">See the Pen Untitled by Aierse (@Aierse) on CodePen. 매번 로딩바를 구현할 필요없이 로딩 애니메이션을 제공하는 리액트 라이브러리를 소개합니다.react-spinner는 로딩 애니메이션이 적용된 컴포넌트들을 제공합니다. 1. 설치npm i @aierse/react-spinner 2. 사용법import Spinner from "@aierse/react-spinner"function Example() { return ( {/* Bricks 애니메이션 */} {/* Spin 애니메이션 */} {/* Coll..

컴포넌트를 설계하다보면 같은 역할, 비슷한 역할들의 컴포넌트들이 생성됩니다. 예를 들어 모바일 버전 네비게이션, PC 버전 네비게이션의 경우 같은 역할이지만 두개의 컴포넌트가 생성될 수 있습니다., 처럼 분할될 수 있죠. 취소 버튼, 확인 버튼 등 테마에 따라 컴포넌트들이 분할될 수도 있습니다.같은 역할의 컴포넌트들이 분할되다보면 유지보수성과 가독성이 떨어져 악영향을 줍니다. 이번 글에서는 모듈의 인터페이스를 구현해 비슷한 역할의 컴포넌트를 묶는 방법에 대해 소개드립니다.1. JSON 인터페이스확인취소 JSON 방식 인터페이스는 무한히 확장될 수 있습니다.또한 리액트에서 명시적으로 사용할 수 있으며 Lint를 통해 개발자에게 더 많은 정보를 제공할 수 있습니다. 코드는 가독성때문에 마지막에 정리하였습니..

자바스크립트의 map메소드는 배열을 매핑하는 함수입니다.배열 내 데이터를 특정 규칙으로 정제하는 방법으로 주로 사용합니다. 그러나 map 메소드는 배열을 전부 순회하는 O(n)의 복잡도를 가집니다.데이터 정제 로직이 복잡하거나 배열 자체가 크다면 처리시간이 기하급수적으로 늘어날 수 있습니다. 때문에 map 메소드를 사용할때는 성능을 고려하며 코드를 작성해야 합니다.이번 글에서는 async 비동기 처리로 가속할 수 있는 방법에 대해 알려드리겠습니다.1. Async로 병렬 처리function test() { const data = [1, 2, 3, 4, 5] const data2 = data.map(async (v) => { return `데이터: ${v}` }) data2.forEach((v)..

프로젝트 폴더 관리 방법론 중 하나인 Container&Presenter 패턴에 대해 소개합니다.상태 관리 이전의 패턴으로 현재는 권장하지 않습니다. 오래된 리액트 프로젝트(특히 클래스기반)에서 자주 찾아볼 수 있습니다.기존의 프로젝트를 유지보수하는데 발견하였다면 이해하는데 도움이 되기를 바랍니다. 블로그에 개발 관련 글을 작성중이니 많은 관심 부탁드립니다.1. Container&Presenter란?Presenter: 데이터가 어떻게 사용자에게 보여질지에 대해서 다루는 컴포넌트Container: 어떤 데이터가 보여질지 다루는 컴포넌트Container&Presenter 패턴은 MVC 패턴에서 영감을 받았습니다.당시 골치였던 Props Drilling 현상을 조금 이해하기 쉽게 하기위해 사용했습니다. Red..

프로젝트 폴더 관리 방법론 중 하나인 아토믹 디자인 패턴에 대해 소개합니다.저만의 아토믹 패턴 노하우도 작성했으니 많은 의견 부탁드립니다. 아토믹 패턴은 NextJS에서도 일부 확인할 수 있는 패턴입니다.layout.ts와 page.ts는 아토믹 패턴에서 각각 템플릿과 페이지에 대응됩니다.1. 아토믹 패턴이란?오늘날 프론트엔드는 점점 복잡해지며 기능뿐만 아니라 유지보수와 재사용성이 용이한 시스템이 요구됩니다.Atomic Design은 이러한 문제를 해결하기 위한 방법론 중 하나로 탄생했습니다. 아토믹 패턴이란 원자 모형에서 영감을 받아 프로그래밍에 적용한 프로젝트 방법론입니다.컴포넌트의 크기에 따라 원자, 분자, 구조체, 템플릿, 페이지로 분류해 컴포넌트를 정의합니다. Atoms(원자): 기본적인 UI ..