개탕 IT FACTORY

개요이번엔 React 템플릿을 만들어볼려고한다.기본적인 구조는 리액트 프로젝트를 따라갈건데 기초 패키지는 정하고 템플릿을 만들예정이다.TanStack Query (데이터 페칭)Zustand (상태 관리)Axios(API통신)React Router V7기본적으로 위 패키지는 기본장착을 할 예정이다스타일 부분은 tailwind, emotion, vanilla-extract 등이 고민되지만 (대세는 tailwind이긴하나…)사실 각 css 프레임워크 별로 나눠서 템플릿을 분기처리할까 생각중이다.또 테스트 라이브러리도 cypress, playwright 고민을 하엿으나, 대세는 playwright라고 하였다.(무엇보다 다양한 언어에 지원되는게 좋았던것같다.)환경구성my-monorepo-template/├── p..

개요점차 기본구성이 완성되고 있다.이번에는 config설정 마지막인 Typescript 설정 부분을 보겠다이부분도 아마 굉장히 쉬울 것이다. 기본 타입 스크립트만 적용할 것이고, 그외에는 오버라이드 구조로 프로젝트에 위임할 예정이다 환경구성my-monorepo-template/ ├── packages/│ ├── eslint-config/│ ├── prettier-config/│ ├── **tsconfig/**│ ├── react-template/│ └── nextjs-template/├── package.json└── pnpm-workspace.yaml기존 구조에서 packages/tsconfing 부분에 넣을예정이다초기설정패키지내부에 폴더랑 파일을 추가해 주도록한다 mkdi..

개요최근 사이드프로젝트를 구상하다 보니 막상 떠오른 프로젝트(?)인지 모르겠지만, 나만의 템플릿을 제작해 보면 어떨까? 라는 생각을 많이 하게 되었다.Nextjs나 React(vite) 템플릿을 보면 공식 문서에서 이미 만들어진 틀을 준다.사실 베이스부터 시작해서 입맛에 맞춰서 바꿔도 되지만, 아주 귀찮고 재미없는 일인건 알고 있다. 특히 일적으로 바쁜 회사에서 하나씩 뭐 넣고 하는 건 매우 비효율적 (커스텀 웹팩이나 아니면 전사 프로젝트로 진행한다면 다를 수도)그래서 나만의 템플릿 엔진을 제작해 보기로 하였다npx create 을 통해서 어디서든지 어느 컴퓨터든지 내가 만들어놓은 lint, prettier 설정 등을 활용할 수 있게 하는 것으로 제작해 볼까 한다.🚨본 글은 시리즈물로 제작예정입니다 한..

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

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

개요 기존에 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. 출처 상위 구성 요소가 하위 구성 요소와 통신할 수 있..

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

RIP CRA(Create-React-App) CRA(Create-React-App)이 죽었다… 아 죽었다는 표현보단는 deprecated가 맞는 표현 같다 React에서는 새로운 문서 https://react.dev/ 를 공개하고 이전 문서의 지원을 중단했는데 충격적이게도… 새프로젝트 생성부분에 CRA(Create-React-App)부분이 존재하지 않았다 충격 실화! 근데 사실 전부터 이런 이슈는 존재해왔는데 어떤점이 문제였고, 그러면 어떤부분이 바뀌었는지 확인해보자 이후 Create-React-App는 CRA로 표현 💡 들어가기 앞서 이영상을 참고하면 좋을거 같다 https://www.youtube.com/watch?v=M4CLvtCS2YU 성능 이슈 사실 이문제는 전부터 존재하였지만, 새로운 모듈러..