Frontend

React + Typescript로 개발 중인 앱에 지도 기능이 필요해서 구현하는 방법을 찾아보았다. 지도 서비스를 제공하는 플랫폼에는 카카오, 네이버, 구글 등이 있는데, 평소에 마음에 들어 자주 사용하는 네이버 지도를 선택했다. 사용자의 입장에서 개발하는 입장이 되니 비용, 구현 방법 등 알아야 할 것이 생각보다 많았고 궁금해졌다. 그래서 이번에 React + TypeScript 환경에서 Naver Maps로 지도를 그리기 위해 알아본 내용들을 글로 정리해 보았다. 쓰다 보니 내용이 길어져서 소개 및 환경설정에 대한 내용과 구현 내용을 분리하기로 했다. 이번 글에서는 소개 및 환경설정에 대한 내용을 다룬다. 개발을 시작하기 전에 알아두면 좋을 Naver Maps의 기능, 요금 안내, 환경 설정에 대해..

오류 발생 VSCode에서 Typescript로 작성된 테스트코드에 붉은 밑줄이 그어지며 오류 메시지가 나타났다. 참고로 yarn test 같은 테스트 실행 명령어로 동작은 잘 되는 상태였다. 오류 상세 Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha`.ts(2582) 원인 분석 VSCode에서 Jest의 타입을 불러오지 못해서 발생한 오류였다. 해결 방법 해결방법은 tsconfig.json 파일에 아래와 같이 "@types/jest"를 추가한다. 물론 tsconfig..

Yarn V1에서 의존성을 추가하면 CommonJS, ESM 모듈 간 충돌하는 이슈가 지속적으로 발생해서 Yarn V4로 마이그레이션 하는 작업을 진행하였다. 본 글에서는 Yarn Classic이라고 부르는 V1에서 Yarn Berry(Yarn V2+을 지칭하는 명칭)로 마이그레이션 하는 방법에 대해 알아본다. 1. Yarn 버전 확인 yarn -v 를 입력해서 현재 yarn 버전을 확인한다. 명령어를 실행하니 1.22.22 버전이 설치되어 있다. $ yarn -v 1.22.22 2. Node 버전 확인 Yarn Berry로 업그레이드하기 위해서는 Node.js 18 버전 이상이 설치되어있어야 한다. node -v 명령어로 버전을 확인해 보니 20.10.0 버전이 설치되어 있다. 만약 18 버전보다 낮다..

오류 발생 테스트코드를 작성했는데 VSCode에서 아래의 오류 상세처럼 'test' is not defined.라는 eslint의 no-undef유형의 오류가 발생했다. 오류 상세 원인 분석 ESLint의 설정 파일에 Jest와 관련된 설정들이 추가되어있지 않아서 발생한 문제이다. 해결 방법 .eslintrc.cjs파일에 다음과 같이 "jest/globals"설정 값을 추가하면 오류메시지가 더 이상 나타나지 않는다. module.exports = { ...생략... env: { ..., "jest/globals": true, }, ...생략... } 참고 자료 https://stackoverflow.com/questions/55807824/describe-is-not-defined-when..