이윤용(ibra)
GitHub Actions에서 도커 캐시를 적용해 이미지 빌드하기
![thumbnail-image-/2022/220414-docker-cache/](/static/0882abd465837b1e78401adab0b62c31/afa5c/thumbnail.png)
그때는 몰랐습니다. GitHub Actions 를 이용해 빌드할 때는 도커 캐시가 동작하지 않는다는 사실을요.
함성준(kevin)
웹 워커를 통해 이미지 색상 수집기 성능 개선하기
![thumbnail-image-/2022/220324-web-worker-image/](/static/52ad080ede028e86aa7b0347bd2b3bc2/afa5c/thumbnail.png)
이미지의 픽셀 데이터에서 색상값을 수집하는 성능을 개선해봅니다.
유동식(rich)
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
![thumbnail-image-/2022/220317-integrate-msw-storybook-jest/](/static/96b3dd0e576950ff2c05a0a639bc0e8e/afa5c/thumbnail.png)
깔끔한 코드, 잘 읽히는 코드, 중복을 최소한 코드, 관심사의 분리 등 개발자들의 깔끔함(?)을 위한 노력은 오늘도 계속된다.
박수빈(cheese)
카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?
![thumbnail-image-/2022/220310-kakaopage-bff/](/static/407e88de50dc5ad0d799dab7050d348b/afa5c/thumbnail.png)
카카오페이지가 적용한 BFF 구조를 소개합니다.
서종만(coze)
Tailwind CSS 사용기
![thumbnail-image-/2022/220303-tailwind-tips/](/static/b63aff98dee711774d076dc6d39b17b7/afa5c/thumbnail.png)
Tailwind CSS를 사용해보면서 얻은 소소한 팁들을 공유합니다.
조지영(esme)
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
![thumbnail-image-/2022/220224-data-fetching-libs/](/static/55eba8ca7778f51c620be16a077fcf72/afa5c/thumbnail.png)
서버 상태 관리 라이브러리의 필요성을 설명하고, React Query, SWR 두 라이브러리를 비교합니다.
이혁원(bill)
초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
![thumbnail-image-/2022/220217-learn-babel-terser-swc/](/static/c85402b9614d22cd4daf9d0867bdc583/afa5c/thumbnail.png)
자바스크립트 빌드 툴 중 바벨과 Terser에 대해 실습을 통해 알아보고, SWC가 무엇인지 알아봅시다.
서현우(bono)
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
![thumbnail-image-/2022/220210-css-in-kakaowebtoon/](/static/5f20631e218a68fc5db3e9ec64ca7841/afa5c/thumbnail.png)
카카오웹툰에서 사용하는 CSS 방법론을 소개합니다.
김성호(shiren)
리액트로 만든 게임에 사운드 추가하기
![thumbnail-image-/2022/220127-audio-in-web/](/static/acad21f47ef5d98f4dfd4a7eefb3d34b/afa5c/thumbnail.png)
…
성승규(lucas)
사용자 경험과 성능 개선 방법 in 카카오웹툰
![thumbnail-image-/2022/220120-ux-and-perf-in-kakaowebtoon/](/static/4d609ed432b7d14752fa0be09689ac7d/afa5c/thumbnail.png)
카카오웹툰에서 사용자 경험과 성능 개선을 위해 사용한 몇가지 방법들을 소개합니다.
2022.01.20·17 min read
KEYWORDS
ALLreactnextjstestcssjavascriptperformancegithub actions컴포넌트htmlssrgraphqltroubleshootingbackstopjsawscorsweb apipwatypescripttailwind상태관리webpackstorybookcommoncomponentbffreact-querysafariiosamplifyserverlesscomposite actionjavascript actiontransitionsolidarchitecturesrpocplspispdipchatgptaijestscrollsnapcarousele2emarkdownservice workerrtkredux/toolkitrtk queryseorouterioctwin.macrokakaoentjunioronboardingecmascriptesbuild리팩토링lighthousev8환경변수buildhttphttp2dockerwebworkerimagecanvasthreadbuilderbabelterserswcsuspense비동기12factor