🌳 언어 계통도 & 연결 구조 — Python·JS·C·WASM 한눈에 보기 | 코딩스타랩 Part 7-1

안녕하세요 코러입니다 😊
오늘은 “언어는 왜 이렇게 많고, 서로 어떻게 이어질까?”를 한 번에 정리합니다. Python → JavaScript → C로 이어지는 뿌리와, 브라우저/Node 런타임, 그리고 WebAssembly(WASM)까지! 이 지도를 이해하면 앞으로 배우는 모든 기술의 위치가 선명해져요.

1️⃣ 큰 숲: 언어 계통도의 빠른 지도

결론: “C는 뿌리, JS는 웹의 언어, Python은 사고력/AI, WASM은 성능 다리.”

2️⃣ 연결 구조: “언어 ↔ 런타임 ↔ 플랫폼”

🧠 포인트: 언어는 혼자가 아니고 “어디에서 실행되는가(런타임)”가 함께 따라다녀요.

3️⃣ JS의 두 얼굴: 브라우저 vs Node

• 브라우저 JS: DOM 제어, 이벤트, Canvas/웹 API 사용
• Node.js: 파일·네트워크·서버, 빌드 도구, 패키지 관리(npm)

// 브라우저: 화면 글자 바꾸기
document.body.innerText = "Hello in Browser";

// Node: 파일 만들기
const fs = require("fs");
fs.writeFileSync("hello.txt","Hello from Node");

같은 JS라도 “플랫폼 권한”이 달라서 가능한 일이 달라요.

4️⃣ Python ↔ JS ↔ C가 만나는 다리: WebAssembly

WASM은 브라우저 속 가상 CPU 같은 존재. C/C++/Rust로 만든 고성능 코드를 웹에서 돌릴 수 있게 해요. 게임 엔진·물리 연산·이미지 처리 같은 무거운 작업에 쓰여요.

5️⃣ “언어 선택”의 진짜 기준

1. 결과가 어디서 돌아가야 하나? (웹/모바일/PC/서버)
2. 속도가 얼마나 필요한가? (JS vs WASM/네이티브)
3. 팀/생태계는 어디에 많은가? (라이브러리/튜토리얼/도구)

📘 다음 단계 예고

다음 Part 8에서는 브라우저 이벤트 루프를 파고들어 클릭·키보드·애니메이션이 동시에 부드럽게 동작하는 원리를 게임 개발 시각으로 설명합니다.