개발

iOS pod 삭제, 클린, 설치 명령어

// 1. pod 삭제 pod deintegrate // 2. pod 클린 pod cache clean --all // 3. pod 설치 pod install

개발/Next.js

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

개발/React

React에서 텍스트 줄바꿈하는 간단한 방법 (\n 줄바꿈 처리)

종종 개행 문자('\n')가 포함된 문자열 데이터를 받아서 사용하는 경우가 있습니다. JSX에서 개행 문자를 받았을 때 줄바꿈 처리를 하는 방법은 간단합니다. 일반적으로 그대로 사용하면 JSX에 의해서 개행문자나 태그는 동작하지 않고 그대로 출력합니다. const str = "안녕하세요.\n 여기는 대한민국입니다."; // 안녕하세요. 여기는 대한민국입니다. 이때 간단하게 CSS white-space 속성을 활용하면 해결할 수 있습니다. white-space: pre-line; const str = "안녕하세요.\n 여기는 대한민국입니다."; // 안녕하세요. // 여기는 대한민국입니다.

일상/생활팁

모바일 사파리 브라우저 모든 탭 닫는 방법 (How to close all Safari tabs)

Safari 앱에서 탭을 사용하여 여러 개의 열린 웹 페이지들을 한번에 닫고 싶은 경우가 있습니다. 모든 탭 닫는 방법 하단 전체 탭 보기 버튼 클릭 완료 버튼을 꾹 누른다. n개의 탭 모두 닫기 창이 나옴. 모두 닫기 버튼 클릭. 하단 전체 탭 보기 버튼을 클릭하면 아래와 같이 모든 탭들을 확인할 수 있습니다. 완료 버튼을 꾹 누르고 있으면, 아래 이미지와 같이 n개의 탭 모두 닫기 팝업이 등장하는 것을 확인할 수 있습니다. 모두 닫기 버튼을 클릭합니다.

개발/기타

외부 링크 금지 이미지 레퍼럴 허용하는 방법 (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

개발/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 명령어를 활용하면 아-주 깔끔하게 특정 커밋만 똑..

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

개발/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 파일은 한글 깨짐 ..

알고리즘

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

알고리즘

[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

알고리즘

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

개발/기타

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" } } 결과

알고리즘

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

개발/기타

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

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

개발/트러블슈팅

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