안녕하세요. 오랜만에 글을 쓰는 것 같아요. 왜 그동안 글을 쓰지 않았냐?라고 한다면 요새 약간 인생의 슬럼프라고 해야할까요?앞으로 잘 먹고 잘 살 수 있을까? 어떻게 해야 잘 살까? 같은 청승맞은 생각같은걸 하다보니 번아웃이 온 것 같기도합니다. 꽤 열심히 한 것 같은데 시도한 일들은 잘 안풀리다보니 거기서 오는 우울감이 있었던 것 같아요 아무튼 이러나저러나 열심히 살아야겠죠! 최근 일을 하면서 테스트 코드의 비중을 점차 늘려나가고 있는데이렇게 테스트 코드를 작성하면서 고민했던 것들을 정리해봅니다. 일반적인 테스팅 실수를 하지말자testing-library, jest-dom에 대한 eslint 공식 플러그인이 존재합니다.어느정도 테스트 코드를 짜보다보면 "당연한 거 아니야?"라는 생각이 들 수 있지만 ..
프론트엔드 코딩 컨벤션, 프론트엔드 네이밍 컨벤션, 프론트엔드 폴더구조 이런 부분들은 항상 고민이 많이 되는 영역인 것 같습니다. 대체로 많이 사용하는 것들이 정해져는 있는 것 같지만 특히 폴더구조의 경우에는 프로젝트의 성격과 유형에 따라 어떤 구조가 좋을지가 항상 다르죠 이게 머리로 이렇게 하니까 좋았었지라는 생각만 갖고 쓰다보니 저도 제 컨벤션이 헷갈리기 시작해서 이번기회에 제가 코드를 짜면서 자주 사용하는 컨벤션들을 정리해보았습니다. 쌍따옴표, 들여쓰기와 같이 포매터의 지원을 받는 부분의 경우에는 생략합니다. 프론트엔드 코딩 컨벤션 함수명 | 변수명 일반1. 모든 변수,함수명은 소문자 카멜케이스를 통해 정의한다.const helloWorld = () => {} const hello = "hi" 2...
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..
