728x90
반응형
깃 특정 커밋만 가져오는 방법 (How to use the "cherry-pick" command in Git) 포스팅 썸네일 이미지

개발/Git

깃 특정 커밋만 가져오는 방법 (How to use the "cherry-pick" command in Git)

실무를 하다보면 특정 브랜치에서 커밋했던 목록들 중 급하게 우선적으로 특정 커밋들만 내보내야 될 경우가 생길 수 있습니다. 이때 Git Cherry-Pick 명령어를 사용하면 손쉽게 특정 커밋을 가져올 수 있습니다. Cherry Pick? 다른 브랜치의 일부 커밋만 반영하고 싶을 때 사용하는 깃 명령어 TMI cherry pick이란, 체리 한 바구니에서 제일 좋은 체리만 고르는 것에서 유래한 표현 사용방법 아래와 같이 깃 히스토리가 있다고 가정해봅시다. feat/sentry 브랜치에서 a, b, c 기능들을 추가하고 커밋한 상태인데, 금일 릴리즈에 b 커밋만 우선적으로 올려야 될 경우가 생겼습니다. (굉장히 난감한 상황이쥬?) 이때 cherry-pick 명령어를 활용하면 아-주 깔끔하게 특정 커밋만 똑..

2022.10.03 게시됨

자바스크립트 FileReader async/await 처리하는 방법 (Using the FileReader API in async functions) 포스팅 썸네일 이미지

개발/Javascript

자바스크립트 FileReader async/await 처리하는 방법 (Using the FileReader API in async functions)

FileReader API를 사용하면 사용자의 컴퓨터에서 파일을 읽을 수 있습니다. FileReader API는 콜백 방식으로 지원하고 있는데, 자바스크립트 async/await 문법으로 훨씬 더 깔끔하게 코드를 작성할 수 있습니다. 사용 방법 function readFileAsync(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { resolve(reader.result); }; reader.readAsBinaryString(file); reader.onerror = reject; }); } async function processFile() { try { con..

2022.09.24 게시됨

자바스크립트 엑셀 csv 한글 깨짐 해결하는 방법 (Javascript export CSV encoding issue) 포스팅 썸네일 이미지

개발/Javascript

자바스크립트 엑셀 csv 한글 깨짐 해결하는 방법 (Javascript export CSV encoding issue)

자바스크립트 xlsx 라이브러리를 활용해서 구글 스프레드시트 csv 파일을 읽어올 때 한글이 깨지는 현상이 발생했는데 이를 해결하는 방법입니다. xlsx 라이브러리 xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 6 months ago. Start using xlsx in your project by running `npm i xlsx`. There are 3330 other projects in the npm registry using xlsx. www.npmjs.com .xlsx 파일의 경우 readAsBinaryString 메서드로 잘 처리 되었지만, .csv, .tsv 파일은 한글 깨짐 ..

2022.09.24 게시됨

VSCode에서 사용하지 않는 변수 확인하는 방법 (how to show unused variable without ESLint) 포스팅 썸네일 이미지

개발/기타

VSCode에서 사용하지 않는 변수 확인하는 방법 (how to show unused variable without ESLint)

VScode에서 자체적으로 사용하지 않는 변수를 확인하는 방법이 있습니다. 물론 ESLint를 활성화해서 기본적으로 사용하지 않는 변수와 파라미터를 체크할 수 있겠지만, 이를 활용하지 못하는 프로젝트에서 꽤 유용하게 사용할 수 있는 기능입니다. 설정방법 Step 1: VSCode 설정 페이지로 이동 [Command + , ]을 눌러 VSCode 설정으로 이동합니다. Step 2: Settings.json 열기 우측 상단에 아래 메뉴 아이콘을 누릅니다. Step 3: editorUnnecessaryCode.border 추가 { ... "workbench.colorCustomizations": { "editorUnnecessaryCode.border": "#f0f" } } 결과

2022.09.02 게시됨

VSCode에서 사용하지 않는 import 제거하는 방법 (How to remove unused imports in VSCode) 포스팅 썸네일 이미지

개발/기타

VSCode에서 사용하지 않는 import 제거하는 방법 (How to remove unused imports in VSCode)

매번 코드를 작성하다가 사용하지 않는 import 구문들을 정리하지 않고, 넘어가는 경우가 있습니다. 물론 Eslint의 도움을 받아 경고나 에러 처리를 하여 관리를 할 수 있지만, VSCode 옵션에서 저장할 때 이러한 불필요한 구문을 제거해주는 기능이 있습니다. 설정방법 [Command + , ]을 눌러 VSCode 설정으로 이동합니다. 우측 상단에 아래 메뉴 아이콘을 누릅니다. settings.json 파일에서 아래 코드를 추가합니다. { ... "editor.codeActionsOnSave": { "source.organizeImports": true }, } 이제 코드에서 불필요한 import을 추가해보고 저장을하면 자동으로 해당 import 구문이 제거되는 것을 확인할 수 있습니다!

2022.08.27 게시됨

nvm cb.apply is not a function 에러 해결방법 포스팅 썸네일 이미지

개발/트러블슈팅

nvm cb.apply is not a function 에러 해결방법

리액트 CRA 프로젝트를 생성하기 위해 create-react-app 명령어를 사용했는데, 아래와 같은 뜬금없는 부분에서 에러가 발생했다. npx create-react-app my-app npm ERR! cb.apply is not a function npm ERR! A complete log of this run can be found in: npm ERR! /Users/ruden/.npm/_logs/2022-06-13T23_08_56_668Z-debug.log [ 'create-react-app@latest' ] 설치가 오류 코드 1로 실패했습니다 로컬에서 사용하고 있는 nvm 패키지와 관련된 이슈인 것을 확인했고, 아래와 같이 세팅해주면 깔끔하게 문제가 해결된다. nvm alias default ..

2022.06.14 게시됨

[Next.js] AWS Amplify withSSRContext the user is not authenticated 이슈 해결방법 포스팅 썸네일 이미지

개발/Next.js

[Next.js] AWS Amplify withSSRContext the user is not authenticated 이슈 해결방법

Next.js 프로젝트에서 인증 라이브러리로 AWS Cognito Amplify를 활용하고 있는데, 서버사이드에서 인증 체크를 위해 withSSRContext에서 쿠키 기반으로 체크할 때 계속 the user is not authenticated 에러를 뱉어내는 이슈가 생겼습니다. 클라이언트 사이드에서 체크하는 useAuth hook에서는 정상적으로 잘 작동하는데 이상하게 서버에서만.. Dependencies "aws-amplify": "^4.3.21" "next": "^12.1.6" 원인 저의 경우 이메일 기반으로 유저이름을 세팅하였고, 이메일 계정 ruden91@naver.com로 로그인을 할 경우 아래와 같이 쿠키 키가 세팅되었습니다. CognitoIdentityServiceProvider.{use..

2022.05.10 게시됨

SWR useSWRInfinite fallback 처리하는 방법 포스팅 썸네일 이미지

개발/Next.js

SWR useSWRInfinite fallback 처리하는 방법

Next.js에서 SWR을 활용할 때 기본 데이터를 활용해서 Pre-rendering을 처리해야 할 경우가 있습니다. 아래와 같이 useSWRInfinite에서 fallback 데이터를 처리하려고 했으나 Pre-rendering가 되지 않았습니다. fallbackData로 처리하려고 했지만 예상과는 다른 동작으로 인해 fallback으로 처리하는 방법을 좀 더 고민했어야 했습니다. const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite( getKey, fetchFinder, { fallback: { "hello": [] } } ); 아래와 같이 useSWRConfig를 통해 캐시된 key들을 살펴보는 와중에 useSWRInf..

2022.04.30 게시됨

SWRConfig fallback에 arguments 추가하는 방법 (How to include arguments with key for fallback data in <SWRConfig>) 포스팅 썸네일 이미지

개발/Nuxt.js

SWRConfig fallback에 arguments 추가하는 방법 (How to include arguments with key for fallback data in <SWRConfig>)

Next.js 프로젝트에서 SWR을 활용하고 있는데, SWRConfig의 fallback을 사용할 때 arguments를 추가해서 사용할 필요가 생겼습니다. 기존 fallback 사용 예시는 아래와 같습니다. unstable_serialize을 활용하면 arguments를 추가해서 처리할 수 있습니다. import { unstable_serialize } from 'swr' … export async function getStaticProps() { const data = await fetcher('pokemon'); return { props: { fallback: { [unstable_serialize([GRAPHQL_ENDPOINT, graphqlQuery])]: data // "/my/api/ke..

2022.04.27 게시됨

Github Actions 워킹 디렉토리 설정하는 방법 (working directory default) 포스팅 썸네일 이미지

개발/Git

Github Actions 워킹 디렉토리 설정하는 방법 (working directory default)

모노레포 방식과 같이 하나의 레포지토리에 다양한 패키지나 앱들을 관리할 경우 특정 디렉토리만 Github Actions를 적용하고 싶은 경우가 있습니다. jobs에서 defaults의 working-directory를 설정하면 굉장히 쉽게 이 부분을 해결할 수 있습니다. defaults: run: working-directory: "./apps/my-test-app" 실제로 아래와 같이 실무에서 활용할 수 있습니다. "apps/my-test-app/**" 폴더에서 코드가 수정되고, develop 브랜치에 병합되면 해당 워크플로우가 실행됩니다. 이때 기본 워킹 디렉토리는 아래와 같이 "./apps/my-test-app"으로 설정되고, 깃허브 액션이 동작하게 됩니다. # .github/workflows/de..

2022.04.25 게시됨

Next.js Docker 컨테이너 배포하는 방법 (Using Docker with Next.js) 포스팅 썸네일 이미지

개발/Docker

Next.js Docker 컨테이너 배포하는 방법 (Using Docker with Next.js)

최근 회사에서 AWS Elastic Beanstalk 기반에서 AWS ECS + Fargate 조합으로 배포 방식을 변경함으로써 도커를 활용하게 되었습니다. 단순히 도커 이미지를 빌드하고, 컨테이너 배포하는 과정은 굉장히 간단하지만, AWS ECS, ECR 그리고 파게이트(Fargate)를 활용해서 웹서비스를 구성하는 과정은 생각보다 까다롭고 부차적으로 공부해야 될 부분이 굉장히 많습니다. 도커를 활용해서 이미지를 빌드하고 배포하는 간단한 과정부터 시작해서 AWS ECS + Fargate를 활용해서 웹서비스를 생성해보고, Github Actions와 AWS Codedeploy를 활용한 무중단 배포(Blue/Green) 자동화 과정까지 다뤄보도록 하겠습니다. Next.js + Docker 세팅 Next.j..

2022.04.23 게시됨

[Jest] Scss "Syntax Error: Invalid or unexpected token" 에러 해결방법 포스팅 썸네일 이미지

개발/트러블슈팅

[Jest] Scss "Syntax Error: Invalid or unexpected token" 에러 해결방법

Jest에서 감지할 필요가 없는 scss파일에 접근해서 발생한 에러입니다. 굳이 Jest에서 파악할 필요가 없는 파일들은 패스하면 됩니다. /Users/ruden/Desktop/development/2022/test/src/components/Progressbar/progressbar.scss:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){@import '../../styles/variables.scss'; ^ SyntaxError: Invalid or unexpected token > 1 | import "./progressbar.scss"; | ^ 2 | 3 | class Progressbar { 4 | private..

2022.02.19 게시됨

Next.js, Redux toolkit, next-redux-wrapper 연동하는 방법 feat. typescript 포스팅 썸네일 이미지

개발/Next.js

Next.js, Redux toolkit, next-redux-wrapper 연동하는 방법 feat. typescript

버전 next@^12.0.8 next-redux-wrapper@^7.0.5 @reduxjs/toolkit@^1.7.1 Next.js에서 SSR(Server Side Rendering), SSG(Server Side Generation)를 사용할 때 next-redux-wrapper 라이브러리를 활용해서 redux 스토어를 간편하게 연동할 수 있습니다. next-redux-wrapper 설치 yarn add next-redux-wrapper redux toolkit을 활용해서 스토어를 생성할 때 아래와 같이 next-redux-wrapper로 스토어 생성 함수를 감싸줍니다. import { configureStore, combineReducers, AnyAction } from "@reduxjs/toolk..

2022.01.30 게시됨

Typescript 에서 console을 인식하지 못하는 문제 포스팅 썸네일 이미지

개발/트러블슈팅

Typescript 에서 console을 인식하지 못하는 문제

로컬에서 타입스크립트 테스트를 위해 설정을 하는 와중에 console을 찾을 수 없다는 에러를 발견 해당 에러는 기본적인 @types/node가 설치되지 않아서 발생한 에러 [nodemon] starting `ts-node index.ts` /Users/ruden/Desktop/portfolio/2022/learn-types/node_modules/ts-node/src/index.ts:750 return new TSError(diagnosticText, diagnosticCodes); ^ TSError: ⨯ Unable to compile TypeScript: index.ts:1:1 - error TS2584: Cannot find name 'console'. Do you need to change yo..

2022.01.18 게시됨

자바스크립트 super 제대로 이해하기 포스팅 썸네일 이미지

개발/Javascript

자바스크립트 super 제대로 이해하기

super 키워드는 상위(부모) 객체의 함수를 호출할 때 사용됩니다. 문법 super([arguments]); // 부모 생성자 호출 super.functionOnParent([arguments]); 설명 클래스의 생성자(constructor)에서는 super 키워드 하나만 사용되거나 this 키워드가 사용되기 전에 호출되어야 합니다. 또한 super 키워드는 부모 객체의 함수를 호출하는데 사용될 수 있습니다. 클래스에서 super 사용하는 방법 class Parent { constructor(age) { this.name = "parent"; this.age = age; } sayMyName() { console.log(this.name); } } class Child extends Parent { c..

2022.01.10 게시됨

Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue) 포스팅 썸네일 이미지

개발/Vue

Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)

이번 포스팅에서 Vue.js 자식 컴포넌트에서 이벤트를 내보내는 방법을 다뤄보도록 하겠습니다. emit이란? 이벤트 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 방식입니다. 이벤트를 전달함으로써 상위 컴포넌트는 하위 컴포넌트에서 전달하는 값을 전달받을 수 있습니다. 예시 이벤트 emit 단계는 아래와 같습니다. 부모 컴포넌트는 자식 컴포넌트로 count prop를 전달합니다. 자식 컴포넌트는 increment, decrement 메서드를 통해 수정된 값을 change emit을 통해 부모 컴포넌트로 넘겨줍니다. 부모 컴포넌트는 전달받은 값을 활용해서 count 데이터를 업데이트합니다. 아래 코드는 부모 컴포넌트 예시입니다. 부모 컴포넌트에서 count 데이터를 관리하고 있습니다. ..

2021.12.29 게시됨

728x90
반응형