우아한테크코스에서 지원하던 AWS들의 비용이 곧 끊어지기 때문에, 프리티어 계정 또는 무료 서비스들로 전환을 준비하고 있다. 프론트엔드는 SSR을 사용하지 않았기 때문에 S3, Cloudfront 만 AWS를 사용하고 있었다. S3, Cloudfront는 다양한 목적으로 사용되지만, 다라쓰에서는 근본적으로 정적배포의 목적으로 사용하고 있었다. Cloudfront는 CDN 및 캐싱, 압축 기능의 효과를 누릴 수 있다는 최적화 관점에서의 이점은 있었으나 본질은 아니었다. 그러한 관점에서 Netlify라는 서비스는 정적배포를 하기에 가장 적합했다. 그래서 빠르게 darass 서비스를 크게 어드민/댓글모듈/배포스크립트로 나눈다음에 각자의 github 저장소를 만들고 각각을 netlify에 연결해놓았었다. 그리고..

다라쓰의 댓글모듈 부분(reply-module)은 replyModule과 replyModal 이렇게 2개의 entry를 가진다. 왜냐하면 2개의 iframe이 필요하기 때문에, 2개의 페이지가 필요했기 때문이다. 그리고 둘다 공통적인 스타일 요소를 어느정도 가지고 있어서 프로젝트를 분리할 필요성도 없었다. 그 당시 번들을 보면, 위아래가 똑같은 라이브러리들을 가지고 있다. 즉, entry가 2개니까 각각에서 중복으로 사용하고 있던 부분들이 있던 것이다. 반대로 말하면 저것만 해결하면 번들 사이즈는 2배로 줄어들것이라는 뜻이다. 그래서 이리저리 방법을 찾아보고 다녔다. 그 중 module federation이라는 webpack5의 기법을 알아냈고 그것만 있으면 이 문제를 해결할 수 있을 것이라 생각했다. ..

1. simple-react-query에 캐싱기능 추가 react-query의 기능 중 하나인 cache기능을 추가했다. useQuery에서 데이터를 받아오면, QueryClient의 queryCache에 기억시키고, cache가 있다면 강제 refetch하거나, cache시간이 만료되어 제거되었을때 뺴고는 기억된 값을 반환한다. 이제 simple-react-query를 사용하려면 캐싱여부상관없이 QueryClient를 Provider로 Context API사용을해서 내려야한다. 물론 useQuery에서의 캐싱은 자유다. react-query의 캐싱이 default라면 simple-react-query는 cacheTime과 queryKeys를 넣어야 캐싱이 된다는 차이점이 있다. 원래는 캐싱기능을 넣지 ..

다라쓰는 react에서 JSX문법으로 사용할 수 있도록, 별도의 Component를 라이브러리로 제공한다. https://github.com/zereight/darass-react GitHub - zereight/darass-react: Darass reply module for React Darass reply module for React. Contribute to zereight/darass-react development by creating an account on GitHub. github.com 다라쓰 고객사 중의 하나로 https://babble.gg/ 사이트가 있는데, 다크모드를 토글할 수 있는 기능이 있다. 그런데, Darass의 prop이 변경되었는데 다라쓰 컴포넌트는 새롭게 렌더링되..

오랜만에 코드를 만졌다. 면접준비와 이력서, 포트폴리오를 손보고 지식들을 정리하느라 요새 코드를 많이 보지 못했다. 면접까지 남은 시간동안, 그동안 기술부채에 쌓여져있던 부분들을 어느정도 해결하면서 코드를 좀 만지기로 했다. 유지보수도 개발자의 업무이기 때문이닿 첫번째로 https://github.com/zereight/woowacourse-tiny-cra 아주 예전에 만든 custom cra로 javascript와 typescript를 선택하여 create-react-app처럼 동작하는 라이브러리를 만들었었다. 하지만, 이전에는 npx가 지원되지 않았다. 그래서 yarn add woowacourse-tiny-cra 를 한다음에, node ./node-module/woowacourse-tiny-cra/s..

다라쓰의 로그인 인증방식은 refreshToken을 발급받음으로서 accessToken을 서버로부터 받을 수 있는 방식으로 구현되어 있습니다. (기존에는 cookie등의 클라이언트 저장소에서 accessToken을 가지고 있는 방식이었는데, 보안상 취약점이 걱정되어 수정했습니다.) 그리고 accessToken을 재발급받을때마다 서버에서의 refreshToken은 새롭게 갱신됩니다. 처음에는 refreshToken의 갱신이 잦음으로 보안이 뛰어날 것이라는 생각에 동의했었습니다. 그런데 지금에서야 뭔가가 이상함을 깨달았습니다. 동시에 로그인했을 경우 어떻게 하지? 지금껏 모든 가정은 한 곳에서 로그인하는 상황만 가정되었습니다. 또한, 테스트를 할때에도 로그인 vs 비로그인, 비로그인 vs 비로그인, 네이버 ..

다라쓰에는 오래전부터 한가지 문제가 있었다. 새로 고침할때마다 image보다 alt가 먼저 보이고 있다. 바로, 새로고침해서 이미지를 로드할때 이미지가 로딩되기 전에 alt가 먼저 노출되는 것이었다. 이제 기능추가나 코드를 예쁘게하는 시점보다 사용자가 좀더 쾌적하게 서비스를 이용할 수 있도록 해야했기 때문에 많은 고민이 되었다. 이것때문에 SSR을 도입을 많이 고민헀다. SSR은 서버에서 렌더링할 요소들을 모두 적용해주기 때문이다. 하지만 데모데이까지 남은시간은 불과 1~2일. next js도 안니고 쌩으로 SSR을 적용하기엔 시간이 부족하다고 판단했다. 버그가 터지면 그것도 큰일.. 그래서 다른 방법을 리서치해보고 있었다. 그러다가 한 크루가 아이디어를 던져주셨다. 바로 인라인으로 BASE64 형식의 ..

https://github.com/woowacourse/javascript-own-ui-library/pull/20 [2단계 - Virtual DOM 만들기] 도비(김정혁) 미션 제출합니다. by zereight · Pull Request #20 · woowacourse/javas https://musing-lamport-6e9960.netlify.app/ WebComponent 기반으로 동작합니다. Step1 심화 요구사항인 JSX 파서를 만들었습니다. (버그 존재) Step1의 Vdom 알고리즘을 개선했습니다. 이제 한번에 변경사항 모아서 github.com 지난 3일동안 우테코 미션을 했다. 나만의 ui 라이브러리를 만들어보는 것인데, 기한이 내일까지라 버그가 있음에도 제출을 했다. 버그는 대부분 ..