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..
들어가기에 앞서 디자인 시스템을 구축하기 위해서는 여러가지 고려해야할 부분들이 많습니다. 그러한 고민들을 모두 서술하기에는 분량이 너무 많아질 수 있으므로 어떻게 만들것인가?를 차치하고 어떻게 만들 수 있는지에 방점을 두겠습니다. 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..
평화롭게 퇴근해서 스터디 끝내고 밥먹고 있는데 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..
원래는 react-native cli를 통해 개발해보려고했는데 사내에서 expo를 이용하고 계신 개발자분의 말씀을 들어보니 1,2년전만해도 expo는 네이티브 기능에 제약사항이 있어서 eject 하는 경우가 많았지만 최근에는 많이 개선되어서 expo를 사용하는 것을 더 추천하시더라구요 그래서 저도 expo로 갈아타보았읍니다. 초기 세팅이 조금 혼란해서 좀 헤맸지만 헤맨김에 정리를 좀 해볼게요 https://docs.expo.dev 내용은 위 expo 문서에서 참고하였습니다. 시간이 지남에 따라 아래 포스트는 outdated 될 확률이 있으니 웬만하면 공식문서를 추천드립니다. npx create-expo-app -t 프론트 개발자라면 익숙할 명령어인데 create 뒤가 expo로 바뀔 뿐입니다. 옵션을 통..
클린아키텍처 프론트엔드에 무슨 비즈니스로직이 있어? 라는 관점도 존재하지만 제가 막상 코드를 짜다보면 프론트엔드에도 비즈니스로직이라고 부를만한 것들이 존재하곤 했고 그런 로직들과 UI를 담당하는 로직들이 뒤섞이게 되면 관리를 하는게 지옥이 되는 경험도 했습니다. 자연스럽게 비즈니스로직 정도는 분리하자. 정도로 생각하면서 코드를 짜왔었는데 좀 더 본격적으로 클린아키텍처를 다룬 레포지토리가 있어서 흥미롭게 코딩을 해봤습니다. https://github.com/XionWCFM/xion-study GitHub - XionWCFM/xion-study Contribute to XionWCFM/xion-study development by creating an account on GitHub. github.com 결..
아무 생각없이.. 그냥 아무생각없이 빌드 결과물이 모이는 dist 폴더와 실제 작업이 들어가는 src 폴더를 함께 배포하고 있었는데 문득 그런 의심이 들었습니다. 어차피 사용자는 빌드된 결과물만 사용할텐데 나는 왜 자연스럽게 src 폴더도 같이 배포하고있지? 라는 의문이 들었고 여러가지 평소에 써오던 라이브러리를 참고하여 본 결과 (zod, zustand, jotai , ) 대부분의 라이브러리들이 빌드 결과물만을 내보내고 있다는 사실을 깨닫게되었습니다. src 폴더를 내보내는 경우에는 사용자가 내부구현을 살펴볼 수 있게하기 위함이나 / 사용자가 라이브러리를 확장할 수 있게끔 하고 싶을 때 유용하다는 내용들을 찾을 수 있었는데 사실 라이브러리를 사용하는 사람의 관점이나 만드는 사람의 관점이나 사용자가 라이..
라이브러리 만들어서 배포하면 편하지않을까요? 그래서 한번 만들어봅니다. https://junghyeonsu.com/posts/deploy-simple-util-npm-library/ 간단한 유틸 함수 NPM 라이브러리 배포해보기 (feat. TypeScript 지원, ESM 지원) - 정현수 기술 블로그 NPM 배포를 처음 해보는 사람들을 위해서 차근차근 가이드를 작성해 봤습니다. junghyeonsu.com 이 분 블로그 참고하면서 작성했는데 너무 잘 작성해주셔서 뭐 더 추가할 게 없을 것 같고요 다만 저는 yarn 대신 npm을 사용해서 라이브러리를 만들었기 때문에 이부분에 약간의 차이가 존재합니다. https://github.com/XionWCFM/xion-calculate GitHub - Xion..
