본문 바로가기

분류 전체보기34

git stash 복구 방법 실수로 git stash list에 있는 항목을 삭제했을 때 복구하는 방법이다. # stash의 hash 값과 저장 시간을 확인한다. git fsck --unreachable | grep commit | cut -d ' ' -f3 | xargs git log --merges --no-walk # 위 명령어에서 확인한 hash 값을 이용해서 apply한다. git stash apply {hash} 2023. 1. 2.
Turborepo + Yarn berry를 이용한 Monorepo 구축 방법 회사에서 Turborepo와 Yarn berry를 사용하여 Monorepo를 구축했던 과정을 설명합니다. Monorepo란? Monorepo는 두 개 이상의 프로젝트 코드를 동일한 저장소에 저장하는 소프트웨어 개발 방법입니다. 각 프로젝트별로 패키지, 라이브러리, UI 컴포넌트를 저장하는 기존 방식과 달리 Monorepo에서는 패키지, 라이브러리, UI 컴포넌트 등을 공통을 관리할 수 있습니다. 또한, 프로젝트를 개발하는 개발자들이 하나의 저장소만 바라보기 때문에, 협업에 유리합니다. Monorepo를 구축하기 위한 도구 Monorepo를 구축하기 위한 대표적인 도구로는 아래 4가지가 있습니다. Yarn berry + workspace Lerna Nx Turborepo Yarn berry와 Yarn wo.. 2023. 1. 2.
[Git] 브랜치 일괄 삭제 git에 생성된 branch를 일괄 삭제하는 방법 git branch | grep "\[삭제하고싶은 이름\]" | xargs git branch -D Example git branch | grep "feature/" | xargs git branch -D 2022. 8. 23.
[번역][Next.js] Layout RFC 2022년 5월 24일에 Next.js에서 발표된 Layout RFC에 대해서 번역입니다. 원본 보기 Layout RFC는 2016년 이후 Next.js의 가장 큰 업데이트라고 합니다. Motivation Next.js에서는 Github, Discord, Reddit, 개발자 설문조사를 통해서 현재 Next.js의 라우팅 방식의 한계에 대한 피드백을 받았다. 그 결과로, 아래 두 가지 결과를 도출했다. layout 생성에 대한 개발자 경험이 향상될 수 있다. 중첩(nested)되고, routes간에 공유되고, navigation에서 상태를 유지할 수 있도록 layout을 쉽게 생성할 수 있어야 한다. 많은 Next.js 어플리케이션은 대시보드이거나 콘솔이다. 그래서 향상된 라우팅 솔루션의 이점을 누릴 수.. 2022. 7. 29.
[react-query] useEffect에서 react-query의 useMutation을 사용할 때 dependencies 으로 인한 무한 요청 해결방법 react-query를 사용해서 POST 요청을 하기 위해서는 react-query의 mutate를 사용하고, 비동기 요청을 위해서는 mutateAsync를 사용한다. 페이지에 접속했을 때, POST 요청을 보내는 시나리오가 있어서 아래와 같이 useMutation을 선언하고, useEffect에 mutateAsync를 호출했다. 회사와 관련된 코드가 있어서 간단하게 작성했다. 위와 같이 선언 및 호출을 하고, 페이지에 접속하고, 크롬 개발자도구의 Network 탭에 접속해보면 해당 요청이 2000~3000개 이상 요청된다. 이런 현상이 발생하는 이유는 mutateAsync를 통해서 POST 요청이 실행되고, 해당 요청으로 인해서 mutation 객체가 변경되었기 때문에, useEffect가 다시 실행되.. 2022. 7. 13.
CRA로 React 설치할 때 create-react-app 버전 이슈 CRA(create-react-app)을 사용해서 React 어플리케이션 개발을 setup할 때, 아래 명령어를 통해서 설치할 수 있다. npx create-react-app [--template ] 어느 때와 다르지 않게 명령어를 실행했는데, 다음과 같은 에러가 발생했다. 써있는대로 create-react-app 를 삭제하려고 아래 명령어를 실행했다. npm uninstall -g create-react-app # or yarn global remove create-react-app 그런데 삭제가 되지 않고, 발생했던 에러가 그대로 발생했다. 이곳 저곳 찾아보니 직접 디렉토리를 삭제하라고해서 which create-react-app을 찾아봤으나 create-react-app not found 가 리턴됐.. 2022. 2. 21.
[Gatsby] Styled-Components 적용하기 Gatsby plugin을 포함하여 styled-components를 위한 필수 dependencies를 설치합니다. # Yarn yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components # Npm npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components gatsby-config.js에 다음을 추가합니다. module.exports = { plugins: [`gatsby-plugin-styled-components`], } 2022. 2. 3.
[VS Code] 파일 저장할 때 ESLint 동작하게 하기 예전에는 VS Code의 Extension인 ESLint의 설정메뉴에 Auto Fix On Save라는 메뉴가 있었다. 이 항목을 체크하면 설정이 됐었는데, 최근에 확인해보니 해당 설정 항목이 없어졌다. Auto Fix On Save를 설정하는 방법은 다음과 같다. Mac 기준으로 VSCode에서 Cmd + Shift + P 를 입력하면 명령 팔레트가 등장하는데, Open Settings를 입력한다. 입력으로 열린 settings.json에서 다음 항목을 입력하면 된다. "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true, 2022. 1. 27.
Apple Developer Program 등록하기 Apple Developer Program에 등록하기 위한 가이드문서입니다. Apple ID를 생성합니다. https://appleid.apple.com/account/manage Apple Developer Program 사이트에 접속합니다. https://developer.apple.com/kr/programs/ 이용 약관에 동의합니다. 페이지 아래에 표시되는 Join the Apple Developer Program을 클릭합니다. Enroll 버튼을 클릭합니다. 2-Factor 인증에 대한 안내사항을 확인하고, 등록 시작하기를 클릭합니다. App Sotre에서 Apple Developer 앱을 설치합니다. 앱에서도 등록을 할 수 있지만, 웹에서도 이어서 진행할 수 있습니다. Developer Pro.. 2022. 1. 25.