테오의 스프린트 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...
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을 통해 호스팅을 하고있는데..
https://zed.dev/ Zed - Code at the speed of thought Code at the speed of thought. Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter. zed.dev zed는 굉장히 빠르다는 것을 강조한 text editor인데 rust로 코어한 엔진을 작성해서 속도를 빠르게 얻을 수 있었다고합니다. 사용해본 결과 확실히 vscode에 비해 쾌적하고 빠릿빠릿한 성능을 보여주지만 사용성이 떨어지는 측면이 많았습니다. 1. git 변경사항이 있는 파일 갯수, 스테이징된 파일을 볼 gui가 업슴 2. 사용자 정의 snippet이 지원되지않음 3. e..
