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..
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..
👱♂️간헐적 회고 나오늘 뭐했냐 최근에는 책을 많이 읽고 있다. 제법 머리가 크면서 관심사도 자연스럽게 변하게 되었는데 현재 내가 가장 관심있게 보는 키워드들은 다음과 같다. 1. 모노레포 2. 마이크로프론트엔드 3. 클린아키텍처 4. 도커 , AWS 등 인프라 5. 앱 개발 환경 6. DDD 이전에는 클린코드, 리팩토링과 같이 한줄 한줄의 코드를 깔끔하고 좋은 구조로 짜기 위한 지식에 관심이 갔다면 지금은 좀 더 큰 그림을 보는 것과 / 엔터프라이즈 레벨의 애플리케이션이 만나는 문제를 해결하기 위한 솔루션들 에 관심이 더 많이 가는 것 같다. 또 그것과 동시에 1인 개발자가 수익을 내려면 앱 개발도 할 줄 아는게 무조건 유리할 거란 생각이 들어서 앱개발도 조금씩 조금씩 찍먹 중이다. 리액트 네이티브를..
