Skip to content

Commit 28d1ef0

Browse files
Seungwoo321Seungwoo321
authored
Merge pull request #2 from Seungwoo321/develop
fix: 고급 스테이지 6,7,8 하드코딩 색상 제거 및 일관성 개선
2 parents 0fa2c34 + 873cd69 commit 28d1ef0

File tree

276 files changed

+62708
-3501
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

276 files changed

+62708
-3501
lines changed

‎.github/workflows/accessibility.yml‎

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,25 @@ jobs:
1111
runs-on: ubuntu-latest
1212

1313
steps:
14-
- uses: actions/checkout@v3
14+
- uses: actions/checkout@v4
1515

1616
- name: Setup Node.js
17-
uses: actions/setup-node@v3
17+
uses: actions/setup-node@v4
1818
with:
1919
node-version: '20'
2020

21+
- name: Install pnpm
22+
uses: pnpm/action-setup@v2
23+
with:
24+
version: 10.11.0
25+
2126
- name: Install dependencies
22-
run: |
23-
cd apps/playground
24-
npm ci
27+
run: pnpm install
2528

2629
- name: Build application
2730
run: |
2831
cd apps/playground
29-
npm run build
30-
31-
- name: Install accessibility tools
32-
run: |
33-
npm install -g @axe-core/cli
34-
npm install -g pa11y
35-
36-
- name: Start server
37-
run: |
38-
cd apps/playground
39-
npm run start &
40-
sleep 10
41-
42-
- name: Run axe accessibility tests
43-
run: |
44-
axe http://localhost:3000 --tags wcag2aa,wcag21aa --exit
45-
46-
- name: Run pa11y color contrast tests
47-
run: |
48-
pa11y http://localhost:3000 --standard WCAG2AA --reporter cli
32+
pnpm build
4933
5034
- name: Check specific color combinations
5135
run: |
@@ -54,9 +38,7 @@ jobs:
5438

5539
- name: Upload accessibility report
5640
if: always()
57-
uses: actions/upload-artifact@v3
41+
uses: actions/upload-artifact@v4
5842
with:
59-
name: accessibility-report
60-
path: |
61-
apps/playground/accessibility-report.json
62-
apps/playground/color-contrast-report.json
43+
name: color-contrast-report
44+
path: apps/playground/color-contrast-report.json

‎README.md‎

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,49 @@ PenguinJS는 JavaScript의 복잡한 개념들을 직관적이고 재미있는
2222
## 🎯 학습 게임 목록
2323

2424
### 기초 개념
25-
1. 🐸 **Closure Cave** - 클로저와 스코프 체인
26-
2. 📚 **CallStack Library** - 함수 호출 스택과 실행 순서
27-
3. 🌳 **Scope Forest** - 스코프 체인과 변수 접근
28-
4. ⚡ **Hoisting Helicopter** - 호이스팅과 변수 선언
25+
1. ✅ **Closure Cave** - 클로저와 스코프 체인 *(구현 완료)*
26+
2. ✅ **CallStack Library** - 함수 호출 스택과 실행 순서 *(구현 완료)*
27+
3. 🔒 **Scope Forest** - 스코프 체인과 변수 접근 *(개발 예정)*
28+
4. 🔒 **Hoisting Helicopter** - 호이스팅과 변수 선언 *(개발 예정)*
2929

3030
### 비동기 프로그래밍
31-
5. 🎮 **Promise Battle** - Promise 상태와 비동기 처리
32-
6. 🛫 **Async Airways** - async/await와 비동기 프로그래밍
33-
7. 🎬 **EventLoop Cinema** - 이벤트 루프와 실행 순서
31+
5. ⚠️ **Promise Battle** - Promise 상태와 비동기 처리 *(기초 구조만)*
32+
6. 🔒 **Async Airways** - async/await와 비동기 프로그래밍 *(개발 예정)*
33+
7. 🔒 **EventLoop Cinema** - 이벤트 루프와 실행 순서 *(개발 예정)*
3434

3535
### 고급 개념
36-
8. 🪞 **Proxy Laboratory** - Proxy 객체와 메타프로그래밍
37-
9. 🎯 **Event Target** - 이벤트 처리와 이벤트 버블링
38-
10. 🔗 **Prototype Chain** - 프로토타입 상속과 체인
39-
11. 🎯 **This Binding Target** - this 키워드와 바인딩
36+
8. 🔒 **Proxy Laboratory** - Proxy 객체와 메타프로그래밍 *(개발 예정)*
37+
9. 🔒 **Event Target** - 이벤트 처리와 이벤트 버블링 *(개발 예정)*
38+
10. 🔒 **Prototype Chain** - 프로토타입 상속과 체인 *(개발 예정)*
39+
11. 🔒 **This Binding Target** - this 키워드와 바인딩 *(개발 예정)*
4040

4141
### 실무 기능
42-
12. 🧠 **Memory Management Museum** - 가비지 컬렉션과 메모리 최적화
43-
13. 🎪 **Destructuring Circus** - 구조분해 할당
44-
14. 🔄 **Array Methods Racing** - 배열 메서드와 함수형 프로그래밍
45-
15. 🎲 **Modules Marketplace** - 모듈 시스템과 import/export
46-
16. 🎨 **Template Literal Art** - 템플릿 리터럴과 문자열 처리
47-
17. 🔧 **Error Handling Hospital** - 에러 처리와 디버깅
48-
18. 🎯 **WeakMap/WeakSet Vault** - WeakMap/WeakSet과 메모리 관리
42+
12. 🔒 **Memory Management Museum** - 가비지 컬렉션과 메모리 최적화 *(개발 예정)*
43+
13. 🔒 **Destructuring Circus** - 구조분해 할당 *(개발 예정)*
44+
14. 🔒 **Array Methods Racing** - 배열 메서드와 함수형 프로그래밍 *(개발 예정)*
45+
15. 🔒 **Modules Marketplace** - 모듈 시스템과 import/export *(개발 예정)*
46+
16. 🔒 **Template Literal Art** - 템플릿 리터럴과 문자열 처리 *(개발 예정)*
47+
17. 🔒 **Error Handling Hospital** - 에러 처리와 디버깅 *(개발 예정)*
48+
18. 🔒 **WeakMap/WeakSet Vault** - WeakMap/WeakSet과 메모리 관리 *(개발 예정)*
49+
50+
> **범례**: ✅ 구현 완료 | ⚠️ 부분 구현 | 🔒 개발 예정
51+
52+
## 📊 구현 현황
53+
54+
### 전체 진행률
55+
- **게임 구현**: 3/18 (16.7%)
56+
- **스테이지 구현**: ~50/270 (18.5%)
57+
- **핵심 기능**: 40% 완료
58+
59+
### 기능별 구현 상태
60+
| 기능 | 상태 | 설명 |
61+
|------|------|------|
62+
| 다국어 지원 | ✅ | 한국어, 영어, 일본어, 중국어 지원 |
63+
| 다크 모드 | ✅ | 시스템 테마 연동 |
64+
| 게임 진행도 저장 | ✅ | 로컬 스토리지 기반 |
65+
| 코드 에디터 | ⚠️ | CodeMirror 적용 (Monaco 전환 예정) |
66+
| PWA 지원 | ❌ | 오프라인 지원 개발 필요 |
67+
| Web Worker 샌드박스 | ❌ | 안전한 코드 실행 환경 필요 |
4968

5069
## 🛠️ 기술 스택
5170

‎ROOT_CAUSE_ANALYSIS_GUIDE.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# 코드 기반 문제 원인 분석 가이드 (ROOT_CAUSE_ANALYSIS_GUIDE.md)
2+
3+
## 개요
4+
소프트웨어 문제의 근본 원인을 코드와 로직 분석을 통해 체계적으로 파악하는 방법론
5+
6+
## 핵심 원칙
7+
- **코드는 진실이다**: 모든 현상은 코드의 동작 결과
8+
- **추측 금지**: 실제 코드 흐름과 로직만을 근거로 분석
9+
- **시각화 우선**: 복잡한 흐름은 다이어그램으로 표현
10+
- **증거 기반**: 모든 주장은 코드 라인과 함께 제시
11+
- **독립적 검증**: 사용자의 가설을 코드로 검증하여 사실 여부 확인
12+
- **기술적 정확성**: 프로그래밍 원리에 입각한 논리적 분석
13+
14+
## 분석 프로세스
15+
16+
### 1단계: 문제 정의
17+
- 사용자가 보고한 증상 정확히 파악
18+
- 예상 동작 vs 실제 동작 명확히 구분
19+
- 문제 발생 조건 및 시나리오 확인
20+
- 사용자의 가설이 있다면 별도로 기록 (검증 대상)
21+
22+
### 2단계: 코드 흐름 추적
23+
```
24+
[진입점] → [컴포넌트/함수] → [상태 변경] → [부수 효과] → [결과]
25+
```
26+
- 데이터 흐름도 작성
27+
- 함수 호출 체인 추적
28+
- 상태 변경 시퀀스 다이어그램 작성
29+
30+
### 3단계: 핵심 코드 분석
31+
- **의존성 관계 파악**
32+
- 컴포넌트 간 props 전달
33+
- 콜백 함수 체인
34+
- 상태 관리 플로우
35+
36+
- **트리거 포인트 식별**
37+
- 렌더링 트리거 조건
38+
- 상태 업데이트 트리거
39+
- 부수 효과 실행 조건
40+
41+
- **가설 검증**
42+
- 사용자가 제시한 원인 가설을 코드로 검증
43+
- 기술적으로 불가능한 시나리오 배제
44+
- 실제 가능한 시나리오만 추적
45+
46+
### 4단계: 문제 패턴 식별
47+
- **순환 참조**: A → B → C → A
48+
- **캐스케이딩 업데이트**: 연쇄적 상태 변경
49+
- **레이스 컨디션**: 비동기 처리 충돌
50+
- **메모리 누수**: 정리되지 않은 리소스
51+
52+
### 5단계: 근본 원인 도출
53+
- 문제를 일으키는 정확한 코드 라인 특정
54+
- 해당 코드가 문제를 일으키는 메커니즘 설명
55+
- 시각적 플로우차트로 인과관계 표현
56+
- 사용자의 가설과 실제 원인 비교
57+
- 차이가 있다면 기술적 근거와 함께 설명
58+
59+
## 보고서 작성 지침
60+
61+
### 구조
62+
1. **문제 요약**
63+
- 한 문장으로 핵심 문제 정의
64+
65+
2. **코드 실행 흐름**
66+
- 시각적 다이어그램 필수
67+
- 각 단계별 코드 위치 명시
68+
69+
3. **문제 발생 메커니즘**
70+
- 정상 동작 시나리오
71+
- 문제 발생 시나리오
72+
- 차이점 분석
73+
- 증상과 원인의 인과관계 명확화
74+
75+
4. **가설 검증 결과**
76+
- 사용자 가설의 기술적 타당성 검토
77+
- 코드 실행 관점에서 가능/불가능 판단
78+
- 실제 동작과의 일치/불일치 여부
79+
80+
5. **근본 원인**
81+
- 문제 코드 위치 (파일명:라인번호)
82+
- 왜 해당 코드가 문제인지 설명
83+
- 코드 스니펫 포함
84+
- 프로그래밍 원리에 기반한 설명
85+
86+
6. **증거 제시**
87+
- 분석 과정에서 확인한 코드 동작
88+
- 객체 참조, 함수 호출 등 구체적 증거
89+
- 기술적으로 검증 가능한 사실만 포함
90+
91+
### 시각화 요소
92+
- 플로우차트: 실행 흐름
93+
- 시퀀스 다이어그램: 시간 순서 상호작용
94+
- 상태 다이어그램: 상태 변화 추적
95+
- 의존성 그래프: 컴포넌트/모듈 관계
96+
97+
## 주의사항
98+
- 로그 의존 금지: 코드 자체에서 답을 찾기
99+
- 가정 배제: "아마도", "것 같다" 표현 금지
100+
- 완전성: 문제 재현 경로 완벽히 추적
101+
- 정확성: 코드 라인 번호와 함수명 정확히 명시
102+
- 객관성 유지: 사용자 주장에 영향받지 않고 코드 사실에 기반
103+
- 기술적 논리: 프로그래밍 언어와 프레임워크의 동작 원리에 충실
104+
- 증상과 원인 구분: 로그나 에러는 증상이며, 코드가 원인임을 명확히 구분

0 commit comments

Comments
 (0)