Kwangkki

무이자 할부 vs 일시불 뭐가 더 유리할까

Kwangkki — Thu, 1 May 2025 13:30:51 +0900

돈에 관련된 책을 보다가 무이자 할부는 좋지 않다는 내용을 보고 혹시 무이자 할부는 복리나 이자 개념에서 불리한 결제인가? 궁금해졌다. 물론 이 책은 무이자 할부가 나쁘다는 것이 아니라 이런 소비 습관이 문제라고 말한다.

어쨌든 무이자 할부가 이자나 복리 관점에서 일시불 결제와 비교 시 손해되는 부분이 있나 궁금해져서 둘을 비교해 보았다.

아래 비교는 단순히 이자 개념에서 비교하며, 일반적으로 무이자 할부가 갖는 단점인 포인트 혜택, 신용등급 하락 등의 가치는 제외했다. 실제 결제 시에는 여러 상황을 고려해서 비교하는 것이 좋다!

미래가치(FV)와 현재가치(PV)의 개념

둘을 비교하기 위해서 돈의 미래가치와 현재가치를 계산하여 비교했다.

미래가치(FV, Future Value) : 특정 자산이 미래에 갖게 될 가치

현재가치(PV, Present Value) : 미래에 갖게 될 돈을 현시점으로 환산한 가치

일단, 동일한 전제를 세웠다.

예적금을 하고 있다는 가정 아래, 돈의 현재가치를 계산한다.
100만 원, 1년 정기 예금, 연이율 2%로 가정

이 기준으로 미래가치를 구해본다. 공식은 다음과 같다

FV(미래가치) = PV(현재가치) x (1 + r)

* r: 이율

FV = 1,000,000 x (1 + 0.02)

FV = 1,020,000

어려울 것 없다. 1년 연이자 2%로 계산해서 1년 뒤에는 102만원이 된다는 말이고,

미래가치는 102만원이라는 뜻이다.

그럼 반대로 현재가치도 구할 수 있다. 공식은 다음과 같다.

PV(현재가치) = FV(미래가치) / (1 + r)^n

*n : 기간(년수)

연이율이기 때문에 n은 년수로 잡는다.

PV = 1,020,000 / (1 + 0.02)^1

PV = 1,000,000

현재가치는 100만원이다.

동일한 이율 조건에서 이런식으로 현재가치를 구할 수 있다.

이처럼 미래가치와 현재가치의 상관관계는 간단한 수식으로 풀이된다.

일시불 결제 vs 무이자 할부 비교

그렇다면, 같은 100만 원의 물품을 구매할 때, 일시불 결제와 무이자 할부의 현재가치를 계산해 보자.

일시불 결제

일시불 결제는 현재 시점에서 모든 금액을 지불한다. 따라서 현재가치는 단순히 100만 원이다.

PV(현재가치) = 1,000,000

무이자 할부 5개월

무이자 할부 5개월은 매달 20만 원씩 납부하게 된다.

무이자 할부의 현재가치를 계산하려면, 각 납부금액을 월 단위 이율로 할인해서 합산한다.

연이율: 2%
월이율 : 0.02 ÷ 12 = 0.0016 (0.16%)
할인계수 : 1 / (1 + 0.0016)^n

각 월의 현재가치는 다음과 같이 계산한다.

월납부금액 할인계수를 적용하여 현재가치

월	납부금액(원)	할인계수	현재가치(원)
1	200,000	1 / (1.0016)^1	199,680
2	200,000	1 / (1.0016)^2	199,360
3	200,000	1 / (1.0016)^3	199,040
4	200,000	1 / (1.0016)^4	198,720
5	200,000	1 / (1.0016)^5	198,400

각 월의 현재가치를 모두 더한 총 현재가치는 아래와 같다.

PV(현재가치) = 995,200

정리

일시불 결제 현재가치 : 1,000,000원
무이자 할부 현재가치: 995,200원

현재 시점에서 비교하면 무이자할부 결제가 유리하다.

왜냐하면 시간가치가 더해지기 때문이다. 무이자 할부는 당장 돈을 다 쓰지 않고 천천히 나눠서 갚기 때문에, 그동안 남아 있는 돈으로 이자 수익을 얻을 수 있기 때문이다.

결론

지금까지 얄팍한 예시를 통해 정말 무이자할부가 나쁜지 비교해봤다.

근데 더 깊이 따지고 들자면, 사실 시간가치는 일시불 결제에도 적용된다.

100만원 짜리 물건을 구매하기 위해 과거 1년동안 예금해서 모았다면 결과는 비슷하기 때문이다.

오히려 무이자할부는 미래가치에 기대기 때문에 예측불가능한 변수에 취약하고, 신용등급 하락에도 영향을 줄 수 있으며, 카드 혜택을 받지 못할 수도 있다는 단점도 존재한다. 그렇기 때문에, 책에서 말했 듯 현명한 소비 습관은 일시불 결제가 맞다.

그냥 궁금해서 계산해봤다.

gpt말에 따르면 "과거의 시간 가치는 수익을 만들고, 현재의 시간 가치는 기회를 만든다."

참고자료 :

유튜브 : 모르면 손해! 일시불 vs 무이자 할부 | 무이자 할부가 더 이득인 수학적 이유

계산은 gpt가 도와줌

proxmox 설치하기 (feat: ventoy usb)

Kwangkki — Fri, 24 Jan 2025 13:50:35 +0900

서버로 쓰던 컴퓨터 CPU에 문제가 있어 부품을 모두 갈고 하는 김에 proxmox os로 서버 컴퓨터를 리뉴얼(?) 해봤습니다.

️ 하드웨어 리뉴얼

1. CPU

일단 VM이든 컨테이너든 여러 개를 돌려야하기 때문에 코어 수가 높아야 된다고 해서 6코어를 알아봤습니다. 근데 가격이 생각해둔 예산을 훨씬 웃돌아서 4코어로 다시 찾아봤고, 4코어는 중고 기준으로 5만원 내로 괜찮은게 많더라고요. 하나 더 고려한 것은 CPU에 내장 그래픽이 내장된 제품으로 찾아봤고 최종적으로 AMD의 2200G로 선택

- AMD 라이젠 3-1세대 2200G (레이븐 릿지)

당근에서 2만원에 구매

2. 메인보드

AMD cpu를 샀기때문에 당연히 amd 메인보드를 알아봤습니다. 메인보드는 중고로 사기에 고장 위험도 있고해서 새 제품으로 알아봤습니다. 잘 모르기 때문에 RAM 소켓 정도만 확인했고 가격은 5~6만원 대로 알아봤어요. 다나와에 찾다가 선택한 것은.

- ASUS PRIME A520M-K 대원씨티에스

다나와에서 6만원 대에 구매

3. RAM

램은 8기가 DDR4 중 저렴한 것으로 선택했습니다.

- 마이크론 Crucial DDR4-3200 CL22 대원씨티에스 (8GB)

다나와에서 1만 6000원대 구매

4. 파워

원래 쓰던 파워가 약해서 500으로 업그레이드 했습니다. 오토팬이 적용된 것을 구매

- 앱코 XPERT 고효율 파워서플라이

쿠팡에서 3만 5천원 대에 구매

합체

전에 쓰던 메인보드 일체형 cpu였던 j3455는 소음이 아예 없는 수준이었는데 이젠 cpu 팬소리 때문인지 작은 소음이 생긴다는 거..ㅠ

본격적인 PROXMOX 설치

proxmox란?
프록스목스는 가상화 관리를 쉽게 도와주는 운영체제다. 오픈소스 기반으로 무료로 사용할 수 있으며, 간단한 클라우드를 구축할 때 사용하기 좋다. 특히 터미널이 아니라 GUI로 VM이나 컨테이너를 손쉽게 관리할 수 있다는 장점이있다.

1. ventoy로 proxmox 부팅 USB 만들기

ventoy란?
ventoy로 하나의 USB에 여러 개의 ISO파일(운영체제파일)을 넣고 부팅 USB를 만들 수 있다. 이 USB로 부팅 시 넣은 ISO 파일 중 하나를 선택해서 부팅할 수 있다. 예를들어 Window, Linux, macOS 중 선택해서 부팅할 수 있다.

위 설명과 같이 ventoy로 usb를 부팅하면 부팅 시 어떤 OS로 부팅할지 선택할 수 있는데요.

일단 proxmox 하나만 부팅할 예정이지만 향후 확장성을 위해 ventoy로 만들어봤습니다.

준비물은 2가지 입니다.

1. ventoy 다운로드

https://www.ventoy.net/en/download.html

Ventoy

Ventoy is an open source tool to create bootable USB drive for ISO files. With ventoy, you don't need to format the disk again and again, you just need to copy the iso file to the USB drive and boot it.

www.ventoy.net

2. proxmox virtual-environment iso 다운로드

https://www.proxmox.com/en/downloads/proxmox-virtual-environment

Downloads

Proxmox VE 8.3 ISO Installer Version 8.3-1 File Size 1.45 GB Last Updated November 21, 2024 SHA256SUM b5c2d10d6492d2d763e648bc8562d0f77a90c39fac3a664e676e795735198b45

www.proxmox.com

2개가 준비되면 ventoy를 실행합니다.

1. USB를 포맷하고 꽂으면 Device에서 선택할 수 있는데요. USB를 선택하고 Install을 누릅니다.

2. 다음과 같이 USB 이름이 Ventoy로 바꼈으면 성공

3. 여기에 다운받았던 proxmox-vo 파일을 복붙합니다.

이렇게 끝!

---

이제 서버 컴퓨터에 부팅한 usb를 꽂고 실행합니다.

저 같은 경우 바이어스 모드에서 usb default 부팅 옵션을 설정했습니다.

ASUS 메인보드 기준 F2를 광클해서 바이어스 모드에 진입했습니다.

ubuntu 서버가 기본 부팅으로 잡혀있어서 USB인 UEFI:SanDisk로 변경했습니다.

재부팅하면 ventoy 설정 창이 뜹니다.

아까 설정했던 proxmox-ve iso를 선택할 수 있는 창이 뜨면 성공입니다.

PROXMOX 설치

proxmox 설치 옵션인데 잘 몰라서 쭉쭉 넘겼습니다.

설치가 다되고 나서 재부팅되면서 아래 화면이 떴습니다. Proxmox VE GNU/Linux 선택했습니다.

여기까지 진입되면 성공입니다.

이제 서버컴퓨터는 여기까지 설정하면 끝입니다. 이 상태로 두면 됩니다.

Proxmox 접속하기

본 컴퓨터로 돌아가서 proxmox 서버에 접속을 시도해봅니다. 개인적으로 여기서 꽤 헤맸는데요.

proxmox 서버에서 봤던 url(https://192.168.100.2:8006/)로 접속하면 무한 로딩을 돌다가 timeout이 났습니다.

서버컴퓨터로 다시 돌아가 firewall 방화벽도 비활성화 해보고,

서버 컴퓨터에 LAN 선을 다시 꽂고 재기동 해봤지만 여전히 ping이 찍히지 않고 실패했었습니다.

이 문제는 공유기에서 고정 서버 컴퓨터를 고정 IP를 할당하는 것으로 문제가 해결되었습니다.

저는 iptime 공유를 사용하기 때문에 iptime 공유기 설정에서 고정 IP를 할당했습니다.

드디어 연결에 성공했습니다!

vite 빌드 case 에러와 html2pdf.js 버전 오류

Kwangkki — Sat, 11 Jan 2025 13:49:39 +0900

오전까지만 해도 잘 되던 빌드가 오후에 갑자기 에러가 발생했고 이것을 해결하는 과정을 타임라인에 따라 정리했다.

1. vite 빌드 시 case 에러

빌드 중 에러 발생

머지 후 CICD가 잘 돌다가 갑자기 에러가 발생했다.

[vite:esbuild-transpile] Transform failed with 1 error:

ERROR: Unexpected "case"

분명 로컬에서 빌드할 때는 에러가 발생하지 않았는데 말이다.

일단 CICD가 도는 yml 파일의 명령어를 체크해봤다.

//bitbucket-pipelines.yml
...
 script:
    - npm install -g pnpm@9.1.1 && pnpm install && pnpm run build-dev
...

빌드 될 때마다 pnpm 9.1.1 버전을 설치하고 pnpm install 하는데,

로컬에서 pnpm install 했더니 이제 같은 에러가 발생한다.

pnpm install 후 에러가 발생하니 버전 충돌 문제가 예상되었다.

2. html2pdf.js 다운그레이드

버전 문제인 것 같아 gpt에 package.json을 첨부해서 물어봤다.

그랬더니 뜬금없이 html2pdf.js를 다운그레이드 해보라는 것.

cursor에 내장된 gpt chat

도대체 왜 다운그레이를 하라는 거지? html2pdf.js 깃허브를 찾아가봤다.

깃허브에 떡하니 경고 문구가 있었다. 0.10.x 버전을 사용하지 말고 0.9.3 버전을 사용하라는 경고다.

우리는 0.10.2 버전으로 사용하고 있었다.

0.9.3 버전으로 다운그레이드 후 빌드를 다시 돌려 봤다.

이번엔 조금 다른 에러 메세지가 생겼다.

jsPDF - PDF Document creaion from JavaScript

새로운 에러가 추가되었다.

3. jsPDF 버전 업

html2pdf.js 라이브러리의 의존성 라이브러리 중에 jsPDF가 있는데,

html2pdf.js를 0.9.3버전으로 다운그레이드 하면서 jsPDF의 버전(1.4.x 버전)도 확 낮아졌는데 그것이 문제가 되는 것 같았다.

그래서 overrides로 jsPDF의 버전만 올려 봤다.

//package.json
 "devDependencies": {
		...
  },
  "overrides": {
    "jspdf": "2.5.2"
  }

기존 package-lock.json을 삭제하고 다시 install 해서 jspdf 버전업이 잘 적용되었다.

//package-lock.json
 "html2pdf.js": {
      "version": "0.9.3",
      "resolved": "<https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.9.3.tgz>",
      "integrity": "sha512-M254g3Z+ZsjtQFDxJlU6E8Zgb8xOpCBQQM1lFPn4Lq+myAdWoYtMFnwlVo/eOI9R1cG75+YmMSDQofkugwOV/Q==",
      "requires": {
        "es6-promise": "^4.2.5",
        "html2canvas": "^1.0.0-alpha.12",
        "jspdf": "2.5.2"
      }
    },

그래도 여전히 빌드 에러가 발생한다.

이후 여러 테스트를 하다가

jspdf를 html2pdf.js에 의존하지 않고 따로 사용하니 잘 된다.

결국 html2pdf.js를 삭제하고 jspdf와 html2canvas만 사용해서 pdf 다운로드 기능을 구현했다.

그러고 빌드 했더니 별 문제 없이 빌드가 되었다.

4. rollup 업데이트 이슈

이렇게 빌드 에러를 해결 후,

다음날 구글을 뒤져보니 깃허브에 아래 글이 올라왔다.

https://github.com/vitejs/vite/issues/19147

Vite-6.0.7 appears to transpile `case` statements incorrectly · Issue #19147 · vitejs/vite

Describe the bug Taking the base example from StackBlitz, importing js2pdf-2.5.1 and attempting to build fails with an error about unexpected case. Output fails with the following: Error during bui...

github.com

요약하자면,

나와 같은 빌드 에러가 발생했고 rollup을 다운그레이드하면 해결된다는 거다.

rollup은 vite에 내장된 번들러인데 이 rollup이 잘못된 버전을 업데이트 한 모양이다.

다음날 바로 rollup 새로운 버전이 업데이트됐고 정말 그 문제였나 싶어 어제와 같은 상황으로 돌아가서 테스트 해보니 에러 없이 빌드가 잘 된다.

vite의 rollup과 esbuild에 관한 설명은 아래 링크를~

https://ko.vite.dev/guide/why.html

배운점 : npm 버전 관리 이해

근데 나는 package.json을 바꾸지도 않았는데 왜 pnpm install 과정에서 rollup이 자동으로 업데이트 되었을까.

바로 package.json의 ^4.9.2 와 같이 버전 앞에 ^ (캐럿) 이 붙어있어서였다.

캐럿이 붙으면 패치 또는 마이너 레벨 업데이트 범위 내에서 업그레이드가 될 수 있다는 뜻이었다.

예를 들면 아래와 같이 작성한다면,

"rollup": "^4.5.2"

주요 버전을 뜻하는 가장 앞자리인 4가 바뀌지 않는 범위 내에서 최신 버전(4.5.7, 4.6.5)으로 설치한다는 뜻이다.

그래서 버전으로 고정하고 싶다면 ^나 ~를 붙이지 않고 기입해야한다.

“rollup”: “4.5.2”

더 자세한 글은 아래 정말 자세하게 나와있다.

https://dev.to/typescripttv/understanding-npm-versioning-3hn4

Understanding npm Versioning

In the world of software development with JavaScript and TypeScript, it is crucial to manage the...

dev.to

그동안 노드 개발하면서 이런 기초적인 것을 이제야 알았다니..

아무튼 node는 버전 문제로 꼬이는 경우가 종종있는데 버전 관리를 제대로 이해하는 계기가 되었다.

2024년을 회고합니다

Kwangkki — Wed, 1 Jan 2025 15:33:32 +0900

2024년 내 성장을 정량적이고 가시적으로 정리하고 싶었지만 이내 감성적이고 마는 나의 회고. 다른 분들의 회고를 읽으며 동기부여도 받고 생각도 넓어졌으니 보답하는 마음으로 누군가에게 영감이 되었으면 하는 마음으로 썼습니다.

2024 블로그 정산

내 블로그는 얼마나 성장했고, 어떤 게시물이 가장 인기가 많았나

2024년 총 조회수는 37,200 한달 평균 3,100의 조회수를 달성했다.

2023년에 비해 3배 높은 조회수를 달성했다. 블로그 글도 와인처럼 숙성이 되나? 농익을 수록 SEO 지수가 높아지는 느낌

대부분 구글 검색 유입이다. 효자 게시글은 자작나스 만들기와 피그마 관련 글 확실히 이론적인 글 보다는 내가 직접해보고 작성한 글이 인기가 많다.

독서 후기를 제외한 프로그래밍 관련 글은 10개. 쓰다 중단했거나 발행하지 못한 글은 5개 정도가 있다. 내 이해가 부족해서 쓰고도 무슨 말인지 모르겠는 글은 발행하지 못했다. 블로그는 내가 세운 꾸준함의 지표 같은거라 통계를 보며 뿌듯함을 느낄수도 아쉬움을 느낄수도 있다. 올해는 그 무엇도 느끼지 못했으니 평균의 꾸준함을 가진 셈친다.

WORK

MES 프로젝트 (spring)

2023 React로 만든 웹앱(PWA) 프로젝트를 마무리하고, 2024년 1월부터는 자바 조금, SQL 조금, 제이쿼리 조금 배워 스프링 기반 프로젝트에 투입됐다. 6개월 가량 프로젝트를 진행했고 깊은 이해는 못했지만 평소 궁금했던 웹의 작동 원리를 조금 이해하게 되었다. 프론트엔드만 공부해오던 나에게는 소중한 시간이었다.

배운 것들

데이터는 어디에 존재하는가.

데이터는 물리적으로 어디에 존재하는지 궁금했었는데 회사 서버 컴퓨터가 있고 SSH로 접속해 이것저것 둘러볼 기회가 많았다. PROXMOX로 서버를 가상화하고 어떤 서버에는 DB 서버를, 어떤 서버에는 node 혹은 tomcat 서버를 돌리는지, 무더운 여름 서버가 꺼지는 일, 디도스 공격으로 서버가 다운되는 일을 어깨너머 구경하며 서당개 풍월 읊듯 배워나갔다.

SCM 프로젝트 (Vue3)

하반기에는 새로 수주받은 프로젝트로 회사를 떠나 강남으로 출퇴근했다. 기획, 퍼블, 백엔드, 프론트엔드가 나누어진 전형적인 si 프로젝트에 프론트엔드 개발자로 합류했다.

프로젝트 레포지토리가 만들어지는 순간부터 끝까지 참여했기 때문에 많이 배울 수있었다. 20년차 프리랜서 분께 이것저것 많은 이야기도 들었고 가르침도 받았다. ‘단순해요’를 습관처럼 내뱉으며 최신 자바스크립트 문법과 기술 트렌드를 놓치지 않고 세련된 코드를 작성하는 모습을 보며 오래 일하는 사람은 어떤 사람인가를 알게되었다.

12월에 맞춰 마무리가 되었고 기술적인 부분, si의 업무 프로세스, 수발주 시스템(SCM ), vue3 등 많은 것을 얻었던 프로젝트였다.

사이드프로젝트

사이드프로젝트 빈도를 단순 잔디로만 본다면 보통 주말과 공휴일에 몰려있고, si 프로젝트에 참여한 뒤로 주말 출근이 잦았기에 사이드프로젝트를 진행하지 못했다. 크게는 당근북스 (사내 도서 대여 서비스), 간단한 프로그램 몇개와 스터디했던 커밋이 있다.

제대로 기획하고 시작했던 사이드프로젝트가 없었기에 아쉽다. 얼마전부터 기획하고 있는 프로젝트가 있는데 2025년에는 꾸준히 하나만 팔 예정.

2024 사이드프로젝트

독서

한 해 동안 평일 퇴근 후, 주말 아침에 독서하는 습관을 들였다. 문제는 습관이 된 후로 책을 많이 읽게 되었지만 그 외 시간에는 잘 읽히지 않는다는 거. 2023년까지만 해도 일년에 0~1 권을 읽던 사람이었고 독서에 흥미를 붙이기 위해 여러 노력을 기울인 결과 2024년은 대략 20권의 책을 독파했다.

독서로 배운 점

스스로의 가치관이 많이 유순해졌으며 세상을 보는 눈이 넓어졌다. 기대했던 어휘력은 크게 늘지 않았다. ‘가치관이 유순해졌다’는 고집스럽고 편견에 휩싸여있던 마음 혹은 생각을 내려놓았다는 뜻. 이것은 이래야해 저것은 저래야해 같은 거 말이다. 서른 쯤 되면 각 개성이 가진 성질이 뚜렷 & 또렷해지기에 주변 반응에 쉽사리 흔들리지 않고 개성을 지키게 되었는데, 이쯤 나는 더 유순 & 유려해졌기에 더 많은 것을 받아들이고 융화할 수 있게 되었다. 독서 덕분이다.

취미

유일한 취미라면 카페 찾아다니기. 맛도 뭣도 잘 모르지만 아는 척 돌아다니고 있다. 비싼 게이샤 원두를 주문했을 때 혹시 커피 일 하시냐고 사장님이 물어보기도 했다.

사진이 별로 없다.

마지막은 좋아하는 웹툰의 명대사로 마무리 한다. 살벌한 대사지만…

부지런히 목표를 세우고 실천하려고 해도 꾸준히 이어나기는 힘들다. 목표도 결과도 생각하지 않고 이루고 싶은 것을 마음 속으로 외며 붙잡아 둔다면 삶의 작은 행동들이 바뀌고 그것이 습관이되어 자연스럽게 이루지 않을까.

광마회귀

커서(Cursor) IDE 사용기

Kwangkki — Wed, 25 Sep 2024 22:28:49 +0900

gpt를 사용하다가, 코파일럿을 사용하다가 최종적으로 Cursor(커서)만 사용하고 있는 요즘. 커서의 마술 같은 성능에 놀라기도 하고 무섭기도 하고; 어쨌든 많은 도움을 받고 있는데요. 커서에게 어떤 도움을 받고 있는지 블로그로 남겨봅니다.

Cursor

간단하게 소개하자면 커서는 AI를 탑재한 IDE이며, vscode 기반이기 때문에 vscode 사용자라면 누구나 손쉽게 적응할 수 있습니다.

https://www.cursor.com/

Cursor

Built to make you extraordinarily productive, Cursor is the best way to code with AI.

www.cursor.com

사용법

사실 사용법이랄게 크게 없습니다. 대부분의 기능은 vscode와 동일하다고 보시면 됩니다. 딱 세 가지만 외우면 되는데요.

Ctrl(command) + L : 인공지능 Chat

Ctrl(command) + K : 코드 수정 기능

Tab : 자동 추천 완성

Ctrl + L

Ctrl + L 은 GPT에 질문하는 것과 같습니다. 장점은 드래그한 코드를 그대로 질문할 수 있다는 거.

그리고 다른 관련 스크립트 파일을 추가할 수 있다는 겁니다.

드래그한 코드가 Chat에 그대로 옮겨집니다.

다른 파일을 추가 참조할 수 있습니다. 이게 정말 편리해요

검색 엔진은 선택해서 사용할 수 있습니다. claude와 gpt가 제일 낫더라고요.

Ctrl + K

질문하거나 명령한 대로 코드를 직접 바꿔줍니다.

저는 이런식으로 사용하기도 합니다. 텍스트를 복사해와서 객체로 바꾸는 등.. 타이핑이 귀찮은 작업을 맡기고 있습니다.. (더 잘 활용하지 못해 미안해..)

TAB

사실 위 두개는 그렇게 많이 활용하지는 않습니다. 제가 가장 많이 활용하는 것은 커서 꽃이자 핵심! TAB 기능인데요. 커서가 코드를 추천하고, tab을 누르면 코드가 완성됩니다.

실제 활용하고 있는 예시를 몇개 보여드리겠습니다.

반복적 코드 작성에 최고

커서는 반복될 것 같은 코드는 거의 정확하게 자동완성 추천합니다. 예를들어 api 호출하는 구조를 만든들 때 아래 기본 틀을 잡습니다.

import request from '@/axios/index'

const prefixUrl = '/common/community/test'
const URL = {
  LIST: `${prefixUrl}/list`,
  DETAIL: `${prefixUrl}/detail`

}

/**
 * @param {object} data
 * @param {number} data.name - 이름
 * @param {number} data.id - 고유 번호
 * @param {string} data.title - 제목
 * @param {string} data.regDt - 등록일
 * @param {string} data.editDt - 수정일
 * @param {string} data.viewCnt - 조회수
 */


export const getTestList = async (params) => {
  const option = {
    url: URL.LIST,
    params
  }
  return await request.get(option)
}

이정도까지만 틀을 잡아주면 나머지는 커서가 대부분 해결해줍니다.

위에 list 호출하는 함수를 하나 만들었으니 이제 detail 조회 함수를 만든다고 했을 때, 리스트 함수를 기반으로 detail 함수 또한 완성해줍니다.

회색 처리는 추천이며, tab을 누르면 코드로 완성됩니다

다음은 저장하는 api를 만들어보겠습니다.

S까지 입력했는데 독심술이라도 있는지 save를 추천합니다.

tab으로 완성하고, 함수쪽으로 내려가봅니다.

벌써 대기 중입니다. 무서운놈..

심지어 get 요청이 아니라 post 요청인 것까지 캐치했습니다.

gif

함수를 다 짜주는 커서

그리고 함수명만 잘 지어도 아래처럼 코드 추천을 합니다.

아래 예시는 tree 구조로 메뉴를 만든 vue 파일인데요.

선택한 요소의 부모 폴더를 찾는 함수를 만들고 싶어 'getParentMenu'라는 함수명까지만 입력했는데 부모 폴더를 찾는 코드를 추천해주더라고요. 정말 똑똑합니다.

단점

아 근데 심각한 단점이 있습니다.

커서를 신나게 사용하다가 2주 무료 기간이 종료되어 커서 기능을 이용하지 못했는데요. 갑자기 바보가 된 느낌이었습니다. 코드를 어떻게 쳐야하는지 잠시 말문이 막히는 느낌. 함수명 지어놓고 자동완성만을 기다리는 내 모습... 커서를 많이 사용하면 아마 바보가 되고 말겁니다. 뭐든 똑같겠지만 적당히, 적절하게 잘 써야한다는 거~

pending 된 api 요청 중도 취소하기

Kwangkki — Sun, 28 Jul 2024 14:18:31 +0900

모바일 웹에서 프로젝트를 만들며 api 요청 시간이 조금 소요되는 api가 있습니다. 문제는 이 api 요청 중에 다른 페이지로 이동하면 요청이 pending 상태에 계속 머물게 된다는 것인데요.

아래 사진으로 설명해보겠습니다.

API 요청 pending

[홈]에서 요청했던 plcProduction이라는 api 요청이 다른 페이지로 이동해도 여전히 pending입니다.

이것이 왜 문제가 되냐하면, 유저가 페이지를 빠르게 여러번 이동하면 pending 요청이 쌓이게됩니다.
만약 빠르게 4번을 왔다 갔다 한다면 4개의 pending이 쌓이게 되겠죠?

이를 해결하기 위해 찾아보니 axios에서는 CancelToken을 제공한다는 것을 알았습니다.

axios CancelToken 적용

기존 api 요청 코드

// 참고로 리액트입니다!
const fetchData = async () => {
    try {
      const res = await axios.get(
        `${import.meta.env.VITE_SERVER_URL}/plcProduction`
      );
      setPlcProduction(res.data);
    } catch (error) {
      console.log(error);
    }
  };

cancelToken 적용

  const fetchData = async (source: CancelTokenSource) => {
    try {
      const res = await axios.get(
        `${import.meta.env.VITE_DB_SERVER_URL}/plcProduction`,
        { cancelToken: source.token }
      );
      setPlcProduction(res.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  useEffect(() => {
    const source = axios.CancelToken.source();

    fetchData(source);

    return () => {
      source.cancel("Component unmounted");
    };
  }, []);

특별히 어려울 것은 없지만, 중요한 것은 axios.CancelToken.source() 생성을 useEffect 내에서 해줘야 한다는 것인데요.
그래야 컴포넌트가 마운트될 때마다 새로운 토큰을 생성하기 때문입니다. 그렇지 않으면 리렌더링 되어도 cancel 상태가 적용된 토큰을 사용하게 되고, 새로운 api 요청을 하지 않게 됩니다.

결과

이제 pending 상태에서 페이지를 이동하게 되면 status가 canceled되는 것을 알 수 있다. cancel을 적용한 덕분에 db connection pool에 요청이 쌓이지 않게 됩니다.

그 외 더 다양한 방법을 알고 싶으시다면 아래 참고자료 블로그를 추천드립니다!

참고 자료

1. https://velog.io/@eunbinn/cancel-promises-javascript?utm_source=substack&utm_medium=email

[번역] 자바스크립트에서 프로미스를 취소하는 방법

보통 fetch는 signal, XHR은 abort를 사용해 요청을 취소하는데요, 일반적인 프로미스는 어떻게 취소할 수 있을까요? 이 글에서는 그 방법으로 프로미스의 결과를 폐기 또는 무시하는 방법을 설명하고

velog.io

2.
https://axios-http.com/kr/docs/cancellation

요청 취소 | Axios Docs

요청 취소 취소 토큰을 이용해 요청을 취소할 수 있습니다. Axios의 취소 토큰 API는 중단된 proposal-cancelable-promises을 기반으로 하고 있습니다. 아래와 같이 CancelToken.source 팩토리를 사용하여 취소

axios-http.com

콘웨이의 인생 게임은 어떤 소리를 만들어낼까?

Kwangkki — Sun, 16 Jun 2024 20:28:53 +0900

콘웨이 게임이라고 불리기도하는 인생 게임(Life game)을 아시나요?

1970년 <사이언티픽 아메리칸>에 처음 소개된 게임인데요. 수학자 '존 호튼 콘웨이'가 고안해낸 게임이기에 '콘웨이의 인생 게임'이라고도 부릅니다.

콘웨이의 인생 게임

이 게임의 규칙 간단합니다. 바둑판 같은 수많은 칸이 있고, 칸에 색이 칠해져있다면 살아있는 세포(Cell)이며 색이 없다면 죽은 세포입니다. 게임을 시작하면 처음 임의 칸 몇 개가 검은색으로 칠해져있고 이 1세대 세포가 규칙에 따라 다음 세대 세포로 태어나거나 죽습니다. 이 과정에서 세포는 전혀 예상치 못한 결과로 이어지기도하며 일정한 패턴을 만들기도 합니다. 자세한 규칙은 생략하고 어떤 게임인지 영상을 첨부하도록 하겠습니다.

콘웨이 게임에서 찾은 의미

콘웨이 게임은 단순간 게임을 넘어 다양한 의미로 해석되는데요. 자아복제, 삶과 죽음, 인공지능, 불완전성 원리 등과 이어지기도 합니다. 저는 그 중에서도 인류 또는 우주의 시뮬레이션과 유사하다고 느꼈습니다. 처음 게임이 시작될 때 세포가 빠르게 번식하며 화면을 모두 채울 듯이 많아졌다가 갑자기 개체 수가 줄어들다가 소멸하기도 하며 번식을 중단하고 일정 패턴만 반복하기도 합니다. 이 과정을 지켜보고 있자면 짧은 시간에 이 작은 세계의 흥망성쇠가 반복된다는 느낌을 받을 수 있습니다. 그래서 과장해서 빗대어 게임 한 번에 인류의 탄생부터 종말까지의 시뮬레이션이지 않나 싶었습니다.

급 궁금해진, 콘웨이 게임이 만들어 내는 소리

혼자 이런 망상을 하다가 그렇다면 이 인류의 탄생과 종말이 내는 소리는 어떠할지 너무 궁금해졌습니다. 그래서 다음과 같이 조금 구상해봤습니다.

1. Cell에 각각 번호를 부여한다.

2. Cell에 색이 칠해진다면(세포가 살아난다면) 해당 Cell의 번호의 헤르츠(hz)를 오디오로 출력한다.

개발 시작

1. 콘웨이 게임 공수

우선 콘웨이 게임을 깃허브에 검색해서 자바스크립트로 구성된 프로젝트를 하나 clone 받았습니다. 참고로 아래 링크인데 여러 언어로 콘웨이 게임을 만든 것을 보고 감탄했습니다.

https://github.com/conwaysgame

2. Audio 객체 생성

찾아보니 window 기능에 오디오 기능을 사용할 수 있는 API가 있었습니다.

const audioContext = new window.AudioContext()

이 API에는 파형 타입, 볼륨 설정, 주파수 설정, 소리 재생과 같은 기능을 제공하더라고요. 딱 제가 필요한 기능들로 구성되어있었습니다.

export function playSounds(frequency, duration) {
  const oscillator = audioContext.createOscillator();
  oscillator.type = "sine"; //파형 설정
  oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime); // 주파수 설정

  // 초기 볼륨 설정, 혹시 몰라 0.01 굉장히 작게 설정했음.
  const gainNode = audioContext.createGain();
  gainNode.gain.setValueAtTime(0.01, audioContext.currentTime); 

  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);

  // 소리 재생 시작
  oscillator.start();

  // 소리 재생 중지
  setTimeout(() => {
    oscillator.stop();
  }, duration);
}

3. 각 Cell 번호 부여

하나의 Cell 컴포넌트가 반복문으로 구현되었기 때문에 간단하게 id에 props로 넘겨받은 index 값을 매겨주었습니다.

징그럽지만 모든 Cell에 번호가 매겨졌습니다.

4. Cell에 색이 칠해질 때 Audio 함수 실행

Cell에 색이 칠해지는 원리는 'background color: black' css 속성을 가진 class 명(아래 사진에서는 'populated')을 동적받는 것입니다. 이 class 명은 부모 컴포넌트로 부터 props로 받습니다. 그래서 간단하게 조건문으로 props를 받을 때 Audio 함수를 실행했습니다.

class에 populated를 받으면 검은색으로 칠해진다.

// 검은색이 칠해질 때 함수 발동, 소리가 정말 많이 겹치기 때문에 0.1초 아주 짧게 소리가 나도록 설정했음
if (props.populated) {
  playSounds(props.num, 100);
}

1차 결과물

아주 기괴한 소리를 냅니다..ㅋㅋㅋ

공상과학~sound~

5. 문제점 & 디벨롭

오디오 객체 생성 문제

처음 오디오를 입히고 실행했을 때 엄청난 과부하가 일어나서 CPU가 미친 듯이 뛰었습니다. 알고보니 소리 재생 함수가 실행될 때마다 Audio 객체를 생성했기 때문이었습니다. 당장 새로운 조건문을 추가한 오디오 생성하는 함수를 따로 만들었습니다.

function createAudioContext() {
  if (!window.AudioContext) {
    throw new Error("not supported in this browser");
  }
//오디오 콘텍스트가 없을 때만 생성
  if (!audioContext) {
    audioContext = new window.AudioContext();
  }
}

더 다이내믹한 음역대(?)를 위해 주파수 간격 up

주파수 대역은 2만대까지도 사용할 수 있는데 Cell 개수는 400개였기 0~400hz만 출력하는 부분이 너무 아쉬웠습니다. 그래서 hz에 곱셈을 추가해 더 다이내믹한 주파수 출력을 구현했습니다.

 playSounds(this.props.num * 2, 100);

파형 Change 기능 추가

window.AudioContext 에는 파형 타입을 설정할 수 있는 부분이 있더라고요. 아 이거 재밌겠다 싶어서 파형을 바꾸는 기능을 추가했습니다.

// 총 4가지 종류의 파형
this.soundType = ["sine", "square", "sawtooth", "triangle"];

changeSoundType() {
	this.currentIndex = (this.currentIndex + 1) % this.soundType.length;
	this.currentSound = this.soundType[this.currentIndex];
}

최종본

https://youtu.be/a7hQCvmAucI

아 이게 인생 시뮬레이션, 세포 분열의 소리구나~ 하고 들으면 신비롭습니다. ㅋㅋ

간만에 재밌는 작업이었습니다.

프로젝트 github 주소

https://github.com/MadHeo/conway-sounds

참고 자료

책

- 행복한 프로그래밍, 임백준

유튜브

- 당신이 수학을 모르는 이유.(feat.불완전성의 원리)

- Inventing Game of Life(John Conway) - Numberphil

블로그

- https://curryyou.tistory.com/453

npm 라이브러리 등록하기, 오픈소스에 기여해 봤습니다

Kwangkki — Sat, 25 May 2024 10:35:00 +0900

한창 오픈소스 문화에 관심을 가졌을 때 무작정 npm에 라이브러리 하나를 등록했었습니다. 한국 욕설을 * 표시로 바꾸는 라이브러리인데요. 욕설 json 파일을 불러와 반복문으로 필터하는 간단한 기능입니다.

문제는 json 파일을 import하는 과정이나 라이브러리르 import하는 과정에서 module 설정을 제대로 이해하지 못해 다운로드 해도 사용할 수 없는 상태였습니다. 그렇게 방치된지 8개월이 지나고, 급! 생각나서 리팩토링 해봤습니다.

오픈소스 라이선스

제가 만든 라이브러리는 다른 오픈소스를 수정하여 재배포한 것인데요. 오픈소스라고 마구 퍼다 나를 수 있는 것은 아닙니다. 오픈소스에도 제약의 강도에 따른 라이선스가 존재하는데요. 크게 MIT, BSD, GPL 정도가 있습니다. NPM 라이브러리에도 라이선스가 모두 존재합니다.

npm 라이브러리 상세페이지에 보면 license 탭이 존재합니다.

BSD는 그 유명한 BSD 운영체제에서 비롯되었습니다. 유닉스의 횡포에 대항하던 빌 조이를 비롯한 버클리 대학생들이 만든 BSD OS 말이죠. 오픈소스 혁명의 시발점이이나 다름없기 때문에 그 의미가 남다릅니다.

GPL은 수정, 배포에 좀 더 까다로운 조건이 붙는데요. 오픈소스의 아버지라고도 불리는 리처드 스톨만이 설립한 자유소프트웨어재단에서 제창한 라이선스입니다.

이런 오픈소스 라이선스의 역사적 배경을 일일이 뜯어보면 정말 재밌는 이야기가 많습니다. 혹시 오픈소스의 역사에 대해 궁금하시다면 제가 예전에 쓴 글을 추천드립니다!
https://drakon.tistory.com/77

약간 사담처럼 되었는데요. 어쨌든, 제가 만든 라이브러리는 MIT 라이선스를 보유한 'badwords'라는 라이브러리를 베이스로 만들었습니다. MIT 라이선스는 가장 자유로운 라이선스 중 하나로 원작자의 저작권만 고지한다면 수정, 병합, 복사, 사용, 배포에 제약이 없습죠. 아 그리고 한국용 올라온 욕필터 라이브러리가 하나 더 있더라고요. 이 분의 코드도 참고 했습니다! 'badwords-ko'.

오픈소스 수정

온전한 제 창작물을 오픈소스로 만들면 가장 좋겠지만 본신 실력도 부족하거니와, 기존 오픈소스를 수정, 재창작, 디벨롭하는 것이야 말로 오픈소스 문화의 묘미이기 때문에 수정 및 재배포를 해보았습니다.

1. 필터 기능 디벨롭
기존 라이브러리에는 욕이 포함된 단어 덩어리 모두 필터가 되거나 혹은 모두 필터가 안 되는 현상이 있었습니다.

export default function TestPage() {
  const filter = new Filter();
  filter.addWords("funk");
  console.log(filter.clean("funkyou"));
  console.log(filter.clean("funk you"));
  
  filter.addWords("욕");
  console.log(filter.clean("욕입니다"));
  console.log(filter.clean("욕 입니다"));
}

콘솔 출력 결과

이 라이브러리는 처음에 isProfane 메서드로 문장에 욕이 포함되어있는지를 확인합니다. 만약 isProfance가 true를 뱉으면 다음 단계인 replaceWord 메서드로 넘어가는데요. 여기서 단어가 포함된 모든 덩어리를 *로 치환합니다. 그래서 아래와 같이 수정했습니다.

기존

replaceWord(string) {
    return string
      .replace(this.regex, '')
      .replace(this.replaceRegex, this.placeHolder);
  }

수정

replaceWord(string) {
    const filterWord = this.list.find((word) => {
      return string.match(new RegExp(word, "gi")); //정규표현식으로 단어 검색하여 리스트와 매치
    });

    if (filterWord) { // 필터된 욕이 존재하면 *로 치환
      return string.replace(
        new RegExp(filterWord, "gi"),
        this.placeHolder.repeat(filterWord.length)
      );
    } else {
      return string;
    }
  }

우선 filterWord에서 find를 욕 리스트와 match해서 해당하는 욕만을 가려냅니다. 다음 조건문에서는 필터된 단어를 *로 치환한 후 return 하게 됩니다. 핵심은 filterWord로 욕만 가려내 치환한다는 간단한 수정입니다.

2. 욕 리스트 수정
제가 왜 굳이 한국 욕 필터 라이브러리를 만들기로 마음 먹었냐하면, 제대로 된 한국 욕 리스트를 찾기 힘들었기 때문입니다. 그래서 인터넷에 공개된 욕 리스트들과 제가 생각하는 욕들을 합쳐서 새로운 리스트를 만들었습니다. 필터 기능보다 이 작업이 핵심이라 생각하고 거의 일주일 동안 욕 리스트 만드는 작업만 했더랬죠.. 물론 addwords 메서드로 욕 배열을 추가할 수 있습니다!

그 외 한국어에 맞춰 필터 메서드를 좀 더 수정한 후 배포했습니다.

아 그리고 기존 commonJS 방식의 module.export 방식을 ES6의 export default 방식으로 변경했었는데, 이런 경우 ES6의 모듈 방식을 지원하지 않는 프로젝트에서는 사용이 힘들다고 하더라고요. 이 부분은 좀 더 찾아보고 다시 바꿔볼 예정입니다.

오픈소스 배포

예전에 라이브러리 저장소를 개인 서버에서 운영하시는 분을 보고 '와 저런 방식으로도 할 수 있구나' 감탄한 적이 있었습니다. 하지만 저는 뉴비이기 때문에 npm의 저장소에 배포를 했습니다 하하

저의 경우 이미 배포된 라이브러리기 때문에 업데이트만 하면 되었습니다. 그래서 무척 간단했죠. 터미널에서 npm 로그인 후, npm publish만 입력했을 뿐..

물론, 버전업을 해줘야합니다. 저는 불안정한 상태여서 0.0.X로 배포했었는데요. 이번에 1.0.1 버전으로 정식 배포했습니다.

https://www.npmjs.com/package/badword-filter-ko

badword-filter-ko

한국 욕을 필터링 할 수 있습니다. 욕 리스트도 있습니다. 보기만 해도 어지러운 욕들입니다 . Latest version: 1.0.1, last published: 6 days ago. Start using badword-filter-ko in your project by running `npm i badword-filter-k

www.npmjs.com

오픈소스 기여

정말 간단한 프로젝트였지만 평소 동경하던 오픈소스 문화에 동참했다는 사실만으로 상당한 만족감을 느끼고 있습니다. 오픈소스 기여는 뛰어난 개발자들의 전유물이라고만 생각했었는데요. 책에서 본 어느 구절의 따뜻한 응원에 용기를 얻어 정말 보잘 것 없는 기능, 코드가 되었더라도 '해보자' 마음 먹었고, 도전 해봤습니다. 제가 받았던 응원을 공유하며 마무리. 그리고 다음 목표는 컨트리뷰션에 도전해보는 것!

<개발자 원칙> 중

개발자의 글쓰기 (김철수)

Kwangkki — Sun, 12 May 2024 13:12:20 +0900

개발자 글쓰기 강연에서 추천했던 책이었나. 잘 모르겠지만 교보문고에서 발견하고 e-book으로 구매해서 읽어봤다.

책 목차를 보면 알 수 있겠지만 일반 글쓰기 책과 다르게 개발자 맞춤 주제가 많다.

변수 네이밍, 주석 쓰기, 릴리스 노트, 에러메시지, 개발가이드, 기술 블록, 심지어 SI 제안서 작성 팁까지 담았다.

특히 상사를 고려하는 비즈니스 관점 글쓰기 부분이 인상 깊었는데, 내 상사나 비개발 부서에서는 시스템 에러나 장애를 비즈니스에 주는 영향으로 보기 때문에 그래서 이 에러는 언제 해결되는지, 이 에러로 몇명의 유저가 손해를 보는건지가 더 궁금하다는 것이다. 그렇기 때문에 이 에러의 원인을 구구절절 설명할 필요는 없으며 어떻게 보고하면 좋을지에 대한 내용인데, 전직 비개발 부서 팀원으로써 상당히 공감되는 부분이 있었다.

후기

책을 읽다 보면 저자인 김철수님이 개발자로 일하면서 정말 다양한 업무를 경험했다는 것을 알수 있다. 어쩌면, 몇몇 개발자들은 '개발자가 이런 거까지 (해야 or 알아야) 해?'라고 말할 수도 있을 만큼. 뛰어난 개발자임에 더불어 자신이 만드는 제품에 진심이기에 니 일이네, 내 일이네 구분 짓지 않는 그의 태도나 마음가짐이, 글쓰기 책임에도 불구하고 내가 이 책에서 얻은 가장 큰 부분이다. 어쩌면 이 책에서 글쓰기 방법이나 팁은 그리 중요한 부분이 아니었을지도 모르겠다는 생각이 든다.

기억에 남는 구절

'세상이 이상한 것 같지만, '가진 것이 망치뿐이면 모든 것이 못으로 보인다.(if all you have is a hammer, everything looks like a nail)." 라는 말처럼 각자 자기 위치와 입장에서 최선을 다하는 것 뿐이다. 일단 이 사실을 인정하자. 그래야 윗사람에게 장애 보고를 할 때 그들과 같은 비즈니스 관점에서 할 수 있다.'

맥북으로 우분투 부팅 USB 만들기 +usb 강제 초기화

Kwangkki — Sat, 4 May 2024 12:12:47 +0900

서버 컴퓨터에 우분투를 설치하기 위해 맥북으로 우분투 부팅 USB 만들어 봤습니다. Rufus 같은 간편한 이미지 라이팅 소프트웨어도 있지만, 터미널로 직접 이미지 파일을 가공(?)하고 USB에 넣은 과정을 공유합니다.

1. USB 포맷

우선 USB를 포맷합니다. 우분투는 4G를 넘지 않기 때문에 Format 유형을 MS-DOS(FAT32)로 했습니다.

처음에 MAC OS Extended로 포맷 후 우분투 부팅 USB로 만들었더니 우분투 설치까지는 되었으나, 실행이 되지 않아 두번째는 MS-DOS(FAT32)로 해봤습니다. (정확히 이 문제인지는 모르겠지만 MS-DOS(FAT32)로 부팅 후에는 우분투 설치에 성공했었습니다.)

2. 우분투 설치 파일 다운로드

우분투 다운로드 링크

https://ubuntu.com/download

저는 server 용도로 사용할 예정이라 server로 다운 받았습니다. 확장자는 iso로 다운됩니다.

3. 터미널에서 파일 설치한 폴더로 이동

맥북 터미널을 키고 ubuntu 파일을 다운로드한 폴더로 이동합니다. 저는 ubuntu-usb라는 폴더에 다운로드 했습니다.

4. iso파일 usb 드라이브로 변환하기

파일 경로에서 아래 명령어를 입력합니다. hdiutil은 디스크 이미지 파일을 생성하고 변환할 수 있는 기능을 제공합니다. 아래는 UDRW(UDIF read/write image)형태로 변환하는 명령어인데요. -o ubuntu.iso는 파일 이름을 ubuntu.iso로 바꾼다는 뜻입니다.

hdiutil convert -format UDRW -o ubuntu.iso ubuntu-24.04-live-server-amd64.iso

명령어를 입력하면 ubuntu.iso.dmg 파일이 생성된 것을 확인할 수 있습니다.

5. 파일 확장자 iso로 변경하기

USB 드라이브로 변환은 했지만 .dmg 확장자로 바뀌게 되었습니다. 저는 제 서버컴퓨터에 사용할 USB로 만들어야하기 때문에 확장자를 다시 iso로 변경할 필요가 있습니다. 파일명을 바꾸는 명령어를 입력합니다.

mv ubuntu.iso.dmg ubuntu.iso

최종 파일 생성 완료!

6. 맥북에 USB 연결하기

맥북에 USB를 연결하기 전, 현재 내 맥북의 disk를 체크하는 것이 좋습니다.

diskutil list

저는 현재 /dev/disk0과 /dev/disk3을 사용 중입니다.

사용중인 disk 넘버 확인

USB를 연결 후 다시 diskutil list를 확인합니다.

저 같은 경우에는 16GB의 /dev/disk4가 새로 생겼습니다. 이것이 USB disk겠죠.

7. USB unmount 하기

USB에 iso 파일을 쓰기 전에 unmount를 해줍니다.

diskutil unmountDisk /dev/disk4

만약 mount 상태에서 dd 명령어를 입력하면 다른 프로세스가 개입할 수도 있기 때문이라고 합니다. 굳히 해야하나 싶어 unmount하지 않고 쓰기 명령어를 실행했더니 FAIL 되더라고요.

unmount 하지 않고 dd 명령어 실행 시 FAIL

8. USB에 iso 이미지 파일 쓰기

unmount 했다면 USB에 iso 파일을 넣는 작업을 진행하면 됩니다. dd 명령어를 사용해서 iso 이미지 파일을 USB에 씁니다(write).

sudo dd if=./ubuntu.iso of=/dev/disk4 bs=1m

완료 되기까지 시간이 꽤 걸렸습니다. 거의 10분 정도 걸렸네요. 아래와 같이 완료 메세지가 뜨기 전까지는 차분히 기다리시 길..!

9. 마무리

diskutil list를 해보면, usb disk의 파티션 구조가 바뀐 것을 보니 제대로 쓰기가 된 것 같습니다.

제대로 쓰기가 된 것 같다면 eject하여 USB를 안전하게 제거 해줍니다.

diskutil eject /dev/disk4

이상으로 ubuntu 부팅 USB가 만들어졌습니다!

+ 부팅 USB 포맷하기

만약 우분투 USB를 다시 만들어야 한다면 USB를 초기화해야 하는데요. USB가 5.2MB로 인식되고 Erase 옵션이 적용 되지 않았습니다.

USB 파티션 구조를 인식하지 못하고 있기 때문에 일반적인 erase 옵션이 먹히지 않습니다. 이럴 때는 MBR(Master Boot Record) 옵션을 이용하면 정상적으로 포맷됩니다.

diskutil eraseDisk FAT32 USB MBR /dev/disk4

끝!

참고 자료

1. https://parkaparka.tistory.com/31

2. https://www.itmaya.co.kr/wboard/view.php?wb=tech&idx=58