간혹 프론트엔드 개발자 분들에게 React를 왜 사용하는지 물어보면 "Virtual DOM을 사용하여 빠르게 렌더링이 가능하기 때문에 사용합니다" 라고 말씀하시는 분들이 있습니다. 일반적으로 사용자 인터렉션이 많고, 자주 렌더링이되는 애플리케이션의 경우 DOM보다 빠를 수 있지만, Virtual DOM과 DOM 각각 장단점이 있어 어떤게 빠르다 비교할 수는 없다고 생각합니다. 우선, Virtual DOM이 어떤 개념인지 먼저 살펴보겠습니다.  Virtual DOM 이란?Virtual DOM 혹은 가상 돔이라고 하는 기술은 React와 Vue와 같은 라이브러리 혹은 프레임워크에서 사용합니다. 이름에서도 알 수 있듯이, 실제 DOM을 대신해서 메모리 상에서 DOM을 가상으로 만들어 관리하는 방식입니다.메모리..

Monorepo모노레포(monorepo)는 여러 개의 프로젝트를 하나의 저장소에서 관리하는 방식입니다. 일반적으로는 프로젝트마다 저장소를 따로 가져가는 식으로, 멀티레포(multirepo) 방식으로 개발을 했습니다. 모노레포는 하나의 저장소에서 여러개의 프로젝트를 관리하기 때문에, 코드 재사용성이 높아져서 코드 중복을 줄일 수 있습니다. 무조건 모노레포가 좋은것은 아니지만, 중복된 코드가 많다면 고려해보는 것이 좋습니다. 단점으로는 규모가 커져 복잡해보일 수 있고, 프로젝트마다 다른 의존성 버전을 사용하는 경우, 충돌 가능성도 발생할 수 있습니다. TuborepoTurborepo는 vercel에서 개발했으며, 모노레포를 관리하기 위해 사용합니다. 모노레포 프로젝트를 구성할 때 Lerna, Turborep..

다국어 처리flutter에서는 다국어 처리를 할때, easy_localization을 많이 사용합니다. easy_localizationflutter cli를 이용하여 easy_localization 의존성을 추가합니다.flutter pub add easy_localization 추가한 뒤에, 다국어 번역이된 json 파일을 관리할 디렉토리를 생성합니다. 위치는 크게 중요하지 않습니다. 보통 assets 하위에 리소스를 많이 보관합니다. 본 글에서는 번역 json 파일도 assets/translations 하위에 생성했습니다. 그리고, 영어와 인도네시아 번역 처리가 필요하여 id-ID.json 과 en-US.json 을 생성했습니다.assets└── translations ├── id-ID.json ..

Reset CSS를 사용하는 이유Reset CSS를 사용하는 이유는 브라우저마다 기본적으로 제공하는 스타일이 다르기 때문에 스타일을 초기화하여, 다양한 브라우저에서 일관성 있는 UI를 제공하기 위해 사용합니다. 최근에는 완전히 스타일을 초기화하기보다는 각 브라우저의 기본 스타일을 보완해 주는 방식으로 Normalize CSS도 많이 사용됩니다. Reset CSS 코드 예시아래 사이트와 같이 브라우저의 기본 스타일을 제거하는 reset css를 공유하는 사이트가 있습니다. CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default ..

object-fit이미지를 특정 영역에 채우려고 할때 사용할 수 있는 속성 중 object-fit이 있습니다. object-fit에는 3가지 값을 넣을 수 있는데, fill, cover, contain이 있습니다. fill, cover, containfill: 세로 길이를 늘려서 특정 영역을 채움. 특정 영역에 맞게 채우다보니 이미지 비율이 달라짐cover: 이미지가 잘리더라도, 이미지가 늘어나지 않고 영역을 채움cotain: 이미지 비율을 유지하고, 이미지도 잘리지 않고 영역을 채움 See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

레이아웃을 구성할 때 float을 사용하곤 합니다. 본 글에서는 float를 이용하여, 블록(block) 요소를 좌우로 배치하는 방법에 대해 소개합니다. float 속성현재는 flex나 grid를 사용하여 레이아웃을 많이 구성하지만, 이전에는 float를 이용하여 레이아웃을 많이 구성했습니다. float는 요소를 띄워서 값으로 left, right로 왼쪽 혹은 오른쪽으로 배치할 수 있습니다..left { float: left;}.right { float: right;} float로 좌우 배치2개의 box를 만들고, 각각 float: left와 float: right 스타일을 적용합니다. 하지만, container 요소에 border 값을 설정했는데, border를 보면 box를 감싸고 있지 ..

CSS란?CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의할 때 사용하는 언어입니다. 쉽게 말하면, CSS는 HTML 문서의 외형을 꾸미기 위해 사용합니다. CSS는 웹 문서의 색상, 글꼴, 레이아웃 등을 설정하여 페이지가 시각적으로 어떻게 보이는지를 제어합니다. HTML은 구조를 정의하고, CSS는 그 구조를 시각적으로 표현하는 데 사용됩니다. CSS 구성요소CSS는 3가지 구성 요소로 이루어져있습니다.선택자(Selector)속성(Property)값(Value)아래에서는 해당 3가지 구성 요소에 대해 설명합니다. 선택자(Selector)선택자는 스타일을 적용할 HTML 요소(Element)를 지정하는 역할을 합니다. 선택자는 Element Selector, Class Sel..

처음 React를 배울때 만들어봤던 To Do 앱을 다시 한번 만들어보고 싶은 마음이 생겼습니다. 본 글에서는 React로 만든 To Do 앱에 대한 내용을 설명합니다. 기술 스택 정의이전에는 CRA(Create React App)을 사용해서 프로젝트를 생성했으나, 이번에는 TypeScript와 Vite 기반의 프로젝트를 생성하여 진행했습니다. 언어: TypeScript번들러: Vite트랜스파일러: SWC기타 사용 라이브러리tailwindcsszustandreact-hook-formyupclassnamesdayjsprettierhusky vite 프로젝트 생성하는 방법에 대해 궁금하신 분은 아래 글을 참고해주세요 Bun 설치 및 React 프로젝트 생성하기Bun은 JavaScript 및 TypeScrip..

오류 내용Flutter에서 배터리 정보가 필요하여 battery_plus 의존성을 추가했습니다. 실행했지만 아래와 같이 :app:checkDebugDuplicateClasses 오류가 발생했습니다.* What went wrong:Execution failed for task ':app:checkDebugDuplicateClasses'.> A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable > Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules jetified-kotlin-stdlib-1.8.22 ..

React에서 useMemo를 사용하는 상황은 보통 성능 개선을 위해 사용합니다. 그렇다면 사용하면 무조건 성능이 좋아질까요? 본 글에서는 useMemo를 사용하면 정말로 성능이 향상이 있는지 설명합니다. useMemo()란?useMemo는 React에서 제공하는 훅(Hook) 중 하나로, 메모이제이션(memoization)을 통해 성능 최적화를 돕는 역할을 합니다. 컴포넌트의 렌더링 과정에서 계산 비용이 높은 결과 값을 메모리에 캐싱하게 됩니다. 이후 동일한 입력 값이 들어오더라도 재연산하지 않고, 메모리에 캐싱된 값을 반환하기 때문에 불필요한 연산을 줄어들어 성능이 향상될 수 있습니다. useMemo() 사용 예시계산 비용이 높은 연산의 경우, useMemo를 사용하여 메모리 캐싱을 합니다. 의존성 ..