🐈‍⬛

Zenn 데뷔: 다른 분들의 글을 참고하여 도전해보았다

に公開
GitHub
idea

venom

시작하며

せっかく韓国留学中なので韓国語バージョンも投稿してみました(●'◡'●)
모처럼 한국에 어학연수 중이니까, 한국어 버전도 만들어 봤어요(●'◡'●)

취업 준비에 열중하고 있는 저지만, 지금까지의 경험을 정리하기 위해 늦게나마 Zenn 데뷔를 했습니다(❁´◡`❁)

게시 주제는 “GitHub을 귀엽게 꾸미기”

검색해보니 “자칭 갸루라서 GitHub도 귀엽게 꾸미고 싶다‼️🥺💖”라는 멋진 글을 발견해서, 저도 바로 도전해보기로 했습니다.

그 과정과 시행착오를 기록해두었으니, 너그럽게 봐주시면 감사하겠습니다.

1. Windows + WSL에서 Bun과 GitHub 확장 기능을 세팅할 때까지의 분투기

1. PowerShell 설치

우선 전제 조건으로, 최신 PowerShell 7.5.4를 설치했습니다.
PowerShell에서 명령어를 실행하면 Windows Subsystem for Linux(WSL)를 관리하거나 Bun과 Git 등 개발 도구를 다룰 수 있습니다.

2. WSL과 Ubuntu 세팅

Bun 설치는 Linux 환경(bash)이 전제이므로, Windows에서는 WSL2가 필수입니다.

PowerShell에서 아래 명령어를 실행했지만, 처음에는 에러가 발생했습니다.

iwr https://bun.sh/install | bash

에러 내용:

WSL (10 - Relay) ERROR: CreateProcessCommon:640: execvpe(/bin/bash) failed: No such file or directory

원인은 bash 환경(Linux)이 아직 설치되지 않았기 때문입니다.
그 후 WSL을 설치합니다.

wsl --install

Ubuntu가 자동으로 다운로드·설치되며, 첫 실행 시 Unix 사용자를 생성합니다.

Create a default Unix user account: user
New password:
Retype new password:
passwd: password updated successfully

3. Bun 설치

Ubuntu에서 Bun을 설치하려고 하니, 먼저 unzip 필요라는 에러가 발생했습니다.

curl -fsSL https://bun.sh/install | bash
error: unzip is required to install bun

그래서 먼저 패키지를 업데이트하고, unzip을 설치합니다.

sudo apt update
sudo apt install unzip -y

그 후 다시 Bun을 설치합니다.

curl -fsSL https://bun.sh/install | bash

설치 확인

source ~/.bashrc
bun --version
# 1.3.3

Bun 버전이 확인되어 무사히 설치 완료되었습니다.

4. GitHub 리포지토리 클론

Windows 측 Downloads 폴더에 바로 클론하려고 하니, 아래와 같은 권한 오류가 발생했습니다.

git clone https://github.com/andex-tokyo/kawaii-github.git
error: chmod on .../.git/config.lock failed: Operation not permitted

원인은 WSL과 Windows 사이의 파일 시스템 권한 차이입니다.
해결 방법으로, 홈 디렉토리(Linux 측)에 클론하면 성공했습니다.

cd ~
git clone https://github.com/andex-tokyo/kawaii-github.git

5. Bun으로 빌드

클론 후, Bun으로 의존성을 설치합니다.

cd kawaii-github
bun install

빌드도 성공했습니다.

bun run build
# tsc(TypeScript 컴파일)가 실행됨

빌드 후 디렉토리 구조는 다음과 같습니다.

dist/
manifest.json
package.json
src/
popup.html
styles.css

6. Windows 측으로 파일 복사

WSL 홈 디렉토리에서 Windows 측으로 복사할 때는 /mnt/c/ 형식으로 경로를 지정합니다.

mkdir -p /mnt/c/Users/user/Downloads/kawaii-github-dist
cp ~/kawaii-github/manifest.json /mnt/c/Users/user/Downloads/kawaii-github-dist/
cp -r ~/kawaii-github/dist/* /mnt/c/Users/user/Downloads/kawaii-github-dist/dist/
cp ~/kawaii-github/popup.html /mnt/c/Users/user/Downloads/kawaii-github-dist/

7. Chrome 확장 기능으로 로드

마지막으로 Chrome의 “확장 프로그램” 화면에서 “패키지되지 않은 확장 프로그램 로드”로 불러오려 했지만, 여러 번 시도해도 로드되지 않았습니다.

가능한 원인:

  • manifest.json의 content_scripts나 dist 경로가 올바르지 않음
  • 복사 과정에서 파일 구조가 깨짐
  • Windows와 WSL 사이 경로 차이로 권한 문제 발생

정리 및 포인트

  1. Bun은 Linux 환경(bash)에서만 직접 설치 가능
    → Windows에서는 WSL2 + Ubuntu 필요

  2. WSL과 Windows 간 Git 사용 시, 홈 디렉토리에 클론하면 권한 오류가 적음

  3. Bun으로 빌드 후 Windows로 올바른 디렉토리 구조로 복사

  4. Chrome 확장 로드 실패 시 manifest.json 경로와 content_scripts 확인 필요

2. 시행착오 끝에…

드디어 확장 기능에 추가할 수 있었습니다!!

하지만, 어라??? 뭔가 이상하다…

게시글을 자세히 확인해보니, 이미 Chrome에서 멋지게 패키징되어 있었네요!!

지금까지의 제 수고가 대체…

하지만!! 이렇게 귀엽게 커스터마이징할 수 있게 되었습니다!!

3. 결말

“귀엽게 완성!”이라고 생각했지만, 이건 제 Chrome에서만 반영된다는 걸 깨달았습니다{{{(>_<)}}}

GitHub의 다른 사람들에게는 전혀 보이지 않네요😂
하지만 많은 것을 배울 수 있었던 좋은 경험이었습니다!

앞으로도 계속 열심히 할 거예요.

Discussion