

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

백준 문제를 풀고 이력이랑 풀이를 남기기 위해 git에 올렸었는데, LeetHub 크롬 확장프로그램과 같이 백준허브라는 Extension이 있었네요 적용 방법크롬 익스텐션 검색창에 "백준허브"를 검색하거나 아래 링크를 통해 extension을 설치합니다. 백준허브(BaekjoonHub) - Chrome 웹 스토어Automatically integrate your BOJ submissions to GitHubchromewebstore.google.com 이후 설치된 extension을 누르면 github 인증하는 버튼이 있습니다. 클릭합니다. 풀이를 저장할 Repository 이름을 입력합니다. 이제 백준에 들어가서 문제를 풀면 아래와 같이 문제를 자동으로 git에 올려줍니다. 아래 사진과 같이 메모..

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


















