728x90
반응형
Next.js 커스텀 서버 환경에서 cannot find module 에러 해결 방법 feat. typescript 포스팅 썸네일 이미지

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

2023.03.29 게시됨

React에서 텍스트 줄바꿈하는 간단한 방법 (\n 줄바꿈 처리) 포스팅 썸네일 이미지

개발/React

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

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

2023.01.13 게시됨

외부 링크 금지 이미지 레퍼럴 허용하는 방법 (HTML img referrerpolicy) 포스팅 썸네일 이미지

개발/기타

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

2022.12.09 게시됨

깃 특정 커밋만 가져오는 방법 (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 게시됨

728x90
반응형