꾸준히만 가자

Storybook이란 디자이너 및 개발자 외의 사용자에게 개발자가 정의한 UI를 쉽게 공유하고 테스트 해볼 수 있는 디자인 시스템 관련 라이브러리 Chromatic이란 스토리북을 정적 빌드한 내용을 무료로 배포해주는 스토리북에서 제공하는 배포툴 도입 방법 1. Storybook init 각 프로젝트별 번들러에 맞는 dev server 및 경로 관련해서 자동세팅하기 위해 아래 CLI를 실행시킨다. npx storybook@latest init 위 두가지 폴더 및 파일 생성확인 npm run storybook 또는 yarn storybook, pnpm run storybook 각 패키지 매니저에 맞게 로컬 dev 서버에서 실행 후 화면 확인 2. Storybook 배포 (Chromatic) Automatic..

이슈사항 클라우드 프론트를 사용해서 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버전부터 지원되는 기능으로 해당 기능을 사용하면 의존성 라이브러리..

2022년 5월 경에 작성한 블로그 글을 이관한 포스트입니다. Vue3 setup에서 props 사용 vue2는 export default{ props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, } 위처럼 사용을 해왔을 것입니다. 하지만 vue3 setup composition API에서는 defineProps({ title:{ Type: String, required: true } }) 위와 같이 사용하게 됩니다. defineProps에 타입스크립트 적용하기 타입스크립트를 사용하는 개발자라면 위 defineProp에 Type 지정에 사용하는 타입과 타..

2022년 5월 경에 작성한 블로그 글을 이관한 포스트입니다. Vue에서 scoped란..? vue 개발을 하면서 보통 스타일 태그에 보통 scoped를 주어 사용할 것입니다. 하지만 이렇게 되면 컴포넌트로 정의해놓은 UI를 적용 페이지에 맞게 입맛대로 커스텀해서 사용하기가 힘들 것 입니다. 특히나 페어코팅을 하고 컴포넌트가 내가 만든것이 아니라면 더욱이 그렇죠. 그래서 입맛대로 바꾸려면 어떻게..? 이런 경우를 대비해서 vue에서 정확히는 vue-loader에서는 Deep Selectors를 제공하고 있습니다. 일반적인 css에서는 .a >>> .b {...} 위 처럼 주면 되지만 scss를 사용한다면 위 명령어가 정상작동하지 않을 것입니다. scss에서는 .a::v-deep .b {...} 위로 공식..

2021년 12월 경에 작성한 블로그 글을 이관한 포스트입니다. ✅ 전체적인 OAuth 로그인 방법 💻 네이버 로그인 클라이언트(리액트) 코드 네이버 로그인 JDK 사용하는 방법 로그인 페이지 컴포넌트 import LoginNaver from './LoginNaver'; 네이버 로그인 JDK 사용로직 import React, { useEffect } from 'react'; import { naverClientId, naverRedirectURL, naverSecret } from '../../utils/OAuth'; const { naver } = window; const LoginNaver = () => { const initializeNaverLogin = () => { const naverLogi..