EwhaKing · nyamic · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+package-lock.json
+.DS_Store
diff --git a/README.md b/README.md
@@ -1,64 +1,101 @@
 # TypeScript + Colyseus 입문 스터디 (2025)
 
-📌 운영 방식   
-	•	진행 기간: 2025년 4월 12일 ~ 6월 26일 (총 6주차)   
-	•	진행 방식: 비대면 / 매주 자료 제공 + 실습 또는 회고 / PR로 제출   
-	•	제출 기한: 각 주차 금요일에 자료 제공 → 다음 목요일 밤까지 제출   
-	•	과제 제출: 동아리 GitHub 레포에 각자 폴더 생성 후 .md 또는 코드 파일 업로드   
-	•	관리 방식: 포크 또는 브랜치 생성 후 PR 요청, 스터디장이 머지 담당   
-
-⸻
-
-📁 폴더 구조 예시
-
-ts-colyseus-study-2025/   
-├── week1/   
-│   ├── yoonad16/   
-│   │   └── reflection.md   
-│   ├── seyeong/   
-│   │   └── 실습.ts   
-├── week2/   
-│   ├── yoonad16/   
-│   │   └── reflection.md   
-...   
-
-	•	weekX는 각 주차별 과제 제출 폴더
-	•	자신의 GitHub ID나 닉네임으로 폴더 생성
-	•	.md, .ts, .js 등 자유롭게 작성 가능
-
-⸻
-
-✅ 과제 제출 방법   
-	1.	레포지토리를 포크하거나 브랜치를 생성합니다   
-	2.	주차별 폴더(weekX) 안에 본인 폴더를 생성합니다   
-	3.	실습/회고 파일을 작성하여 업로드합니다   
-	4.	커밋 후 Pull Request를 요청합니다   
-	5.	PR 제목은 아래처럼 써주세요:   
-	    •	[week1] yunatype 회고 제출   
-	6.	스터디장이 확인 후 머지합니다   
-
-⸻
-
-🧩 참여자 목록   
-
-이름 GitHub ID   
-정윤아 yoonad16   
-공세영   
-기지현   
-김혜원   
-김유리   
-박채윤   
-
-⸻
-
-🧾 기타 안내   
-	•	코드를 올릴 때는 가능하면 실행 결과 캡처나 간단한 설명도 함께 써주세요!   
-	•	PR에 질문이 있으면 코멘트로 남겨주세요.   
-	•	노션을 쓰고 싶은 분은 회고용 템플릿도 따로 공유해드릴게요. 자유롭게 선택하셔도 됩니다!   
-
-⸻
-
-감사합니다!   
-
-이번 스터디는 결과물이 중요한 게 아니라 서버와 프레임워크 개념을 내 손으로 한번 만져본다는 데 의의가 있어요.   
-부담 없이, 재미있게, 궁금한 건 바로 물어보면서 함께 해봐요 :)   
+## 📌 운영 방식
+- **진행 기간**: 2025년 4월 12일 ~ 6월 26일 (총 6주차)
+- **진행 방식**: 비대면 / 매주 자료 제공 + 실습 또는 회고 / PR로 제출
+- **제출 기한**: 각 주차 금요일에 자료 제공 → 다음 목요일 밤까지 제출
+- **과제 제출**: 동아리 GitHub 레포 각자 폴더에 `.md` 또는 코드 파일 업로드
+- **관리 방식**: 포크 또는 브랜치 생성 후 PR 요청, 스터디장이 머지 담당
+
+---
+
+## 📁 폴더 구조 예시
+
+```
+ts-colyseus-study-2025/
+├── week1/
+│   ├── 15정윤아/
+│   │   ├── .gitkeep
+│   │   └── reflection.md ← 예시 제공됨! 해당 파일을 만들어 추가하고 푸시하면 됩니다.
+│   ├── 15공세영/
+│   │   └── .gitkeep
+...
+```
+
+- `weekX`는 각 주차별 과제 제출 폴더
+- 자신의 이름 폴더 안에 `reflection.md` 또는 실습 코드 작성
+- `.gitkeep` 파일은 폴더 유지를 위한 용도입니다
+
+---
+
+## ✅ 과제 제출 방법
+
+1. 본인의 브랜치(`week1/본인이름`)로 체크아웃 (미리 생성되어 있음!)
+2. 해당 주차 폴더 → 본인 폴더 안에 `reflection.md` 파일 작성
+3. GitKraken으로 변경사항 감지 확인
+4. 변경사항 Stage → 커밋 (예: `docs: add week1 회고`)
+5. 푸시(Push) → GitHub에 브랜치 업로드
+6. PR(Pull Request) 생성
+   - PR 제목: `[week1] 15정윤아 회고 제출`
+   - PR 메시지: 간단한 요약 또는 빈칸 OK
+7. 스터디장이 확인 후 머지합니다
+
+> ❗ 브랜치와 폴더는 미리 세팅되어 있으니, 자신의 폴더에만 작성해주세요!
+
+---
+
+## 🧩 참여자 목록
+
+| 이름 | GitHub ID |
+|------|-----------|
+| 정윤아 | yoonad16 |
+| 공세영 | 7amm_0302 |
+| 김유리 | uri-git23 |
+| 김혜원 | nyamic |
+| 박채윤 | profobbb |
+| 기지현 | itisjeon94 |
+| 박서영 | sum-young |
+
+---
+
+## 📄 회고 예시 파일 (`reflection.md`)
+
+```md
+# Week 1: 서버와 프레임워크, Colyseus 구조 이해
+
+## 새로 알게 된 개념 3가지
+1. 서버는 요청을 받고 응답을 주는 역할을 한다는 것
+2. 프레임워크는 반복적인 구조를 미리 구성해둔 도구라는 것
+3. Colyseus는 Room, State, Client 구조로 실시간 게임 서버를 구성한다는 것
+
+## 헷갈렸던 부분
+- 클라이언트와 서버의 실제 작동 흐름이 머릿속에 그려지지 않음
+
+## 한 문장 요약
+Colyseus는 여러 플레이어가 공유하는 상태를 서버 중심으로 효율적으로 동기화해주는 프레임워크이다.
+
+## 느낀 점
+게임을 만들면서도 서버를 이렇게 직접 다뤄볼 기회가 많지 않았는데, 이번에 흐름을 이해해보는 계기가 됐다!
+```
+
+---
+
+## 🛠️ GitKraken으로 과제 제출하는 방법
+
+1. GitKraken 실행 → 좌측 상단에서 레포 열기
+2. 좌측 브랜치 목록에서 본인 브랜치(`week1/이름`) 선택 (더블클릭으로 체크아웃)
+3. Finder에서 `week1/이름/` 폴더 열고 `reflection.md` 파일 작성/수정
+4. GitKraken 돌아와서:
+   - 변경사항 자동 감지됨
+   - Stage All → 커밋 메시지 작성 (예: `docs: add 회고 week1`)
+   - Commit → Push 버튼 클릭
+5. 우측 상단 “Create Pull Request” 클릭 → GitHub에서 PR 생성
+
+> 📌 머지 전까지는 본인 브랜치 안에서 계속 수정 가능해요! 
+
+---
+
+감사합니다! 
+> 이번 스터디는 결과물이 중요한 게 아니라 **서버와 프레임워크 개념을 내 손으로 한번 만져본다**는 데 의의가 있어요. 
+> 부담 없이, 재미있게, 궁금한 건 바로 물어보면서 함께 해봐요 :)
+
diff --git a/week1/.DS_Store b/week1/.DS_Store
diff --git a/week1/15 공세영/.gitkeep b/week1/15 공세영/.gitkeep
diff --git a/week1/15 공세영/reflection.md b/week1/15 공세영/reflection.md
@@ -0,0 +1,46 @@
+# WEEK 01 : 서버, 클라이언트, 프레임워크의 이해 / Colyseus 맛보기
+
+
+## 배운 것 요약
+
+1. 서버(Server)
+서빙 - 제공자, 요청에 응답하는 쪽
+용도 다양(게임, 웹, DB, 프록시, 메일, 앱...etc)
+
+2. 클라이언트(Client)
+갑, 요청하는 쪽. a.k.a 프론트엔드
+
+>> Web Browser(Firefox, Chrome, etc) ⇄ Web Server(Apache, Nginx, etc) ⇄ PHP Engine
+Client - Web Browser : 요청을 HTML로 보내고 받은 HTML를 렌더링
+Server - Web Server : HTML 받으면 그대로 제공 / PHP 파일이면 엔진에게 하청 넣음.
+PHP Engine : PHP 파일 읽고 OS 무관 요청 처리 후 HTTP(정적)로 서버에게 올림.
+
+3. 프레임워크 vs 라이브러리
+Framework - 이미 만들어진 뼈대에 내가 맞춤, 프레임워크가 내 코드를 읽음(호출?)
+Library - 필요할 때 꺼내 쓰는 레토르트 공구, 코드에 넣고 호출하면 됨.
+>> 건축 설계도 vs 도구 상자라고 보면 된다.
+
+4. Colyseus
+- 프레임워크, Room이라는 개념을 사용.
+룸으로 인스턴스를 생성한다는 것으로 미루어 보아 객체지향 설계 구조체인 듯.
+>> 자바 Object/Class와 비슷한? 추상 클래스?
+- State Synchronisation : 서버-클라이언트 동기화로 무결성/일관성 유지
+- 확장이 용이하고 클라우드 서비스 제공.
+
+
+## Questions
+1. React 같은 JS 프레임워크를 이용하면 Web Browser, 즉 클라이언트/프론트엔드 쪽에서 동적으로 HTML을 이용할 수 있다.
+그럼 이제 PHP나 PHP engine은 필요성을 잃은 건가 궁금함.
+
+2. Colyseus = 실시간 / 멀티플레이어 게임 / 서버 / 프레임워크
+그래서 언어 뭐 쓴다는 건지 모르겠음.
+>> 찾아보니 Node.js 환경에서 동작하므로 TypeScript(추천), JavaScript(가능, 근데 경우에 따라 불리할 수 있음.) 
+>> 클라이언트는 그냥 엔진 따라 언어 달라짐. 당연함. Colyseus는 서 버 엔 진 이 니 까.
+
+
+## 주저리
+정통공 일부의 빅픽쳐를 다시 본 기분.
+서버는 항상 클라우드 서비스 이용하거나 호스팅 받았는데 직접 건드려 볼 기회가 생겨서 기대가 됩니다.
+웹사이트 만들겠다고 500원 내고 호스팅 받던 게 어제 같은데...... 실제로도 어제네요.
+Colyseus가 무료 호스팅을 제공하면 수익은 어떻게 내는 건지 좀 신기.
+>> 찾아보니 프레임워크만 오픈소스로 제공하고 클라우드 쓰려면 플랜 결제해야 하는 것이었음. 당연함.
diff --git a/week1/15 기지현/.gitkeep b/week1/15 기지현/.gitkeep
diff --git a/week1/15 기지현/reflection.md b/week1/15 기지현/reflection.md
@@ -0,0 +1,34 @@
+# 1. 새로 알게 된 개념 3가지
+
+1. 서버-클라이언트 관계
+    1. 서버 : 제공자, 클라이언트 : 요청자 의 관계
+    2. 클라이언트 sw : 클라이언트 머신 위에서 동작하는 sw
+    3. 서버 sw : 서버머신에서 구동하는 프로그램들
+2. 서버란? 
+    1. 네트워크를 통해 서비스를 제공하는 것
+    2. 웹 서버, 메일 서버, 게임 서버, 프록시 서버 등이 존재 (서비스명 + 서버)
+    3. 운용형태에 따라 : 온프레미스 / 클라우드 (AWS, GCP, Azure)
+3. PHP (server side script) 
+    1. php를 이해하기 위해, html을 알아야 한다. 
+    2. web client → web server로 (ex)topic.php를 전달하면, web client 측에서 이를 해석할 수 없기에 php engine이 대신 동작한다… 이런 개념. 
+    3. CGI(common gateway interface)  : web server 와 php engine 사이의 통신규약(약속) 
+4. 프론트엔드 백엔드
+    1. 고객 - client = front end - server=back end
+5. 라이브러리와 프레임워크
+    1. 라이브러리 : 내가 필요할 때 쓰는 것. 
+    2. 프레임워크 : 가 나를 부름. (나에게 규칙을 정할 권한이 없다.) (ex.django)
+    3. 리액트는 라이브러리도, 프레임워크도 될 수 있다.
+        1. 라이브러리일 때 : 나의 애플리케이션의 UI를 빌드할 때, 리액트를 부른다면 이때는 라이브러리
+        2. 프레임워크일 때 : 리액트가 우리의 컴포넌트를 부를 때 
+
+# 2. 헷갈렸던 부분
+
+api 문서를 읽는 방법 : 요청 + 응답 이라는 부분이 확실하게 와닿지 않음. 
+
+# 3. 한 문장 요약
+
+서버-클라이언트의 관계성, 비전공자도 알아야 하는 api 문서, 프론트엔드와 백엔드, 라이브러리와 프레임워크. 
+
+# 4. 느낀 점
+
+서버와 클라이언트의 개념에 대해 공부해볼 수 있었다. 추상적으로 알고 있던 개념을 구체적으로 배워볼 수 있어 유익했고, 프론트엔드와 백엔드라는 단어의 뜻을 새롭게 알 수 있었다.
diff --git a/week1/15 김유리/.gitkeep b/week1/15 김유리/.gitkeep
diff --git a/week1/15 김혜원/.gitkeep b/week1/15 김혜원/.gitkeep
diff --git a/week1/15 김혜원/reflection.md b/week1/15 김혜원/reflection.md
@@ -0,0 +1,19 @@
+# week1 : Server, Framework, Colyseus
+
+## 기본 개념
+1. 서버 = 클라이언트의 요청에 대한 서비스 제공
+2. 클라이언트 = 서비스 요청
+3. 프레임워크 = 개발 템플릿 소프트웨어
+   -Colyseus = 실시간 멀티 플레이어 게임 서버를 쉽게 만들 수 있게 해주는 프레임워크
+
+
+## 알게 된 점
+1. 서버와 클라이언트의 관계와 서버 소프트웨어의 역할에 대해 알게 됨.
+2. 서버의 물리적인 모습은 컴퓨터이나 특정 컴퓨터에게 네트워크를 통해 요청을 받고 응답을 하게 만든 것임을 알게 됨.
+3. 개발자가 라이브러리를 불러오는 반면 프레임워크는 프레임워크의 규칙을 개발자가 따라야 함
+
+
+## 느낀 점
+1. 서버, 프레임워크, 라이브러리 등 평소에 많이 쓰거나 들은 단어이지만 그 이름과 작동을 명확히 알 수 있어서 도움이 되었다.
+2. 프레임워크의 규칙을 따라 템플릿과 컨트롤러 등을 넣는다는 부분이 구체화되지 않아 이해가 어려웠다.
+
diff --git a/week1/15 박서영/.gitkeep b/week1/15 박서영/.gitkeep
diff --git a/week1/15 박서영/reflection.md b/week1/15 박서영/reflection.md
@@ -0,0 +1,42 @@
+# Week1: 서버, 프레임워크, 및 Colyseus 입문
+
+## 1. 새로 알게된 점
+
+- 서버 소프트웨어: 서버가 구동하는 부분
+                예: Apache, My SQL, PHP 등이 존재
+
+    - 서버의 종류: 온프레미스(on-premise), 클라우드
+        - 온프레미스(on-premise): 스스로 설비를 보유하여 시스템을 운용관리함
+        - 클라우드: 다른 사업자가 보유한 설비로 시스템을 운용관리    예: AWS, GCP, Azure
+
+- PHP: 서버 스크립트 언어. html과는 다르게 ~~.php의 url로 서버에 요청한다면, 
+       서버에서 바로 처리할 수 없음 (html은 바로 처리 가능), PHP 엔진 호출 후 처리
+
+    - 서버의 기술 (구분되는 느낌):
+        - Apache, IIS
+        - PHP, python, Java
+        - My SQL, Oracle (아마 데이터베이스?)
+
+- 서버 개발자: 
+    - 서버의 목적: 24시간 365일 안정적으로 서버를 구동하는 것
+    - 리눅스 => 인기있는 서버 올리는 OS
+        - 리눅스 OS는 다양한 언어를 지원하지 않지만, 자바처럼 파이썬, 자바스크립트, 루비 등 이용가능.
+
+- API 문서: 프로그램의 특정 기능이 어떻게 작동하는지 정리하는 문서
+
+- 프레임워크 vs 라이브러리
+    라이브러리는 개발자가 필요에 의해 호출하여서 사용하는 것을 말하고, 반대로 프레임워크는 호출을 당해서 프레임워크의 규칙에 따라야함. 하지만, 이 구분이 항상 명확한 것은 아님.
+
+- Colyseus: Colyseus는 JavaScript/TypeScript/Node.js를 사용해 직접 멀티플레이어 게임서버를 쓸 수 있는 프레임워크. 
+            => 선호하는 프론트엔드/게임엔진과 쉽게 합칠 수 있음
+## 2. 헷갈렸던 부분
+
+    Apache랑 PHP의 차이점이나 다른게 무엇인지, 그리고 프레임워크의 개념에 대해서 헷갈리고 이해가 어려운 부분이 있었습니다. 넓은 관점으로 서버의 동작을 파악하는 것이 쉽지 않았습니다.
+
+## 3. 한 문장 요약
+
+    서버라는 개념과 서버를 이루는 다양한 요소들에 대해서 학습하고 파악할 수 있었습니다.
+
+## 4. 느낀점
+
+    웹 서버라는 단어는 익숙했는데, 생각해보니 게임에서도 정말 서버가 필요한 것 같아서 흥미로웠고, Colyseus에 대해 더 알아보고 싶어졌습니다. 몇 번 들었던 단어들/개념들이 무엇인지 정확하게 알게되어서 좋았습니다!
diff --git a/week1/15 박채윤/.gitkeep b/week1/15 박채윤/.gitkeep
diff --git a/week1/15 박채윤/reflection.md b/week1/15 박채윤/reflection.md
@@ -0,0 +1,15 @@
+#Week 1: 서버와 프레임워크, Colyseus 구조 이해
+
+## 새로 알게 된 개념 3가지
+1. 서버와 클라이언트의 관계와 서버 소프트웨어의 역할에 대해 알게 됨.
+2. 서버의 물리적인 모습은 컴퓨터이나 특정 컴퓨터에게 네트워크를 통해 요청을 받고 응답을 하게 만든 것임을 알게 됨.
+3. 개발자가 라이브러리를 불러오는 반면 프레임워크는 프레임워크의 규칙을 개발자가 따라야 함
+
+## 헷갈렸던 부분
+프레임워크의 규칙을 따라 템플릿과 컨트롤러 등을 넣는다는 부분이 구체화되지 않아 이해가 어려움
+
+## 한 문장 요약
+Colyseus는 실시간 멀티 플레이어 게임 서버를 쉽게 만들 수 있게 해주는 프레임워크이다.
+
+## 느낀 점
+서버, 프레임워크, 라이브러리 등 평소에 많이 쓰거나 들은 단어이지만 그 이름과 작동을 명확히 알 수 있어서 도움이 되었다.
diff --git a/week1/15 정윤아/.gitkeep b/week1/15 정윤아/.gitkeep