전체 글

들어가기 전에우리 회사에서는 그리기 기능을 제공하기 위해 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..

Mathlive Virtual Keyboard에서 헤더에 있는 툴 중 undo, redo를 제거하는 작업을 맡았었다.스타일링이나 라이브러리 옵션을 통해 쉽게 작업을 완료할 수 있을 줄 알았는데 생각보다 힘든 상황이 발생했어서 글로 정리하고자 한다.문제 발생 상황 & 시도해본 방법1. 특정 컴포넌트 module css에서 스타일링 적용 (ex .undo, redo { display: none; })문제: 스타일링이 적용되지 않음2. math-live 속성 중 editToolbar 값 수정 코드: window.mathVirtualKeyboard.editToolbar = 'none';문제: undo, redo외에 클립보드 기능도 제거됨 팀원분께서는 요구사항은 undo, redo 제거이기 때문에 style로 해..

특정 use hook을 모킹 하여 테스트 코드를 작성 중 다음과 같은 에러가 발생하였다.ReferenceError: /Users/classting/github/aidt/apps/web/src/features/course/components/TextbookContentContainer/TextbookContentContainer.spec.tsx: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables. const ToastFn = jest.fn();jest.mock('@components/ui', () => ({ ...jest.requireActual('@components/ui'), useToa..

우리 회사에서는 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..

이전 글 이후로 컬처핏 면접에 대해 정리하려고 했는데 중복된 내용이 많아 새로운 주제로 글을 작성하게 되었습니다. 이번에는 커피챗 방법과 질문하는 방법에 대해 작성해 보려고 합니다. ☕️ 커피챗이란? 먼저 본론에 들어가기 앞서 커피챗에 대한 의미에 대해 찾아보았습니다. 커피챗(Coffee Chat)은 서구권에서는 이미 일상이 된 정보형 미팅으로 ‘궁금한 업계/회사/직무/학교’의 사람과 실제 만남을 통해 커피 한 잔 마시며 부담 없이 정보를 묻고 답하는 문화입니다. 출처: 커피챗 FAQ 커피챗은 부담 없이 궁금한 것을 묻고 답하는 시간이라고 생각하시면 됩니다. 이 글에서 신입 개발자에게 커피챗이 왜 중요한지, 어떻게 커피챗 시간을 만들어가는지 작성해 보려고 합니다. 질문하는 사람이 되자. 모르는 것은 부끄..

이전 글로 포트폴리오 작성법을 정리해 보았고, 그다음 단계인 면접 준비 방법에 대해 정리해 보았습니다. 저는 어렸을 때부터 말을 잘 못해서 커서도 발표 같은 자리를 무서워했는데요, 그만큼 면접에서 합격 결과를 만들기까지 수많은 탈락을 경험했습니다. 수많은 탈락을 경험해도 다시 일어날 수 있었던 방법과 어떻게 면접에 임했는지 크게 면접 전, 면접 중, 면접 후로 나눠 설명하겠습니다. STEP 1. 회사에 대해 조사하기(before) 면접은 답변을 주구장창 외우는 것이 아닌 회사의 fit에 맞게 나를 알리는 것이라고 생각합니다. 저는 이전에 자기소개와 지원동기 같은 질문을 주구장창 외워서 준비했는데, 회사가 중요시하는 가치관 질문에 답을 하지 못했습니다. 그러니 서류 합격이 발표되고, 면접 준비를 시작하는 ..

이전에 개발했던 next 프로젝트를 수정 없이 실행했는데, 3달전에는 멀쩡히 실행됐던 프로젝트가 다음과 같은 에러가 발생하여 실행되지 않았습니다. 분명 코드 내부를 수정한 적이 없고, 실행만 했으니 종속성 문제라고 판단했습니다. 1. react, react-dom 버전 업그레이드 https://pimpdevelop.tistory.com/14 [에러해결] Invalid Hook Call Error 음악 관리 프로그램에서 며칠 전부터 Invalid Hook Call(유효하지 않은 Hook을 요청)하고 있다며 에러가 발생해 구동되지 않았다. useEffect(() => { callApi() .then(res => setMusics(res)) // 에러가 발생한 부분 .catc pimpdevelop.tistor..