728x90
반응형
 포스팅 썸네일 이미지

개발/트러블슈팅

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

[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 게시됨

 포스팅 썸네일 이미지

개발/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 게시됨

 포스팅 썸네일 이미지

개발/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 게시됨

 포스팅 썸네일 이미지

개발/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 게시됨

 포스팅 썸네일 이미지

개발/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파일에 접근해서 발생한 에러입니다. 굳이 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

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을 인식하지 못하는 문제

로컬에서 타입스크립트 테스트를 위해 설정을 하는 와중에 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 게시됨

 포스팅 썸네일 이미지

개발/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

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

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

2021.12.29 게시됨

 포스팅 썸네일 이미지

개발/트러블슈팅

SSH 로그인 접속 시 퍼미션 문제 (UNPROTECTED PRIVATE KEY FILE)

잘못된 퍼미션으로 SSH 로그인 접속할 경우 아래와 같은 에러가 발생할 수 있습니다. SSH 개인키는 중요한 정보이기 때문에 소유자 외에 다른 사람이 읽을 경우에 발생합니다. (public으로 공개되어 있으면 에러가 발생!) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Permissions 0644 for '/Users/username/.ssh/your-key.pem' are too open. It is required that your private key f..

2021.12.15 게시됨

 포스팅 썸네일 이미지

개발/React Native

리액트 네이티브 초간단 설치방법, 예시(맥, iOS)

리액트 네이티브를 개발하기 위해 맥(Mac OS)에서 iOS 시뮬레이터를 설치하고, 사용하는 방법에 대해 소개하도록 하겠습니다. 의존성 설치 Node & Watchman Homebrew를 사용하여 Node 및 Watchman을 설치하는 것을 추천합니다. Homebrew를 설치한 후 아래 명령어를 통해 패키지를 설치하세요. brew install node brew install watchman 이미 Node를 설치한 경우 Node 12 이상인지 확인해주세요. Watchman은 파일 시스템의 변경 사항을 관찰하기 위한 Facebook의 도구입니다. 더 나은 퍼포먼스를 위해 설치하는 것이 좋습니다. Xcode Xcode를 설치하는 가장 쉬운 방법은 Mac App Store를 활용하는 것입니다. Xcode를 설..

2021.12.06 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[자바스크립트] replace 정규표현식 gi는 무엇을 의미할까?

자바스크립트에서 replace를 활용해서 정규표현식을 적용할 때 gi라는 패턴을 사용하곤 합니다. 아래 예시를 살펴봅시다. hellllo worLd 문자열에서 l을 a로 모두 치환하고 싶을 경우 아래와 같이 정규표현식을 적용하면 되는데요. const str = "hellllo worLd"; console.log(str.replace(/l/gi, 'a')); // heaaaao worad 정규표현식에 사용된 gi의 의미는 아래와 같습니다. 정규표현식 g : 발생할 모든 pattern에 대한 전역 검색 i : 대/소문자 구분 안함 그렇기 때문에 만약 위 예시에서 정규표현식에 사용된 i를 빼게 된다면, 대문자 L은 치환되지 않고, heaaaao worLd 결과를 확인할 수 있습니다. const str = "h..

2021.12.02 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[자바스크립트] 강제로 UA(userAgent) 변경하는 방법 및 간단예시

강제로 UA(userAgent)를 변경하는 방법이 좋은 방법은 아닙니다. 하지만 이러한 방식으로 UA를 조작해볼 수 있다라는 점을 참고하면 좋을 것 같습니다. 예시 const newUA = `${navigator.userAgent} helllllo!`; Object.defineProperty(window.navigator, "userAgent", { get: () => newUA }); // before // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36 // after // helllllo 값이 추가된 모습 // Mozilla/5.0 ..

2021.11.18 게시됨

 포스팅 썸네일 이미지

개발/Node.js

[Node.js] fs.readFile, fs.readFileSync 사용법과 간단예시 | 파일 읽기

Node.js의 'fs' 모듈을 활용해서 파일 I/O 작업을 구현할 수 있습니다. fs 모듈의 메서드는 동기식일 수도 있고 비동기식일 수도 있습니다. 비동기 함수에는 비동기 함수의 완료를 나타내는 마지막 매개변수로 콜백 함수가 있습니다. readFileSync(동기식), readfile(비동기식)으로 비동기식 메소드가 콜백함수가 존재하는 점을 제외하고는 구현하는 방식은 동일합니다. readFileSync file: 텍스트 파일의 상대 경로를 사용합니다. 경로는 URL 유형일 수 있습니다. 파일은 파일 설명자일 수도 있습니다. 두 파일이 같은 폴더에 있는 경우 파일 이름을 따옴표로 묶습니다. options: 인코딩 및 플래그를 포함하는 선택적 매개변수이며 인코딩에는 데이터 사양이 포함됩니다. 기본값은 원시..

2021.11.17 게시됨

728x90
반응형