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...
Animate Presence란?Presence의 사전적 정의는 "존재" 입니다. Framer Motion과 같은 애니메이션 라이브러리에서는 AnimatePresence 기능을 제공하는 경우가 많은데요 이 기능은 리액트의 동작 방식에서의 한계와 밀접한 관련이 있습니다. Dialog , Toast 등의 UI Interaction을 수행하는 컴포넌트를 직접 작성해본 개발자라면 이런 경험을 해봤을 것입니다. 등장 애니메이션은 문제없이 줄 수 있는데 퇴장 애니메이션을 주는게 불가능한 현상을 말입니다. Animate Presence는 이러한 문제를 해결하기 위해 퇴장 애니메이션을 적절히 줄 수 있게 만들어주는 기능입니다. 본 포스트에서는 Animate Presence가 필요했던 리액트 생태계의 배경과 Radix ..
1. 개발 역량을 쌓는게 진짜 중요한 일일까? 물론 개발자인 입장에서 아름다운 구조 , 견고한 테스트 코드, 읽기 쉬운 코드로 이루어진 프로젝트를 만드는 일이나 그러한 프로젝트를 만드는 방법을 학습하는 것은 매우 재미있는 일입니다. 그러나 그런 기술적으로 아름다운 프로젝트를 만드는 일이 곧 돈으로 직결되지는 않는 경우가 많습니다. 기술적으로 매우 큰 도전을 성공해낸 프로젝트보다 사람들이 필요로하는 프로젝트가 더 돈이 잘 될 확률이 높죠 코드를 아무리 아름답게 짜봐야 사용자가 아무도 없다면 그 코드는 가치를 창출할 수 없을 것 입니다. 그렇게 생각을 하고나니 개발 역량이라는 것 자체가 중요한것일까? 라는 생각이 듭니다. 제품을 잘 만들수 있는 "일정 수준 이상의 기술력"만 갖추어졌다면 그 이상이 필요할까요..
무언가를 결정할 때 데이터를 기반으로 결정하자는 방법인 데이터 주도 의사 결정은 꽤 중요한 의미를 가집니다. 무언가를 다른 사람들에게 설득하고 이해시키기 위해서는 주장 뿐만아니라 근거가 필요하죠 데이터는 그 자체로 근거가 되어준다는 점에서 조직의 의사결정을 투명하고 납득가능하게 만들어줍니다. 그 외에도 1. 성과 측정 2. 개선 방향성 탐색 3. 유저 페르소나 정의 등등 데이터가 있으면 그 데이터를 기반으로 여러가지 기획을 내놓을 수도 있고 개선 방향을 잡아나갈수도 있죠 이제 프론트엔드 개발자의 관점에서 이벤트 로깅을 생각해보겠습니다. 프론트엔드 개발자는 프로덕트의 최전선에서 사용자와 직접 의사소통하는 포지션을 가집니다. 사용자는 백엔드의 api와 직접 소통하는 것이 아니라 백엔드의 api를 적절하고 쉽..
평화롭게 퇴근해서 스터디 끝내고 밥먹고 있는데 CS 팀에서 긴급한 이슈가 발생했다고 연락이 왔읍니다. 특정 사용자들이 아예 사이트에 접속이 안된다는 이슈였는데요 우선 제가 다니는 회사의 프로덕트는 모종의 여러가지 이유로 인해 같은 애플리케이션을 두개의 도메인으로 나누어 배포하고 있습니다. 오늘같은 경우 에러를 발생시킬만한 변경점이 배포되진 않았기때문에 웹뷰에서 접속이 안된다는 CS 가 들어왔기 때문에 우선 생각해볼 수 있는 여지는 다음과 같았습니다. 1. 앱쪽 코드에 문제가 생겼다. 2. 아직 원인은 모르겠지만 특정 유저에게만 발생하는 이슈다. 우선 1번이 맞는지 검증해보기 위해 두 도메인에 모두 접속을 시도해보니 두 도메인 중 한 도메인이 접속이 되지 않았습니다. vercel을 통해 호스팅을 하고있는데..
