DEV

들어가기 전에Tldraw 공식 문서(Docs)를 보면, 내용은 많지만 직접 코드를 입력하지 않는 이상 어떻게 동작하는지 알수 없다. 이로 인해 작업 시간이 길어졌던 적이 많았는데, 이 글을 보는 사람들에게는 비효율적인 시간들을 줄여주기 위해 Tldraw에 어떤 주요 개념들이 있고, 어떤 기능들을 제공해주는지 작성해보려 한다.Main Concepts (주요 개념)1. editorhttps://tldraw.dev/docs/editorEditor 클래스는 tldraw의 에디터(편집기)를 제어하는 주요 개념이다. 에디터의 내부 state를 관리하고, document를 변경하거나, 발생한 변경에 대해서 응답을 하는데 사용한다. 해당 글에서는 주요 개념을 3가지 editor, shape, tool로 나누었지만, 사..

들어가기 전에우리 회사에서는 그리기 기능을 제공하기 위해 Tldraw 라이브러리를 사용한다.4개월 정도 Tldraw를 만져보면서 느낀 점은 공식 문서는 말이 많고, 유용한 정보를 제공해 주지 않는다. 또한, 한국어 레퍼런스가 너무 없다… 그래도 계속 맨땅에 헤딩하다 보니 Tldraw로 대부분의 기능을 구현할 수 있게 되어 차근차근 한국어로 문서를 작성해 보려 한다.What is Tldraw? (Tldraw란)공식문서를 처음 접속하고 나면, Tldraw는 이렇게 소개한다. The infinite canvas SDKfor React developersUse the tldraw SDK to add a collaborative whiteboard to your product or use its component..

우리 회사에서는 git rebase 전략을 사용한다. 무슨 전략인지, 이것을 왜 사용하는지 알아보고자 한다. merge merge는 하나의 브랜치와 다른 브랜치의 변경 이력 전체를 합치는 방법이다. commit a, b, c를 refer하는 m이 생성되고 m을 통해 a + b + c가 master에 추가된다. github에서는 기본적으로 merge로 병합시키도록 한다. $ git checkout master $ git merge my-branch squash commit a + b + c를 합쳐서 새로운 commit, abc를 만들어지고 master에 추가된다. commit a + b + c를 합쳐서 새로운 commit, abc를 만들어지고 master에 추가된다. abc는 1개의 parent를 가진다...

이전에 내가 알고있던 배경 지식은 vercel 디자인 ai v0이 shadcn/ui 기반인 것만 알고있었다. 부트스트랩 같이 미리 디자인 된 컴포넌트를 제공해주는 라이브러리 같다. 이러한 라이브러리는 수없이 많은데 shadcn을 왜 쓰는지 조사해보겠다. 컴포넌트 라이브러리가 아니다? 공식문서에 보면 처음부터 shadcn을 이렇게 소개한다. This is NOT a component library. 부트스트랩 처럼 공통 컴포넌트를 지원하는 컴포넌트 라이브러리인줄 알았는데, 컴포넌트 라이브러리가 아니라고 선을 그었다. 그럼 도대체 무엇이 다를까? shadcn은 이렇게 말한다. It's a collection of re-usable components that you can copy and paste into..

스코프 공부를 하다가 아래와 같은 문법을 보았다. 처음보는 구조에 신기하여 구글링 하였더니 IIFE라는 나한테는 생소했던 문법이었다. (function(){ })() 이 문법의 의미는 무엇이고 언제 사용하는지 알아보자! IIFE IIFE는 Immediately Invoked Function Expression의 약자이다. Immediately 즉시 Invoked 호출됨 Function 함수 Expression 표현 정의되자마자 즉시 실행되는 함수를 말한다. 기본 문법 첫 번째 괄호에는 익명함수를 포함하고 두 번째 함수는 그 함수를 실행시켜주는 걸로 볼 수 있다. 매개변수가 있는 함수라면 두번째 함수에 전달해주면 된다. ES6 문법에 추가된 화살표 함수와 함께 사용할 수 있다. (function(){ })..

틀린 내용이나 이상한 부분이 있다면 피드백 주세요! 🤨 Git 사용하고 있긴 한데.. Git 사용하고 있긴 한데.. 어떤 것인지, 왜 쓰는 것인지 생각해보신 적 있나요?? “남들이 다 사용해서요” “기업 요구사항에 있어서요” 아직도 그렇게 대답하실 건가요?? 이제부터 git이 어떤 것이고, 왜 쓰는지 알아봅시다! Git 이란? git은 컴퓨터 파일의 변경 사항을 추적하고 여려 명의 사용자 간에 해당 파일들의 작업을 조율하기 위한 스냅샷 스트림 기반의 분산 버전 관리 시스템이다. 라고 위키 백과에 나와 있는데요. 간단하게 말하자면 버전 관리 시스템이라고 생각하시면 됩니다. 왜 Git을 쓰나요? 만약, TodoList 프로젝트를 제작하고 있다고 가정해 봅시다. 투두 삭제 기능을 추가하려다가 로직이 꼬여 다시..

서비스에서 잦은 리렌더링이 발생한다면 성능 저하의 원인이 될수도 있습니다. 잦은 리렌더링의 문제점은 다음과 같습니다. 성능 저하: 컴포넌트가 불필요하게 재렌더링되면 성능이 저하될 수 있습니다. 특히 컴포넌트 계층 구조가 깊거나 복잡한 경우에 잦은 리렌더링은 성능에 미치는 영향이 더 커집니다. 불필요한 데이터 요청: 컴포넌트가 리렌더링되면 해당 컴포넌트 내의 데이터 요청도 발생할 수 있습니다. 불필요한 리렌더링은 따라서 불필요한 데이터 요청을 유발할 수 있습니다. 컴포넌트 state 손실: 잦은 리렌더링으로 인해 컴포넌트의 상태(state)가 예상치 못하게 잃어버릴 수 있습니다. 그러니 잦은 리렌더링을 하면 안됩니다. 이벤트 호출도 예외는 아닙니다. 이벤트 발생할때 관련 콜백 이벤트 함수를 자주 호출하게 ..

🚨 해당 레포는 pnpm과 next.js + typescript프로젝트를 기반해서 작성한 내용입니다. 모노레포의 개념? 모노레포의 개념은 이전 포스팅을 참고하면 됩니다. 프로젝트 구성 먼저 폴더를 생성하고, pnpm 을 설치해줍니다. $ mkdir [folder name] $ cd [folder name] $ pnpm init 그러면 다음과 같은 package.json이 생성될 것 입니다. { "name": "monorepo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "..