Skip to content

Commit 8c4b7c4

Browse files
jammy0903jammy0903
committed
docs: add marketing post drafts (Reddit, HN, Velog)
1 parent c85f2ec commit 8c4b7c4

3 files changed

Lines changed: 372 additions & 0 deletions

File tree

‎docs/marketing/hackernews-post.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Hacker News — Show HN Post
2+
3+
---
4+
5+
## Title (80자 이내)
6+
7+
```
8+
Show HN: CodeInsight – Visualize how C/Python/JS/Java code executes step by step
9+
```
10+
11+
## URL
12+
13+
```
14+
https://codeinsight.online
15+
```
16+
17+
## First Comment (반드시 작성 — HN 관례)
18+
19+
Hi HN, I'm the developer behind CodeInsight.
20+
21+
I built this because when I was learning C, I couldn't visualize what was happening in memory. Textbooks showed static diagrams, but I wanted to see variables being created, pointers moving, and the stack growing — in real time.
22+
23+
**What it does:**
24+
25+
CodeInsight takes code in C, Python, JavaScript, or Java and visualizes each execution step. You can see:
26+
27+
- Memory layout (Stack, Heap, BSS, DATA, TEXT segments for C)
28+
- Variable values changing in real time
29+
- Call stack frames being pushed/popped
30+
- For JavaScript: event loop, microtask/macrotask queues, prototype chains
31+
- For Java: JVM memory model
32+
33+
There are two modes:
34+
35+
1. **Lesson mode** — Pre-built curriculum with guided explanations and AI commentary
36+
2. **Playground mode** — Write your own code and watch it execute
37+
38+
**Technical details:**
39+
40+
- Frontend: React 19 + Vite + TailwindCSS + Zustand
41+
- Backend: Node.js + Fastify + Prisma + PostgreSQL
42+
- Code execution: Docker-sandboxed per-language simulators
43+
- AI: DeepSeek for step-by-step explanations
44+
- TypeScript monorepo with pnpm workspaces
45+
46+
The simulators parse code into execution traces (AST-based for lessons, Docker-sandboxed for playground). Each trace step includes line number, variable state, memory state, and output — which the frontend renders as interactive visualizations.
47+
48+
**Open source:** https://github.com/jammy0903/CodeInsight (MIT)
49+
50+
I'd love technical feedback on the visualization approach, and suggestions for what languages or concepts to add next.
51+
52+
---
53+
54+
# HN Posting Tips
55+
56+
1. **Best time:** Tuesday-Thursday, 8-10 AM EST (한국시간 밤 10시~자정)
57+
2. **Title format:** "Show HN: Name – one-line description"
58+
3. **URL은 라이브 데모로** (GitHub 말고 codeinsight.online)
59+
4. **첫 코멘트 필수** — 위 내용 바로 달기
60+
5. **기술적 질문에 빠르게 답변** — HN은 기술 깊이를 중시함
61+
6. **겸손하게** — "I built this" not "revolutionary platform"
62+
7. **투표 조작 절대 금지** — HN은 즉시 감지하고 ban함

‎docs/marketing/reddit-post.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
# Reddit Post Drafts
2+
3+
---
4+
5+
## r/learnprogramming
6+
7+
**Title:** I built a free platform that visualizes how C/Python/JS/Java code actually runs — memory, variables, and call stacks step by step
8+
9+
**Body:**
10+
11+
Hey everyone,
12+
13+
When I was learning C, the hardest part wasn't syntax — it was understanding what actually happens when code runs. What does the stack look like? Where do variables live? What's a pointer really pointing to?
14+
15+
So I built **CodeInsight** — a free platform that visualizes code execution step by step. You write code (or follow guided lessons), and it shows you exactly how memory, variables, and the call stack change at each line.
16+
17+
**What it does:**
18+
- Step-by-step execution with line highlighting
19+
- Visual memory layout (Stack, Heap, BSS, DATA, TEXT segments for C)
20+
- Variable tracking with real-time value changes
21+
- Event loop visualization for JavaScript
22+
- Prototype chain, scope chain, `this` binding for JS
23+
- JVM memory model for Java
24+
- AI explanations at each step
25+
- Quizzes after each lesson
26+
27+
**Languages:** C, C++, Python, JavaScript, Java
28+
29+
**Two modes:**
30+
- **Lesson mode** — Guided curriculum with pre-built visualizations
31+
- **Playground mode** — Write your own code and see it visualized
32+
33+
It's completely free and open source: https://github.com/jammy0903/CodeInsight
34+
35+
Live demo: https://codeinsight.online
36+
37+
I'd love to hear your feedback. What features would make this more useful for learning?
38+
39+
---
40+
41+
## r/programming
42+
43+
**Title:** CodeInsight — Open-source code execution visualizer for C/Python/JS/Java with memory layout, call stacks, and step-by-step debugging
44+
45+
**Body:**
46+
47+
I've been working on an open-source platform that visualizes how code executes at a low level. It's aimed at CS students and self-taught developers who want to understand what's actually happening under the hood.
48+
49+
**Key features:**
50+
- Real memory layout visualization (Stack/Heap/BSS/DATA/TEXT for C)
51+
- Step-by-step execution with variable tracking
52+
- JS-specific: Event loop, prototype chain, scope chain, Promise visualization
53+
- Java: JVM memory model with object references
54+
- AI-powered explanations per execution step
55+
- Interactive quizzes
56+
57+
**Tech stack:** React 19, Node.js/Fastify, PostgreSQL, Docker sandboxed execution
58+
59+
**Links:**
60+
- Live: https://codeinsight.online
61+
- GitHub: https://github.com/jammy0903/CodeInsight
62+
- MIT licensed
63+
64+
Looking for feedback on the visualization approach and feature suggestions.
65+
66+
---
67+
68+
## r/webdev
69+
70+
**Title:** I built an open-source code visualizer with React 19 — shows memory, event loops, and execution step by step
71+
72+
**Body:**
73+
74+
Side project I've been working on: **CodeInsight** visualizes how code runs, specifically targeting the "I can write code but don't understand what's happening" problem.
75+
76+
The JavaScript visualizer is probably most relevant here — it shows:
77+
- **Event loop** (call stack, microtask queue, macrotask queue)
78+
- **Scope chain** and closures
79+
- **Prototype chain**
80+
- **Promise** resolution flow
81+
- **`this` binding** in different contexts
82+
83+
Also supports C (full memory layout), Python, and Java.
84+
85+
Built with React 19 + Vite + TailwindCSS + Zustand on the frontend, Fastify + Prisma on the backend.
86+
87+
Free and open source: https://github.com/jammy0903/CodeInsight
88+
Live: https://codeinsight.online
89+
90+
Would love feedback from the community.
91+
92+
---
93+
94+
## r/cscareerquestions (optional — career angle)
95+
96+
**Title:** I built an open-source code visualization platform as a portfolio project — got feedback?
97+
98+
**Body:**
99+
100+
I've been building CodeInsight as a solo full-stack project. It visualizes code execution (C/Python/JS/Java) step by step — showing memory layout, variables, and call stacks.
101+
102+
Tech: React 19, Node.js, PostgreSQL, Docker, TypeScript monorepo
103+
104+
Before I start applying to jobs, I wanted to get feedback:
105+
1. Is this the kind of project that stands out in interviews?
106+
2. What would you add to make it more impressive?
107+
3. Any EdTech companies that might be interested in this?
108+
109+
Live: https://codeinsight.online
110+
GitHub: https://github.com/jammy0903/CodeInsight
111+
112+
---
113+
114+
# Posting Tips
115+
116+
1. **Best times to post on Reddit:** Tuesday-Thursday, 8-10 AM EST (한국시간 밤 10시~자정)
117+
2. **Don't post to all subreddits at once** — spread over 2-3 days
118+
3. **Reply to every comment** within the first 2 hours
119+
4. **Don't be overly promotional** — ask for feedback, be genuine
120+
5. **Recommended order:** r/learnprogramming (Day 1) → r/programming (Day 2) → r/webdev (Day 3)

‎docs/marketing/velog-blog-structure.md‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
# Velog 블로그 시리즈 구조
2+
3+
> 시리즈명: "코드 시각화 플랫폼을 1인 개발한 이야기"
4+
5+
---
6+
7+
## 글 1: 왜 만들었나 (스토리 + 동기)
8+
9+
### 제목
10+
`C언어 포인터가 이해 안 돼서 시각화 플랫폼을 만들어버렸다`
11+
12+
### 구조
13+
```
14+
1. 도입 — 코딩 배울 때 겪은 좌절 (공감 유도)
15+
- "int *p = &x; 이게 도대체 뭐야?"
16+
- 교과서 그림으로는 이해가 안 됐던 메모리
17+
- Python Tutor는 있는데 C 메모리까지 보여주는 건 없었음
18+
19+
2. 아이디어 — "그냥 내가 만들면 안 되나?"
20+
- 코드가 실행될 때 메모리가 어떻게 변하는지 눈으로 보여주자
21+
- 처음엔 C만 할 생각이었는데 Python, JS, Java까지 확장
22+
23+
3. 결과물 데모
24+
- 데모 GIF 삽입
25+
- 주요 화면 스크린샷 3-4장
26+
- 라이브 링크: https://codeinsight.online
27+
28+
4. 마무리
29+
- 오픈소스 공개한 이유
30+
- GitHub 링크
31+
- 다음 글 예고: "기술 스택 선택기"
32+
```
33+
34+
### 태그
35+
`#사이드프로젝트` `#1인개발` `#코딩교육` `#오픈소스` `#C언어`
36+
37+
---
38+
39+
## 글 2: 기술 선택 과정 (아키텍처)
40+
41+
### 제목
42+
`코드 시각화 플랫폼 기술 스택 — React 19, Fastify, Docker Sandbox 선택 이유`
43+
44+
### 구조
45+
```
46+
1. 전체 아키텍처 다이어그램
47+
- 모노레포 구조 (frontend / backend / shared / simulators)
48+
- 데이터 흐름: 코드 입력 → 시뮬레이터 → 실행 트레이스 → 시각화
49+
50+
2. 프론트엔드 — 왜 React 19 + Vite?
51+
- Zustand vs Redux vs Context 비교
52+
- TailwindCSS 도입 이유
53+
- React Query로 서버 상태 관리
54+
55+
3. 백엔드 — 왜 Fastify?
56+
- Express vs Fastify 벤치마크
57+
- Prisma ORM 장단점
58+
- Zod로 입력 검증
59+
60+
4. 시뮬레이터 — Docker 샌드박스
61+
- 사용자 코드를 실행하는 건 보안 지뢰밭
62+
- Docker 컨테이너 격리 전략
63+
- 메모리/CPU 제한, 타임아웃 처리
64+
65+
5. 인프라
66+
- Render 배포 (프론트 + 백엔드 + DB)
67+
- CI/CD 파이프라인
68+
- 비용: 월 $XX 수준
69+
70+
6. 마무리
71+
- 기술 스택 선택에서 배운 교훈
72+
- "처음부터 완벽할 필요 없다"
73+
```
74+
75+
### 태그
76+
`#React` `#Fastify` `#Docker` `#아키텍처` `#기술스택`
77+
78+
---
79+
80+
## 글 3: 가장 어려웠던 문제 (기술 딥다이브)
81+
82+
### 제목
83+
`사용자 코드를 안전하게 실행하기 — Docker 샌드박스 보안 삽질기`
84+
85+
### 구조
86+
```
87+
1. 문제 정의
88+
- 사용자가 "rm -rf /" 같은 코드를 보내면?
89+
- fork bomb, 무한루프, 메모리 폭탄
90+
- 실제로 뚫린 사례들
91+
92+
2. 1차 방어: 금지 패턴 (FORBIDDEN_PATTERNS)
93+
- 정규식으로 위험한 시스템 콜 차단
94+
- 32개 패턴 목록과 이유
95+
- 한계: 정규식만으로는 부족
96+
97+
3. 2차 방어: Docker 컨테이너 격리
98+
- --network none (네트워크 차단)
99+
- --memory 128m (메모리 제한)
100+
- --cpu 0.5 (CPU 제한)
101+
- --pids-limit 50 (프로세스 제한)
102+
- read-only 파일시스템 + tmpfs
103+
104+
4. 3차 방어: 타임아웃
105+
- 10초 기본 / 30초 최대
106+
- 컨테이너 강제 종료 처리
107+
108+
5. 실제 취약점 발견과 수정
109+
- 환경변수 노출 취약점 → 격리
110+
- 위험한 패턴 우회 시도 → 패턴 추가
111+
112+
6. 교훈
113+
- 보안은 다층 방어
114+
- "이 정도면 됐겠지"는 항상 틀림
115+
```
116+
117+
### 태그
118+
`#보안` `#Docker` `#샌드박스` `#코드실행` `#사이드프로젝트`
119+
120+
---
121+
122+
## 글 4: C 메모리 시각화 구현 (프론트엔드 딥다이브)
123+
124+
### 제목
125+
`Stack, Heap, BSS를 React로 그리기 — C 메모리 시각화 엔진 만들기`
126+
127+
### 구조
128+
```
129+
1. 목표
130+
- 실제 메모리 레이아웃을 가능한 정확하게 표현
131+
- 변수 생성/소멸 애니메이션
132+
- 포인터 화살표 연결
133+
134+
2. 데이터 구조 설계
135+
- 실행 트레이스 JSON 스키마
136+
- 각 스텝의 메모리 스냅샷 구조
137+
138+
3. 렌더링 구현
139+
- Stack 프레임 → 아래에서 위로 쌓기
140+
- Heap 블록 → 동적 배치
141+
- 포인터 → SVG 화살표 (ArrowLayer)
142+
- 값 변경 → Framer Motion 애니메이션
143+
144+
4. 어려웠던 점
145+
- 화살표 경로 계산 (겹침 방지)
146+
- 배열 인덱스 시각화
147+
- 반응형 레이아웃
148+
149+
5. 결과물
150+
- 스크린샷/GIF 삽입
151+
- 코드 스니펫 핵심 부분만
152+
```
153+
154+
### 태그
155+
`#React` `#시각화` `#SVG` `#C언어` `#메모리`
156+
157+
---
158+
159+
## 글 5: JavaScript 이벤트 루프 시각화 (선택)
160+
161+
### 제목
162+
`이벤트 루프를 눈으로 보여주는 시각화를 만들었다`
163+
164+
### 구조
165+
```
166+
1. 이벤트 루프가 어려운 이유
167+
2. 시각화 설계 (Call Stack, Microtask Queue, Macrotask Queue)
168+
3. Promise, setTimeout 실행 순서를 애니메이션으로
169+
4. 구현 핵심 코드
170+
5. 데모 + 피드백
171+
```
172+
173+
---
174+
175+
# 포스팅 전략
176+
177+
| 순서 | 글 | 목적 | 예상 반응 |
178+
|------|-----|------|----------|
179+
| 1번 | 왜 만들었나 | 공감 + 유입 | 가장 넓은 독자층 |
180+
| 2번 | 기술 스택 | 개발자 신뢰 | 기술 토론 |
181+
| 3번 | 보안 삽질 | 바이럴 | "이거 진짜 겪어봐야 아는" 공감 |
182+
| 4번 | 시각화 구현 | 포트폴리오 | 면접에서 링크 가능 |
183+
| 5번 | 이벤트 루프 | SEO | "이벤트 루프" 검색 유입 |
184+
185+
### 팁
186+
- **1편을 가장 먼저** — 스토리 글이 가장 공유가 잘 됨
187+
- **일주일 간격** — 너무 빨리 올리면 묻힘
188+
- **각 글 상단에 시리즈 링크** 넣기
189+
- **댓글에 적극 답변** — velog 알고리즘 노출 도움
190+
- **태그는 5개 이내** — 너무 많으면 스팸으로 보임

0 commit comments

Comments
 (0)