개발/트러블슈팅

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

투자/리츠(REITs)

국내 최초 리츠 ETF ARIRANG Fn K리츠 투자할만한 가치가 있을까?

ARIRANG Fn K리츠 ETF는 국내 상장된 부동산 관련 집합투자증권(REITs 포함)을 법 시행령 제94조제2항제4호에서 규정하는 주된 투자대상자산으로 하며, 1좌당 순자산가치의 일간변동률을 FnGuide 리츠 지수의 1배수와 유사하도록 투자신탁재산을 운용함을 목적으로 합니다. (재간접 REITs 종목 제외) 기본정보 이름 한화 ARIRANG Fn K 리츠 부동산상장지수투자신탁(재간접형) 자산운용사 한화자산운용주식회사 상장일 2022-05-24 운용수수료 연 0.5641% 시가총액 - 분배금 1, 4, 7, 10월 보유 주식수 13 포트폴리오 살펴보기 수수료 수수료 및 총보수는 0.25로 적당한 축에 속하지만 투자설명서를 살펴보면 비용까지 총 0.5641%%로 은근슬쩍 약 0.3%를 또 껴넣네요. ..

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

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

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

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

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

개발/트러블슈팅

도커 이미지 빌드 캐시 삭제하는 방법 (how to clear docker build cache)

도커 이미지 빌드를 할 때 캐시를 무효화시키고 싶은 경우가 있다. 이 경우에 아래의 옵션(--no-cache)을 넣으면 손쉽게 캐시 무효화를 시킬 수 있다. docker build --no-cache -t my/app .

개발/트러블슈팅

git 대소문자 파일명 폴더명 오류 (Changing capitalization of filenames in Git)

원인 git 기본설정은 파일, 폴더명의 대소문자를 구분하지 않습니다. git이 대소문자를 인식할 수 있도록 설정을 변경해줘야 합니다. 해결방법 git config core.ignorecase false

개발/트러블슈팅

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

개발/트러블슈팅

vscode eslint export a CLIEngine 에러 해결방법

yarn add --dev eslint { ... "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", ] } [Info - 10:31:57 AM] ESLint server stopped. [Info - 10:31:58 AM] ESLint server running in node v12.8.1 [Info - 10:31:58 AM] ESLint server is running. [Error - 10:31:59 AM] The eslint library loaded from /Users/ruden/D..

Computer science/알고리즘

[백준, node.js] 2004번 "조합 0의 개수" 문제 해결방법

문제 예제 입력 & 출력 입력 출력 소스코드 조합 nCm의 끝자리 0의 개수를 출력하는 문제 2의 승수(a1 - b1, c1) 와 5의 승수(a2 - b2 - c2) 가 구해졌으면 겹치는(짝지을 수 있는) 개수를 구하면 되므로, 2와 5의 승수 중 최솟값을 출력 const fs = require('fs'); let [n, m] = fs.readFileSync('./dev/stdin').toString().split(' '); n = Number(n) m = Number(m) function getPowerN(num, power) { let count = 0; while(num >= power) { count += parseInt(num / power); num /= power; } return count..

Computer science/Data Structure

[자바스크립트] 큐(Queue) 자료구조 예시를 통해 쉽게 이해하기

큐(Queue) 자료구조란? 큐(Queue)는 가장 먼저 들어온 데이터가 가장 먼저 나가는(선입선출, FIFO(First In First Out)) 자료구조입니다. 일상생활에서도 쉽게 접할 수 있는데요. 영화관에서 영화를 보러 들어가기 위해 대기하거나, 비행기를 탑승하기 위해 대기를 할 때 먼저 줄을 선 사람이 먼저 들어가는 경우가 바로 큐 자료구조와 같습니다. 코드 구현 예시 굉장히 단순하게 구현할 경우 자바스크립트 배열 자료구조를 활용해서 쉽게 구현할 수 있습니다. 배열 활용 예시 배열의 push, pop, unshift, shift 메서드를 사용할 때 시간복잡도는 O(1)이지만, 데이터를 할당/제거 후 배열을 재구성해야되기 때문에 O(N) 복사 비용이 발생합니다. 그렇기 때문에 배열을 통해 구현할 ..

Computer science/Data Structure

[자바스크립트] 연결리스트(Linked List) 예시를 통해 쉽게 이해하기 (1)

연결리스트(Linked List)란? 연결리스트는 모든 요소(a.k.a 노드)가 다음 요소에 연결된 자료구조입니다. 예를 들어 학교의 한 반에 있는 학생들을 데이터로 저장한다면, 1번 학생 데이터를 노드로 생성할 때 2번 학생 데이터가 어디에 있는지 노드의 위치를 표시하는 방식입니다. 자료가 연결되어있기 때문에 새로운 자료를 앞쪽에 추가/삭제할 때 굉장히 유용하게 사용할 수 있습니다. 하지만 특정한 자료를 불러올 때는 무조건 순회하며 찾아가는 과정이 필요하기 때문에 특정한 노드를 찾기 까다롭다는 단점이 있습니다. 위 예시에서 3번 학생 데이터를 확인하기 위해선 2번 학생 데이터를 무조건 거쳐야 3번 학생 데이터가 어디있는지 알 수 있습니다. 만약 1만명의 학생들이 엮여있다면, 특정 학생을 찾을 때마다 꽤..

개발/기타

nvm 기본(default) 노드 버전 변경하는 방법

nvm에서 기본 노드 버전 변경하는 방법은 nvm에서 바라보고 있는 default alias를 변경하면 됩니다. 아래는 현재 12.21.0 버전을 default로 바라보고 있는 것을 확인할 수 있습니다. default를 16.13.2로 변경하도록 하겠습니다. 아래 nvm 명령어로 default alias를 변경합니다. nvm alias default 16.13.2

Computer science/알고리즘

[백준, node.js] 11729번 "하노이 탑 이동 순서" 문제 해결방법

문제 세 개의 장대가 있고 첫 번째 장대에는 반경이 서로 다른 n개의 원판이 쌓여 있다. 각 원판은 반경이 큰 순서대로 쌓여있다. 이제 수도승들이 다음 규칙에 따라 첫 번째 장대에서 세 번째 장대로 옮기려 한다. 한 번에 한 개의 원판만을 다른 탑으로 옮길 수 있다. 쌓아 놓은 원판은 항상 위의 것이 아래의 것보다 작아야 한다. 이 작업을 수행하는데 필요한 이동 순서를 출력하는 프로그램을 작성하라. 단, 이동 횟수는 최소가 되어야 한다. 아래 그림은 원판이 5개인 경우의 예시이다. 예제 입력 & 출력 입력 첫째 줄에 첫 번째 장대에 쌓인 원판의 개수 N (1 ≤ N ≤ 20)이 주어진다. 출력 첫째 줄에 옮긴 횟수 K를 출력한다. 두 번째 줄부터 수행 과정을 출력한다. 두 번째 줄부터 K개의 줄에 걸쳐 ..

Computer science/알고리즘

[백준, node.js] 2133번 "타일 채우기" 문제 해결방법

문제 3×N 크기의 벽을 2×1, 1×2 크기의 타일로 채우는 경우의 수를 구해보자. 예제 입력 & 출력 입력 첫째 줄에 N(1 ≤ N ≤ 30)이 주어진다. 출력 첫째 줄에 경우의 수를 출력한다. 힌트 아래 그림은 3×12 벽을 타일로 채운 예시이다. 소스코드 기존에 타일 문제라고 생각하고, 간단히 생각했다가 바로 틀려버린 문제. 문제에 힌트가 있었던 이유가 있었다. DP 점화식을 만들기 위해 N=1, N=2...를 직접 만드는 과정에서 홀수의 경우 타일을 만들 수 없기 때문에 홀수 케이스의 경우 0으로 리턴하면 될 것이고, 짝수의 경우 N-2의 경우의 수 * 3만하면 끝나는 문제라고 생각했다. 힌트를 유심히 살펴보면, N=4의 경우 중간에 끼어있는 예외 케이스가 존재한다는 사실을 깨닫게 된다. 각 케..

Computer science/알고리즘

[백준, node.js] 9461번 "파도반 수열" 문제 해결방법

문제 오른쪽 그림과 같이 삼각형이 나선 모양으로 놓여져 있다. 첫 삼각형은 정삼각형으로 변의 길이는 1이다. 그 다음에는 다음과 같은 과정으로 정삼각형을 계속 추가한다. 나선에서 가장 긴 변의 길이를 k라 했을 때, 그 변에 길이가 k인 정삼각형을 추가한다. 파도반 수열 P(N)은 나선에 있는 정삼각형의 변의 길이이다. P(1)부터 P(10)까지 첫 10개 숫자는 1, 1, 1, 2, 2, 3, 4, 5, 7, 9이다. N이 주어졌을 때, P(N)을 구하는 프로그램을 작성하시오. 예제 입력 & 출력 입력 첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있고, N이 주어진다. (1 ≤ N ≤ 100) 출력 각 테스트 케이스마다 P(N)을 출력한다. 소스코드 DP로 간단..

Computer science/알고리즘

이진 탐색(Binary Search) 알고리즘 개념 이해 및 예제 feat. Javascript

이진탐색(Binary Search)? 이진 탐색이란 *정렬된* 배열에서 특정한 값을 찾아내는 알고리즘입니다. 배열의 중간 값과 찾고자 하는 값을 비교하며 찾아냅니다. 찾고자 하는 값이 X라고 하면, X가 중간 값보다 작으면(x high) return -1; const mid = Math.floor((low + high) / 2); // console.log('search...', low, mid, high) if (arr[mid] === target) return mid; if (arr[mid] > target) { return bSearch(arr, target, low, mid - 1); } else { return bSearch(arr, target, mid + 1, high); } } const ..

Computer science/알고리즘

[백준, node.js] 2225번 "합분해" 문제 해결방법

문제 0부터 N까지의 정수 K개를 더해서 그 합이 N이 되는 경우의 수를 구하는 프로그램을 작성하시오. 덧셈의 순서가 바뀐 경우는 다른 경우로 센다(1+2와 2+1은 서로 다른 경우). 또한 한 개의 수를 여러 번 쓸 수도 있다. 예제 입력 & 출력 입력 첫째 줄에 두 정수 N(1 ≤ N ≤ 200), K(1 ≤ K ≤ 200)가 주어진다. 출력 첫째 줄에 답을 1,000,000,000으로 나눈 나머지를 출력한다. 소스코드 문제 자체는 굉장히 단순해서 쉬울줄 알았으나 역시나 DP 문제는 점화식 구해내기가 정말 어러운 것 같다. // 점화식 DP[K][N] = DP[K-1][0] + DP[K-1][1] + ... + DP[K-1][N] const fs = require('fs'); let [n, k] = ..