꾸준히만 가자

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..