개탕 IT FACTORY

개요회사내에서 기존 로그인 방식을 변경하여 JWT 토큰 로그인 방식으로 변경하게 되었다.JWT 토큰 로그인 방식은 많이 알려진 방식이긴 하나 대부분 백엔드에서 많이 처리해줘서 이번에 처음 프론트에 관심사가 모두 전달되어서 로그인 시 토큰관리 및 재갱신 부분도 만들게 되었다.구현도중 토큰이 만료되었을시 실패했던 API 갯수만큼 refresh 토큰 재발급 api가 중복으로 호출되는 이슈를 확인하여 해결했던 부분을 남길려고 한다.문제의 시작회사내 로그인 시스템을 기존 백엔드에서 세션을 모두 관리하던 방식에서 → JWT 토큰 방식으로 변경하게되었다물론 회사의 모든 백엔드 시스템과 프론트를 모두 교체해야되는 대규모 공사여서 굉장히 부담이 되는 프로젝트였던 것은 사실이다(사실 프론트팀과 같이 할려했으나 회사내 또 ..

디자인시스템 구축전 글에서 compound component와 Polymorphic component에 대해서 다뤄봤고,추가적으로 디자인 토큰이 어떤 것인지에 대해서도 알아보았다. 이번에는 디자인시스템 라이브러리 구축을 위한 과정을 한번 다뤄볼까한다. 디자인 시스템 구축 과정사실 Rollup으로 구축할려고했으나 vite의 강세와 더불어 내부로직으로 Rollup 설정이 가능한 vite로 빠르게 구축후 Rollup으로 포팅하는 과정을 할려고한다.고려사항최소한의 번들 사이즈를 유지하게 만든다 (tree shacking 기능이 있는걸 사용한다)storybook을 적극활용하여 컴포넌트를 관리한다Typescript기반으로 개발한다React 개발환경에 맞춰 개발한다 (다른 것들은 추후고려대상)개발 구축빠른 개발환경 ..

첫 맥북구매2019년 첫 개발자로써 직장을 취직하고 회사 컴퓨터보다 좋은 맥북프로를 개인적으로 장만하게되었다.그 당시 혁신이라며 내새웠던 터치바 (지금은…할말하않) 상당히 파격적이긴 했다. 솔직히 개인적으로 “오? 신기한데” 말곤 기능을 쓸만한건 없었다. (그때당시 유튜브 광고스킵정도?…)첫 맥북이고 첫 맥사용이라 굉장히 설레고 두렵기도 했었다 무엇보다 고가의 맥을 산다는 기분이 너무 좋았다. 그 당시에 CTO의 미개봉품을 업자에게서 샀는데, 직접 수령하기 위해 용산역까지 갔던 기억이있다.통장에 있던 월급 + 모아둔돈을 탈탈 털어서 샀던 기억이있는데 벌써… 6년이나 지났구나비싸게 샀지만, 많이 쓰지 못했던 맥북정말 비싸게 주고샀지만 정작 많이 쓰지 못했다 이유중 하나로는 바로 회사 맥북을 굉장히 많이 이..

서론사실 나는 CSS-in-JS 라이브러리를 굉장히 좋아한다. (Emotion, styled-componets) 이유중 하나라면 다들 스파게티 코드라고 불리우는 JS 파일내에서 CSS를 처리할수 있으며 (colocation), 동적으로 CSS 처리도쉽기 때문에 좋아하였다.그런데 최근 React 18에서 Server-component를 지원하기 시작하였고, 기존 CSR → SSR로 판도가 변하면서 많이 달라졌는데 그러면서 기존에 run-time 중에 생성한 CSS-in-JS는 자연스럽게 사용이 어려워졌다. (사실 태생부터 run-time과 함께 만들어지게 되었는데 SSR 지원은 굉장히 어려운 일이 였을 것이다.)그러다가 대체제로 다양한 선택지가 있었는데 Tailwind는 굉장히 인기가 좋았지만 개인적으로는..

개요 기존에 Polymorphic 컴포넌트와 Compound 컴포넌트에 대해서 정리해보았다. 디자인 시스템 구축에 꼭 필요한 과정은 아니나 위의 컴포넌트 제작과정을 알게 된다면 더쉽고 빠르게 디자인 시스템을 구축할수있다. 이번엔 디자인시스템의 핵심이라고 할 수 있는 디자인 토큰에 대해서 알아 볼까 한다 . 💡 이 글은 디자이너나 피그마 관련된 설명이 아닌 단순한 디자인 시스템 구축을 위한 개발자를 위한 글임을 참고 바랍니다. 디자인 토큰이란? 디자인 토큰 개념을 대중화 시킨 ‘세일즈포스(Salesforce)’의 Lightning Design System에서 디자인 토큰 개념을 설명하고있다. Design tokens are the visual design atoms of the design system —..

개요 기존에 Polymorphic Component에대해서 알아보았다. 다양한 환경에서 다양하게 적용가능한 컴포넌트를 적용하기 위해서는 다형성을 가진 컴포넌트를 제작하였다. 이번에는 그 확장판인 Compound Component (합성컴포넌트)에대해서 알아볼까한다. Compound Component(합성컴포넌트) 무엇인가? Compound components are a React pattern that provides an expressive and flexible way for a parent component to communicate with its children, while expressively separating logic and UI. 출처 상위 구성 요소가 하위 구성 요소와 통신할 수 있..

심적 여유가 없었던 2023년 또 다시 한해가 가버렸다 뒤돌아보면 한 것도 없는 것 같은데, 벌써 1년이라는 시간이 가버렸다. 23년에는 참 많은 일들이 있었는데, 연초부터 차량 사고로 시작해서 최근 블랙 아이스에 미끄러져 큰사고는 아니 였지만 사고로 마무리하였다. 무엇보다 개인적으로 가장 힘든 한 해였지만 가장 값진 한해가 아니였나 생각된다 정들었던 회사를 떠나서 새로운 도전을 하려 이직을 하였다. 사실 회사와 이직을 병행하는 동안 너무도 여유가 없었다… 돈은 돈대로 나가고, 시간은 시간대로 쓰다보니까 힘든 한 해였는데 (심지어 이직을 안 해도 퇴사는 결심하였다) 포기하려던 찰나에 이직 성공이라는 소식이 너무 좋았다. 아마 한해 고생했다고 주신 마지막 선물이 아니였나 생각된다. 정들었던 회사와의 이별(..

개요 회사내에서 (지금은 전직장) 디자인 시스템 제작을 위해 다양한 자료를 찾아보던 와중에 Polymorphic 컴포넌트에 대해서 알게 되어서 관련 내용을 정리해볼까 한다. 디자인 시스템 제작한지는 상당히 시간이 오래지났지만 (23년 봄부터 시작했으니…) 관련된 참고내용과 내가 실제로 적용했던걸 바탕으로 글을 작성할려구 한다. 이 내용은 추후 디자인 시스템 구축을 위한 발판을 위한 기본글임을 알립니다. Polymorphic이란? 사전적 의미는 다형성이라고 표시되는데, 프로그래밍 특히 객체지향에서는 오버로딩과 오버라이딩등 다양하게 표현되곤한다. 물론 여기서는 그런뜻이 아닌 다양한 형태를 가질수있는 컴포넌트라고 이해하면 쉬울 것 같다. 다양한 형태는 어떤 형태를 말하는 걸까? 태그에 얽매이지 않는 컴포넌트 ..