🎯 프로젝트 소개
안녕하세요! 백엔드 개발자 취준생^^ 현영입니다.
오늘부터 JVM.js라는 프로젝트를 시작하려고 해요.
JVM.js는 브라우저에서 동작하는 Mini JVM 구현체로, Java 바이트코드를 파싱하고 실행하며, 그 과정을 실시간으로 시각화하는 교육용 도구입니다.
왜 만들게 되었나요?
1년 넘게 Java/Spring으로 백엔드 개발을 해오면서, 항상 "JVM이 내부적으로 어떻게 동작하는지" 궁금했습니다.
JVM 스터디를 하면서 이론은 배웠지만, 직접 만들어보면 훨씬 더 깊이 이해할 수 있지 않을까? 하는 생각이 들었어요.
게다가 이걸 웹에서 시각화하면:
- JVM 학습자들에게 도움이 되고
- 포트폴리오로도 의미 있고 <- 이게 크긴했어요 갑작스런 취준난이 이런 사람을 만들어요
- 면접에서도 어필할 수 있겠다!
그래서 시작하게 되었습니다.
🎮 최종 목표
실행 가능한 코드 수준
// 이 정도 코드가 실행되는 것이 목표!
// 굉장히 간단하죠?
public class FizzBuzz {
public static void main(String[] args) {
for (int i = 1; i <= 15; i++) {
if (i % 15 == 0) {
System.out.println("FizzBuzz");
} else if (i % 3 == 0) {
System.out.println("Fizz");
} else if (i % 5 == 0) {
System.out.println("Buzz");
} else {
System.out.println(i);
}
}
}
}주요 기능
-
✅ Java
.class파일 파싱 -
✅ 바이트코드 명령어 실행 (30개 이상)
-
실시간 시각화 (Stack, Local Variables, PC) <- 이것도 할 수 있음 좋겠어요
-
✅ Step-by-step 실행
-
✅ 산술연산, 조건문, 반복문, 메서드 호출 지원
-
(가능할지 모르겠지만) GC 구현
최종 화면 (목표)
┌──────────────────────┬──────────────────────┐
│ 📝 Bytecode │ 🎯 Runtime │
├──────────────────────┼──────────────────────┤
│ 0: iconst_1 ← │ Operand Stack │
│ 1: istore_1 │ ┌────────────────┐ │
│ 2: iconst_1 │ │ 1 │ │
│ 3: istore_2 │ └────────────────┘ │
│ 4: iload_2 │ │
│ 5: bipush 15 │ Local Variables │
│ 6: if_icmpgt 50 │ [1]: 1 │
│ ... │ [2]: 1 │
│ │ │
│ │ PC: 0 │
├──────────────────────┴──────────────────────┤
│ ⏯️ [Step] [Run] [Reset] │
├──────────────────────────────────────────────┤
│ 📤 Output │
│ 1 │
│ 2 │
│ Fizz │
└──────────────────────────────────────────────┘📅 4주 개발 계획
총 4주, 매일 3시간씩 투자할 계획입니다.
Week 1: 기초 설계 + Class 파일 파서 (12/09 ~ 12/15)
목표: .class 파일을 읽어서 바이트코드 추출하기
세부 일정:
-
Day 1 : 프로젝트 셋업 + JVM 스펙 조사
- GitHub 레포 생성
- 프로젝트 구조 설계 (달라질 수 있음)
- Class 파일 구조 학습
-
Day 2 : Magic Number & Version 파싱
- ArrayBuffer, DataView 학습
- CAFEBABE 읽기
- 기본 파서 틀 구현
-
Day 3: Constant Pool 파싱 (1)
- CONSTANT_Utf8
- CONSTANT_Integer
- CONSTANT_Class
-
Day 4 : Constant Pool 파싱 (2)
- CONSTANT_Methodref
- CONSTANT_NameAndType
- 기타 필요한 타입들
-
Day 5 : Method 영역 파싱
- Method 구조 파싱
- Code attribute 파싱
- 바이트코드 배열 추출
-
Day 6-7: 파서 완성 + 리팩토링
- 나머지 필드들
- 코드 정리
- 테스트 케이스 추가
산출물:
- ClassFileParser 완성
- 간단한
.class파일 파싱 성공
Week 2: Runtime Data Area + 기본 명령어 실행 (12/16 ~ 12/22)
목표: 간단한 Java 코드 실행하기
핵심 구현:
- StackFrame (Operand Stack, Local Variables)
- ThreadStack (Call Stack)
- ExecutionEngine (명령어 실행)
구현할 명령어:
- 상수: iconst_*, bipush
- 로드/스토어: iload_*, istore_*
- 산술: iadd, isub, imul, idiv, irem
- 비교/분기: if_icmp*, goto
- 증감: iinc테스트 목표:
// 이런 코드가 실행되어야 함
public class Test {
public static void main(String[] args) {
int sum = 0;
for (int i = 1; i <= 10; i++) {
sum = sum + i;
}
}
}산출물:
- Runtime 자료구조 완성
- 기본 명령어 실행 엔진
Week 3: 메서드 호출 + 시각화 시작 (12/23 ~ 12/29)
목표: 메서드 호출 지원 + UI 구현
핵심 구현:
- invokestatic (static 메서드 호출)
- ireturn, return (리턴)
- System.out.println 특수 처리
- HTML/CSS UI 구축
- 실시간 시각화 연동
테스트 목표:
public class Test {
public static int add(int a, int b) {
return a + b;
}
public static void main(String[] args) {
int result = add(5, 10);
System.out.println(result);
}
}산출물:
- 메서드 호출 동작
- 기본 UI 완성
- Step 실행 기능
Week 4: 완성도 높이기 + 문서화 (12/30 ~ 01/05)
목표: 프로젝트 완성 + 배포
작업 내용:
- FizzBuzz, Fibonacci 등 종합 테스트
- 에러 처리 개선
- README 작성
- 데모 영상 제작
- GitHub Pages 배포
- 발표 자료 준비
최종 산출물:
- 완성된 JVM.js
- 온라인 데모 사이트
- 포트폴리오용 발표 자료
🛠 기술 스택
핵심 기술
- JavaScript : 순수 JS로 구현
- React 같은 프레임워크 없이 가볍게
- 바이너리 파싱, 스택 머신 구현에 집중
- HTML/CSS: UI 및 시각화
- CSS Grid로 레이아웃
- CSS Animation으로 Stack 변화 표현
참고 문서
개발 도구
- VS Code
- Chrome DevTools
- Git/GitHub
- GitHub Pages (배포)
🎓 예상되는 어려움과 해결 방안
1. Constant Pool 파싱
어려운 점:
- 각 entry 타입마다 구조가 다름
- Index 참조가 복잡함
해결 방안:
- 타입별로 파서 함수 분리
- 단계적으로 하나씩 구현
- javap로 실제 구조 확인하며 진행
2. 메서드 호출
어려운 점:
- Stack Frame 관리
- 파라미터 전달
- 리턴값 처리
해결 방안:
- Call Stack 자료구조 명확히 설계
- 간단한 케이스부터 테스트
- 디버깅 로그 충분히 찍기
3. System.out.println
어려운 점:
- 실제로는 네이티브 메서드
- JVM.js에서는 구현 불가능
해결 방안:
- 특수 케이스로 하드코딩
- getstatic + invokevirtual 조합 감지
- 출력 배열에 추가
🚀 개발 시작!
오늘 할 일 (Day 1)
-
GitHub 레포 생성
- 레포명:
jvm.js - 설명: "Browser-based JVM implementation for educational purposes"
- MIT License
- 레포명:
-
프로젝트 구조 잡기
jvm.js/
├── src/
│ ├── parser/
│ │ ├── ClassFileParser.js
│ │ ├── ConstantPoolParser.js
│ │ └── MethodParser.js
│ ├── runtime/
│ │ ├── StackFrame.js
│ │ ├── ThreadStack.js
│ │ └── RuntimeDataArea.js
│ ├── executor/
│ │ ├── ExecutionEngine.js
│ │ └── Instructions.js
│ └── visualizer/
│ ├── Visualizer.js
│ └── Disassembler.js
├── test/
│ └── fixtures/
│ ├── Simple.java
│ └── Simple.class
├── index.html
├── style.css
└── README.md- 첫 테스트 코드 작성
// test/fixtures/Simple.java
public class Simple {
public static void main(String[] args) {
int x = 5;
}
}# 컴파일
javac test/fixtures/Simple.java
# hex dump로 구조 확인
xxd test/fixtures/Simple.class
# javap로 바이트코드 확인
javap -c -v test/fixtures/Simple.class- JVM 스펙 읽기
- Chapter 4: The class File Format
- 특히 Constant Pool 구조 집중
🔗 링크
- GitHub: github.com/현영/jvm.js
- Demo: 4주 후 공개 예정
- 시리즈: JVM.js 만들기 시리즈
💬 마치며
4주라는 시간이 짧다면 짧고 길다면 긴 시간입니다. 그 전에 취직에 성공해서 이 프로젝트를 때려칠 수 있다면 너무 좋겠어요.....
무엇보다 이 과정에서 JVM에 대한 이해가 훨씬 깊어질 것이고,
그 배움을 블로그를 통해 다른 분들과도 나눌 수 있다면 더욱 의미있는 프로젝트가 될 것 같습니다.
함께 지켜봐주시고, 응원해주세요! 🔥
다음 글 예고: Class 파일 파싱하기 - CAFEBABE의 비밀
#JVM #JavaScript #브라우저JVM #백엔드개발 #포트폴리오 #4주프로젝트 #JVM내부구조 #바이트코드
우와~~ 정말 좋은 아이디어 같아요!! 나중에 코헤 님 따라 만들어 보고 싶어요 🔥🔥 다음 글도 기대됩니다