티스토리

베이스캠프
검색하기

블로그 홈

베이스캠프

webruden.tistory.com/m

🏕️ 베이스캠프는 개발을 하기 위한 여러가지 필요한 지식들을 습득하는 것을 도와주는 근거지입니다. 🍺 음주코딩을 좋아합니다. 💻 Vue와 React를 사랑하는 개발자입니다.🤟

구독자
180
방명록 방문하기
공지 티스토리 무료 스킨:: 베이스캠프 공⋯ 모두보기
728x90
반응형

주요 글 목록

  • iOS pod 삭제, 클린, 설치 명령어 // 1. pod 삭제 pod deintegrate // 2. pod 클린 pod cache clean --all // 3. pod 설치 pod install 공감수 2 댓글수 0 2023. 4. 17.
  • Next.js 커스텀 서버 환경에서 cannot find module 에러 해결 방법 feat. typescript Next.js의 TypeScript 커스텀 서버 환경에서 모듈 경로 문제는 `tsconfig-paths`를 사용해서 해결할 수 있습니다. 해결방법 1. 프로젝트 루트에 있는 tsconfig.json 파일에 baseUrl 및 paths 속성을 추가합니다. { "compilerOptions": { ... "baseUrl": ".", "paths": { "@/components/*": ["components/*"], "@/pages/*": ["pages/*"], "@/utils/*": ["utils/*"] } }, ... } 2. tsconfig-paths 및 ts-node 패키지를 설치합니다. npm install tsconfig-paths ts-node // or yarn add tsconfig-paths.. 공감수 1 댓글수 0 2023. 3. 29.
  • React에서 텍스트 줄바꿈하는 간단한 방법 (\n 줄바꿈 처리) 종종 개행 문자('\n')가 포함된 문자열 데이터를 받아서 사용하는 경우가 있습니다. JSX에서 개행 문자를 받았을 때 줄바꿈 처리를 하는 방법은 간단합니다. 일반적으로 그대로 사용하면 JSX에 의해서 개행문자나 태그는 동작하지 않고 그대로 출력합니다. const str = "안녕하세요.\n 여기는 대한민국입니다."; // 안녕하세요. 여기는 대한민국입니다. 이때 간단하게 CSS white-space 속성을 활용하면 해결할 수 있습니다. white-space: pre-line; const str = "안녕하세요.\n 여기는 대한민국입니다."; // 안녕하세요. // 여기는 대한민국입니다. 공감수 0 댓글수 0 2023. 1. 13.
  • 모바일 사파리 브라우저 모든 탭 닫는 방법 (How to close all Safari tabs) Safari 앱에서 탭을 사용하여 여러 개의 열린 웹 페이지들을 한번에 닫고 싶은 경우가 있습니다. 모든 탭 닫는 방법 하단 전체 탭 보기 버튼 클릭 완료 버튼을 꾹 누른다. n개의 탭 모두 닫기 창이 나옴. 모두 닫기 버튼 클릭. 하단 전체 탭 보기 버튼을 클릭하면 아래와 같이 모든 탭들을 확인할 수 있습니다. 완료 버튼을 꾹 누르고 있으면, 아래 이미지와 같이 n개의 탭 모두 닫기 팝업이 등장하는 것을 확인할 수 있습니다. 모두 닫기 버튼을 클릭합니다. 공감수 0 댓글수 0 2023. 1. 3.
  • 외부 링크 금지 이미지 레퍼럴 허용하는 방법 (HTML img referrerpolicy) 헤더 referrer 값을 통해 외부 링크 공유 금지를 적용한 이미지에 대해서 no-referrer 설정을 통해 이미지를 보여줄 수 있습니다. 브라우저 서포트를 확인해보면 IE를 제외한 대부분의 브라우저에서 활용할 수 있습니다. 참고 HTMLImageElement.referrerPolicy - Web APIs | MDN The HTMLImageElement.referrerPolicy property reflects the HTML referrerpolicy attribute of the element defining which referrer is sent when fetching the resource. developer.mozilla.org 공감수 0 댓글수 0 2022. 12. 9.
  • 깃 특정 커밋만 가져오는 방법 (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 명령어를 활용하면 아-주 깔끔하게 특정 커밋만 똑.. 공감수 1 댓글수 1 2022. 10. 3.
  • 자바스크립트 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.. 공감수 0 댓글수 0 2022. 9. 24.
  • 자바스크립트 엑셀 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 파일은 한글 깨짐 .. 공감수 0 댓글수 0 2022. 9. 24.
  • [LeetCode] 20. Valid Parentheses | 자바스크립트 ✍️ 문제 Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid. An input string is valid if: Open brackets must be closed by the same type of brackets. Open brackets must be closed in the correct order. Every close bracket has a corresponding open bracket of the same type. Example 1: Input: s = "()" Output: true Example 2: Input: s =.. 공감수 0 댓글수 0 2022. 9. 10.
  • [LeetCode] 14. Longest Common Prefix | 자바스크립트 ✍️ 문제 Write a function to find the longest common prefix string amongst an array of strings. If there is no common prefix, return an empty string "". Example 1: Input: strs = ["flower","flow","flight"] Output: "fl" Example 2: Input: strs = ["dog","racecar","car"] Output: "" Explanation: There is no common prefix among the input strings. Constraints: 1 공감수 0 댓글수 0 2022. 9. 8.
  • [LeetCode] 13. Roman to Integer | 자바스크립트 문제 Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 For example, 2 is written as II in Roman numeral, just two ones added together. 12 is written as XII, which is simply X + II. The number 27 is written as XXVII, which is XX + V + II. Roman numerals are usually written largest to smallest from left to right. Howe.. 공감수 0 댓글수 0 2022. 9. 5.
  • 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" } } 결과 공감수 0 댓글수 0 2022. 9. 2.
  • [LeetCode] 1. Two Sum | 자바스크립트 문제 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order. 해결방법 function twoSum(nums: number[], target: number): number[] { const vals = {}; for (let i = 0; i < nums.length; i++) { if.. 공감수 0 댓글수 0 2022. 8. 31.
  • VSCode에서 사용하지 않는 import 제거하는 방법 (How to remove unused imports in VSCode) 매번 코드를 작성하다가 사용하지 않는 import 구문들을 정리하지 않고, 넘어가는 경우가 있습니다. 물론 Eslint의 도움을 받아 경고나 에러 처리를 하여 관리를 할 수 있지만, VSCode 옵션에서 저장할 때 이러한 불필요한 구문을 제거해주는 기능이 있습니다. 설정방법 [Command + , ]을 눌러 VSCode 설정으로 이동합니다. 우측 상단에 아래 메뉴 아이콘을 누릅니다. settings.json 파일에서 아래 코드를 추가합니다. { ... "editor.codeActionsOnSave": { "source.organizeImports": true }, } 이제 코드에서 불필요한 import을 추가해보고 저장을하면 자동으로 해당 import 구문이 제거되는 것을 확인할 수 있습니다! 공감수 4 댓글수 0 2022. 8. 27.
  • 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 .. 공감수 1 댓글수 0 2022. 6. 14.
  • 국내 최초 리츠 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%를 또 껴넣네요. .. 공감수 1 댓글수 0 2022. 5. 24.
  • [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.. 공감수 1 댓글수 0 2022. 5. 10.
  • 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.. 공감수 1 댓글수 1 2022. 4. 30.
  • 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.. 공감수 1 댓글수 0 2022. 4. 27.
  • 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.. 공감수 0 댓글수 0 2022. 4. 25.
  • 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.. 공감수 6 댓글수 2 2022. 4. 23.
  • 도커 이미지 빌드 캐시 삭제하는 방법 (how to clear docker build cache) 도커 이미지 빌드를 할 때 캐시를 무효화시키고 싶은 경우가 있다. 이 경우에 아래의 옵션(--no-cache)을 넣으면 손쉽게 캐시 무효화를 시킬 수 있다. docker build --no-cache -t my/app . 공감수 2 댓글수 2 2022. 4. 12.
  • git 대소문자 파일명 폴더명 오류 (Changing capitalization of filenames in Git) 원인 git 기본설정은 파일, 폴더명의 대소문자를 구분하지 않습니다. git이 대소문자를 인식할 수 있도록 설정을 변경해줘야 합니다. 해결방법 git config core.ignorecase false 공감수 0 댓글수 0 2022. 3. 27.
  • [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.. 공감수 0 댓글수 0 2022. 2. 19.
  • 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.. 공감수 1 댓글수 0 2022. 2. 19.
  • [백준, 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.. 공감수 0 댓글수 3 2022. 2. 13.
  • [자바스크립트] 큐(Queue) 자료구조 예시를 통해 쉽게 이해하기 큐(Queue) 자료구조란? 큐(Queue)는 가장 먼저 들어온 데이터가 가장 먼저 나가는(선입선출, FIFO(First In First Out)) 자료구조입니다. 일상생활에서도 쉽게 접할 수 있는데요. 영화관에서 영화를 보러 들어가기 위해 대기하거나, 비행기를 탑승하기 위해 대기를 할 때 먼저 줄을 선 사람이 먼저 들어가는 경우가 바로 큐 자료구조와 같습니다. 코드 구현 예시 굉장히 단순하게 구현할 경우 자바스크립트 배열 자료구조를 활용해서 쉽게 구현할 수 있습니다. 배열 활용 예시 배열의 push, pop, unshift, shift 메서드를 사용할 때 시간복잡도는 O(1)이지만, 데이터를 할당/제거 후 배열을 재구성해야되기 때문에 O(N) 복사 비용이 발생합니다. 그렇기 때문에 배열을 통해 구현할 .. 공감수 1 댓글수 0 2022. 2. 12.
  • [자바스크립트] 연결리스트(Linked List) 예시를 통해 쉽게 이해하기 (1) 연결리스트(Linked List)란? 연결리스트는 모든 요소(a.k.a 노드)가 다음 요소에 연결된 자료구조입니다. 예를 들어 학교의 한 반에 있는 학생들을 데이터로 저장한다면, 1번 학생 데이터를 노드로 생성할 때 2번 학생 데이터가 어디에 있는지 노드의 위치를 표시하는 방식입니다. 자료가 연결되어있기 때문에 새로운 자료를 앞쪽에 추가/삭제할 때 굉장히 유용하게 사용할 수 있습니다. 하지만 특정한 자료를 불러올 때는 무조건 순회하며 찾아가는 과정이 필요하기 때문에 특정한 노드를 찾기 까다롭다는 단점이 있습니다. 위 예시에서 3번 학생 데이터를 확인하기 위해선 2번 학생 데이터를 무조건 거쳐야 3번 학생 데이터가 어디있는지 알 수 있습니다. 만약 1만명의 학생들이 엮여있다면, 특정 학생을 찾을 때마다 꽤.. 공감수 5 댓글수 0 2022. 2. 12.
  • nvm 기본(default) 노드 버전 변경하는 방법 nvm에서 기본 노드 버전 변경하는 방법은 nvm에서 바라보고 있는 default alias를 변경하면 됩니다. 아래는 현재 12.21.0 버전을 default로 바라보고 있는 것을 확인할 수 있습니다. default를 16.13.2로 변경하도록 하겠습니다. 아래 nvm 명령어로 default alias를 변경합니다. nvm alias default 16.13.2 공감수 7 댓글수 0 2022. 2. 5.
  • [백준, node.js] 11729번 "하노이 탑 이동 순서" 문제 해결방법 문제 세 개의 장대가 있고 첫 번째 장대에는 반경이 서로 다른 n개의 원판이 쌓여 있다. 각 원판은 반경이 큰 순서대로 쌓여있다. 이제 수도승들이 다음 규칙에 따라 첫 번째 장대에서 세 번째 장대로 옮기려 한다. 한 번에 한 개의 원판만을 다른 탑으로 옮길 수 있다. 쌓아 놓은 원판은 항상 위의 것이 아래의 것보다 작아야 한다. 이 작업을 수행하는데 필요한 이동 순서를 출력하는 프로그램을 작성하라. 단, 이동 횟수는 최소가 되어야 한다. 아래 그림은 원판이 5개인 경우의 예시이다. 예제 입력 & 출력 입력 첫째 줄에 첫 번째 장대에 쌓인 원판의 개수 N (1 ≤ N ≤ 20)이 주어진다. 출력 첫째 줄에 옮긴 횟수 K를 출력한다. 두 번째 줄부터 수행 과정을 출력한다. 두 번째 줄부터 K개의 줄에 걸쳐 .. 공감수 0 댓글수 0 2022. 2. 5.
    728x90
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.