개탕 IT FACTORY

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

개요최근 네카라쿠배중에 운좋게 면접을 보게 되었는데 (떨어졌긴하지만…)라이브 코딩테스트에서 자바스크립트 메소드를 직접 구현해보라는 내용이 나왔다.사실 그동안 생각지도 못하고 그냥 단순히 구현된 메소드만 써봤지 내부 구현이나 어떻게 생겼는지 확인을 해본적은 없는 것 같았다. 이번참에 디테일하게 공부할겸 메소드를 직접 구현해보고 브라우저에서는 어떻게 구현되어 있는지 확인하는 시간을 가져볼까한다.무엇보다 AI가 발전한 지금같은 시대에는 단순구현을 떠나서 AI에게 직접 코딩을 요청해서 코드 구현을 해볼까한다.생각해보기map함수는 정말 자주쓰이는 함수이다.특히 데이터를 순회할때 많이 쓰이고 관련된 데이터 가공을 할때도 자주쓰이는데MDN문서를 통해서 한번 다시 생각해보는 시간을 가져볼까한다https://develo..

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

개요ESLint용 패키지도 추가해서 배포까지 완료하였다.ESlint의 경우 설치 패키지등이 많아서 복잡했지만, Prettier의경우 단일패키지만 깔고 모두 프로젝트에 위임할것이기때문에 굉장히 쉬울 것 이다.환경구성my-monorepo-template/ ├── packages/│ ├── eslint-config/│ ├── **prettier-config/**│ ├── tsconfig/│ ├── react-template/│ └── nextjs-template/├── package.json└── pnpm-workspace.yaml기존 구조에서 packages/prettier-confing 부분에 넣을예정이다초기설정패키지내부에 폴더랑 파일을 추가해 주도록한다 mkdir -p pack..

개요앞선 템플릿엔진용 모노레포를 구성하였다.이번 내용에서는 템플릿 엔진용 ESLinst 구성을 해볼까한다. 사실 너무나 간단한 구성이라서 저번 내용에 넣을까 고민했지만, 분리시키는게 가독성이나 내용 측면에서 좋을 것 같아서 따로 분리시켰다.환경구성my-monorepo-template/ ├── packages/│ ├── **eslint-config/**│ ├── prettier-config/│ ├── tsconfig/│ ├── react-template/│ └── nextjs-template/├── package.json└── pnpm-workspace.yaml기존 구조에서 packages/eslint-confing 부분에 넣을예정이다초기설정패키지내부에 폴더랑 파일을 추가해 주도..

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

순식간에 지나갔던 24년참 시간이 빠른것 같다. 23년 회고록을 적은지 엊그제같은데,돌아서 생각해보니 사실 크나큰 이벤트는 없었던 것 같다. 벌써 이직한지 1년이 넘어버렸다. 아직도 믿기지 않는다 아직 회사 내부에 대해서 배울게 많은 것 같은데 1년?… (난 아직 부족한거 같은데)사실 근 1년 사이에 많은게 바뀐 것 같다. 특히 개발 관련된 부분인데 GPT, 클로드 같은 LLM 툴들이 발달되다보니 오히려 검색보단, AI 툴을 많이 사용했고, 오히려 내가 나보다 잘 짜는 경우도 있었다 (부족함점은 있긴했지만)하지만 아직까진 보조 수단으로 생각되는 부분이 많았다. 특히 디테일 적인 부분이나 없는 메소드 만들어서 있는척하는 할루시네이션… 충격적 없다는거 말하니까 뻔뻔하게 “네 없습니다!” 이러는거보고 충격여행..

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