<div id="readability-page-1" class="page"><div><div><p><a rel="noopener follow" href="/?source=post_page-----85d204018730-----------------------------------"><img alt="Jusung Hwang" src="https://miro.medium.com/fit/c/56/56/1*3sz0SF37ibwm-BAopfwAfQ.png" width="28" height="28"></a></p></div><p id="3080">많은 것을 얻고, 한편으론 여운도 많이 남는 그런 해였던 것 같습니다.<br>오늘은 작년 회고의 이어 2021년을 보내며 어떤 것들을 했으며 그로 인해 무엇을 느꼈는지 정리해보려고 합니다.</p><h2 id="842a">슬럼프</h2><p id="fe45">시작부터 약간 암울한 이야기를 적어보자면 2020년부터 조금씩 여러 감정 변환들로 인해 내가 정말로 웹 프론트엔드 개발자로서 잘 성장하고 있는 걸까? 의문이 들게 되었습니다.</p><p id="4801">주변 분들은 각자 나름의 방식대로 성장해 나가는 게 보였지만 반면 저는 제자리에 멈춰있는 듯한 느낌을 받았다고 할까요..?</p><p id="e08c">분명 머릿속 어딘가에는 주워들었던 내용인 “모두가 시작점은 다르고, 남들과 비교할 필요 없이 본인의 길을 가면 돼”라는 게 존재는 했던 것 같지만(?) 주변 환경적인 요소와 감정 변화가 들이닥치면 좋은 생각을 하기 쉽지가 않더군요…</p><p id="b2e2">힘들<span id="rmm"><span id="rmm">었</span></span>다는 내용은 별로 중요하지 않으니 이쯤하고 이번 슬럼프를 극복을 할 수 있게 된 계기를 말하자면 <strong>동료나 주변 지인들에게 용기 내서 얘기를 꺼냈던 게 가장 컸던 것 같아요.</strong></p><p id="d840">다른 것들도 있었지만 상담하는 과정들 속에서의 고마운 감정들이 저를 다시 일으켜 세워 줬다고 해야 될까요?</p><p id="d96e">만약 이 글을 읽는 분이 슬럼프가 왔다면 휴가를 낼 수 있다면 내고 주말 등을 이용해서 꼭 휴식 기간을 가지는게 좋을 것 같아요. 기존 환경을 바꿔보는 것도 좋구요. 어디 다른 곳에 간다든지.. 저는 집돌이라 스팀에 해보지 않은 게임들 찾아서 구매해서 플레이했지만요. (웃음)</p><p id="d3b8">슬럼프를 이겨내고 난 뒤에는 작은 것이라도 좋으니 했던 것들을 하나씩 기록해가며 행동으로 옮겨보게 되었어요.</p><h2 id="5c58">함께 할 동료 모집, 결과는 아쉽지만 실패.</h2><p id="f993">당시 사내에선 웹 프론트엔드 개발을 저 혼자 메인으로 하고 있었는데요, 위에 슬럼프에 원인에도 포함되어 있었지만, 저와 같이 고민하고 모험할 동료를 원했습니다. 그래서 여러 행동들을 실천했는데요.</p></div><div><p id="fd79">회사 기술 블로그에도 여러 글도 작성해보고 (페북 그룹에도 올리고..)</p></div><div><p id="506c">당시 많은 스타트업이 노션을 통해 회사를 소개하고 있던 걸 보아 우리도 같이 꾸며보면 좋을 것 같아서 회사 노션 소개 페이지도 만들어 보았습니다. (이것도 페북에 올리고…)</p><p id="0dd9">하지만 아쉽게도 동료는 찾을 수 없었습니다. (흑)</p><p id="e27c">나름 좋은 경험이었다고 생각하지만, 그때 만약 좀 더 광역 어그로(?)를 끌었다면… 구인도 제대로 올리고 했다면 좋은 동료를 찾았을지도 모르겠네요.</p><h2 id="85ae">이직</h2><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*HP-bDpUMA_A70VlP" width="700" height="934" role="presentation"></p></div><figcaption>카카오스타일에서 받은 꽃</figcaption></figure><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*u5M64TFAJID_JCfQ" width="700" height="525" role="presentation"></p></div><figcaption>첫날 자리에서 찰칵</figcaption></figure><p id="39f5">2017년 12월부터 2021년 2월까지 다니던 위즈페이스를 떠나고 지그재그 서비스를 운영하는 크로키닷컴(현 카카오스타일)의 프론트엔드 개발자로 합류하게 되었습니다.</p><p id="dbd5">3년이란 시간 동안 회사의 정이란 게 들기도 했고 팀원들 모두 좋은 분들이라 많이 고민했지만 아쉽게도 바라던 방향이 달랐기에 이직을 통보하였습니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*Z-hu0KlL97x38Y8N" width="700" height="525" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/0*Z-hu0KlL97x38Y8N?q=20"></p></div><figcaption>마지막에는 3년동안 수고했다고 이런것도 받았었네요 ㅋㅋ</figcaption></figure><blockquote><p id="62c4">다들 마지막까지 잘 챙겨주셔서 정말 감사했습니다. 🙇‍♂️</p></blockquote><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*XJTXh-Ch3Po2dOBu" width="700" height="934" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/44/0*XJTXh-Ch3Po2dOBu?q=20"></p></div><figcaption>옛날에 있었던 제 자리 ㅋㅋ 지금은 디자이너분이 쓰시는 것 같았어요.</figcaption></figure><p id="7e83">이후에 한번 놀러 갔는데 대부분 재택근무에 미팅 중이셔서 못 본 게 아쉬웠어요. 😥</p><h2 id="1896">올해 카카오스타일에서 했던 것들</h2><p id="96f7">카카오스타일에 합류하고 여러 업무를 하면서 서비스 만들었던 것과 문제를 해결했던 것들을 정리해봤습니다.</p><h2 id="7f49">신규 서비스 오픈</h2><p id="5819">크게 기억에 남는 건 스토어픽과 최근에 공개된 따끈따끈한 지그재그 에픽(é-pick)입니다.</p><p id="6526"><strong>스토어픽</strong>의 경우에는 진행하면서 동시에 파트너센터의 개선 작업이 같이 이루어지고 있었는데요, 개인적으로 개선 작업에 많은 욕심을 냈더니 당연하지만, 일정이 조금 빠듯해져 일정 조율과 태스크 우선도에 대한 생각을 해볼 수 있게 됐던 것 같습니다.</p><p id="f38f">중요하진 않지만 친숙하지 않던 Mithril.js도 조금은 더 잘 다룰 수 있게 된 것 같고요. (?)</p><p id="ae5d">다음으로 <strong><em>에픽</em></strong>입니다.</p><p id="4248">개인적으로 에픽은 로고가 너무 이뻐서 꽤 공을 많이들이려고 노력했던 서비스 인 것 같습니다. (지그재그 앱에서 확인 가능합니다😘)</p><blockquote><p id="2164">아직 추가되지 않은 것도 많은 기대 부탁드릴게요. 🙏</p></blockquote><p id="03e2">에픽에서도 위와 비슷한 생각이 많이 들었고 추가로 앱팀과의 커뮤니케이션, 그리고 웹 &lt;-&gt; 앱 IPC에 대한 고민을 할 수 있게 해줬던 것 같고 마지막으로 동적 사이즈의 아이템을 다루는 가상 리스트에 대한 구현 방법에 대해 고민해봤던 것 같습니다.</p><p id="416c">그 과정에서 오늘의집 끼로 님이 작성하신 글이 도움이 많이 됐어요.</p><h2 id="ed5a">백오피스 개발환경 react-fast-refresh 적용</h2><p id="5635">입사하고 한 달 뒤쯤에 리액트 핫리로드 기능이 적용되어 있지 않다는걸 알게 됐습니다.<br>개발하다가 매번 파일이 바뀔 때마다 페이지가 새로고침 되고 그 상태로 2초에서 길게는 5초까지 기다린 뒤에 변경된 결과물을 확인 할 수 있다 보니 생산적인 측면에서 개선이 필요해 보였고, react-hot-loader를 도입하던 중 새로 개선된 react-fast-refresh를 알게 되어 이를 적용했습니다.<br>덕분에 좀 더 쾌적하게 개발 할 수 있게 됐습니다.</p><figure><div><p><img alt="" src="https://miro.medium.com/max/334/1*EVpwwvROMstP_8mNPELDJw.png" width="167" height="70" role="presentation" data-old-src="https://miro.medium.com/max/60/1*EVpwwvROMstP_8mNPELDJw.png?q=20"></p></div><figcaption>PR에서 하트를 무려 <strong>3개</strong>나 받았습니다. 🙌</figcaption></figure><h2 id="36bc">[해커톤] 지그재그 파트너센터 서비스의 빌드 통합 (Mithril.js + React.js)</h2><p id="c3d5">기존에는 리액트 프로젝트 빌드와 레거시인 Mithril.js 페이지를 빌드를 하는 과정이 분리되어 리액트(tsc compile) -&gt; 미스릴(webpack at-loader) 순으로 순차적으로 빌드가 진행되었는데 굳이 따로 할 필요 없이 webpack 설정에서 loader의 분기만 잘 처리하면 한 번에 될 것 같아서 개선 작업을 진행했습니다.</p><p id="54d7">빌드 과정을 webpack으로 통합하고 at-loader를 통한 컴파일 대신 babel의 typescript preset과 cache 기능을 사용해서 빌드 속도 개선을 했고, 그로 인해 기존에 걸리던 70초에서 약 <strong>2배</strong> 더 빨라진 <strong>35초</strong>(캐싱 적용)로 단축할 수 있었습니다.</p><p id="2477">다만 at-loader에서 babel-loader를 채택하는 부분에서 빌드시 타입 체킹을 못 한다는 이슈가 있었는데 저희는 IDE 단에서도 타입체킹을 어느 정도 커버 가능할 수 있다고 판단해서 babel-loader를 도입해둔 상태이며 아직 큰 문제는 없었지만 이후 빌드 시에 타입 체킹을 도입해야 한다면 <a href="https://github.com/TypeStrong/fork-ts-checker-webpack-plugin" rel="noopener ugc nofollow" target="_blank">fork-ts-checker-webpack-plugin</a> 등을 도입해서 별도 프로세스에서 같이 쓸 수도 있을 것 같습니다.</p><h2 id="ed00">[해커톤] 지그재그 파트너센터 레거시에서 리액트 프로젝트로 전환을 위한 구조 작업</h2><p id="8101">위에 개선과 더불어서 파트너센터에는 미스릴 위주로 작업이 진행되고 리액트는 부분적으로만 사용되고 있었는데 이후의 리액트 프로젝트로 마이그레이션을 할 수 있게 적용하기 위해 팀원과 함께 작업을 진행했습니다.</p><p id="2647">이것저것 바뀐 게 많지만 크게 두 가지로만 정리하자면 하나는 미스릴 안에 특정 부분만 리액트가 렌더링 되도록 구조가 되어있었는데 이후에 만들어질 리액트 프로젝트의 라우팅을 관리하기 위한 기반을 마련했고 나머지 하나는 공용으로 사용할 리액트 컴포넌트들을 정리했습니다.</p><h2 id="0846">[해커톤] Github Actions을 통한 빌드 워크플로우에서 node_modules의 캐싱이 잘 동작하지 않는 것을 발견하여 해결</h2><p id="31bf">파트너센터에 babel과 cache 기능을 도입하면서 분명 로컬에서는 캐싱 상태일 때 빌드속도가 개선된 걸 느꼈는데 깃헙 액션을 통해 빌드된 것들을 확인해보니 워크플로우에서 캐싱이 제대로 동작하고 있지 않다는 것을 알게 됐습니다.</p><p id="08ae">확인해보니 node_modules의 cache-hit을 구분하여 npm install 스킵 여부를 판단하는 게 안 되어 있었고 추가로 패키지 설치 명령어가 npm ci 명령어를 통해 이뤄지고 있었습니다.</p><p id="c248">그래서 이를 수정하고 아래와 같은 속도 개선이 이뤄졌습니다.</p><blockquote><p id="6bd0">(네트워크 상태에 따라 조금씩 다르게 나왔음)<br>기존: 4~6분<br>개선: <strong>약 2~3분 20초</strong></p></blockquote><h2 id="f049">백오피스 개발환경 쿠키 Same-Site 정책 이슈 개선</h2><p id="8a2b">저는 파이어폭스 브라우저를 사용하고 있어서 그때 당시에는 별문제 없이 개발하고 있었는데, 크롬을 사용하시는 프론트 팀원분들이 로컬에서 개발 시 계속해서 로그인했지만, 로그인이 필요하다는 메시지와 함께 문제를 겪고 계셔서 확인해보니 쿠키 정책이 바뀌어 발생한 Same Site 이슈였습니다.</p><p id="2890">당장은 크롬의 실험실 기능으로 설정하여 개발을 진행했었지만, 이후에 최신 버전에서 해당 기능이 사라져서(?) 최신 크롬을 쓰시는 분께는 다운 그레이를 하거나 우선 개발을 위해 파이어폭스 브라우저 사용을 권장했고, 이후에 openssl로 로컬 ssl 인증서를 발급받아서 localhost가 아닌 다른 도메인의 API를 요청할 경우에는 https로 오픈되도록 webpack 설정을 적용하였습니다.</p><p id="a1bc">추가로 백엔드와 인프라팀에 https 개발주소로도 함께 화이트리스트 처리를 요청하기도 했습니다.</p><h2 id="0016">세일 탭의 콘텐츠 로딩 속도 개선</h2><p id="275e">세일 탭은 상품의 이미지를 많이 불러오는 서비스인데요, 기존에는 부분적으로 콘텐츠에 대한 Lazy Loading이 처리되어있긴 했지만, 아직 밑에 보이지 않는 영역의 API까지 요청해서 데이터를 그려주다 보니 처음 상단에 보이는 영역의 이미지가 이후에 보일 내용보다 늦게 보이는 이슈가 발생하고 있었습니다.</p></div><div><p id="b4cc">그래서 이를 해결하고자 사진과 같이 처음 영역에 대한 API를 호출한 뒤 각 영역은 스켈레톤 UI를 그려주고, 이후 Intersection Observer를 사용하여 유저가 스크롤 하여 보일 경우, 해당 영역의 API를 호출하여 콘텐츠를 가져오는 방식으로 변경했더니 확실히 초기에 불러오는 콘텐츠 양이 줄어들어 필요한 것만 빠르게 가져올 수 있게 되었습니다.</p><figure><p><img alt="" src="https://miro.medium.com/max/1314/1*srlto9BH_9mC5cUSs1yZrw.png" width="657" height="324" role="presentation"></p><figcaption>당시 슬랙 스레드에 올렸던 비교 내용</figcaption></figure></div><div><h2 id="cf82">개발 포스팅 및 첫 개발팁 영상 유튜브 업로드</h2><p id="da16">개발 관련 포스팅으로는 3개 정도 작성했고 그냥 한번 재미 삼아 해보고 싶어서 유튜브에 처음으로 개발팁 영상을 만들어서 올려보았네요.</p><figure></figure><h2 id="8d25">첫 오픈소스 기여</h2><p id="9abe">회사에서 사용하던 라이브러리에 이슈가 있어서 처음으로 오픈소스 프로젝트인 swiper.js에 기여하게 됐습니다.<br>미숙한 영어 실력을 가지고 두 번이나 이슈를 올리고 PR Merge까지 진행됐던 과정들이 참 뿌듯하고 즐거웠던 것 같아요.</p><h2 id="c06b">피그마 1년 구독과 피그마 커뮤니티에 이력서 탬플릿 배포</h2><figure><div><p><img alt="" src="https://miro.medium.com/max/988/0*DvrqdPVPR6sIGbO2" width="494" height="592" sizes="494px" role="presentation" data-old-src="https://miro.medium.com/max/50/0*DvrqdPVPR6sIGbO2?q=20"></p></div></figure><p id="c870">피그마를 좀 더 많이 활용해보려고 5월 25일에 슥슥 지갑을 털어 피그마 1년 구독을 했습니다. (잘가 내 144달러)<br>그리고서 주변 지인인 <a href="https://twitter.com/atLuminon" rel="noopener ugc nofollow" target="_blank">루미논</a>님과 얘기 후 제 나름대로 프로젝트 정리도 하고, 라이브러리 기능도 써보고, 새롭게 추가된 Variant 기능 등 유용하게 많이 써봤던 것 같습니다.</p></div><div><p id="4277">그리고 올해 초에 피그마를 이용해서 만들었던 이력서를 간단한 템플릿 형태로 커뮤니티에 올려보면 좋을 것 같아서 디자인 파일을 정리해서 커뮤니티에 배포했습니다.</p><p id="12a7">지금 드는 생각은 그냥 노션으로 할 걸 그랬나.. 싶기도 하네요 😂</p><h2 id="cd09">마치며</h2><p id="9ef6">적고 나니 “<strong>작년보다 좀 더 알차게 보냈구나!</strong>”라고 느껴졌네요. 처음 해본 것들도 많았고요.</p><p id="186d">회고를 적으며 개발자인 제 모습을 돌이켜봤을 때 코드를 잘 설계하는 사람이 되는 것도 중요하지만 다른 부분에서 비즈니스나 팀원들이 겪고 있는 문제점들을 같이 해결해보려고 하고, 이후에 비슷한 상황이 발생했을 때 가이드를 제시해줄 수 있는 그런 사람이 되도록 분발해야겠다고 다짐했던 것 같습니다.</p><p id="f647">지금까지 부족한 글 읽어주셔서 감사합니다.</p></div></div>

Stories by Jusung Hwang on Medium

많은 것을 얻고, 한편으론 여운도 많이 남는 그런 해였던 것 같습니다.
오늘은 작년 회고의 이어 2021년을 보내며 어떤 것들을 했으며 그로 인해 무엇을 느꼈는지 정리해보려고 합니다.
슬럼프
시작부터 약간 암울한 이야기를 적어보자면 2020년부터 조금씩 여러 감정 변환들로 인해 내가 정말로 웹 프론트엔드 개발자로서 잘 성장하고 있는 걸까? 의문이 들게 되었습니다.
주변 분들은 각자 나름의 방식대로 성장해 나가는 게 보였지만 반면 저는 제자리에 멈춰있는 듯한 느낌을 받았다고 할까요..?
분명 머릿속 어딘가에는 주워들었던 내용인 “모두가 시작점은 다르고, 남들과 비교할 필요 없이 본인의 길을 가면 돼”라는 게 존재는 했던 것 같지만(?) 주변 환경적인 요소와 감정 변화가 들이닥치면 좋은 생각을 하기 쉽지가 않더군요…
힘들었다는 내용은 별로 중요하지 않으니 이쯤하고 이번 슬럼프를 극복을 할 수 있게 된 계기를 말하자면 동료나 주변 지인들에게 용기 내서 얘기를 꺼냈던 게 가장 컸던 것 같아요.
다른 것들도 있었지만 상담하는 과정들 속에서의 고마운 감정들이 저를 다시 일으켜 세워 줬다고 해야 될까요?
만약 이 글을 읽는 분이 슬럼프가 왔다면 휴가를 낼 수 있다면 내고 주말 등을 이용해서 꼭 휴식 기간을 가지는게 좋을 것 같아요. 기존 환경을 바꿔보는 것도 좋구요. 어디 다른 곳에 간다든지.. 저는 집돌이라 스팀에 해보지 않은 게임들 찾아서 구매해서 플레이했지만요. (웃음)
슬럼프를 이겨내고 난 뒤에는 작은 것이라도 좋으니 했던 것들을 하나씩 기록해가며 행동으로 옮겨보게 되었어요.
함께 할 동료 모집, 결과는 아쉽지만 실패.
당시 사내에선 웹 프론트엔드 개발을 저 혼자 메인으로 하고 있었는데요, 위에 슬럼프에 원인에도 포함되어 있었지만, 저와 같이 고민하고 모험할 동료를 원했습니다. 그래서 여러 행동들을 실천했는데요.
회사 기술 블로그에도 여러 글도 작성해보고 (페북 그룹에도 올리고..)
당시 많은 스타트업이 노션을 통해 회사를 소개하고 있던 걸 보아 우리도 같이 꾸며보면 좋을 것 같아서 회사 노션 소개 페이지도 만들어 보았습니다. (이것도 페북에 올리고…)
하지만 아쉽게도 동료는 찾을 수 없었습니다. (흑)
나름 좋은 경험이었다고 생각하지만, 그때 만약 좀 더 광역 어그로(?)를 끌었다면… 구인도 제대로 올리고 했다면 좋은 동료를 찾았을지도 모르겠네요.
이직
2017년 12월부터 2021년 2월까지 다니던 위즈페이스를 떠나고 지그재그 서비스를 운영하는 크로키닷컴(현 카카오스타일)의 프론트엔드 개발자로 합류하게 되었습니다.
3년이란 시간 동안 회사의 정이란 게 들기도 했고 팀원들 모두 좋은 분들이라 많이 고민했지만 아쉽게도 바라던 방향이 달랐기에 이직을 통보하였습니다.
다들 마지막까지 잘 챙겨주셔서 정말 감사했습니다. 🙇‍♂️
이후에 한번 놀러 갔는데 대부분 재택근무에 미팅 중이셔서 못 본 게 아쉬웠어요. 😥
올해 카카오스타일에서 했던 것들
카카오스타일에 합류하고 여러 업무를 하면서 서비스 만들었던 것과 문제를 해결했던 것들을 정리해봤습니다.
신규 서비스 오픈
크게 기억에 남는 건 스토어픽과 최근에 공개된 따끈따끈한 지그재그 에픽(é-pick)입니다.
스토어픽의 경우에는 진행하면서 동시에 파트너센터의 개선 작업이 같이 이루어지고 있었는데요, 개인적으로 개선 작업에 많은 욕심을 냈더니 당연하지만, 일정이 조금 빠듯해져 일정 조율과 태스크 우선도에 대한 생각을 해볼 수 있게 됐던 것 같습니다.
중요하진 않지만 친숙하지 않던 Mithril.js도 조금은 더 잘 다룰 수 있게 된 것 같고요. (?)
다음으로 에픽입니다.
개인적으로 에픽은 로고가 너무 이뻐서 꽤 공을 많이들이려고 노력했던 서비스 인 것 같습니다. (지그재그 앱에서 확인 가능합니다😘)
아직 추가되지 않은 것도 많은 기대 부탁드릴게요. 🙏
에픽에서도 위와 비슷한 생각이 많이 들었고 추가로 앱팀과의 커뮤니케이션, 그리고 웹 <-> 앱 IPC에 대한 고민을 할 수 있게 해줬던 것 같고 마지막으로 동적 사이즈의 아이템을 다루는 가상 리스트에 대한 구현 방법에 대해 고민해봤던 것 같습니다.
그 과정에서 오늘의집 끼로 님이 작성하신 글이 도움이 많이 됐어요.
오늘의집 내 무한 스크롤 개발기 - 오늘의집 블로그
백오피스 개발환경 react-fast-refresh 적용
입사하고 한 달 뒤쯤에 리액트 핫리로드 기능이 적용되어 있지 않다는걸 알게 됐습니다.
개발하다가 매번 파일이 바뀔 때마다 페이지가 새로고침 되고 그 상태로 2초에서 길게는 5초까지 기다린 뒤에 변경된 결과물을 확인 할 수 있다 보니 생산적인 측면에서 개선이 필요해 보였고, react-hot-loader를 도입하던 중 새로 개선된 react-fast-refresh를 알게 되어 이를 적용했습니다.
덕분에 좀 더 쾌적하게 개발 할 수 있게 됐습니다.
[해커톤] 지그재그 파트너센터 서비스의 빌드 통합 (Mithril.js + React.js)
기존에는 리액트 프로젝트 빌드와 레거시인 Mithril.js 페이지를 빌드를 하는 과정이 분리되어 리액트(tsc compile) -> 미스릴(webpack at-loader) 순으로 순차적으로 빌드가 진행되었는데 굳이 따로 할 필요 없이 webpack 설정에서 loader의 분기만 잘 처리하면 한 번에 될 것 같아서 개선 작업을 진행했습니다.
빌드 과정을 webpack으로 통합하고 at-loader를 통한 컴파일 대신 babel의 typescript preset과 cache 기능을 사용해서 빌드 속도 개선을 했고, 그로 인해 기존에 걸리던 70초에서 약 2배 더 빨라진 35초(캐싱 적용)로 단축할 수 있었습니다.
다만 at-loader에서 babel-loader를 채택하는 부분에서 빌드시 타입 체킹을 못 한다는 이슈가 있었는데 저희는 IDE 단에서도 타입체킹을 어느 정도 커버 가능할 수 있다고 판단해서 babel-loader를 도입해둔 상태이며 아직 큰 문제는 없었지만 이후 빌드 시에 타입 체킹을 도입해야 한다면 fork-ts-checker-webpack-plugin 등을 도입해서 별도 프로세스에서 같이 쓸 수도 있을 것 같습니다.
[해커톤] 지그재그 파트너센터 레거시에서 리액트 프로젝트로 전환을 위한 구조 작업
위에 개선과 더불어서 파트너센터에는 미스릴 위주로 작업이 진행되고 리액트는 부분적으로만 사용되고 있었는데 이후의 리액트 프로젝트로 마이그레이션을 할 수 있게 적용하기 위해 팀원과 함께 작업을 진행했습니다.
이것저것 바뀐 게 많지만 크게 두 가지로만 정리하자면 하나는 미스릴 안에 특정 부분만 리액트가 렌더링 되도록 구조가 되어있었는데 이후에 만들어질 리액트 프로젝트의 라우팅을 관리하기 위한 기반을 마련했고 나머지 하나는 공용으로 사용할 리액트 컴포넌트들을 정리했습니다.
[해커톤] Github Actions을 통한 빌드 워크플로우에서 node_modules의 캐싱이 잘 동작하지 않는 것을 발견하여 해결
파트너센터에 babel과 cache 기능을 도입하면서 분명 로컬에서는 캐싱 상태일 때 빌드속도가 개선된 걸 느꼈는데 깃헙 액션을 통해 빌드된 것들을 확인해보니 워크플로우에서 캐싱이 제대로 동작하고 있지 않다는 것을 알게 됐습니다.
확인해보니 node_modules의 cache-hit을 구분하여 npm install 스킵 여부를 판단하는 게 안 되어 있었고 추가로 패키지 설치 명령어가 npm ci 명령어를 통해 이뤄지고 있었습니다.
그래서 이를 수정하고 아래와 같은 속도 개선이 이뤄졌습니다.
(네트워크 상태에 따라 조금씩 다르게 나왔음)
기존: 4~6분
개선: 약 2~3분 20초
백오피스 개발환경 쿠키 Same-Site 정책 이슈 개선
저는 파이어폭스 브라우저를 사용하고 있어서 그때 당시에는 별문제 없이 개발하고 있었는데, 크롬을 사용하시는 프론트 팀원분들이 로컬에서 개발 시 계속해서 로그인했지만, 로그인이 필요하다는 메시지와 함께 문제를 겪고 계셔서 확인해보니 쿠키 정책이 바뀌어 발생한 Same Site 이슈였습니다.
당장은 크롬의 실험실 기능으로 설정하여 개발을 진행했었지만, 이후에 최신 버전에서 해당 기능이 사라져서(?) 최신 크롬을 쓰시는 분께는 다운 그레이를 하거나 우선 개발을 위해 파이어폭스 브라우저 사용을 권장했고, 이후에 openssl로 로컬 ssl 인증서를 발급받아서 localhost가 아닌 다른 도메인의 API를 요청할 경우에는 https로 오픈되도록 webpack 설정을 적용하였습니다.
추가로 백엔드와 인프라팀에 https 개발주소로도 함께 화이트리스트 처리를 요청하기도 했습니다.
세일 탭의 콘텐츠 로딩 속도 개선
세일 탭은 상품의 이미지를 많이 불러오는 서비스인데요, 기존에는 부분적으로 콘텐츠에 대한 Lazy Loading이 처리되어있긴 했지만, 아직 밑에 보이지 않는 영역의 API까지 요청해서 데이터를 그려주다 보니 처음 상단에 보이는 영역의 이미지가 이후에 보일 내용보다 늦게 보이는 이슈가 발생하고 있었습니다.
그래서 이를 해결하고자 사진과 같이 처음 영역에 대한 API를 호출한 뒤 각 영역은 스켈레톤 UI를 그려주고, 이후 Intersection Observer를 사용하여 유저가 스크롤 하여 보일 경우, 해당 영역의 API를 호출하여 콘텐츠를 가져오는 방식으로 변경했더니 확실히 초기에 불러오는 콘텐츠 양이 줄어들어 필요한 것만 빠르게 가져올 수 있게 되었습니다.
개발 포스팅 및 첫 개발팁 영상 유튜브 업로드
개발 관련 포스팅으로는 3개 정도 작성했고 그냥 한번 재미 삼아 해보고 싶어서 유튜브에 처음으로 개발팁 영상을 만들어서 올려보았네요.
React Fast Refresh 적용하기
Dev.to처럼 포스팅 제목을 이미지로 만들어서 링크 미리보기(Link Preview) 이미지에 넣어보자
FFmpeg.wasm을 활용하여 웹에서 GIF 및 MP4 파일를 변환해보자
https://medium.com/media/b7fd8a20a8ea90023eee46cf76856421/href
첫 오픈소스 기여
회사에서 사용하던 라이브러리에 이슈가 있어서 처음으로 오픈소스 프로젝트인 swiper.js에 기여하게 됐습니다.
미숙한 영어 실력을 가지고 두 번이나 이슈를 올리고 PR Merge까지 진행됐던 과정들이 참 뿌듯하고 즐거웠던 것 같아요.
fix(core): Change opacityString and scaleString to originalProgress by nabigraphics · Pull Request #5095 · nolimits4web/swiper
fix(core): centeredSlides won't work when use creative-effect by nabigraphics · Pull Request #5115 · nolimits4web/swiper
피그마 1년 구독과 피그마 커뮤니티에 이력서 탬플릿 배포
피그마를 좀 더 많이 활용해보려고 5월 25일에 슥슥 지갑을 털어 피그마 1년 구독을 했습니다. (잘가 내 144달러)
그리고서 주변 지인인 루미논님과 얘기 후 제 나름대로 프로젝트 정리도 하고, 라이브러리 기능도 써보고, 새롭게 추가된 Variant 기능 등 유용하게 많이 써봤던 것 같습니다.
그리고 올해 초에 피그마를 이용해서 만들었던 이력서를 간단한 템플릿 형태로 커뮤니티에 올려보면 좋을 것 같아서 디자인 파일을 정리해서 커뮤니티에 배포했습니다.
지금 드는 생각은 그냥 노션으로 할 걸 그랬나.. 싶기도 하네요 😂
Figma - Resume Template |
마치며
적고 나니 “작년보다 좀 더 알차게 보냈구나!”라고 느껴졌네요. 처음 해본 것들도 많았고요.
회고를 적으며 개발자인 제 모습을 돌이켜봤을 때 코드를 잘 설계하는 사람이 되는 것도 중요하지만 다른 부분에서 비즈니스나 팀원들이 겪고 있는 문제점들을 같이 해결해보려고 하고, 이후에 비슷한 상황이 발생했을 때 가이드를 제시해줄 수 있는 그런 사람이 되도록 분발해야겠다고 다짐했던 것 같습니다.
지금까지 부족한 글 읽어주셔서 감사합니다.
2021년의 나, 수고했어.

4년차 프론트엔드 개발자 2021년 회고

댓글