꾸준히만 가자

이슈사항 클라우드 프론트를 사용해서 s3내 정적파일들을 서빙할때 등록한 도메인으로 접속시 루트 기본 객체로 지정한 index.html만 반환되고 하위 폴더로 서브라우팅(domain/**)로 접근하면 해당 객체를 찾을 수 없거나 권한 오류가 나서 오류 페이지를 보게 된다. 대안으로 서브라우팅 주소 뒤에 index.html을 붙혀 명시적으로 html 파일을 가져와 서빙하면 되지만 UX적으로 도메인에 파일 이름이 노출되는것은 매우 불쾌하고 혼란을 가중시킬 수 있다. 따라서 여러 버전을 하나의 도메인에서 관리, 접근하기 위해 클라우드 프론트에서 서브라우팅을 지원해 각 폴더 내 index.html을 자동 반환하게 구현해주어야 한다. 이를 위해 CloudFront와 같은 환경에서 동작할 수 있는 Lambda@Edg..

ErrorBoundary가 뭘까 에러 바운더리는 선언적으로 에러를 처리할 수 있게 컴포넌트 형태로 사용되는 에러 헨들링 방법 중 하나입니다. 상세내용 참고 https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary Component – React The library for web and native user interfaces react.dev vue 기반의 서비스에서 저 좋은 에러 헨들링 기법을 적용하고 싶다는 강렬한 생각이 들었습니다...🔥 Vue에서 ErrorBoundary 구현하기 먼저 Vue에는 다행이도 에러를 감지해주는 라이프사이클 함수가 존재합니다. 이를 적극적으로 이용해 리액트에서와..

⏳ 동적 불러오기(Dynamic Import)에 대해 알아보자 🤨 동적 불러오기가 필요한 이유 일반적으로 spa 구조의 어플리케이션을 빌드할 때 js가 하나로 나오며 그 크기가 비대해지는 경험을 해봤을 것이다. 이렇게 되면 브라우저가 처음 index.html을 불러오고 DOM을 그릴때 js 로딩을 기다리는 시간이 길어지므로 FCP 즉 첫 화면이 그려지는데까지 오랜시간이 걸린다. 이는 CSR SPA 구조의 문제점이었다. 그렇다면 하나로 번들링되는 js를 쪼개서 빌드할 수 없을까? 라는 생각에서 나온 대안 중 하나가 바로 동적 불러오기이다. 동적 불러오기를 적용하게 되면 js를 쪼개서 빌드할 수 있게되고 이는 브라우저가 DOM을 그릴때 첫화면에 필요한 js만 로드해서 페인팅할 수 있다는 말로 FCP가 앞당겨..

MFA 도입 시도하기로 했다... 그 과정을 풀어보려한다, 가자 ~~~ 🏃 아 MFA에 대한 기초적인 개념이 없다면 아래 링크를 눌러 보는것을 추천한다. https://maxkim-j.github.io/posts/runtime-integration-micro-frontends/ 위 링크의 방법 중 Run-time Integration via javascript를 사용해 구현하였다. Vite기반 프로젝트에 도입하기 도입 과정 중 문제점 발견해서 다른 방향 찾기로 함...😥 🤯 문제점 monorepo 기반 vite module federation 적용 https://github.com/originjs/vite-plugin-federation host, remote 폴더를 기반으로 테스트 완료 별도의 빌드결과..

회사에서 신규 프로젝트를 시작할때 사용할 보일러플레이트를 만들다가 적용하게된 yarn berry를 적용하면서 알게된 내용을 정리해본다. yarn berry 적용하게된 이유 기존에 사용하던 yarn classic에서 monorepo를 적용하고 싶어 리서치하다가 yarn berry에 있는 workspace를 사용해 구현한 블로그를 보게 되어 따라 적용하다가 체택하게되었습니다. 나중에 알고 보니 yarn classic에도 workspace가 지원되서 monorepo사용에 문제가 없는것을 알게되었을때는 좀 허탈했지만 그래도 공부했다는 마음으로 지내고 있습니다. 그러면 yarn berry 쓰면 뭐가 좋은데? PnP(Plug'n'Play) yarn 2버전부터 지원되는 기능으로 해당 기능을 사용하면 의존성 라이브러리..