next.js 로 블로그를 구축하다보면 가장 크게 느껴지는 문제는 글 작성시의 UX입니다. 사실상 이 문제 때문에 저도 자체 구축한 블로그를 거의 작성하지 않고 있었다고 해도 무방한데요 Dan Abramov의 블로그 github에서 해당 문제를 해결한 것을 확인하고 저도 PR을 분석하여 적용하였습니다. https://github.com/gaearon/overreacted.io/pull/797/files Add a DEV-only watcher for content files by gaearon · Pull Request #797 · gaearon/overreacted.io I use so by default updating the content does not trigger Fast Refresh. To..
next.js로 블로그 프로젝트를 구성할 때 가장 많이 고민하게 되는 부분은 바로 마크다운의 처리입니다. next.js에서 서포트하는 mdx 관리 방식이 존재하긴 하지만 특성상 많은 요구사항을 수용하지 못합니다. 따라서 마크다운을 관리하는 가장 좋은 방법이라고 할만한게 정립이 되어있지 않은 상태로 contentlayer, velite, next-mdx-remote 정도의 솔루션들이 존재하는 형태입니다. 이번 글에서는 contentlayer에서 next-mdx-remote로 전환한 후기와 이유를 설명합니다. 왜 contentlayer에서 next-mdx-remote로 옮겨야 했는가? 커뮤니티 지원이 끊겨 버린지 약 1년이 되었다 contentlayer는 2024년 4월 13일 기준으로 10개월간 방치되어있..
argTypes는 왜 추론이 안되는 것일까요 실제로는 argsTypes의 키의 밸류 오브젝트에는 추론되는 타입외에도 control 키를 넣을 수 있습니다. 이렇게 control의 값을 적절히 설정하고 control 값에 따라 options를 설정하면? 실제 스토리북에서도 잘 반영되는 것을 볼 수 있습니다. 심지어 꽤 중요한 기능이에요 각 props이 받는 각각의 옵션을 문자열단위로 외우고 다니는 취미가 있지 않는 이상 굉장히 불편할테니까 이런 셀렉트 기능은 스토리북에서 거의 필수적이라고 봐도 무방합니다. storybook ArgTypes https://storybook.js.org/docs/api/arg-types ArgTypes • Storybook docs Storybook is a frontend ..
테오의 스프린트 17기에 프론트엔드 포지션으로 참여한 후기입니다. 진행 기간은 2024.04.03 ~ 2024.04.08 총 6일이었습니다. 1일차 OT 1일차가 끝나고 받은 테오의 스프린트 안내 메일입니다. 저는 여기서 테오의 스프린트의 취지에 깊은 공감을 했는데 "포트폴리오를 위한 프로젝트의 개발이 아니라 좋은 협업 과정을 체험하고 이해하는 것이다" 가 테오의 스프린트의 취지라고 안내되어있더라구요 그만큼 이번 테오의 스프린트에 참여하면서 그럴듯한 프로젝트, 포트폴리오를 만드는것을 목표로 하는 게 아니라 다양한 사람들과 이야기하고 협업해보는 경험을 가져가는데에 중점을 두어야겠다라는 생각을 하면서 참여해야겠다는 목표를 세웠습니다. 다시 본론으로 돌아가서 1일차에는 "내 아이디어를 소개합니다"를 했는데요 ..
yarn berry의 pnp 모드는 node_modules 폴더 자체를 생성하지 않기때문에 node_modules에 의존성이 있는 외부 라이브러리의 경우에는 함께 사용시 문제가 발생할 수 있습니다. 통상적인 해결방법 yarn dlx @yarnpkg/sdks vscode 주로 pnp 호환이 되지 않는 모듈들을 호환시켜주기 위해 위 명령어를 사용하곤 합니다. 그러나 prettier plugin의 경우에는 의도대로 동작하지 않았습니다. 현재 해결방법 정확히 이야기하면 cli로 이용하는 prettier의 경우에는 효과가 있지만 vscode의 format on save 에서는 동작하지 않았습니다. plugins: ["@trivago/prettier-plugin-sort-imports"] .prettierrc 에서..
yarn berry는 2023년 10월 23일에 4.0 릴리즈라인이 마침내 스테이블로 들어오게되었습니다. 메이저 버전이 바뀐만큼 많은 부분에서의 개선이 있었는데요 개인적으로는 무리를 해서라도 버전을 올려도 될 만큼 성능적으로 매우 드라마틱한 개선이었다고 생각합니다. 주요 변경점 위 메인테이너의 글에서 잘 요약이 되어있는데요 1. node.js 18 이상 2. zero-install은 더이상 default 설정이 아님 3. official plugin 들이 기본 설정에 포함 4. 명령어 쪼끔 바뀌었어용 왜 Zero Install은 ugly 한가? 주요변경점 2번에서도 알 수 있듯이 yarn berry는 이제 사람들이 zeroinstall을 좋아하지 않는다는 것을 인정하기로 한 것 같아보입니다. 사실 zer..
OKKY 에서 테크니컬 SEO 에 대한 스터디를 모집한다는 글을 보고 참여를 신청했었습니다. 업무 중 SEO 에 대한 요구사항이 늘어나는 반면 얕은 이론적인 지식을 활용하여 처리하고 있던 터라 "이게 되려나..?" 같은 마음가짐으로 적용을 해보고 있었던 상황이었어서 보자마자 지원했던 것 같습니다. 사실 sitemap.xml , robots.txt , google search console 과 같은 내용이나 통상적으로 SEO를 개선하기 위하여 개선해야하는 지표와 같은 영역은 프론트엔드 개발자라면 기본적으로 숙지하는 내용이기도 하지만 또 막상 하나하나 다 잘 이해하고 쓰는 경우는 적은 것 같습니다. 이번 글에서는 프론트엔드 개발자도 조금 생소할 수 있는 키워드와 개념들에 대하여 다루어보겠습니다.캐노니컬 태그..
들어가기에 앞서 디자인 시스템을 구축하기 위해서는 여러가지 고려해야할 부분들이 많습니다. 그러한 고민들을 모두 서술하기에는 분량이 너무 많아질 수 있으므로 어떻게 만들것인가?를 차치하고 어떻게 만들 수 있는지에 방점을 두겠습니다. https://github.com/XionWCFM/component-lib GitHub - XionWCFM/component-lib Contribute to XionWCFM/component-lib development by creating an account on GitHub. github.com 완성된 프로젝트는 위 레포지토리 링크에서 확인할 수 있습니다. 만드는 데 사용할 스택 NPM , vite , rollup , typescript, storybook, tailwind..
