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...
평화롭게 퇴근해서 스터디 끝내고 밥먹고 있는데 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..
할때마다 세팅방법 찾아보는게 지긋지긋하다 이런 세팅을 할때마다 꼭 문제가 발생합니다. 해결방법도 보통 전에 했던 방법과 비슷하게 하면 해결이 되곤하는데요 문제는 이게 여러가지 파일을 만져줘야하는 경우도 많고 하다보니 뭐 하나 빠뜨려서 잘 안되고 스트레스받고 그런 경우가 많다는 것입니다. 환경세팅 포스트는 유통기한이 짧긴하지만.. 없는것보단 나으니.. 이번 글에서는 tailwindcss를 storybook과 통합하는 방법 nextjs에서 storybook을 사용하는 방법 그리고 path alias를 사용하는 모듈도 적절히 resolve 하는 방법을 다룹니다. nextjs에서 storybook 깔기 npx storybook@latest init 간단합니다. 최신버전으로 깔아주시면 되겠습니다. tailwind..
