Search for a command to run...
최근 팀에서 개발한 디자인 시스템 라이브러리를 프로젝트에 적용하고 사용하면서 흥미로운 문제를 발견했다.(사실 전부터 알고있었지만 잠깐 미뤄뒀다.) 단순히 Button 컴포넌트 하나만 필요했는데, 번들 분석 도구를 확인해보니 라이브러리 전체가 번들에 포함되어 있었던 것이다. 단 하나의 컴포넌트를 위해 수백 KB의 코드가 추가되어버린 것.. // 예상: Button 컴포넌트만 가져오기 import { Button } from '@company/de...
JavaScript와 TypeScript 패키지를 개발할 때 package.json의 진입점 설정은 단순히 어떤 파일이 먼저 로드될지를 결정하는 것 이상의 의미를 갖는다. 특히 TypeScript를 사용하는 프로젝트에서는 타입 접근성에 중요한 영향을 미친다. 회사 패키지를 수정하다가, “@패키지/dist/…” 와 같은 임포트 경로가 너무 프로젝트 내부의 구조등을 대놓고 보여주고 있기도 하고, 무엇보다 보기에 거슬려서 이를 해결하기 위해 type...
업무 이직 첫출근 2/26. 실업급여 퇴사 일주일 뒤에 새 회사에 출근을 하게 됐다. 사실 2주 정도 실업급여를 받고 나서 입사를 했다면 “조기취업수당”이라는 것을 통해 돈을 더 받을수 있었는데, 몇백만원 더 받자고 집에서 더 놀기에는 엉덩이가 들썩거리기도 하고 집에서 뇌가 굳어가는 것 같아 하루라도 빨리 입사를 하고싶었다. 그리고 나는 갈 회사가 있어서 사실상 받을 필요가 없으니 실업급여가 정말 필요한 사람들이 받아가는 게 더 맞지 않...
![[2월 회고] 우당탕탕 반백수 2월](https://cdn.hashnode.com/res/hashnode/image/upload/v1709260939371/247df1ed-6201-424e-9c47-f3cd00f286f6.png)
신년 맞이(?) 회사 경영악화로 인한 인원축소가 일어나, 잘 다니던 직장을 하루아침에 잃게되었다. 그 과정에서 다소 혼란스럽지만 먹고는 살아야겠기에 열심히(?) 이직준비..를 했던것 같다. 사실 처음에는 왜 내가 정리돼야하는지 현실부정 및 자괴감에 빠져서 아무것도 하기싫어병에 걸렸었는데, 요즘 채용시장이 안좋아서 이력서도 서류탈락의 연속이었던지라 절망의 늪에서 허우적대며 더더욱 깊이 빠져가던 차에 서류합격한 한 회사에 올인했다. 지나고나서야 하...
pnpm dlx storybook@latest init 스토리북 설치하기 "next": "14.0.4", "tailwindcss": "^3.3.0", "@storybook/nextjs": "^7.6.6", "@storybook/react": "^7.6.6", 기준으로 작성된 글입니다. .storybook/main.ts // .storybook/main.ts import type { StorybookConfig } from "@storybo...
메세지 보내기 global.d.ts에서 Window 의 타입에 webkit과 메세지핸들러를 미리 정의해줘야 오류가 나지 않는다. 웹킷은 네이티브 앱에서 웹뷰로 페이지를 호출할 때 생기는 것이라 기본 window에는 존재하지 않는다. // global.d.ts export {} declare global { interface Window { webkit: { messageHandlers: { MESSAGE_H...
createPortal ?? createPortal(children, domNode, key?) 일부 하위 요소를 DOM의 다른 부분으로 렌더링할 수 있게 해줌 관심이 간 이유 ! Context API로 모달을 만들어서 쓰고 있었다.. 그러나.. 뎁스가 깊어지면 부모(혹은 조부모) 컴포넌트의 width, height에 따라 의도대로 동작하지 않는 문제가 발생했다. 예를 들자면 헤더의 높이에 모달이 갇혀버려서 영영 백그라운드만 보이게 되는 현상...
개인프로젝트의 useInput 커스텀 훅을 보다가 좀 더 재사용 가능하게 고치고싶어졌다. 기존 코드 import { useState } from "react"; import { InputValue } from "../../../data/type/type"; export const useInput = (initialValue: InputValue) => { const [inputValue, setInputValue] = useState<In...
모노레포 공부를 하다가 이 node_modules라는 놈이 여러가지 패키지들(app, common, etc.)의 의존성을 어떻게 관리해주는가.. 또, 약간 논외인 이야기일지도 모르지만 왜 항상 .gitignore에 들어가는지, 왜 무거운파일인지 궁금해져서 쓰는 글. 일단 나는 yarn workspace를 사용해서 모노레포를 공부하고 있음(v1). 왜 굳이 yarn 쓰냐면 나한테 모노레포 자체가 좀 어려워서 익숙한걸 사용해서 최대한 진입장벽을 낮...