본문 바로가기

전체 글46

Git 작업시 personal access token 에러 Fine-grained personal access token (Beta) 어느 날 갑자기 특정 repository에 push가 되지 않았다. 기존에 사용하던 personal access token에 문제가 생겼다고 판단하여, 여러 번 재설정해봤지만 결과는 똑같았다. 그러다 문득 Generate new token에서 이상함을 느꼈다. Generate new token Beta과 Generate new token classic 그리고 에러 메시지에서의 Personal access tokens (classic) 별생각 없이 Generate new token classic을 사용했었는데, PAT(classic)는 이 레포지토리에 액세스 할 수 없다는 에러 메시지가 이해가 가기 시작했다. Generate new.. 2023. 6. 20.
Git 작업 복구 git flow 전략으로 브랜치를 관리하고 있었다. develop 브랜치에서 release 브랜치를 만들었고,  수정 사항을 커밋 히스토리 변경 없이 합치고자하여 develop 브랜치에서 rebase 했다. 로컬에서 rebase 후 develop브랜치의 히스토리는 깃허브의 히스토리와 달라졌고, 깃허브에 push 되지 않았다.  그러자 별 생각 없이 force fush했고 위와 같은 참사가 벌어졌다. 위 결과를 보고 역대급으로 아찔했는데, 다행히도 해결 방법을 쉽게 찾을 수 있었다. git reflog 브랜치명 git reflog를 입력하면 위와 같은 로그들이 나오는데, 브랜치에서 작업했던 사항들을 모두 알 수 있게 되있다.  돌아가고 싶은 지점을 확인한 후  해당 로그 id 혹은 HEAD@{0-9} 값으.. 2023. 5. 1.
Webpack 5 Module Federation을 통한 Micro-Frontend 모놀리식(Monolithic)이냐 마이크로(Micro) 서비스냐 하는 애플리케이션 아키텍처 스타일은 팀의 컨벤션과 애플리케이션의 요구 사항에 따라 달라진다. 그럼에도 마이크로서비스 아키텍처가 대세로 떠오르고, 사용이 증가하고 있는데 그 이유가 무엇일까? 모놀리식 아키텍처는 하나의 패키지안에 여러 서비스(기능)가 포함된 구조를 말한다. 대부분의 개발자가 모놀리식 아키텍처에서 작업을 시작하곤 하지만, 이러한 구조에는 몇 가지 문제점이 있다. 피쳐 간 의존성 문제 1. 특정 피쳐에 버그 발생 시 다른 피쳐에도 문제가 발생할 수 있다. 2. 서로 의존하고 있는 피쳐들 사이에 발생한 문제의 원인이 어디에 있는지 파악하기 힘들 수 있다.3. 특정 피쳐가 수정되었을 때 다른 피쳐에서 문제가 발생할 수 있다.  비효율.. 2023. 3. 1.
Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - style-components ssr방식에서 style-components기존 pages 라우터 방식에서는 server side rendering을 위해 아래 코드를 추가하여 사용했다. // _document.tsxexport default class MyDocument extends Document {  static async getInitialProps(ctx: DocumentContext) {    const sheet = new ServerStyleSheet()    const originalRenderPage = ctx.renderPage    try {      ctx.renderPage = () =>        originalRenderPage({          enhanceApp: (App) => (props) =>.. 2023. 2. 6.
Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - Routing Hooks Migrating Routing Hooks app router에서는 기존 next/router대신 next/navigation의 useRouter(), usePathname(), useSearchParams()를 사용한다. 만약 app 디렉토리에서 기존 next/router을 임포트할 경우 다음과 같은 에러가 발생할 수 있다. Error: Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted Uncaught Error: Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted useRout.. 2023. 2. 2.
Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - next/head next/head migration pages 라우터에서는 next/head를 이용하여 meta, title와 같은 html 요소를 관리하였다. // pages/index.tsx import Head from 'next/head' export default function Page() { return ( ) } app 라우터에서는 이것이 head.js라는 special 파일로 대체되었다. // app/head.tsx export default function Head() { return ( My Page Title ) } 이에 따라 기존에 웹폰트 방식으로 사용하던 폰트 또한 마이그레이션 해야 했다. // pages/_document/tsx render() { return ( ); } } next/font.. 2023. 2. 1.