반응형 TIL/TIL19 스토리북 npm 배포하기(pnpm,vite,react) 스토리북 npm 배포하기 storybook을 build후에 npm publish를 하니 npm publish 했을때 import하면 types.t.ds(타입)이 참조되었다. 한참은 검색한 후에 index.js가 빌드시에 실행되지 않음이 원인임을 알았고 또 한참을 검색후에 storybook을 build하는 것이 아니라 vite를 build해야 함을 알았다. 그러니까 vercel 배포를 위해 build:storybook을 실행시키고, npm publish는 build:lib을 실행시켜야 하는 것이다. build를 2개로 나눠야 한다. build:storybook으로는 vercel 배포하고 build:lib을 만들어서 npm publish에 실행시켜야 함 vercel deploy //production.yam.. 2023. 9. 25. TDD TDD 마스터께서 CTO로 오셨다. TDD를 알아야 뭔가 말이 통하고 뭘 배울수 있겠다 싶어서 유데미에서 리액트 TDD강의를 하나 샀다. 강의를 샀는데 난 완전 우물안 개구리였다. Test 코드의 사용을 "ga이벤트 전송되는지 확인" 정도만 생각했는데 일단 모든 Test를 다 작성한 상태에서 기능 추가를 할 경우, 기 작성된 Test들의 통과 여부를 통해 사이드이펙트를 감지할 수 있다는 것을 강의에서 듣고 이건 무조건 사용해야겠다. 라는 생각을 했다. 그리고 아주 공감하는 바이다. 오늘만해도 디자이너분께서 멀쩡하던 카드 View가 갑자기 찌그러졌다는 제보를 해주셨다. 공통 컴포넌트인 DragSlider의 변화에 의한 사이드이펙트인데, 만약 DragSlider에 test가 걸려있었다면 이 사이드이펙트를 감.. 2023. 6. 9. gif를 mp4로 변환해서 용량줄이기 gif는 mp4로 첨엔 gif를 s3에 올렸었는데 그 달 aws에서 요금폭탄이 터져서 바로 빼버린적이 있다.. -> s3에는 gif 올리지말자. 그 후엔 public폴더에 넣고 있는데 gif한개당 용량이 20mb~50mb정도 하다보니 용량이 미친듯이 증가해버렸다. 그래서 gif만 따로 노션api를 이용한 cms에 연동하였는데, 용량이 큰 gif를 연동하니 성능이 꽤 좋진 않았다. (게다가 노션api는 아직 베타버전이라고함) 그러다 동료분이 mp4를 사용하는 기가막힌 방법을 제안해주셨다. 용량은 위와 같이 감소하고 대충 아래와 같이 video컴포넌트에 autoPlay,loop를 넣어주니 gif와 같이 되었다. const Video = styled.video` width: 100%; height: 100%;.. 2023. 1. 5. 타입스크립트에서 new kakao 객체 사용하기 우선 index.html에 카카오지도 script를 잘 박아넣었다는 것을 전제로 한다. 실행코드모다 먼저 선언되도록 하라 해서 에 넣어주었다. 그리고 가이드대로 new kakao를 사용하면 빨간줄이 뜬다. 이 글에서 알려준 방법인데 window inteface를 확장하는 방법이다. src 안에 @types폴더를 만들고 global.d.ts에 다음과 같이 Window interface를 확장해주었다. 그리고 kakao map을 사용하는 컴포넌트에서 다음과 같이 적어주니 잘 실행된다. 2022. 11. 19. 이전 1 2 3 4 5 다음 반응형
