최근 일을 하면서 테스트 코드의 비중을 점차 늘려나가고 있는데 이렇게 테스트 코드를 작성하면서 고민했던 것들을 정리해봅니다. 일반적인 테스팅 실수를 하지말자testing-library, jest-dom에 대한 eslint 공식 플러그인이 존재합니다.어느정도 테스트 코드를 짜보다보면 "당연한 거 아니야?"라는 생각이 들 수 있지만 처음 짤 때는 헷갈리기 마련이죠이런 상황에서 실수를 방지하는 역할을 해줍니다.https://github.com/testing-library/eslint-plugin-testing-library GitHub - testing-library/eslint-plugin-testing-library: ESLint plugin to follow best practices and antici..
프론트엔드 코딩 컨벤션, 프론트엔드 네이밍 컨벤션, 프론트엔드 폴더구조 이런 부분들은 항상 고민이 많이 되는 영역인 것 같습니다. 대체로 많이 사용하는 것들이 정해져는 있는 것 같지만 특히 폴더구조의 경우에는 프로젝트의 성격과 유형에 따라 어떤 구조가 좋을지가 항상 다르죠 이게 머리로 이렇게 하니까 좋았었지라는 생각만 갖고 쓰다보니 저도 제 컨벤션이 헷갈리기 시작해서 이번기회에 제가 코드를 짜면서 자주 사용하는 컨벤션들을 정리해보았습니다. 쌍따옴표, 들여쓰기와 같이 포매터의 지원을 받는 부분의 경우에는 생략합니다. 프론트엔드 코딩 컨벤션 함수명 | 변수명 일반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..
OKKY 에서 테크니컬 SEO 에 대한 스터디를 모집한다는 글을 보고 참여를 신청했었습니다. 업무 중 SEO 에 대한 요구사항이 늘어나는 반면 얕은 이론적인 지식을 활용하여 처리하고 있던 터라 "이게 되려나..?" 같은 마음가짐으로 적용을 해보고 있었던 상황이었어서 보자마자 지원했던 것 같습니다. 사실 sitemap.xml , robots.txt , google search console 과 같은 내용이나 통상적으로 SEO를 개선하기 위하여 개선해야하는 지표와 같은 영역은 프론트엔드 개발자라면 기본적으로 숙지하는 내용이기도 하지만 또 막상 하나하나 다 잘 이해하고 쓰는 경우는 적은 것 같습니다. 이번 글에서는 프론트엔드 개발자도 조금 생소할 수 있는 키워드와 개념들에 대하여 다루어보겠습니다.캐노니컬 태그..
https://github.com/XionWCFM/component-lib GitHub - XionWCFM/component-libContribute to XionWCFM/component-lib development by creating an account on GitHub.github.com완성된 프로젝트는 위 레포지토리 링크에서 확인할 수 있습니다. 만드는 데 사용할 스택NPM , vite , rollup , typescript, storybook, tailwindcss , react 를 사용합니다.바닥부터 차근차근 만들어나가보도록 합시다. 적절한 폴더를 하나 생성해준 뒤 initialize를 해주겠습니다.yarn init -y{ "name": "new-vite", "version": "1.0...
