익스플로의 아카이브

2024년 회고

Iksflow — Sat, 18 Jan 2025 18:02:08 +0900

2024년을 돌아보며

2024년은 내가 개발자로 일하는 7년의 커리어 중에 가장 큰 위기를 경험했고 힘들었던 해였다.
2023년 회고를 들춰보니 그때에도 경제 상황이 갈수록 안 좋아지는 것을 언급했었는데 2024년은 그보다 더 심했다.
나 또한 다니던 회사에서 권고사직을 통보받고 실업자가 되었다.
권고사직을 계기로 나는 지속 가능한 삶에 대한 고민이 많아졌다.
'회사에서 잘렸으니 다시 이직을 하면 그걸로 충분한 것인가?'
아직은 연차가 많이 쌓이지 않았고 젊기 때문에 이직 하는게 불가능한 일은 아니다.
하지만 더 나이가 들어서 나를 필요로 하는 곳이 없어졌을 때 나는 어떻게 살아갈 것인지에 대한 계획을 떠올릴 수 없었다.
부모님 세대에서는 괜찮았을지 모르지만 지금도 직장인으로 살아가는 방식이 지속가능한 삶의 방식일까?
나에게 2024년은 스스로 던진 이 질문에 대한 답을 고민하는 시기였다.

생애 첫 권고사직

사실 2023년 12월 나는 권고사직으로 인해 무직자가 되었다.
연말에 갑작스럽게 진행된 일이라 2023년 회고에서는 경황이 없어서 다루지 못했었다.
권고사직은 뉴스에서나 접하는 다른사람 얘기라고만 생각했던 일이 나에게 벌어지니 당황스러웠다.
회사는 경영악화를 이유로 프로덕트 개발팀 전원을 해고했다.
투자금의 절반 가량을 소진했지만 이렇다할 성과가 없었고 PMF를 찾지 못했다고 판단해서 특단의 결정을 내렸다고 공지했다.
회사에게 서운하고 분한 마음이 들지 않았다고하면 거짓말이겠지.
그래도 회사는 위로금 명목으로 2개월치 급여를 챙겨줬다는 점이 씁쓸한 마음을 달래는데 조금 도움이 되었다.
권고사직 절차를 진행하면서 나는 이직하기위해 여러 번 시도를 했지만 번번이 실패했다.
나처럼 일자리를 잃어버린 사람들이 인력시장에 많이 풀려서 경쟁이 심해진 것도 한몫했다.
어쩌다 운이 좋게 최종 면접까지 가더라도 연봉협상에서 결렬되는 경우가 많았다.
경험치가 쌓이다 보니 회사의 규모, 투자 시리즈만 봐도 내가 지원해 볼 만한 곳인지 아닌지 알 수 있게 되었다.
당시 분위기는 회사들이 3~5년 차 가성비 좋은 인력을 채용하는데 집중하는 분위기였다.
계속해서 탈락의 고배를 마시면서 몸과 마음이 지치기도 했던지라 잠시 구직활동을 멈추고 휴식을 취하기로 결정했다.

제주도 한 달 살기

지쳐있던 몸과 마음에게 휴식을 선물할 겸 제주도에 한 달 살기를 다녀왔다.
나는 사람이 많은 곳을 좋아하지 않아서 여행 스타일이 독특한 편이다.
관광은 가볍게 하고 남은 시간은 조용한 곳에서 혼자 컴퓨터를 하거나 코딩을 하는 것을 좋아한다.
제주도에는 이런 장소들이 몇 군데 있다.
예전부터 가보고 싶었던 '오피스제주', '스페이스모노', '아임포트'와 같은 노마드 워커를 위한 공유오피스에 다녀왔다.
바다가 잘 보이는 곳에서 조용히 코딩할 수 있는 작업실을 갖고 싶다는 로망이 있었는데 '오피스제주'는 바로 그런 곳이었다.
조용하고 아늑한 오피스에서 일에 집중하다가 고개를 살짝 들면 푸른 바다가 펼쳐진 풍경을 만끽할 수 있었다.
매일같이 숨 막히는 지하철에 몸을 싣고 콘크리트 숲에 나를 가둬놓을 때와 비교하면 말로 표현할 수 없을 만큼의 해방감과 창의력이 생기는 감정을 느꼈다.
내가 하고 싶은 일과 스스로를 위해 일한다는 기분이 들었다.
그렇게 제주도 한 바퀴를 돌면서 가보고 싶었던 곳을 구석구석 다녀왔다.
좋은 리프레쉬 휴가였다.

정부지원사업에 도전

제주도 한 달 살기를 하던 중 창업에 관심이 생겼다.
앞서 언급했듯이 나는 '바다가 잘 보이는 곳에서 조용히 코딩할 수 있는 작업실을 갖고 싶다'라는 로망이 있다.
오피스 제주에서 작업을 하던 중 문득 ' 로망은 반드시 돈을 많이 벌고 여유가 생겨야만 실현 가능한 것일까?'라는 생각이 들었다.
그리고 이 생각은 '좋아하는 일을 하면서 돈을 벌면 그만 아닌가?'라는 생각으로 발전했다.
나도 노마드 워커를 위한 공간을 운영하면서 돈을 버는 사업을 해보자는 생각이 들어 계획을 세워보았다.
처음에는 바다가 잘 보이는 지역들로 알아보았다.
하지만 임대매물로 나온 건물 같은 건 있을 리가 없었다.
직접 토지를 매입해서 건물을 올리거나, 오래된 건물을 사서 리모델링하는 방법뿐이었다.
하지만 토지에도 용도가 있었고 도시 계획에 맞게 이미 구역이 나누어져 있었다.
내가 원하는 위치가 있더라도 허가를 받지 못한다면 해결할 수 없는 문제였다.
물론 비용 또한 당연히 감당할 능력이 없었다.
이건 내 예상을 크게 벗어나는 복잡한 문제라 이내 접어버렸다.

조금 타협해서 상가자리를 찾기 쉬운 서울에 만들면 어떨까 생각을 해보았다.
공부하거나 일할 때 카페를 찾는 사람들이 있다.
그런데 이들이 카페를 찾는 이유는 정말 카페에서 일하는 것이 편해서일까?라는 생각을 하게 되었다.
내가 생각한 가설은 적당한 가격에 앉아서 공부하거나 캼퓨터로 업무를 처리할 장소가 마땅치 않아서 카페를 이용한다는 것이었다.
그리고 이들은 카페에서 음료를 하나 시키고 장시간 머문다.
이들이 오래 머물수록 업주들 입장에서는 회전율이 떨어지고 매출에 타격을 받게 된다.
그래서 이 문제를 해결하기 위해 카페를 대신해서 일상에서 편하게 이용할 수 있는 작업 공간 대여사업을 기획해 보았고 사업계획서도 작성했다.
정부지원사업에 기획한 아이디어를 제출해 보았지만 탈락했다.
부동산 임대업으로 속해서 애초에 지원 대상이 아니었다.
그래도 아이디어를 구체화해 보면서 사업계획서를 써본 경험은 나에게 큰 자산이 되었다.
면밀히 수익과 비용을 예상해 보면서 사업성이 있는 아이템인가를 따져보는 작업들은 내 시야가 더 넓어지게 만들어 주었다.
사업성분석을 해보기 전에는 '왜 이런 아이템이 있으면 좋을 것 같은데, 세상에는 없을까?'라는 생각을 한 적이 많았다.
하지만 지금은 안다.
없는 데는 다 이유가 있다.
해봤자 돈이 안되기 때문이다.
다음에는 돈이 되는 사업아이템을 발굴해서 철저히 준비해 봐야겠다.

다시 한번 스타트업

그렇게 정부지원사업에 지원했지만 결과적으로 탈락의 고배를 마시고 말았다.
나는 다시 무언가 해야만 하는 상황에 놓였다.
3개월 전과 똑같이 무직이었지만 그래도 사업을 꼭 시작하겠다는 목표가 생겼다.
사업을 시작하려면 자본금이 있어야 한다. 그리고 아직 더 일을 해야겠구나 싶었다.
그러던 중 운이 좋게도 6월에 이직을 하게 됐다.
새 회사에서는 모바일앱과 AI서비스를 활용한 제품을 개발하는 역할을 담당했다.
실제로 AI를 실무에 활용하는 경험을 할 수 있다는 점이 마음에 들었다.
업무 강도는 심한 편이지만, 좋은 사람들과 일하면서 배우는 점도 많다.
내가 다녀본 가장 얼리스테이지 스타트업이라 체계도 거의 없었다.
그래도 미래의 내가 창업을 했을 때 겪을 수 있는 일이라 생각한다.
힘들어도 즐거운 마음으로 잘 헤쳐나가야지

전산회계 자격증 취득

본격적으로 사업을 해야겠다는 목표가 생긴 뒤에는 재무회계에 관심이 생겼다.
개인이 부자가 되기 위해서는 시드머니를 모아야 하고 이를 위해 돈을 절약하는 것처럼, 회사도 마찬가지라고 본다.
돈을 잘 버는 것도 중요하지만 돈을 아낄 수 있는 부분은 아껴야 한다.
즉 어디서 돈이 새는지를 알아야 한다는 말이다.
그러려면 회계를 알아야 하고 장부를 잘 기록하고 관리하는 능력이 필요하다.
나는 가볍게 전산회계 2급부터 시작했다.
2급은 따기 쉬운 편이라는 말이 많았지만 직장을 다니면서 시험을 준비하는 건 쉽지 않았다.
시험은 70점을 넘으면 합격이었다.
하지만 자격증 취득보다는 배움에 목표를 두고 있었기 때문에 100점 만점으로 취득하기 위해 더 꼼꼼히 공부했다.
결과적으로 전산회계 2급 자격증을 91점이라는 성적으로 취득할 수 있었다.
2025년의 목표는 전산회계 1급 자격증, 전산세무 2급 자격증에 도전하는 것이다.

마무리

정신없이 많은 일들이 스쳐 지나간 2024년이었다.
힘든 일이 많았지만 그만큼 좋은 일도 많았다.
니체의 '나를 죽이지 못하는 고통은 나를 더욱 강하게 만든다'라는 말이 딱 어울리는 한 해였다.
지금의 고난을 거름으로 삼아 더 큰 목표를 이루는 사람이 되기를 바라면서 회고를 마친다.

[오류해결 | React Native] Xcode must be fully installed before you can continue.

Iksflow — Fri, 31 May 2024 19:23:22 +0900

문제 상황

React Native 프레임워크인 Expo에서 iOS 에뮬레이터로 앱을 실행하려는데 인식하지 못하는 경우가 있다. XCode는 정상적으로 설치했음에도, App Store에서 설치할 것인지 계속 묻는다. 예를 들면 아래와 같은 식이다.

$ npm run ios
Xcode must be fully installed before you can continue. Continue to the App Store?

해결 방법

다음 명령어를 입력해서 경로를 설정한다.

$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

다음 다시 npm run ios 명령어를 실행한다.
그럼 Expo에서 자동으로 시뮬레이터를 인식해서 앱 프로세스를 실행한다.

$ npm run ios  

> rncourse@1.0.0 ios
> expo start --ios

Starting project at /Users/iksflow/studyroom/react-native-study/RNCourse
Starting Metro Bundler
› Opening exp://192.168.0.2:8081 on iPhone 15 Pro Max
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀▀ ██ █  █ ▄▄▄▄▄ █
█ █   █ █▄▀██▀██  █ █   █ █
█ █▄▄▄█ █ ▄ █ ▀▀ ██ █▄▄▄█ █
█▄▄▄▄▄▄▄█ █ ▀▄█▄█▄█▄▄▄▄▄▄▄█
█  ▀▄▀█▄ █▀█   ▀▄▄▀  ▄▀▄▄▀█
█▄ ▀▄ ▀▄█▄▀▀    ▀█▄▀ ▀▀█▄▄█
█▄▀▀▄ ▀▄█▄▀▄ █  █▀█ ▄█ ██▀█
█▄▀██▀▀▄▄▄▀▄ █▀██ ▄▄ ▀▀██▄█
█▄▄▄██▄▄█ ▀██ ▀▄  ▄▄▄ █ ▄ █
█ ▄▄▄▄▄ █▄▀ ▄ █   █▄█  ▀  █
█ █   █ █▀█▀▀███▀▄ ▄▄ █▀█▄█
█ █▄▄▄█ █▀▀▀███▀█  █▄  ▄█▄█
█▄▄▄▄▄▄▄█▄█▄█▄███▄███▄▄█▄▄█

› Metro waiting on exp://192.168.0.2:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

참고

https://github.com/expo/expo/issues/21727

React + TypeScript로 네이버 지도 그리기 - 1. 요금 정보 및 환경설정

Iksflow — Sun, 17 Mar 2024 10:43:57 +0900

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

1. Naver Maps의 기능

Naver Maps는 다양한 기능을 제공한다.
지도 그리기, 지도 이동, 지도 레이어 구성, 마커 표시, 길 찾기 등 여러 기능이 있다.
나는 지도에 원하는 위치를 표시하거나 이동하는 기능이 필요했다.
Naver Maps는 개발문서에서 API 사용 방법과 예제를 제공하고 있어서 문서를 읽고 따라 하는 게 크게 어렵지는 않았다.
다만 조금 아쉬웠던 점은 요즘 프런트엔드 개발 환경의 트렌드인 React와 Typescript 기반의 설명이 아니라 Vanilla JS, jQuery 기반의 설명이라는 점이다.
React, Typescript에 능숙한 사용자라면 Vanilla JS로 작성된 부분을 React, Typescript의 구조에 맞게 변형해서 사용할 수 있을 것이다.
하지만 나처럼 React, Typescript와 아직 친하지 않은 사람에겐 구조에 맞게 변형하는 방법까지 공부해야 했기에 약간의 진입장벽으로 느껴졌다.
분명 나와 비슷하게 어려움을 겪는 사람도 있을 거란 생각이 들었고 이 글을 작성하는 계기가 되었다.

2. 요금 안내

사용 설명에 들어가기 앞서 비용에 대한 걱정을 줄이기 위해 요금과 관련된 내용을 먼저 소개하려고 한다.
아래는 Naver Maps의 이용 요금 안내표이다.
용도에 따라 나뉜 다양한 API가 있으며 기본적으로 모든 API에 무료 이용 횟수가 있다.
이번에 사용할 API는 Web Dynamic Map으로 1달에 10,000,000회를 무료로 사용할 수 있다.
하루 평균으로 따져봤을 때 300,000회를 무료로 사용하고도 남는 정도이기 때문에 토이프로젝트 또는 작은 규모의 서비스는 요금에 대한 걱정을 할 필요가 없다.
참고로 Web Dynamic Map은 지도에서 우리가 흔히 사용하는 지도서비스처럼 줌 인/아웃 및 지도에서 위치를 이동할 수 있는 기능을 제공하는 지도이다.

2.1. 무료 이용 한도와 대표 계정

네이버 클라우드 플랫폼에서 처음으로 생성하는 아이디가 '대표 계정'으로 등록된다.
대표 계정은 개인, 사업자 각 1개만 등록할 수 있고 네이버에서 제공하는 API 무료 이용 한도는 대표계정에만 제공된다.
예를 들어 '사용자 A'가 Naver Maps API 무료 이용 한도가 월 1,000회인 경우 계정을 3개 만든다고 해서 각각 1,000회씩 총합 3,000회를 이용할 수는 없다.
현재 계정은 가입 후 콘솔에서 '대표 계정 확인' 이라는 버튼을 클릭하면 아래와 같이 확인할 수 있다.
참고로 대표계정은 고객센터에 문의해서 변경이 가능하다.
자세한 정보는 고객센터의 F&Q 페이지에 나와있다.

2.2. 무료 이용 한도 설정

혹시 잘못된 케이스로 초과하면 어쩌나 걱정이 들 수도 있다.
하지만 걱정하지 않아도 괜찮다.
가입직후 콘솔에서 확인해 보면 Naver Maps의 초기 설정값은 무료 이용 한도만큼 설정되어 있다.

3. 네이버 클라우드 플랫폼 회원가입

먼저 네이버 클라우드 플랫폼 회원가입 페이지에서 회원가입을 진행한다.
링크로 이동하면 아래와 같은 화면이 나오는데 이메일 또는 네이버 계정으로 진행이 가능하다.
이메일 인증 및 결제 수단 등록의 추가 절차를 진행하면 가입이 완료된다.
이메일 인증은 등록한 이메일로 받게 되는 인증 메일의 링크를 클릭하면 완료된다.
결제 수단 등록은 체크카드나 신용카드를 등록해야 하니 미리 결제 가능한 카드를 준비한다.

4. 애플리케이션 등록

회원가입을 마치고 콘솔로 이동하면 대시보드에 접근할 수 있다.
좌측의 사이드 내비게이션에서 AI/NAVER API의 Application 메뉴를 클릭한다.
그러면 아래처럼 AI/NAVER API 이용 약관에 동의하라는 페이지가 나올텐데 동의함에 체크하고 확인을 누른다.

이용 약관에 대한 동의 절차가 끝나면 대시보드에서 Application 등록 이란 하늘색 버튼이 보인다.
버튼을 클릭하면 상세 정보를 입력하는 페이지가 나온다.
이번에는 웹 애플리케이션을 등록하는 예제를 진행하는 것이므로 Web Application 개발에 필요한 내용들을 입력했다.
아래를 참고해 Application 이름, Service 선택, 서비스 환경 등록의 정보를 입력하면 된다.

먼저 Application 이름은 본인의 앱 이름을 입력하면 된다.
네이버 클라우드 플랫폼에서 Application을 식별하기 위한 이름이기 때문에 실제 앱의 명칭과 달라도 상관없어 보인다.

다음은 Service 선택 항목이다.
웹 애플리케이션에 필요한 항목들을 모두 체크했다.

마지막은 서비스 환경 등록이다.
개발단계에서는 도메인을 등록하는 일이 없을 테니, http://localhost 라고 입력하면 된다.
등록되어있지 않은 도메인에서 요청이 오는 경우는 오류가 발생하니 나중에 서비스를 배포할 경우 도메인 주소를 추가해줘야 한다.

마무리

이번 글에서는 Naver Maps로 지도를 그리기 위해 사전 준비에 대해 알아봤다.
다음 글에서는 본격적으로 Naver Maps를 활용해 지도를 그리기 위한 개발환경을 설정하는 방법에 대해 알아볼 예정이다.

참고

https://guide.ncloud-docs.com/docs/maps-overview

[오류해결] VSCode - Cannot find name 'test'. Do you need to install type definitions for a test runner?

Iksflow — Mon, 11 Mar 2024 18:12:39 +0900

오류 발생

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.json에 "exclude": ["**/tests/*.test.ts"] 처럼 exclude옵션에서 테스트코드의 확장자를 제외시키는 방법도 있다.
하지만 보다 근본적인 해결방법은 오류 메시지처럼 type definition을 인식가능하도록 만들어주는 것이다.

{
  "compilerOptions": {
    ...,
    "types": ["...", "@types/jest"],
    ....
  },
}

npm, yarn classic(V1)을 사용한다면 위와 같이 tsconfig.json을 수정하는 것으로 오류가 해결된다.

그런데 만약 Yarn berry(V2+)를 사용하고 있고 오류가 계속 발생한다면 추가로 익스텐션 설치와 VSCode 설정을 해줘야 한다.
Yarn berry는 Plug’n’Play(PnP)방식을 사용하기 때문에 node_modules 디렉터리에서 의존성을 관리하지 않는다.
.yarn 디렉터리 아래에 압축된 zip파일로 의존성 관리를 하기 때문에 이 경로를 인식할 수 있도록 추가적인 설정이 필요하다.
다음은 VSCode에서 Yarn Berry와 호환이 되는 개발환경을 구성하는 방법이다.

Yarn Berry에 필요한 익스텐션과 VSCode 설정

VSCode에서 @types를 제대로 불러오려면 ZipFS, @yarnpkg/sdks를 설치해야 한다.

1. ZipFS - a zip file system

Yarn berry는 zip파일로 의존성을 관리하기 때문에 필요하다.
ZipFS는 VSCode가 zip파일을 읽기 가능하게 만드는 확장 프로그램이며 Yarn의 메인테이너인 Maël Nison이 작성했다.
Extensions에서 ZipFS를 검색해서 추가한다.

2. @yarnpkg/sdks 설치

아래 명령어를 실행하면 vscode 설정값들이 자동으로 생성된다.

yarn dlx @yarnpkg/sdks vscode

실행이 끝나면 프로젝트 루트에 .vscode디렉터리가 만들어지고 아래와 같이 extensions.json, settings.json파일이 생성된다.

// extensions.json
{
  "recommendations": [
    "arcanis.vscode-zipfs",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

// settings.json
{
  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "eslint.nodePath": ".yarn/sdks",
  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

3. VSCode 재시작

설치가 완료되고 나서도 오류가 해결되지 않았다면 VSCode를 재시작한다.

참고 자료

Yarn V1에서 V4로 마이그레이션하는 방법

Iksflow — Mon, 11 Mar 2024 14:22:49 +0900

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 버전보다 낮다면 18+ 버전을 설치한다.

$ node -v
v20.10.0

3. Corepack 활성화

아래 명령어를 입력해 corepack을 활성화한다.

$ corepack enable

4. Yarn Berry 버전으로 설정

터미널에서 프로젝트 루트로 이동해 아래 명령어를 실행한다.
그리고 yarn -v를 입력해 버전을 확인하면 4.1.1로 적용된 것을 확인할 수 있다.

$ yarn set version berry
$ yarn -v
4.1.1

5. Yarn Classic 설정파일 마이그레이션

.npmrc, .yarnrc 파일이 없다면 넘어가면 된다.
Yarn Berry(V2+)에서는 설정 파일로 .yarnrc.yml를 사용한다.
기존에 Yarn Classic(V1)에서 사용하던 .npmrc와 .yarnrc 파일의 내용을 .yarnrc.yml에 옮긴다.
포맷이 조금 변경되었다고 하니 자세한 내용은 Yarn Configuration 문서를 참고한다.

6. Yarn 의존성 재설치

yarn install 명령어로 의존성을 다시 설치하고 마이그레이션을 마무리한다.

$ yarn install

참고자료

[오류해결] ESLint 'test' is not defined. no-undef

Iksflow — Mon, 11 Mar 2024 12:27:00 +0900

오류 발생

테스트코드를 작성했는데 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-installing-jest

[오류해결] Error [ERR_REQUIRE_ESM]: require() of ES Module ~ node_modules/cliui/build/index.cjs not supported.

Iksflow — Mon, 11 Mar 2024 11:40:26 +0900

오류 발생

yarn test 명령어로 테스트 코드를 실행하려는데 아래와 같이 오류가 발생했다.

yarn v1.22.21
node 20.10.0

오류 상세

yarn test
yarn run v1.22.21
$ jest
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/iksflow/${PROJECT_ROOT}/node_modules/string-width/index.js from /Users/iksflow/${PROJECT_ROOT}/node_modules/cliui/build/index.cjs not supported.
Instead change the require of index.js in /Users/iksflow/${PROJECT_ROOT}/node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/iksflow/${PROJECT_ROOT}/node_modules/cliui/build/index.cjs:291:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

원인 분석

개발환경의 의존성 관리 도구인 Yarn V1으로 설치된 의존성이 CommonJS의 import 문법인 require를 사용하고 있는데 이를 ESM형태로 인식하지 못해 발생하는 것으로 보인다.

해결 방법

찾아보니 Jest의 문제가 아니라 Yarn Classic(V1)에서 발생하는 오류라고한다.
Yarn Berry(V2+) 버전으로 업그레이드하면 오류를 해결할 수 있다.
Yarn Berry로 마이그레이션 하는 방법 포스트를 참고해서 Yarn 버전을 업그레이드하면 오류가 더 이상 발생하지 않는다.

!참고!
yarn.lock 파일을 삭제하고 yarn install을 실행하는 방법으로도 해결이 가능하다.
하지만 이 방법은 의존성에 변경이 생길 때마다 Error [ERR_REQUIRE_ESM] 오류가 다시 발생한다.
따라서 재발을 방지하는 방법인 Yarn 버전 마이그레이션을 추천한다.

참고 자료

[오류해결] 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Iksflow — Sun, 10 Mar 2024 12:20:09 +0900

오류 발생

VSCode에서 Typecript + React 환경으로 개발을 하던 중 에디터에 React 컴포넌트에 붉은줄이 마구 생기면서 아래와 같은 오류가 발생했다.
딱히 건드린 코드가 없는데 갑자기 발생한 오류라 당황스러웠다.

오류 상세

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

원인 분석

React 16에서 React 17로 넘어가면서 JSX Transformation 방식이 변했는데 이로 인해 발생하는 문제라고 한다.

React 17에서 Transformation과 관련해 변경된 부분은 2가지이다.
첫 번째는 기존에는 React 컴포넌트 코드에 import React from 'react'; 라는 코드를 항상 입력해주어야 했는데 이 부분이 사라졌다.
두 번째는 React JSX Transformation 코드가 변경되었다.
아래와 같은 코드는 브라우저가 인식을 못하기 때문에 자바스크립트 코드로 변환을 해주어야한다.
변환 작업은 Babel, Typescript 와 같은 도구로 브라우저가 인식 가능한 Javascript 코드로 변경하는것을 의미한다.
참고로 React 공식 문서에서 소개하는 React 16과 React 17의 차이는 아래와 같다.

React 16의 변환 방식

// 개발자가 작성하는 React 코드
import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}
------------------------------------
// React 16 jsx 코드를 Javascript로 변환
import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

React 17의 변환 방식

// 개발자가 작성하는 React 코드
function App() {
  return <h1>Hello world</h1>;
}
------------------------------------
// React 17 jsx 코드를 Javascript로 변환
// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

해결 방법

해결 방법은 3가지를 시도해보면 된다!

첫 번째는 tsconfig.json 파일을 수정하는 것이다.
검색을 해보니 tsconfig.json 파일에 아래와 같이 옵션을 추가하면 해결이 된다고 한다.

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

두 번째는 VSCode사용자에게 해당하는 내용이다.
위의 내용대로 tsconfig.json을 수정했는데도 해결이 되지 않거나 이미 tsconfig.json 에 해당 내용이 적용된 경우임에도 오류가 발생할 수 있다.
이런 경우에는 VSCode를 껐다가 다시 시작해주면 해결이 된다.
21년도 부터 보고가된 꽤 오래된 이슈임에도 24년 3월에도 여전히 발생한다.

세 번째는 VSCode 파일 이름 변경으로 인해 발생한 경우이다.
VSCode를 껐다 켰는데도 오류가 사라지지 않는 경우가 있다.
VSCode의 버그로 보이는데 파일명을 변경했음에도 변경 전 파일 이름을 바라보고 있어서 'React' refers to a UMD global~ 오류를 내뱉는 상황이 발생한다.
말로 설명이 부족할 것 같아 예시로 아래 이미지를 첨부했다.

변경한 파일의 이름은 아래와 같다.

변경 전 파일 이름: LocationSearchbar.tsx
변경 후 파일 이름: LocationSearchBar.tsx

하지만 이미지에서는 LocationSearchBar.tsx로 파일명을 변경했음에도 LocationSearchbar.tsx에서 오류가 발생했다고 알려준다.
이 오류를 해결하는 방법은 번거롭지만 아예 다른 이름으로 변경했다가 다시 원하는 이름으로 변경하는 것이다.
예를 들면 LocationSearchBar.tsx를 다시 LocationSearchbar2.tsx로 이름을 변경하면 오류가 사라진다.
그리고 다시 LocationSearchBar.tsx로 변경하면 된다.

참고 자료

[오류해결] org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name ~

Iksflow — Tue, 5 Mar 2024 09:43:58 +0900

오류 발생

스프링부트에서 Author 라는 Entity와 AuthorRepository라는 Repository를 호출하는 코드를 실행했을 때 다음 오류가 발생했다.

org.springframework.beans.factory.UnsatisfiedDependencyException
Caused by: org.springframework.beans.factory.BeanCreationException
Caused by: java.lang.IllegalArgumentException

오류 상세

보다 자세한 오류 내용은 다음과 같다.
3단계에 걸쳐 실제 호출해서 오류가 발생한 지점부터 근원지까지의 오류 발생 내용이 기록되어있다.
오류 내용을 제외한 나머지 내용은 길어서 생략했다.

2024-03-05T09:06:06.761+09:00 ERROR 44688 --- [main] o.s.boot.SpringApplication: Application run failed

# 1번 에러
org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'bootstrapData' defined in file [/Users/iksflow/$$$$$]: Unsatisfied dependency expressed through constructor parameter 0: Error creating bean with name 'authorRepository' defined in com.example.repositories.AuthorRepository defined in @EnableJpaRepositories declared on JpaRepositoriesRegistrar.EnableJpaRepositoriesConfiguration: Not a managed type: class com.example.domain.Author
........생략........

# 2번 에러
Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'authorRepository' defined in com.example.repositories.AuthorRepository defined in @EnableJpaRepositories declared on JpaRepositoriesRegistrar.EnableJpaRepositoriesConfiguration: Not a managed type: class com.example.domain.Author
........생략........

# 3번 에러
Caused by: java.lang.IllegalArgumentException: Not a managed type: class com.example.domain.Author
    at org.hibernate.metamodel.model.domain.internal.JpaMetamodelImpl.managedType(JpaMetamodelImpl.java:181) ~[hibernate-core-6.1.6.Final.jar:6.1.6.Final]
........생략........

원인 분석

1번 에러는 스프링부트 애플리케이션 실행에 실패했다는 내용이다.
오류의 결과에 해당하는 부분으로 원인을 분석하려면 2번 에러, 3번 에러를 확인해보면 찾을 수 있다.

2번 에러는 Bean 생성에 실패했다고 알려준다. 실패한 이유는 authorRespository에 정의한 Author라는 클래스가 Managed Type이 아니기 때문이다.
3번 에러는 Author 클래스가 Managed Type이 아니라고 한다.
정리하자면 이 모든 일이 Author 클래스가 Managed Type이 아니기 때문에 발생한 것이다.

문제의 원인인 Author 클래스는 아래와 같이 작성된 상태였다.


public class Author {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    private String firstName;
    private String lastName;

    @ManyToMany(mappedBy = "authors")
    private Set<Book> books = new HashSet<>();
    ... 생략 ...
}

그렇다. 3번 오류는 Author 클래스에 @Entity 애너테이션을 빠뜨려서 벌어진 일이다.

해결 방법

Author 클래스에 @Entity 애너테이션을 추가하면 Managed Type으로 인식해 정상적으로 동작한다.

@Entity
public class Author {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    private String firstName;
    private String lastName;

    @ManyToMany(mappedBy = "authors")
    private Set<Book> books = new HashSet<>();
    ... 생략 ...
}

참고 자료

[오류해결] Jest encountered an unexpected token

Iksflow — Mon, 4 Mar 2024 11:00:06 +0900

오류 발생

Typescript와 Jest로 작성한 테스트코드를 실행했더니 Jest encountered an unexpected token 라는 오류가 발생했다.

오류 상세

npm test

> test
> jest

 FAIL  app/components/example/Button.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

원인 분석

Jest에서 Typescript로 작성된 코드를 해석할 수 없어서 발생한 오류이다.

해결 방법

Jest 공식문서에서는 babel을 활용한 방법과 ts-jest를 활용한 방법 2가지 해결 방법을 찾을 수 있었다.
두가지 방법의 차이는 타입 체킹 여부이다.
babel은 순수하게 transpiling만을 지원하기 때문에 타입 체킹의 이점을 누릴 수 없다.
반면 ts-jest 에서는 온전히 Typescript의 혜택을 누릴 수 있었다.
나는 타입체킹을 지원하는 ts-jest를 선택했다.
ts-jest를 사용하는 방법은 아래와 같이 의존성 추가 후 설정 파일을 변경하면 된다.

1. ts-jest 의존성 추가

아래 명령어를 입력해 ts-jest를 추가한다.

npm i --save-dev ts-jest

2. jest.config.ts 수정

아래와 같이 jest.config.ts 파일에 preset: "ts-jest" 옵션을 추가한다.

import type { Config } from "jest";

const config: Config = {
  ... 다른 옵션 생략 ...
  preset: "ts-jest",
};
export default config;

3. 적용

테스트를 실행하면 정상적으로 동작하는것을 확인할 수 있다.

npm test

> test
> jest

 PASS  app/components/example/Button.test.tsx
  ✓ when the Button is clicked, then background color changes red to blue (44 ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |     100 |      100 |     100 |     100 |                   
 Button.tsx |     100 |      100 |     100 |     100 |                   
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.848 s
Ran all test suites.