From eaf59089141b818f27396f1e665aaf60e72945d1 Mon Sep 17 00:00:00 2001 From: yoona Date: Tue, 8 Apr 2025 15:04:55 +0900 Subject: [PATCH 01/59] add folder structure --- "week1/15 \354\240\225\354\234\244\354\225\204/.gitkeep" | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 "week1/15 \354\240\225\354\234\244\354\225\204/.gitkeep" diff --git "a/week1/15 \354\240\225\354\234\244\354\225\204/.gitkeep" "b/week1/15 \354\240\225\354\234\244\354\225\204/.gitkeep" new file mode 100644 index 0000000..e69de29 From 290fc6f98f60c0480f9d64db1b29ad3c50eee51c Mon Sep 17 00:00:00 2001 From: yoona Date: Tue, 8 Apr 2025 15:07:19 +0900 Subject: [PATCH 02/59] add folder structure for all members --- "week1/15 \352\263\265\354\204\270\354\230\201/.gitkeep" | 0 "week1/15 \352\270\260\354\247\200\355\230\204/.gitkeep" | 0 "week1/15 \352\271\200\354\234\240\353\246\254/.gitkeep" | 0 "week1/15 \352\271\200\355\230\234\354\233\220/.gitkeep" | 0 "week1/15 \353\260\225\354\261\204\354\234\244/.gitkeep" | 0 "week2/15 \352\263\265\354\204\270\354\230\201/.gitkeep" | 0 "week2/15 \352\270\260\354\247\200\355\230\204/.gitkeep" | 0 "week2/15 \352\271\200\354\234\240\353\246\254/.gitkeep" | 0 "week2/15 \352\271\200\355\230\234\354\233\220/.gitkeep" | 0 "week2/15 \353\260\225\354\261\204\354\234\244/.gitkeep" | 0 "week2/15 \354\240\225\354\234\244\354\225\204/.gitkeep" | 0 "week3/15 \352\263\265\354\204\270\354\230\201/.gitkeep" | 0 "week3/15 \352\270\260\354\247\200\355\230\204/.gitkeep" | 0 "week3/15 \352\271\200\354\234\240\353\246\254/.gitkeep" | 0 "week3/15 \352\271\200\355\230\234\354\233\220/.gitkeep" | 0 "week3/15 \353\260\225\354\261\204\354\234\244/.gitkeep" | 0 "week3/15 \354\240\225\354\234\244\354\225\204/.gitkeep" | 0 "week4/15 \352\263\265\354\204\270\354\230\201/.gitkeep" | 0 "week4/15 \352\270\260\354\247\200\355\230\204/.gitkeep" | 0 "week4/15 \352\271\200\354\234\240\353\246\254/.gitkeep" | 0 "week4/15 \352\271\200\355\230\234\354\233\220/.gitkeep" | 0 "week4/15 \353\260\225\354\261\204\354\234\244/.gitkeep" | 0 "week4/15 \354\240\225\354\234\244\354\225\204/.gitkeep" | 0 "week5/15 \352\263\265\354\204\270\354\230\201/.gitkeep" | 0 "week5/15 \352\270\260\354\247\200\355\230\204/.gitkeep" | 0 "week5/15 \352\271\200\354\234\240\353\246\254/.gitkeep" | 0 "week5/15 \352\271\200\355\230\234\354\233\220/.gitkeep" | 0 "week5/15 \353\260\225\354\261\204\354\234\244/.gitkeep" | 0 "week5/15 \354\240\225\354\234\244\354\225\204/.gitkeep" | 0 "week6/15 \352\263\265\354\204\270\354\230\201/.gitkeep" | 0 "week6/15 \352\270\260\354\247\200\355\230\204/.gitkeep" | 0 "week6/15 \352\271\200\354\234\240\353\246\254/.gitkeep" | 0 "week6/15 \352\271\200\355\230\234\354\233\220/.gitkeep" | 0 "week6/15 \353\260\225\354\261\204\354\234\244/.gitkeep" | 0 "week6/15 \354\240\225\354\234\244\354\225\204/.gitkeep" | 0 35 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 "week1/15 \352\263\265\354\204\270\354\230\201/.gitkeep" create mode 100644 "week1/15 \352\270\260\354\247\200\355\230\204/.gitkeep" create mode 100644 "week1/15 \352\271\200\354\234\240\353\246\254/.gitkeep" create mode 100644 "week1/15 \352\271\200\355\230\234\354\233\220/.gitkeep" create mode 100644 "week1/15 \353\260\225\354\261\204\354\234\244/.gitkeep" create mode 100644 "week2/15 \352\263\265\354\204\270\354\230\201/.gitkeep" create mode 100644 "week2/15 \352\270\260\354\247\200\355\230\204/.gitkeep" create mode 100644 "week2/15 \352\271\200\354\234\240\353\246\254/.gitkeep" create mode 100644 "week2/15 \352\271\200\355\230\234\354\233\220/.gitkeep" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/.gitkeep" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/.gitkeep" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/.gitkeep" create mode 100644 "week3/15 \352\270\260\354\247\200\355\230\204/.gitkeep" create mode 100644 "week3/15 \352\271\200\354\234\240\353\246\254/.gitkeep" create mode 100644 "week3/15 \352\271\200\355\230\234\354\233\220/.gitkeep" create mode 100644 "week3/15 \353\260\225\354\261\204\354\234\244/.gitkeep" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/.gitkeep" create mode 100644 "week4/15 \352\263\265\354\204\270\354\230\201/.gitkeep" create mode 100644 "week4/15 \352\270\260\354\247\200\355\230\204/.gitkeep" create mode 100644 "week4/15 \352\271\200\354\234\240\353\246\254/.gitkeep" create mode 100644 "week4/15 \352\271\200\355\230\234\354\233\220/.gitkeep" create mode 100644 "week4/15 \353\260\225\354\261\204\354\234\244/.gitkeep" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/.gitkeep" create mode 100644 "week5/15 \352\263\265\354\204\270\354\230\201/.gitkeep" create mode 100644 "week5/15 \352\270\260\354\247\200\355\230\204/.gitkeep" create mode 100644 "week5/15 \352\271\200\354\234\240\353\246\254/.gitkeep" create mode 100644 "week5/15 \352\271\200\355\230\234\354\233\220/.gitkeep" create mode 100644 "week5/15 \353\260\225\354\261\204\354\234\244/.gitkeep" create mode 100644 "week5/15 \354\240\225\354\234\244\354\225\204/.gitkeep" create mode 100644 "week6/15 \352\263\265\354\204\270\354\230\201/.gitkeep" create mode 100644 "week6/15 \352\270\260\354\247\200\355\230\204/.gitkeep" create mode 100644 "week6/15 \352\271\200\354\234\240\353\246\254/.gitkeep" create mode 100644 "week6/15 \352\271\200\355\230\234\354\233\220/.gitkeep" create mode 100644 "week6/15 \353\260\225\354\261\204\354\234\244/.gitkeep" create mode 100644 "week6/15 \354\240\225\354\234\244\354\225\204/.gitkeep" diff --git "a/week1/15 \352\263\265\354\204\270\354\230\201/.gitkeep" "b/week1/15 \352\263\265\354\204\270\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week1/15 \352\270\260\354\247\200\355\230\204/.gitkeep" "b/week1/15 \352\270\260\354\247\200\355\230\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week1/15 \352\271\200\354\234\240\353\246\254/.gitkeep" "b/week1/15 \352\271\200\354\234\240\353\246\254/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week1/15 \352\271\200\355\230\234\354\233\220/.gitkeep" "b/week1/15 \352\271\200\355\230\234\354\233\220/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week1/15 \353\260\225\354\261\204\354\234\244/.gitkeep" "b/week1/15 \353\260\225\354\261\204\354\234\244/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week2/15 \352\263\265\354\204\270\354\230\201/.gitkeep" "b/week2/15 \352\263\265\354\204\270\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week2/15 \352\270\260\354\247\200\355\230\204/.gitkeep" "b/week2/15 \352\270\260\354\247\200\355\230\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week2/15 \352\271\200\354\234\240\353\246\254/.gitkeep" "b/week2/15 \352\271\200\354\234\240\353\246\254/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week2/15 \352\271\200\355\230\234\354\233\220/.gitkeep" "b/week2/15 \352\271\200\355\230\234\354\233\220/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/.gitkeep" "b/week2/15 \353\260\225\354\261\204\354\234\244/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/.gitkeep" "b/week2/15 \354\240\225\354\234\244\354\225\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/.gitkeep" "b/week3/15 \352\263\265\354\204\270\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week3/15 \352\270\260\354\247\200\355\230\204/.gitkeep" "b/week3/15 \352\270\260\354\247\200\355\230\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week3/15 \352\271\200\354\234\240\353\246\254/.gitkeep" "b/week3/15 \352\271\200\354\234\240\353\246\254/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week3/15 \352\271\200\355\230\234\354\233\220/.gitkeep" "b/week3/15 \352\271\200\355\230\234\354\233\220/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week3/15 \353\260\225\354\261\204\354\234\244/.gitkeep" "b/week3/15 \353\260\225\354\261\204\354\234\244/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/.gitkeep" "b/week3/15 \354\240\225\354\234\244\354\225\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week4/15 \352\263\265\354\204\270\354\230\201/.gitkeep" "b/week4/15 \352\263\265\354\204\270\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week4/15 \352\270\260\354\247\200\355\230\204/.gitkeep" "b/week4/15 \352\270\260\354\247\200\355\230\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week4/15 \352\271\200\354\234\240\353\246\254/.gitkeep" "b/week4/15 \352\271\200\354\234\240\353\246\254/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week4/15 \352\271\200\355\230\234\354\233\220/.gitkeep" "b/week4/15 \352\271\200\355\230\234\354\233\220/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week4/15 \353\260\225\354\261\204\354\234\244/.gitkeep" "b/week4/15 \353\260\225\354\261\204\354\234\244/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/.gitkeep" "b/week4/15 \354\240\225\354\234\244\354\225\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week5/15 \352\263\265\354\204\270\354\230\201/.gitkeep" "b/week5/15 \352\263\265\354\204\270\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week5/15 \352\270\260\354\247\200\355\230\204/.gitkeep" "b/week5/15 \352\270\260\354\247\200\355\230\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week5/15 \352\271\200\354\234\240\353\246\254/.gitkeep" "b/week5/15 \352\271\200\354\234\240\353\246\254/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week5/15 \352\271\200\355\230\234\354\233\220/.gitkeep" "b/week5/15 \352\271\200\355\230\234\354\233\220/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week5/15 \353\260\225\354\261\204\354\234\244/.gitkeep" "b/week5/15 \353\260\225\354\261\204\354\234\244/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week5/15 \354\240\225\354\234\244\354\225\204/.gitkeep" "b/week5/15 \354\240\225\354\234\244\354\225\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week6/15 \352\263\265\354\204\270\354\230\201/.gitkeep" "b/week6/15 \352\263\265\354\204\270\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week6/15 \352\270\260\354\247\200\355\230\204/.gitkeep" "b/week6/15 \352\270\260\354\247\200\355\230\204/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week6/15 \352\271\200\354\234\240\353\246\254/.gitkeep" "b/week6/15 \352\271\200\354\234\240\353\246\254/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week6/15 \352\271\200\355\230\234\354\233\220/.gitkeep" "b/week6/15 \352\271\200\355\230\234\354\233\220/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week6/15 \353\260\225\354\261\204\354\234\244/.gitkeep" "b/week6/15 \353\260\225\354\261\204\354\234\244/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week6/15 \354\240\225\354\234\244\354\225\204/.gitkeep" "b/week6/15 \354\240\225\354\234\244\354\225\204/.gitkeep" new file mode 100644 index 0000000..e69de29 From 14328da9739af77b39bda95ccc95aa8b192f9ef8 Mon Sep 17 00:00:00 2001 From: yoona Date: Tue, 8 Apr 2025 15:15:36 +0900 Subject: [PATCH 03/59] readme.md update for task submit --- README.md | 160 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 98 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index 1160530..9bfa260 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,100 @@ # 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 | + +--- + +## 📄 회고 예시 파일 (`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 생성 + +> 📌 머지 전까지는 본인 브랜치 안에서 계속 수정 가능해요! + +--- + +감사합니다! +> 이번 스터디는 결과물이 중요한 게 아니라 **서버와 프레임워크 개념을 내 손으로 한번 만져본다**는 데 의의가 있어요. +> 부담 없이, 재미있게, 궁금한 건 바로 물어보면서 함께 해봐요 :) + From c973990aec36a933307280453b004bcf578785aa Mon Sep 17 00:00:00 2001 From: yoona Date: Tue, 8 Apr 2025 15:25:07 +0900 Subject: [PATCH 04/59] Add new member seoyeong --- "week1/15 \353\260\225\354\204\234\354\230\201/.gitkeep" | 0 "week2/15 \353\260\225\354\204\234\354\230\201/.gitkeep" | 0 "week3/15 \353\260\225\354\204\234\354\230\201/.gitkeep" | 0 "week4/15 \353\260\225\354\204\234\354\230\201/.gitkeep" | 0 "week5/15 \353\260\225\354\204\234\354\230\201/.gitkeep" | 0 "week6/15 \353\260\225\354\204\234\354\230\201/.gitkeep" | 0 6 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 "week1/15 \353\260\225\354\204\234\354\230\201/.gitkeep" create mode 100644 "week2/15 \353\260\225\354\204\234\354\230\201/.gitkeep" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/.gitkeep" create mode 100644 "week4/15 \353\260\225\354\204\234\354\230\201/.gitkeep" create mode 100644 "week5/15 \353\260\225\354\204\234\354\230\201/.gitkeep" create mode 100644 "week6/15 \353\260\225\354\204\234\354\230\201/.gitkeep" diff --git "a/week1/15 \353\260\225\354\204\234\354\230\201/.gitkeep" "b/week1/15 \353\260\225\354\204\234\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week2/15 \353\260\225\354\204\234\354\230\201/.gitkeep" "b/week2/15 \353\260\225\354\204\234\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/.gitkeep" "b/week3/15 \353\260\225\354\204\234\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week4/15 \353\260\225\354\204\234\354\230\201/.gitkeep" "b/week4/15 \353\260\225\354\204\234\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week5/15 \353\260\225\354\204\234\354\230\201/.gitkeep" "b/week5/15 \353\260\225\354\204\234\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 diff --git "a/week6/15 \353\260\225\354\204\234\354\230\201/.gitkeep" "b/week6/15 \353\260\225\354\204\234\354\230\201/.gitkeep" new file mode 100644 index 0000000..e69de29 From 802f8b83c6cf814d3dd343cdc637f5fd793f6c53 Mon Sep 17 00:00:00 2001 From: yoona Date: Tue, 8 Apr 2025 15:31:31 +0900 Subject: [PATCH 05/59] add seoyeong to member list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9bfa260..5d4fef7 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ ts-colyseus-study-2025/ | 김혜원 | nyamic | | 박채윤 | profobbb | | 기지현 | itisjeon94 | +| 박서영 | sum-young | --- From fb625a14553b7f7292f2ca121152ec20b2ebb1ac Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Wed, 16 Apr 2025 10:55:13 +0900 Subject: [PATCH 06/59] Create reflection.md --- "week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" | 1 + 1 file changed, 1 insertion(+) create mode 100644 "week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" diff --git "a/week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" "b/week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" new file mode 100644 index 0000000..8b13789 --- /dev/null +++ "b/week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" @@ -0,0 +1 @@ + From 7565025422ab2aa4788073346b04af874a6f86ba Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Wed, 16 Apr 2025 11:22:31 +0900 Subject: [PATCH 07/59] =?UTF-8?q?Delete=20week1/15=20=EA=B9=80=EC=9C=A0?= =?UTF-8?q?=EB=A6=AC/reflection.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" | 1 - 1 file changed, 1 deletion(-) delete mode 100644 "week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" diff --git "a/week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" "b/week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" deleted file mode 100644 index 8b13789..0000000 --- "a/week1/15 \352\271\200\354\234\240\353\246\254/reflection.md" +++ /dev/null @@ -1 +0,0 @@ - From a4b9d02a6989cc1ffec557ead1cf8a93f891eeeb Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Wed, 16 Apr 2025 12:54:12 +0900 Subject: [PATCH 08/59] Create reflection.md --- reflection.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 reflection.md diff --git a/reflection.md b/reflection.md new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/reflection.md @@ -0,0 +1 @@ + From bf4c359bbbc2b6490e5639f3dd04994dbfd5b2ed Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Wed, 16 Apr 2025 13:40:17 +0900 Subject: [PATCH 09/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- reflection.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/reflection.md b/reflection.md index 8b13789..c949f81 100644 --- a/reflection.md +++ b/reflection.md @@ -1 +1,22 @@ +# week1 : Server, Framework, Colyseus +## 기본 개념 +1. 서버 = 서비스(데이터 or 기능 in web) 제공 +//중앙 컴퓨터, 프로그램 +2. 클라이언트 = 서비스 요청 + 소비 +//웹 브라우저, 모바일 앱 +3. 프레임워크 = 개발 템플릿 소프트웨어 + -Colyseus = 실시간 멀티플레이어 + 오픈소스 프레임워크 + //룸 매칭, 동기화, 확장성, 클라우드 독립적 + -Node.js = Typescript 실행 환경 + + +## 알게 된 점 +1. 클라이언트가 각각 앱 실행 -> 중앙 서버 접속(based on Colyseus Framework) -> 클라이언트 쪽에서 데이터 전송 -> 서버가 데이터 가공 후 다시 클라이언트에게 전송 -> 반영 +//클라이언트 - 서버 간의 통신은 상호적 +2. 실시간 멀티플레이어 게임 = 이런 통신이 즉각적으로 이루어져야 함 +3. 일일이 코딩해야 하는 단계를 줄여주는 Framework가 Colyseus + +## 느낀 점 +1. 멀티플레이어 게임의 기본 원리에 대해 알게 되었다 +2. Colyseus는 개발자에게 편리한 환경을 제공한다 \ No newline at end of file From e51456abe29ea5062f9afeb7d2a1b245bf646545 Mon Sep 17 00:00:00 2001 From: skong302 Date: Thu, 17 Apr 2025 21:51:23 +0900 Subject: [PATCH 10/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 "week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" diff --git "a/week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" "b/week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" new file mode 100644 index 0000000..bc09583 --- /dev/null +++ "b/week1/15 \352\263\265\354\204\270\354\230\201/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가 무료 호스팅을 제공하면 수익은 어떻게 내는 건지 좀 신기. +>> 찾아보니 프레임워크만 오픈소스로 제공하고 클라우드 쓰려면 플랜 결제해야 하는 것이었음. 당연함. From 8c71d40ef4fb6c63156bf94062be0d29da8b77cd Mon Sep 17 00:00:00 2001 From: SE-YOUNG KONG Date: Thu, 17 Apr 2025 22:00:32 +0900 Subject: [PATCH 11/59] =?UTF-8?q?Delete=20week1/15=20=EA=B3=B5=EC=84=B8?= =?UTF-8?q?=EC=98=81/reflection.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 클론 안 만들고 메인에 merge&push해버린 관계로 지웁니다.... --- .../reflection.md" | 46 ------------------- 1 file changed, 46 deletions(-) delete mode 100644 "week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" diff --git "a/week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" "b/week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" deleted file mode 100644 index bc09583..0000000 --- "a/week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" +++ /dev/null @@ -1,46 +0,0 @@ -# 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가 무료 호스팅을 제공하면 수익은 어떻게 내는 건지 좀 신기. ->> 찾아보니 프레임워크만 오픈소스로 제공하고 클라우드 쓰려면 플랜 결제해야 하는 것이었음. 당연함. From 2c94b39727e829a2863870e8e32d87cd59e8ada2 Mon Sep 17 00:00:00 2001 From: skong302 Date: Thu, 17 Apr 2025 22:05:47 +0900 Subject: [PATCH 12/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 "week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" diff --git "a/week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" "b/week1/15 \352\263\265\354\204\270\354\230\201/reflection.md" new file mode 100644 index 0000000..bc09583 --- /dev/null +++ "b/week1/15 \352\263\265\354\204\270\354\230\201/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가 무료 호스팅을 제공하면 수익은 어떻게 내는 건지 좀 신기. +>> 찾아보니 프레임워크만 오픈소스로 제공하고 클라우드 쓰려면 플랜 결제해야 하는 것이었음. 당연함. From 725b0daa0e5c31aac8ef709ddbb6d6c38a6f7e86 Mon Sep 17 00:00:00 2001 From: sum-young Date: Tue, 22 Apr 2025 23:29:26 +0900 Subject: [PATCH 13/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 "week1/15 \353\260\225\354\204\234\354\230\201/reflection.md" diff --git "a/week1/15 \353\260\225\354\204\234\354\230\201/reflection.md" "b/week1/15 \353\260\225\354\204\234\354\230\201/reflection.md" new file mode 100644 index 0000000..13becee --- /dev/null +++ "b/week1/15 \353\260\225\354\204\234\354\230\201/reflection.md" @@ -0,0 +1,39 @@ +# 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에 대해 더 알아보고 싶어졌습니다. 몇 번 들었던 단어들/개념들이 무엇인지 정확하게 알게되어서 좋았습니다! \ No newline at end of file From 6cc4cf40b843c0fbbe4d88421a7b8ad8a2315372 Mon Sep 17 00:00:00 2001 From: sum-young Date: Tue, 22 Apr 2025 23:32:15 +0900 Subject: [PATCH 14/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git "a/week1/15 \353\260\225\354\204\234\354\230\201/reflection.md" "b/week1/15 \353\260\225\354\204\234\354\230\201/reflection.md" index 13becee..38782d4 100644 --- "a/week1/15 \353\260\225\354\204\234\354\230\201/reflection.md" +++ "b/week1/15 \353\260\225\354\204\234\354\230\201/reflection.md" @@ -5,35 +5,38 @@ - 서버 소프트웨어: 서버가 구동하는 부분 예: Apache, My SQL, PHP 등이 존재 - -서버의 종류: 온프레미스(on-premise), 클라우드 - ㄴ 온프레미스(on-premise): 스스로 설비를 보유하여 시스템을 운용관리함 - ㄴ 클라우드: 다른 사업자가 보유한 설비로 시스템을 운용관리 예: AWS, GCP, Azure + - 서버의 종류: 온프레미스(on-premise), 클라우드 + - 온프레미스(on-premise): 스스로 설비를 보유하여 시스템을 운용관리함 + - 클라우드: 다른 사업자가 보유한 설비로 시스템을 운용관리 예: AWS, GCP, Azure - PHP: 서버 스크립트 언어. html과는 다르게 ~~.php의 url로 서버에 요청한다면, 서버에서 바로 처리할 수 없음 (html은 바로 처리 가능), PHP 엔진 호출 후 처리 - 서버의 기술 (구분되는 느낌): - ㄴ Apache, IIS - ㄴ PHP, python, Java - ㄴ My SQL, Oracle (아마 데이터베이스?) + - Apache, IIS + - PHP, python, Java + - My SQL, Oracle (아마 데이터베이스?) - 서버 개발자: - ㄴ 서버의 목적: 24시간 365일 안정적으로 서버를 구동하는 것 - ㄴ 리눅스 => 인기있는 서버 올리는 OS - ㄴ 리눅스 OS는 다양한 언어를 지원하지 않지만, 자바처럼 파이썬, 자바스크립트, 루비 등 이용가능. + - 서버의 목적: 24시간 365일 안정적으로 서버를 구동하는 것 + - 리눅스 => 인기있는 서버 올리는 OS + - 리눅스 OS는 다양한 언어를 지원하지 않지만, 자바처럼 파이썬, 자바스크립트, 루비 등 이용가능. - API 문서: 프로그램의 특정 기능이 어떻게 작동하는지 정리하는 문서 - 프레임워크 vs 라이브러리 - : 라이브러리는 개발자가 필요에 의해 호출하여서 사용하는 것을 말하고, 반대로 프레임워크는 호출을 당해서 프레임워크의 규칙에 따라야함. 하지만, 이 구분이 항상 명확한 것은 아님. + 라이브러리는 개발자가 필요에 의해 호출하여서 사용하는 것을 말하고, 반대로 프레임워크는 호출을 당해서 프레임워크의 규칙에 따라야함. 하지만, 이 구분이 항상 명확한 것은 아님. - Colyseus: Colyseus는 JavaScript/TypeScript/Node.js를 사용해 직접 멀티플레이어 게임서버를 쓸 수 있는 프레임워크. => 선호하는 프론트엔드/게임엔진과 쉽게 합칠 수 있음 ## 2. 헷갈렸던 부분 + Apache랑 PHP의 차이점이나 다른게 무엇인지, 그리고 프레임워크의 개념에 대해서 헷갈리고 이해가 어려운 부분이 있었습니다. 넓은 관점으로 서버의 동작을 파악하는 것이 쉽지 않았습니다. ## 3. 한 문장 요약 + 서버라는 개념과 서버를 이루는 다양한 요소들에 대해서 학습하고 파악할 수 있었습니다. ## 4. 느낀점 + 웹 서버라는 단어는 익숙했는데, 생각해보니 게임에서도 정말 서버가 필요한 것 같아서 흥미로웠고, Colyseus에 대해 더 알아보고 싶어졌습니다. 몇 번 들었던 단어들/개념들이 무엇인지 정확하게 알게되어서 좋았습니다! \ No newline at end of file From 5f11e1932f4e185dba7b0de830b7bbea7d6e9f19 Mon Sep 17 00:00:00 2001 From: yoona Date: Thu, 24 Apr 2025 21:33:28 +0900 Subject: [PATCH 15/59] =?UTF-8?q?docs:=20add=20week1=20=ED=9A=8C=EA=B3=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 220 ++++++++++++++++++ 1 file changed, 220 insertions(+) create mode 100644 "week1/15 \354\240\225\354\234\244\354\225\204/reflection.md" diff --git "a/week1/15 \354\240\225\354\234\244\354\225\204/reflection.md" "b/week1/15 \354\240\225\354\234\244\354\225\204/reflection.md" new file mode 100644 index 0000000..b49d4a6 --- /dev/null +++ "b/week1/15 \354\240\225\354\234\244\354\225\204/reflection.md" @@ -0,0 +1,220 @@ +# Week1 - 서버의 개념 정리 + +## 🌐 서버(Server) + +- **제공하는 쪽**. 네트워크를 통해 서비스를 제공하는 시스템. +- 서비스의 종류에 따라 이름이 다름: 웹 서버, 메일 서버, 게임 서버, DB 서버, 파일 서버, 사운드 서버, 프록시 서버 등. +- 서버가 클라이언트의 역할(포지션)이 되기도 함. +- 일반 컴퓨터처럼 생겼지만, 대규모 서비스는 수많은 컴퓨터를 연결한 형태로 구성됨. +- **정의**: 네트워크를 통해 특정 컴퓨터에게 요청을 받고, 그에 대한 응답을 처리하도록 구성된 시스템. + +## 🛠 서버의 운용 형태 + +### 온프레미스 (On-Premise) +- 직접 설비를 보유하여 시스템을 운용·관리 +- 구축과 조달에 시간 소요됨 +- 구조를 자유롭게 구성 가능 +- 트러블 발생 시 직접 원인 파악이 쉬움 + +### 클라우드 (Cloud) +- AWS, GCP, Azure 등의 서비스 이용 +- 설비 구축 시간 거의 없음 +- 사업자가 제공하는 설비 범위 내에서만 운영 가능 +- 트러블 슈팅이 어려울 수 있음 + +--- + +## 🙋‍♀️ 클라이언트(Client) + +- **요청하는 쪽**, 서버가 제공하는 서비스를 받는 사용자 혹은 프로그램 +- 웹 브라우저 = 클라이언트 (e.g., Chrome, Safari, Firefox 등) +- 클라이언트 머신(아이폰, 노트북 등)과 클라이언트 소프트웨어로 구성됨 + +> 웹 브라우저에서 사용자가 URL을 요청 → 그 요청을 서버가 처리 + +--- + +## 🖥 서버 구성 요소와 관련 기술 + +| 역할 | 예시 | +|------|------| +| 서버 소프트웨어 | Apache, IIS, Nginx | +| 서버 언어 | PHP, Python, Java | +| 데이터베이스 | MySQL, Oracle 등 | + +--- + +## 📜 정적 웹 vs 동적 웹 + +- HTML은 정적 웹 문서를 만들 수 있음 +- 사용자가 많아지면 정적 웹 페이지로는 한계 발생 → **동적 웹 페이지 필요!** + +--- + +## 🔁 동적 웹의 탄생과 CGI (Common Gateway Interface) + +1. 사용자가 웹 브라우저에서 URL 입력 +2. 웹 서버는 요청받은 파일의 확장자를 확인함 +3. `.html` 파일이면 바로 전송 +4. `.php`와 같은 서버 사이드 파일이면 **웹 서버가 직접 처리 못함** +5. 대신, PHP 엔진 같은 프로그램에게 처리를 위임 +6. PHP 엔진이 파일을 실행하고 그 결과를 HTML로 돌려줌 +7. 웹 서버는 그 HTML을 다시 웹 브라우저에게 전송함 + +- 브라우저는 HTML만 이해할 수 있음 → **php인지 아닌지 알 수 없음** +- 이 과정에서 CGI는 웹 서버와 외부 엔진(PHP, Python 등) 간의 통신 표준 역할을 함 + +--- + +## 💡 CGI의 장점 + +- 다양한 기술들(PHP, Python, Java 등)을 독립적으로 바꿔 끼울 수 있음 +- 프로그램 간 통신의 **표준화**를 통해 유지보수와 확장성이 높아짐 + +--- + +## 🧠 PHP란? + +- 서버 사이드 스크립트 언어 +- 정적인 HTML 파일 대신, **동적인 웹페이지를 자동으로 생성** 가능 +- 하나의 PHP 파일로 여러 사용자에게 각기 다른 내용을 보여줄 수 있음 + +--- + +## 🧩 OS (Operating System) + +- **운영체제(Operating System, OS)**는 하드웨어와 소프트웨어 사이에서 중재자 역할을 하는 시스템 소프트웨어 +- 사용자의 명령을 하드웨어가 이해할 수 있도록 바꿔주고, 소프트웨어가 안정적으로 작동하게 돕는 필수 시스템 +- 대표적인 OS 종류: + - Windows, macOS, Linux (데스크탑/노트북) + - Android, iOS (모바일) + - Ubuntu, CentOS, Red Hat 등 (서버) + +--- + +## 👨‍💻 클라이언트 vs 서버 개발자의 OS 활용 + +### 클라이언트 개발자 +- 웹 개발자와 애플리케이션 개발자로 나뉨 +- 애플리케이션 개발자는 OS별 대응이 필요함 (ex. iOS용 앱, Android용 앱은 따로 만들어야 함) + +### 서버 개발자 +- 서버는 하나의 프로그램이 OS 위에서 실행됨 +- 보통 서버는 **리눅스(Linux)** 위에서 작동함 (안정성 + 비용 효율성 때문) +- macOS는 고가이고 GUI 중심이라 서버 용도로는 비효율적임 + +> 💬 "서버도 결국 하나의 컴퓨터이며, 그 위에 OS가 존재해야만 동작할 수 있다." + +--- + +## 🧬 OS 독립적인 개발 + +- 예전에는 OS마다 별도 개발이 필요했음 → 유지보수 어려움 +- 현대에는 OS에 독립적인 개발 방식이 대세 (한 번 만들면 어디서든 돌아가게!) +- 대표적 예시: **Java** + - JVM(Java Virtual Machine) 위에서 실행되므로 OS에 관계없이 작동함 + - 한번 작성하면 모든 플랫폼에서 실행 가능: "Write once, run anywhere" + +--- + +## 🔁 API와 서버 응답 흐름 + +- 서버는 클라이언트의 다양한 요청을 처리하고, 그에 맞는 응답을 보내는 프로그램 +- 클라이언트는 웹, 앱 등 다양한 형태로 서버에 요청을 보냄 +- 서버는 **기능별 요청을 구분**하고 **적절한 응답을 보냄** +- 이때 "요청과 응답 간의 규약"을 정리해 놓은 문서가 **API 문서** + +### 📄 API 문서란? +> 프로그램의 특정 기능이 어떻게 작동하는지 정리해 놓은 문서 +> - 요청 (Request): 요청할 때 어떤 데이터가 필요한지 +> - 응답 (Response): 응답에는 어떤 데이터가 담겨 있는지 +> - 예: 로그인 API +> - 요청: username, password +> - 응답: access token, user id + +--- + +## 🧑‍💻 프론트엔드 vs 백엔드 + +| 구분 | 설명 | +|------|------| +| 프론트엔드(Frontend) | 클라이언트 프로그램 개발자. 웹이든 앱이든 사용자가 직접 보게 되는 UI 개발 담당 | +| 백엔드(Backend) | 서버 개발자. 사용자 요청을 처리하고, DB 연동, 비즈니스 로직을 처리하는 시스템 구축 담당 | + +--- + +## 🧱 라이브러리 (Library) + +> 내가 필요할 때 **내가 호출해서** 사용하는 도구 + +- 개발자가 주도권을 가짐 (내 코드가 주도) +- 특정 기능이 필요할 때 꺼내 쓰는 도구 느낌 +- 내가 원하는 방식대로 코드를 구성하고, 라이브러리는 기능만 보조해주는 역할 +- 자유롭고 유연하지만 통일된 구조는 없음 + +**📌 예시**: +- `jQuery`: HTML 요소 선택, 애니메이션 처리 등 DOM 제어에 특화된 JS 라이브러리 +- `Lodash`: 배열, 객체 등 JS 데이터 처리 기능 강화 +- `ReactJS`: UI를 컴포넌트화해서 관리할 수 있는 라이브러리 (하지만 구조화된 방식 덕분에 종종 프레임워크처럼 쓰이기도!) + +--- + +## 🏗 프레임워크 (Framework) + +> 나는 **프레임워크가 호출하는 입장**, 즉 규칙을 따라야 하는 구조 + +- 개발자가 주도권을 일부 넘겨줌 (프레임워크가 구조와 흐름을 정함) +- "어디에 코드를 넣을지" 정해져 있고, 그 틀에 맞춰 개발함 +- 강력한 기능 제공 + 일관된 구조 → 빠르고 안정적인 개발 가능 +- 대신, 구조에 대한 이해가 부족하면 진입 장벽이 높음 + +**📌 예시**: +- `Django`: Python 기반 웹 프레임워크. MVC(MTV) 구조가 뚜렷함. +- `Angular`: 구글이 만든 프론트엔드 프레임워크 +- `NestJS`: 백엔드용 TypeScript 프레임워크. Express 기반. + +## 🎮 Colyseus Multiplayer Framework란? + +> Colyseus는 **JavaScript/TypeScript + Node.js** 환경에서 **멀티플레이어 게임 서버를 구축**할 수 있게 해주는 오픈소스 프레임워크! + +- 서버와 클라이언트 간 상태 동기화(State Sync)를 **자동화**해주고 +- 클라이언트가 룸(Room)에 쉽게 매칭되도록 도와주는 기능 제공 +- 프론트엔드나 Unity, Godot 등 **게임 엔진과 쉽게 연동 가능** + +### 🌟 주요 특징 요약 + +- 👥 **Match-making into Rooms** + → 하나의 Room 정의만으로 여러 클라이언트가 자동으로 해당 Room 인스턴스에 매칭됨 + +- 🔁 **State Synchronization** + → 서버에서 클라이언트로 상태 정보를 자동 동기화! (게임에서 유닛 위치, 체력 같은 정보가 실시간으로 동기화됨) + +- 📈 **Scalable (확장성)** + → 수평/수직적 확장이 가능하게 설계되어 큰 규모의 게임 서비스도 대응 가능 + +- ☁ **Cloud agnostic** + → 자유롭게 자체 서버에 호스팅 가능하고, 상용 서비스인 [Colyseus Cloud]도 사용 가능 + +--- + +## 🧾 Node.js란? + +> **자바스크립트를 브라우저 밖, 즉 서버에서도 실행할 수 있게 해주는 런타임 환경** + +### ✨ Node.js의 핵심 기능 + +- 원래 JS는 웹 브라우저 안에서만 동작했는데, Node.js 덕분에 서버에서도 사용할 수 있게 됨 +- **V8 엔진** 기반 (크롬 브라우저에서 쓰는 JS 엔진) +- 비동기 I/O, 이벤트 기반 구조 → 서버에서 많은 클라이언트를 동시에 처리하는 데 최적화됨 +- 파일 읽기/쓰기, 네트워크 요청 처리, 데이터베이스 접근 등 서버 작업 가능 + +### 💡 Node.js의 장점 + +- 프론트엔드와 백엔드 모두 **같은 언어(JS/TS)**로 개발 가능 → 개발 효율성 증가! +- 속도가 빠르고 확장성이 뛰어나서 **실시간 채팅, 게임 서버, REST API** 개발에 많이 사용됨 + +--- + + +📁 작성자: 정윤아 +📅 Week1 - 서버 기본 개념 정리 From c51ae2ba5b04692a805dd74c1cb1e9789aa6f62f Mon Sep 17 00:00:00 2001 From: itisjeon94 <160416010+itisjeon94@users.noreply.github.com> Date: Fri, 25 Apr 2025 16:12:00 +0900 Subject: [PATCH 16/59] Create reflection.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1주차 과제 --- .../reflection.md" | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 "week1/15 \352\270\260\354\247\200\355\230\204/reflection.md" diff --git "a/week1/15 \352\270\260\354\247\200\355\230\204/reflection.md" "b/week1/15 \352\270\260\354\247\200\355\230\204/reflection.md" new file mode 100644 index 0000000..efbc4d3 --- /dev/null +++ "b/week1/15 \352\270\260\354\247\200\355\230\204/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. 느낀 점 + +서버와 클라이언트의 개념에 대해 공부해볼 수 있었다. 추상적으로 알고 있던 개념을 구체적으로 배워볼 수 있어 유익했고, 프론트엔드와 백엔드라는 단어의 뜻을 새롭게 알 수 있었다. From 9e964d9536a10b69faa50c45415a37a79d01b06e Mon Sep 17 00:00:00 2001 From: itisjeon94 <160416010+itisjeon94@users.noreply.github.com> Date: Fri, 25 Apr 2025 16:12:00 +0900 Subject: [PATCH 17/59] Create reflection.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [week1] 15 기지현 회고 제출 --- .../reflection.md" | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 "week1/15 \352\270\260\354\247\200\355\230\204/reflection.md" diff --git "a/week1/15 \352\270\260\354\247\200\355\230\204/reflection.md" "b/week1/15 \352\270\260\354\247\200\355\230\204/reflection.md" new file mode 100644 index 0000000..efbc4d3 --- /dev/null +++ "b/week1/15 \352\270\260\354\247\200\355\230\204/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. 느낀 점 + +서버와 클라이언트의 개념에 대해 공부해볼 수 있었다. 추상적으로 알고 있던 개념을 구체적으로 배워볼 수 있어 유익했고, 프론트엔드와 백엔드라는 단어의 뜻을 새롭게 알 수 있었다. From abde77925c88512ff4756861fad9be27aa35f605 Mon Sep 17 00:00:00 2001 From: profobbb Date: Sat, 26 Apr 2025 19:32:26 +0900 Subject: [PATCH 18/59] =?UTF-8?q?docs:=20add=20week1=20=ED=9A=8C=EA=B3=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- reflection.md | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/reflection.md b/reflection.md index c949f81..fb8c96e 100644 --- a/reflection.md +++ b/reflection.md @@ -1,22 +1,19 @@ # week1 : Server, Framework, Colyseus ## 기본 개념 -1. 서버 = 서비스(데이터 or 기능 in web) 제공 -//중앙 컴퓨터, 프로그램 -2. 클라이언트 = 서비스 요청 + 소비 -//웹 브라우저, 모바일 앱 +1. 서버 = 클라이언트의 요청에 대한 서비스 제공 +2. 클라이언트 = 서비스 요청 3. 프레임워크 = 개발 템플릿 소프트웨어 - -Colyseus = 실시간 멀티플레이어 + 오픈소스 프레임워크 - //룸 매칭, 동기화, 확장성, 클라우드 독립적 - -Node.js = Typescript 실행 환경 + -Colyseus = 실시간 멀티 플레이어 게임 서버를 쉽게 만들 수 있게 해주는 프레임워크 ## 알게 된 점 -1. 클라이언트가 각각 앱 실행 -> 중앙 서버 접속(based on Colyseus Framework) -> 클라이언트 쪽에서 데이터 전송 -> 서버가 데이터 가공 후 다시 클라이언트에게 전송 -> 반영 -//클라이언트 - 서버 간의 통신은 상호적 -2. 실시간 멀티플레이어 게임 = 이런 통신이 즉각적으로 이루어져야 함 -3. 일일이 코딩해야 하는 단계를 줄여주는 Framework가 Colyseus +1. 서버와 클라이언트의 관계와 서버 소프트웨어의 역할에 대해 알게 됨. +2. 서버의 물리적인 모습은 컴퓨터이나 특정 컴퓨터에게 네트워크를 통해 요청을 받고 응답을 하게 만든 것임을 알게 됨. +3. 개발자가 라이브러리를 불러오는 반면 프레임워크는 프레임워크의 규칙을 개발자가 따라야 함 + ## 느낀 점 -1. 멀티플레이어 게임의 기본 원리에 대해 알게 되었다 -2. Colyseus는 개발자에게 편리한 환경을 제공한다 \ No newline at end of file +1. 서버, 프레임워크, 라이브러리 등 평소에 많이 쓰거나 들은 단어이지만 그 이름과 작동을 명확히 알 수 있어서 도움이 되었다. +2. 프레임워크의 규칙을 따라 템플릿과 컨트롤러 등을 넣는다는 부분이 구체화되지 않아 이해가 어려웠다. + From e685c32693dfd3022f887b45682a3373cfd09fc7 Mon Sep 17 00:00:00 2001 From: profobbb Date: Sat, 26 Apr 2025 19:39:44 +0900 Subject: [PATCH 19/59] =?UTF-8?q?docs:=20add=20week1=20=ED=9A=8C=EA=B3=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes week1/.DS_Store | Bin 0 -> 8196 bytes .../reflection.md" | 15 +++++++++++++++ 3 files changed, 15 insertions(+) create mode 100644 .DS_Store create mode 100644 week1/.DS_Store create mode 100644 "week1/15 \353\260\225\354\261\204\354\234\244/reflection.md" diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a07d95611763c2fa7ca7cc72524f44729a524f44 GIT binary patch literal 6148 zcmeHKyKdVs6uoquMrshiLknaHK%lFU`Vj{xx+tzQWattV?a&skRT-%eMGX9?2E%~n z_8;;KUHc{ZmrU)sB!l|7WC#j_*SI|7<+&7iWRfBgiS{_I6IF=FgEN+&qF75#4{K1-L_F5nb!3jA*h@Y?n19P9RkIyAF>)z>Ih5qf!RIDsGj(S{n) zHs#dE?~>|g=`2$mtY=2~@Y;^~JGxGj;iy)-6{W56_LCiN$J_Njhu>5lj(VfbG~Z^6ecjFn?jpStgp!HdX=qFZXsg zc7|?ZP64ODLlxltLBbgWi-keGb)e8!0ALwmZK(4H1LsJKfyKfgdSJq&0!^y0R}5j& z5to)1SS$>hbQ1RRA?%Zdy`c#Gbc`=GokU>Jl}-Vtz`O!mrdi?h|8)KRe?G~zoB~dP zjZ#3AJ7K4dDcQ4iX>xqlO86Hz8}kZ-It7J2j&+5P;(fR_^hvG&1B-=0L}2biK+E6? Jr@*5s@E3O#oWKA8 literal 0 HcmV?d00001 diff --git a/week1/.DS_Store b/week1/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..908ec93a95e46ea977af02ce9359fa13a8439183 GIT binary patch literal 8196 zcmeI1zi$&U6vyo}v=>!~3`ELMBujLRAW1nWV!4JebnPJ+0EHZh;KXsR@`DUfq?^nC zz+X_66{HUBKvN_Jru-)iOyxb>t$NAbh5#k+N%q%gzjqgZHsLwhpLN3ILjgZe`HUV*^web&N(@VFZlpP*5GpO^U&FIP?qS z=NOH&>Tt$Q^1;oMxyewtdOF-+D0jvktyB{MA}~t;bN6LdVKx){Kd16{{3>lhxpk&Y z1;>27L3h{W`k%es!0-0TB42X3#~>vwC-&NIAvEM?%Gx0~J* zzddN=uRoMwujz;FjtcNwZE$)1)DK&7P?Ps9~UVg(k41XJ5qp|55t+|3WjO$rFKjC&06Hw_bx;p8rUmo-pRx0?JD$Xy_Md nRUuHt4g%o%;txY;3vk64$7rM#dcgkrLBN@MELB8cp$Ys3IbUw= literal 0 HcmV?d00001 diff --git "a/week1/15 \353\260\225\354\261\204\354\234\244/reflection.md" "b/week1/15 \353\260\225\354\261\204\354\234\244/reflection.md" new file mode 100644 index 0000000..0eeee40 --- /dev/null +++ "b/week1/15 \353\260\225\354\261\204\354\234\244/reflection.md" @@ -0,0 +1,15 @@ +#Week 1: 서버와 프레임워크, Colyseus 구조 이해 + +## 새로 알게 된 개념 3가지 +1. 서버와 클라이언트의 관계와 서버 소프트웨어의 역할에 대해 알게 됨. +2. 서버의 물리적인 모습은 컴퓨터이나 특정 컴퓨터에게 네트워크를 통해 요청을 받고 응답을 하게 만든 것임을 알게 됨. +3. 개발자가 라이브러리를 불러오는 반면 프레임워크는 프레임워크의 규칙을 개발자가 따라야 함 + +## 헷갈렸던 부분 +프레임워크의 규칙을 따라 템플릿과 컨트롤러 등을 넣는다는 부분이 구체화되지 않아 이해가 어려움 + +## 한 문장 요약 +Colyseus는 실시간 멀티 플레이어 게임 서버를 쉽게 만들 수 있게 해주는 프레임워크이다. + +## 느낀 점 +서버, 프레임워크, 라이브러리 등 평소에 많이 쓰거나 들은 단어이지만 그 이름과 작동을 명확히 알 수 있어서 도움이 되었다. From 2498398140bb7b3893f954c0c573295375e979d6 Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Sun, 27 Apr 2025 23:19:09 +0900 Subject: [PATCH 20/59] docs: add assignment week2 --- week2/arrayTuple.ts | 11 +++++++++++ week2/condition.ts | 14 ++++++++++++++ week2/function.ts | 10 ++++++++++ week2/reflection.md | 30 ++++++++++++++++++++++++++++++ week2/variable.ts | 11 +++++++++++ 5 files changed, 76 insertions(+) create mode 100644 week2/arrayTuple.ts create mode 100644 week2/condition.ts create mode 100644 week2/function.ts create mode 100644 week2/reflection.md create mode 100644 week2/variable.ts diff --git a/week2/arrayTuple.ts b/week2/arrayTuple.ts new file mode 100644 index 0000000..53f3d89 --- /dev/null +++ b/week2/arrayTuple.ts @@ -0,0 +1,11 @@ +// 2-배열과튜플.ts +// 좋아하는 음식 이름 3개를 string 배열로 선언 +// `(학교이름, 학년)`을 담은 튜플 선언 + +let favFood : Array = ["떡볶이" , "닭갈비" , "토마토스프"]; +let schoolID : [string, number] = ["Ewha Womens' Univ.", 2]; +// Tuple = 고정된 길이 + 형태 다른 요소 + +console.log(favFood, schoolID); +// 출력 시 배열 형태 그대로 출력 + diff --git a/week2/condition.ts b/week2/condition.ts new file mode 100644 index 0000000..9ba5c6f --- /dev/null +++ b/week2/condition.ts @@ -0,0 +1,14 @@ +// `3-조건문.ts` +// 점수(number)를 하나 선언하고 +// 60점 이상이면 "합격", 미만이면 "불합격"을 출력하는 if/else문 작성 + +let score : number = 75; +// 값 선언 + +if (score >= 60) { + console.log("Pass"); +} +else { + console.log("Fail"); +} +//if else 를 통해 조건에 따른 결과 출력 \ No newline at end of file diff --git a/week2/function.ts b/week2/function.ts new file mode 100644 index 0000000..8851456 --- /dev/null +++ b/week2/function.ts @@ -0,0 +1,10 @@ +// `4-함수선언.ts` +// 두 숫자를 입력받아 합을 반환하는 함수 선언 (매개변수 타입, 반환 타입 명시) +// 함수를 호출해서 결과 출력 + +function addition(x: number, y: number) : number { + return x + y; +} +// function 함수 이름(변수: 타입, 변수: 타입) : return 타입 { 함수 content } + +console.log(addition(3,25)); \ No newline at end of file diff --git a/week2/reflection.md b/week2/reflection.md new file mode 100644 index 0000000..bc7c485 --- /dev/null +++ b/week2/reflection.md @@ -0,0 +1,30 @@ +# week2 : Variable, Type, Condition and Function + +## 기본 개념 +1. 자료형 +-기본 타입 = string(문자열), number(정수, 실수), boolean(TF), null(값X), undefined, bigint, symbol(고유 식별자) +-배열, 튜플(길이 고정+형태 다른 요소) +-객체, any(아무거나 가능), unknown, union(복수 타입 가능), literal type(정해진 값만), enum(상수 그룹) +2. 조건문 +-조건식 결과는 무조건 T OR F +-타입 비교 틀리면 컴파일 에러 +3. 함수 선언 +-매개변수 타입 지정 필요 +-정해진 타입, 정해진 개수를 전달하지 않으면 에러 + +## 알게 된 점 +1. any(아무 타입이나 가능), unknown 같은 타입이 있음 +2. 조건식의 결과가 무조건 true OR false +3. 매개변수 타입은 지정 필수; BUT 반환 타입은 선택 + +## 헷갈렸던 점 +1. C나 Java와는 변수 선언 방식이 다르다 +2. 매개변수 타입도 반드시 지정해줘야 한다(무려 컴파일 단계에서 에러!) +3. +사소한 거지만 let으로 변수 선언한다(근데 직관적이어서 좋음) + +## 느낀 점 (Playground or StackBlitz 포함) +1. Playground는 온라인 에디팅이 간단해서 편리했다(설치 필요X) +2. 컴파일 단계에서 에러 내주는 것도 좋다(코드 확인하기 쉬움) +3. 다른 컴퓨터 언어와는 명령 체계 같은 것이 또 달라서 헷갈린다 +4. 사용자에게 직접 input 받는 것도 짜보고 싶어졌다! +5. 타입 체크를 any로 하면 함수 가독성이 떨어져서 문제인가요??? \ No newline at end of file diff --git a/week2/variable.ts b/week2/variable.ts new file mode 100644 index 0000000..057fe16 --- /dev/null +++ b/week2/variable.ts @@ -0,0 +1,11 @@ +// 1-변수선언.ts +// 이름(string), 나이(number), 합격여부(boolean) 변수를 타입을 명시하여 선언 +//`console.log`로 출력해보기 + +let firstname : string = "youri"; +let age : number = 23; +let pf : boolean = true; +// (변수 이름) : (타입) = (값); 꼴 + +console.log(firstname, age, pf); +// console.log()를 통해 출력 \ No newline at end of file From 1b2e54772e7d32c3c8189278366e54526e31c71c Mon Sep 17 00:00:00 2001 From: sum-young Date: Mon, 28 Apr 2025 23:52:27 +0900 Subject: [PATCH 21/59] =?UTF-8?q?docs:=20add=20=EA=B3=BC=EC=A0=9C&?= =?UTF-8?q?=ED=9A=8C=EA=B3=A0=20week2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 29 +++++++++++++++++++ ...64\352\263\274\355\212\234\355\224\214.ts" | 12 ++++++++ ...00\354\210\230\354\204\240\354\226\270.ts" | 11 +++++++ .../\354\241\260\352\261\264\353\254\270.ts" | 11 +++++++ ...50\354\210\230\354\204\240\354\226\270.ts" | 11 +++++++ 5 files changed, 74 insertions(+) create mode 100644 "week2/15 \353\260\225\354\204\234\354\230\201/reflection.md" create mode 100644 "week2/15 \353\260\225\354\204\234\354\230\201/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" create mode 100644 "week2/15 \353\260\225\354\204\234\354\230\201/\353\263\200\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/15 \353\260\225\354\204\234\354\230\201/\354\241\260\352\261\264\353\254\270.ts" create mode 100644 "week2/15 \353\260\225\354\204\234\354\230\201/\355\225\250\354\210\230\354\204\240\354\226\270.ts" diff --git "a/week2/15 \353\260\225\354\204\234\354\230\201/reflection.md" "b/week2/15 \353\260\225\354\204\234\354\230\201/reflection.md" new file mode 100644 index 0000000..e2b232a --- /dev/null +++ "b/week2/15 \353\260\225\354\204\234\354\230\201/reflection.md" @@ -0,0 +1,29 @@ +# Week2. TypeScript 기초 (변수타입, 조건문, 함수) + +## 1. 새로 알게된 점 +- 기본 타입: string, number(정수, 실수), boolean (참, 거짓), null, undefined, bigint, symbol (number로 정수/실수 구분 없이 사용하는게 새로운 느낌..?) +- 튜플(tuple): 고정된 길이 + **각 요소의 타입이 다른 배열** + let t : [number, string, string]; //이렇게 하나의 배열안에서 타입이 다른 자료형 +- any: 아무 타입이든 허용 (지양할 것) +- union: 복수타입허용 + let u : string | number; //복수 타입을 가질 수 있는게 신기한 느낌..? +- 객체-객체 선언 방식이 달라서 헷갈릴 것 같은 느낌..? (은근히 비슷한 것도 있지만) + let 학생 {이름: string, 나이: number} = { + 이름: "이화", + 나이: 20, + }; +- 조건문 = C언어/자바와 상당히 비슷한 느낌! + +- 함수 = 큰 틀은 비슷하지만, **타입 선언** (매개변수, 반환타입) 등이 다른 느낌 + function f1 (type1 : number, type2: string) : string{ + return type2 + ":" + type1; + } +-출력문: console.log("출력할 내용");의 형식으로 + +## 2. 실습 중 헷갈렸던 부분 +- 타입 선언하는 방식이 평소에는 (타입) (변수명) 순서였는데, 순서도 달라지면 :(콜론)을 사용하는게 익숙하지 않아 헷갈렸던 것 같습니다! +- 튜플이라는 타입을 처음 제대로 접해 선언이나 사용에 신경 쓴 점? +- 함수의 반환 타입 명시가 매개변수 뒤에 :(콜론)을 사용해서 진행하는걸 계속 까먹게 되었다... + +## 3. Playground 사용 소감 +기존 IDE에서 사용하는 다른 방법이 궁금해서, vscode에서 typescript 작성후에 실행시켜보기도 했는데, 이 경우 추가적으로 다른 것들을 설치하지 않으면, node.js 설치 후 터미널 명령어를 통해 ts를 컴파일, js로 실행시켜야하는 번거로움이 존재했습니다.. 결론적으로 그냥 코드만 타이핑해서 실행시켜볼 수 있는 Playground의 편리성을 느끼게되었습니다! \ No newline at end of file diff --git "a/week2/15 \353\260\225\354\204\234\354\230\201/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" "b/week2/15 \353\260\225\354\204\234\354\230\201/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" new file mode 100644 index 0000000..f24bd01 --- /dev/null +++ "b/week2/15 \353\260\225\354\204\234\354\230\201/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" @@ -0,0 +1,12 @@ +//2. 배열과튜플: 좋아하는 음식 3개 string 배열로 선언 +// (학교이름, 학년)을 담은 튜플 선언 + +//배열 number[] 또는 Array +let 좋아하는음식 : Array = ["샌드위치", "떡볶이", "파스타"]; + +//튜플: 고정된 길이+각 요소의 타입이 달라도 됨 +// : [string, number, boolean] 이래도 되는 것 +let 정보 : [string, number] = ["이화여자대학교", 22]; + +console.log(좋아하는음식); +console.log(정보); \ No newline at end of file diff --git "a/week2/15 \353\260\225\354\204\234\354\230\201/\353\263\200\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \353\260\225\354\204\234\354\230\201/\353\263\200\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..5f6022b --- /dev/null +++ "b/week2/15 \353\260\225\354\204\234\354\230\201/\353\263\200\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,11 @@ +//1.변수선언: 이름, 나이, 합격여부 변수 타입 명시해서 선언하기 + +//타입: string-문자열, number -정수/실수, boolean-참/거짓 +let 이름 : string = '박서영'; +let 나이 : number = 22; +let 합격여부 : boolean = true; + +//console.log -> print같은 느낌? +console.log(이름); +console.log(나이); +console.log(합격여부); \ No newline at end of file diff --git "a/week2/15 \353\260\225\354\204\234\354\230\201/\354\241\260\352\261\264\353\254\270.ts" "b/week2/15 \353\260\225\354\204\234\354\230\201/\354\241\260\352\261\264\353\254\270.ts" new file mode 100644 index 0000000..eb93903 --- /dev/null +++ "b/week2/15 \353\260\225\354\204\234\354\230\201/\354\241\260\352\261\264\353\254\270.ts" @@ -0,0 +1,11 @@ +//3. 조건문: 점수 선언, 60점 이상이면 합격, 미만이면 불합격 + +let 점수 : number = 30; + +//조건문은 다른 문법들과 유사 +if(점수 >= 60){ + console.log("합격"); +} +else{ + console.log("불합격"); +} \ No newline at end of file diff --git "a/week2/15 \353\260\225\354\204\234\354\230\201/\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \353\260\225\354\204\234\354\230\201/\355\225\250\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..84c1f7a --- /dev/null +++ "b/week2/15 \353\260\225\354\204\234\354\230\201/\355\225\250\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,11 @@ +//4.함수선언: 두 숫자를 입력받아 합을 반환. + +//함수: 매개변수에 타입 명시, 함수 반환타입 명시 +function addition (x: number, y: number) : number { + return x+y; +} + +let a : number = 10; +let b : number = 20; + +console.log(addition(a,b)); //함수 호출 From 9314a2f66d20bb52238036fd7911ae1df971a35d Mon Sep 17 00:00:00 2001 From: skong302 Date: Fri, 2 May 2025 00:49:55 +0900 Subject: [PATCH 22/59] =?UTF-8?q?[week2]=2015=EA=B3=B5=EC=84=B8=EC=98=81?= =?UTF-8?q?=202=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...00\354\210\230\354\204\240\354\226\270.ts" | 14 ++ ...64\352\263\274\355\212\234\355\224\214.ts" | 9 + ...3-\354\241\260\352\261\264\353\254\270.ts" | 11 ++ ...50\354\210\230\354\204\240\354\226\270.ts" | 9 + .../reflection.md" | 169 ++++++++++++++++++ 5 files changed, 212 insertions(+) create mode 100644 "week2/15 \352\263\265\354\204\270\354\230\201/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/15 \352\263\265\354\204\270\354\230\201/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" create mode 100644 "week2/15 \352\263\265\354\204\270\354\230\201/3-\354\241\260\352\261\264\353\254\270.ts" create mode 100644 "week2/15 \352\263\265\354\204\270\354\230\201/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/15 \352\263\265\354\204\270\354\230\201/reflection.md" diff --git "a/week2/15 \352\263\265\354\204\270\354\230\201/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \352\263\265\354\204\270\354\230\201/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..143a3a0 --- /dev/null +++ "b/week2/15 \352\263\265\354\204\270\354\230\201/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,14 @@ +// 이름 변수는 string으로 지정. 값은 내 이름이다. +let 이름: string = "공세영"; + +// 나이 변수는 number로 지정. 숫자니까. +let 나이: number = 22; + +// 합격 여부는 true/false로 나뉘는 boolean으로 지정. +let 합격여부: boolean = true; + + +// 아래로는 콘솔창에 위 세 가지 변수를 출력하는 코드. +console.log(이름); +console.log(나이); +console.log(합격여부); \ No newline at end of file diff --git "a/week2/15 \352\263\265\354\204\270\354\230\201/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" "b/week2/15 \352\263\265\354\204\270\354\230\201/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" new file mode 100644 index 0000000..b798e25 --- /dev/null +++ "b/week2/15 \352\263\265\354\204\270\354\230\201/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" @@ -0,0 +1,9 @@ +// 문자열을 담는 좋아하는_음식 배열 생성. +let 좋아하는_음식: Array = ["샤오롱바오", "아이스크림", "샤브샤브"]; + +// 다른 타입을 담는 튜플 생성. +let 프로필: [string, number] = ["이화여자대학교", 3]; + +// 아래는 위 배열들을 출력하는 코드. +console.log(좋아하는_음식); +console.log(프로필); \ No newline at end of file diff --git "a/week2/15 \352\263\265\354\204\270\354\230\201/3-\354\241\260\352\261\264\353\254\270.ts" "b/week2/15 \352\263\265\354\204\270\354\230\201/3-\354\241\260\352\261\264\353\254\270.ts" new file mode 100644 index 0000000..15c3523 --- /dev/null +++ "b/week2/15 \352\263\265\354\204\270\354\230\201/3-\354\241\260\352\261\264\353\254\270.ts" @@ -0,0 +1,11 @@ +// 점수 variable에 100을 할당. +let 점수: number = 100; + +// 60이 넘는다면 +if (점수 >= 60){ + console.log("합격"); // 합격 출력. + alert("합격"); // 그냥 다른 출력 방식 없나 찾아봤는데 팝업 뜨는 게 재밌어서 같이 붙여둡니다 ^.^v +} else { // 그 외의 경우는 모두 + console.log("불합격"); // 얄짤없이 불합격 출력. + alert("불합격"); +} \ No newline at end of file diff --git "a/week2/15 \352\263\265\354\204\270\354\230\201/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \352\263\265\354\204\270\354\230\201/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..5fd56a8 --- /dev/null +++ "b/week2/15 \352\263\265\354\204\270\354\230\201/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,9 @@ +// 두 숫자를 입력받아 합을 반환하는 함수 선언 +// 첫 번째 숫자는 a, 두 번째 숫자는 b이며 매개변수와 반환 타입 전부 number 타입으로 지정 +function addNumbers(a: number, b: number): number { + return a + b; +} + +// 함수 호출 및 결과 출력. a는 10이고, b는 20이다. +const result: number = addNumbers(10, 20); +console.log(`두 수의 합: ${result}`); \ No newline at end of file diff --git "a/week2/15 \352\263\265\354\204\270\354\230\201/reflection.md" "b/week2/15 \352\263\265\354\204\270\354\230\201/reflection.md" new file mode 100644 index 0000000..3438f52 --- /dev/null +++ "b/week2/15 \352\263\265\354\204\270\354\230\201/reflection.md" @@ -0,0 +1,169 @@ +# WEEK 02 : TypeScript 맛보기(개념 및 실습) + +## 배운 것 요?약? + +TypeScript Playground & StackBlitz +별도의 로컬 개발환경이 없어도 브라우저 상에서 TypeScript 코드를 작성 및 실행할 수 있는 플랫폼. += 온라인 통합 개발 환경, Online IDE(Integrated Development Environment), Web IDE + +TypeScript Playground는 단일 파일 기반으로 코드 테스트가 가능한 반면 StackBlitz는 다중 파일로 프로젝트 빌드까지 가능하며 브라우저에서 직접 실행도 할 수 있다. + + + +TypeScript 문법 + +01. 변수 / Variables + 02. 자료형 / Type + +>> 변수 선언 시 콜론(:)을 이용해 타입 명시 가능 +>> 지정된 타입과 다른 타입의 값을 입력 시 컴파일 에러 발생. +>> JavaScript 타입 시스템 위에 Static Type(정적 타입)을 추가 --> int, float, double과 같이 세분화된 타입이 아닌 [통합된 상위 타입]을 대신 사용한다! +>> Type Inference(타입 추론) 기능을 통해 특정 값으로 초기화 된 변수가 있다면 해당 값 기반으로 타입을 자동 할당해준다. + +타입 사용처 예시 +number 정수, 실수, NaN 등 let 나이: number = 22; +string 문자열 let 이름: string = '공세영'; +boolean 논리값(true/false) let 통과: boolean = true; +null 명시적으로 없음 표현 let 소속: null = null; +undefined 값이 할당되지 않음 let 소속: undefined = undefined; +symbol 고유하며 변경 불가능한 값 let 아이디: symbol = Symbol("skong302"); +bigint 큰 정수 표현 let 큰_수: bigint = 36854523132482345564; + +any 어떤 타입이든 ok let 가격: any = 10000; // 추천 안 한다고 함. +unknown 타입을 모를 때(안전한 any) let 모름: unknown = "abc"; +void (함수) 반환값 없음 function log(): void {} +never 절대 도달하지 않는 함수 반환 타입 function error(): never { throw new Error(); } + + +unknown 추가 설명 +>> unknown은 any와 비슷하게 모든 값을 담을 수 있으나, any와 다르게 해당 변수의 타입이 명확해지기 전까지는 어떤 작업도 허용하지 않음. + +let 입력값: unknown = "세영"; +// console.log(입력값.length); // ❌ 에러! - TypeScript는 입력값의 타입을 모른다. 따라서 해당 변수에 .length 프로퍼티가 존재한다는 보장이 없다. +if (typeof 입력값 === "string") { + console.log(입력값.length); // ✅ 가능! - 조건문으로 변수 타입이 string일 때만 통과 시키는 타입 좁히기(Narrowing)/타입 가드(Type Guard) 작업을 했음. 입력값은 string으로 처리되고 이후 .length 접근이 가능해짐. +} + + +Array / 배열 - number[], string[], Array의 형태로 사용 +let 숫자배열: number[] = [1,2,3]; +let 문자열배열: Array = ["공","세","영"]; + + +Tuple / 튜플 - 길이와 타입이 고정된 배열. +let coordinate: [number, number, string] = [10,20,'xy']; + + +Interface / 인터페이스 - 객체의 형태를 정의하는 문법 요소 +interface student { + name: string; + age: number; +} + +Object / 객체 - 속성의 타입들을 명시할 필요가 있음 +let student: { name: string; age: number } = { name: '공세영', age:22 }; + + +사용자 정의 타입 +type ID = string | number; // 문자열이나 숫자일 것. +let userId: ID = "abcd1234"; + + +Union / 유니언 - 둘 이상의 타입을 허용함. 타입 검사 시 조건문으로 narrowing해 주어야 한다. +let ID: string | number; +ID = "skong302"; +ID = 03021234; + + +Literal Type / 리터럴 타입 - 정해진 특정 값만을 허용한다. 값 자체가 타입. 유효한 옵션을 한정하기 위해 사용. +let direction: "left" | "right"; +direction = "left"; // ✅ +direction = "diagonal"; // ❌ 오류: 허용되지 않은 값 + + +enum / 열거형 - 관련 있는 상수들을 이름으로 묶어 나열한 것. 따로 지정하지 않으면 자동으로 숫자가 할당됨. +enum Direction{ + up, // 0 + down, // 1 + left, // 2 + right // 3 +} + +enum Roles{ + leader = "정윤아" + member = "공세영" +} + +let myRole: Role = Role.member; +console.log(myRole); // "공세영" + + + +03. 조건문 / Conditional Statements +>> if, else, switch 등의 구문 +>> 결과가 무조건 boolean 타입이어야 한다! +>> 지정된 타입과 맞지 않는 비교/연산의 경우 컴파일 에러 발생. + +let age: number = 18; +if (age >= 18) { + console.log("성인입니다."); +} else { + console.log("미성년자입니다."); +} + +let grade: string = "B"; +switch (grade) { + case "A": + console.log("최우수"); + break; + case "B": + console.log("우수"); + break; + default: + console.log("보통"); +} + + + +04. 함수 / Function +>> TypeScript에서는 함수의 타입, 매개변수의 개수나 반환 타입 등을 정의해 함수의 안정성 및 명확성을 높인다. + +function add(x: number, y: number): number { + return x + y; +} + +>> 선택적 매개변수(Optional Parameter)의 개념 - 물음표(?)가 붙은 매개변수는 있어도 없어도 된다. +function 함수명(매개변수?: 타입): 반환타입 + +function greet(name?: string): void { + if (name) { + console.log(`안녕하세요, ${name}님`); + } else { + console.log("안녕하세요, 주인님"); // undefined가 들어가서 default로 출력되는? 듯? + } +} + +greet("세영"); // 출력: 안녕하세요, 세영님 +greet(); // 출력: 안녕하세요, 주인님 + + + + +# 이하 진 짜 reflection + +Q. 이번 주 학습에서 새롭게 알게 된 점은 무엇인가요? +A. TypeScript가 왜 'Type'Script인지 새삼 다시 알게 되었음. 정적 타입 시스템의 편리함에 대해서도 알게 된 듯. int, float, double을 안 쓴다니 신세계다. +정말 개발자를 위한 언어.... 그렇지만 프로젝트를 진행하는 게 아니라서 그런지 TypeScript의 강점인 컴파일 타임 시점의 코드 안정성 확보가 와닿지는 않는 것 같음. 여전히 입력값 잘못 넣으면 오류는 난다. (물론 다른 언어들은 런타임 오류가 많아서 디버깅이 고역임을 이론적으로 알고 있긴 하지만....) + + +Q. 실습하면서 헷갈렸던 부분이 있었나요? +A. TypeScript Playground의 에디터 작동 방식을 설명하는 노션 글 중, 편집기에 입력된 TypeScript 코드를 자동으로 'JavaScript'로 컴파일해 보여준다는 부분에 의문을 가졌음. +TypeScript가 Interpreter에 의해 바로 Binary Code나 기계어로 컴파일 될 것이라고 생각했으나... +먼저 브라우저가 이해할 수 있는 JavaScript로 transpile(by tsc)하는 과정이 필요하단 것을 새로 알게 되었다. + +any 타입은 편리해 보이는데 사용을 지양해야 하는 이유에 대해서도 헷갈렸는데... 조금 생각해 보니 TypeScript의 강점인 타입 검사 기능을 무용지물로 만든다는 점에서 사용 지양해야 함을 깨달음. +코드의 의도(가독성)를 파악하기 어려울 뿐만 아니라 예측하기 어려우니 유지보수하기 어려울 테니까. 컴파일 타임에서의 any 오류는 어떻게 나지? 맥락이 없으니 어쩐지 두루뭉술하다.... + + +Q. Playground(또는 StackBlitz) 사용해본 소감은 어떤가요? +A. 초기 환경 설정 과정을 생략하고, 별도의 설치 없이 곧바로 실습에 돌입할 수 있다는 점에서 Web IDE의 뛰어난 접근성을 체감함. +다만, 이러한 웹 기반 환경의 편의성에도 불구하고 로컬 개발환경을 이용하는 이유, 대규모 프로젝트까지 안정적으로 개발할 수 있는지 여부에 대해선 아직 궁금증이 남음. \ No newline at end of file From 7f2d42abcbc344419085ea9419fad9f43102e4cd Mon Sep 17 00:00:00 2001 From: jigi Date: Fri, 2 May 2025 02:01:53 +0900 Subject: [PATCH 23/59] =?UTF-8?q?[week=202]=2015=EA=B8=B0=20=EA=B8=B0?= =?UTF-8?q?=EC=A7=80=ED=98=84=202=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C?= =?UTF-8?q?=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ....\353\263\200\354\210\230\354\204\240\354\226\270.ts" | 7 +++++++ ...0\354\227\264\352\263\274\355\212\234\355\224\214.ts" | 8 ++++++++ .../3.\354\241\260\352\261\264\353\254\270.ts" | 9 +++++++++ ....\355\225\250\354\210\230\354\204\240\354\226\270.ts" | 3 +++ 4 files changed, 27 insertions(+) create mode 100644 "week2/15 \352\270\260\354\247\200\355\230\204/1.\353\263\200\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/15 \352\270\260\354\247\200\355\230\204/2.\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" create mode 100644 "week2/15 \352\270\260\354\247\200\355\230\204/3.\354\241\260\352\261\264\353\254\270.ts" create mode 100644 "week2/15 \352\270\260\354\247\200\355\230\204/4.\355\225\250\354\210\230\354\204\240\354\226\270.ts" diff --git "a/week2/15 \352\270\260\354\247\200\355\230\204/1.\353\263\200\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \352\270\260\354\247\200\355\230\204/1.\353\263\200\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..e46a2b9 --- /dev/null +++ "b/week2/15 \352\270\260\354\247\200\355\230\204/1.\353\263\200\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,7 @@ +let 이름 : string = '기지현'; +let 나이 : number = 23; +let 합격여부 : boolean = true; + +console.log("내 이름은 " + 이름); +console.log("나이는 " + 나이); +console.log("합격여부는 " + 합격여부 ); \ No newline at end of file diff --git "a/week2/15 \352\270\260\354\247\200\355\230\204/2.\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" "b/week2/15 \352\270\260\354\247\200\355\230\204/2.\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" new file mode 100644 index 0000000..ee1b9a0 --- /dev/null +++ "b/week2/15 \352\270\260\354\247\200\355\230\204/2.\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" @@ -0,0 +1,8 @@ +//1. 배열 연습, 좋아하는 음식 출력하기. +let foods : string[] = ["마라탕", "커피", "과자"]; + +//2. 튜플 선언 엽습. +let school : [string, number] = ["이화여대", 3]; //학교이름, 학년. + +//확인용 출력 +console.log(school) \ No newline at end of file diff --git "a/week2/15 \352\270\260\354\247\200\355\230\204/3.\354\241\260\352\261\264\353\254\270.ts" "b/week2/15 \352\270\260\354\247\200\355\230\204/3.\354\241\260\352\261\264\353\254\270.ts" new file mode 100644 index 0000000..d21261e --- /dev/null +++ "b/week2/15 \352\270\260\354\247\200\355\230\204/3.\354\241\260\352\261\264\353\254\270.ts" @@ -0,0 +1,9 @@ +//1. 점수 선언 +let score : number = 0; + +//2. 조건문 +if (score >= 60) { + console.log("합격!"); +} else { + console.log("불합격."); +} \ No newline at end of file diff --git "a/week2/15 \352\270\260\354\247\200\355\230\204/4.\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \352\270\260\354\247\200\355\230\204/4.\355\225\250\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..b55e174 --- /dev/null +++ "b/week2/15 \352\270\260\354\247\200\355\230\204/4.\355\225\250\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,3 @@ +function add(x: number, y: number): number { + return x + y; +} \ No newline at end of file From 9cd39a35638dc0b5627f7d08d5417883f23e3fc1 Mon Sep 17 00:00:00 2001 From: itisjeon94 <160416010+itisjeon94@users.noreply.github.com> Date: Fri, 2 May 2025 02:10:48 +0900 Subject: [PATCH 24/59] Create reflection.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [week2] 15기 기지현 reflection.md 작성 --- .../reflection.md" | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 "week2/15 \352\270\260\354\247\200\355\230\204/reflection.md" diff --git "a/week2/15 \352\270\260\354\247\200\355\230\204/reflection.md" "b/week2/15 \352\270\260\354\247\200\355\230\204/reflection.md" new file mode 100644 index 0000000..9d72100 --- /dev/null +++ "b/week2/15 \352\270\260\354\247\200\355\230\204/reflection.md" @@ -0,0 +1,17 @@ +A1. java의 var타입 같은 typescript의 any형에 대해 배울 수 있었다. +//typescript의 any : 모든 타입 허용, 런타임에도 타입 자유로움 +//java의 var : 타입 추론(명확한 타입이 존재.), 컴파일 시 타입이 고정됨. +//그러니까 안 쓰는 게 되도록 좋지. +라는 특징을 가지고 있다. + +또한 union형에 대해 배우며 이런 궁금증이 들었다. +그럼 하나의 변수에 두 개의 값을 저장할 수도 있는 건가? +->그건 아님. 걍 여러 타입 중 하나를 넣을 수 있다~ 이런 뜻. +뭐 입력을 받을 때 사람이 나이를 스물다섯. 쓸 수도 있꼬 25 쓸 수도 있는 그런 상황에서 잘 활용할 수 있을 것 같다. + +A2. int, float가 아닌 number로 자료형을 처리하는 것이 약간 헷갈렸다. +또한 기존에 겪어보지 못한 literal type이 처음에는 어색했다. + +A3. 게임 만들기에 아주 좋은 언어같다! 특히 다양한 자료형 중 literal type을 활용하면 게임용 변수를 +효과적으로 만들 수 있을 것 같다. 또한, 무슨 언어를 배우든, 결국 언어들의 뿌리는 비슷비슷하다는 생각이 들었다. +여러 언어를 접해보고, 그 중 한 언어를 정해서 진득하게 공부해보는 시간이 꼭 필요할 것 같다. From c64ddbf59e944ebdd928d3e096bd31e0d86ccbc3 Mon Sep 17 00:00:00 2001 From: profobbb Date: Fri, 2 May 2025 20:03:36 +0900 Subject: [PATCH 25/59] =?UTF-8?q?[week2]=2015=EA=B8=B0=20=EB=B0=95?= =?UTF-8?q?=EC=B1=84=EC=9C=A4=202=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C?= =?UTF-8?q?=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 6148 -> 6148 bytes week2/.DS_Store | Bin 0 -> 8196 bytes .../.DS_Store" | Bin 0 -> 6148 bytes ...64\352\263\274\355\212\234\355\224\214.ts" | 7 +++++++ ...00\354\210\230\354\204\240\354\226\270.ts" | 7 +++++++ .../\354\241\260\352\261\264\353\254\270.ts" | 9 +++++++++ ...50\354\210\230\354\204\240\354\226\270.ts" | 3 +++ week2/reflection.md | 2 +- 8 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 week2/.DS_Store create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/.DS_Store" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/\353\263\200\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/\354\241\260\352\261\264\353\254\270.ts" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/\355\225\250\354\210\230\354\204\240\354\226\270.ts" diff --git a/.DS_Store b/.DS_Store index a07d95611763c2fa7ca7cc72524f44729a524f44..030db6da2f94bbe8446d1aa8c5ec4d3b512cb911 100644 GIT binary patch delta 320 zcmZoMXfc@J&nU1lU^g?Pz+@g4Rn^@L3=Fpa!2rl&VBlpaVn}63W5@xL$qXe7nGE?1 zd6Q*WBpHn-C$NZ3_F)lbv<0#h8MjYvVkzVjudX&W)lo1qvY7mjMVhg5vJ|U4W7lLW zR&&NBlVeyUd5x0Fiwlx+@{@puS|*n rQym3EQ`5;lY|@NflQY=l8M`MJvzh}*kRE;Z8yg#zFm7h&_{$FfUYi;B diff --git a/week2/.DS_Store b/week2/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..81d7e8001b9681415d75b50ea66fcddaa69c9927 GIT binary patch literal 8196 zcmeHM&2JJx6n{gpU4kUU6z!oVlh`9xprRNrE8@YcGyN75<^Hh`f>K^ zU(o1HW72~?STynAiT}idCw=qLW)~JtrW%qRvcIhC;;I@%yQ82VzRpwN^kYFsT5~-4`JbMWA~>#`1T*lx|>I z|0PV2mG9f!*H5E(AlK)_@v!=Yb*pWw z-D#Dr=6!y&$(Uy!wJrOuTkqD=%Qu{%?n?t`opUSl1Z{OW?t9dN?e89Rf_*MS?Fgk2G% zi?uy1IOl-*EwWu1&E# w!orRF4I~N*R-ugmJU;%z5Ze@8Imc8ukcd5KC%zG&-~VEZM!)~X^qbr2H(?n7RR910 literal 0 HcmV?d00001 diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/.DS_Store" "b/week2/15 \353\260\225\354\261\204\354\234\244/.DS_Store" new file mode 100644 index 0000000000000000000000000000000000000000..dbc35174309921ecbc009975ed15052fd28dc2d6 GIT binary patch literal 6148 zcmeHKu}T9$5PhR50uo4RxnB_Q50;P=*8YGbQ4mfKB=*<&%~twmW)+W%*jdOMn0dFe z^LDvc+}r@L^~>Q3SOS>S9r5a6YQFD2v9p#jBAsX4VUHso(Bo-ReLCUX1)j;gM>pcH z@QA~8*Y9^-zhf1Tw>RSIJ?!*x%1Qw#AO)m=6p#YHDB!)9Hor(zlmb#f3VbQx--kkX ztPO|6_;fJD2tb@M9meOFC5Xin#M*F3WQJx*B_`F{h+#=*zO=g9a7au#EN= 60) { + console.log("합격"); +} else { + console.log("불합격"); +} \ No newline at end of file diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \353\260\225\354\261\204\354\234\244/\355\225\250\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..2629a1e --- /dev/null +++ "b/week2/15 \353\260\225\354\261\204\354\234\244/\355\225\250\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,3 @@ +function add(a: number, b: number): number { + return a + b; + } \ No newline at end of file diff --git a/week2/reflection.md b/week2/reflection.md index bc7c485..ac20695 100644 --- a/week2/reflection.md +++ b/week2/reflection.md @@ -27,4 +27,4 @@ 2. 컴파일 단계에서 에러 내주는 것도 좋다(코드 확인하기 쉬움) 3. 다른 컴퓨터 언어와는 명령 체계 같은 것이 또 달라서 헷갈린다 4. 사용자에게 직접 input 받는 것도 짜보고 싶어졌다! -5. 타입 체크를 any로 하면 함수 가독성이 떨어져서 문제인가요??? \ No newline at end of file +5. 타입 체크를 any로 하면 함수 가독성이 떨어져서 문제인가요??? From 7988814770a72189ac0b501753fb0d360d5ee283 Mon Sep 17 00:00:00 2001 From: profobbb Date: Fri, 2 May 2025 20:08:07 +0900 Subject: [PATCH 26/59] =?UTF-8?q?[week2]=2015=EA=B8=B0=20=EB=B0=95?= =?UTF-8?q?=EC=B1=84=EC=9C=A4=20=ED=9A=8C=EA=B3=A0=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/reflection.md | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/week2/reflection.md b/week2/reflection.md index ac20695..067da21 100644 --- a/week2/reflection.md +++ b/week2/reflection.md @@ -6,25 +6,21 @@ -배열, 튜플(길이 고정+형태 다른 요소) -객체, any(아무거나 가능), unknown, union(복수 타입 가능), literal type(정해진 값만), enum(상수 그룹) 2. 조건문 --조건식 결과는 무조건 T OR F --타입 비교 틀리면 컴파일 에러 +-조건식 결과는 무조건 T,F 중 하나 +-타입 비교!! 3. 함수 선언 --매개변수 타입 지정 필요 --정해진 타입, 정해진 개수를 전달하지 않으면 에러 +-매개변수 지정 ## 알게 된 점 -1. any(아무 타입이나 가능), unknown 같은 타입이 있음 -2. 조건식의 결과가 무조건 true OR false -3. 매개변수 타입은 지정 필수; BUT 반환 타입은 선택 +1. any, unknown 타입이 있음 +2. 반환 타입 지정이 선택임 ## 헷갈렸던 점 -1. C나 Java와는 변수 선언 방식이 다르다 -2. 매개변수 타입도 반드시 지정해줘야 한다(무려 컴파일 단계에서 에러!) -3. +사소한 거지만 let으로 변수 선언한다(근데 직관적이어서 좋음) +1. 변수 개수에 따라 선언이 다름 +2. 변수 선언 방식이 다름 ## 느낀 점 (Playground or StackBlitz 포함) -1. Playground는 온라인 에디팅이 간단해서 편리했다(설치 필요X) -2. 컴파일 단계에서 에러 내주는 것도 좋다(코드 확인하기 쉬움) -3. 다른 컴퓨터 언어와는 명령 체계 같은 것이 또 달라서 헷갈린다 -4. 사용자에게 직접 input 받는 것도 짜보고 싶어졌다! -5. 타입 체크를 any로 하면 함수 가독성이 떨어져서 문제인가요??? +1. 생각보다는 변수 선언이나 조건문이 파이썬과 비슷해서 어렵지는 않았다. +2. 그러나 잔실수로 인한 에러가 많아서 주의가 필요하다. +3. 명령어가 조금씩 달라 잘 기억해야 할 것 같다. + From b54ff105028270dfa993af427ca4061d4dfee636 Mon Sep 17 00:00:00 2001 From: profobbb Date: Fri, 2 May 2025 20:57:20 +0900 Subject: [PATCH 27/59] docs: add assignment week2 --- .DS_Store | Bin 6148 -> 6148 bytes week2/.DS_Store | Bin 8196 -> 8196 bytes .../.DS_Store" | Bin 6148 -> 6148 bytes 3 files changed, 0 insertions(+), 0 deletions(-) diff --git a/.DS_Store b/.DS_Store index 030db6da2f94bbe8446d1aa8c5ec4d3b512cb911..9caf0c9bcae825e870695419ef394bb532422055 100644 GIT binary patch delta 79 zcmZoMXfc@J&&abeU^g=(&t@K$d5nzRlO5P4d5x0Fiwlx+@{<@C7S$3TG7XA*^iDn0@)}kQV6Ih$iQvG$X*(AQRZ2l+0&I|y8p$Ss} diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/.DS_Store" "b/week2/15 \353\260\225\354\261\204\354\234\244/.DS_Store" index dbc35174309921ecbc009975ed15052fd28dc2d6..d82875beb6a2c6e1ca264263dc62dee4462ed8ae 100644 GIT binary patch delta 249 zcmZoMXfc=|#>B`mu~2NHo}wrV0|Nsi1A_p=RUQUCh7yKi&z$_^i5HjGgCsci7##hw z=Fg=$$dXAp`AI-I0U&k+V!i)h0Aw*Ru)WPTAt4xqmn8i07ShsYjg05N|{I{*Lx delta 125 zcmZoMXfc=|#>CJ*u~2NHo}wrt0|NsP3otOGG9)vUFk~|1GvrMyRM!Vd@G=wuh0_>v zkR=)P7;+g>Jah7slXCKtfU1Cc8Gmlx!RXI6`2pj<&Fmcf96<9oUu68wJegm_kda}s M4UhEZ7?Bms0HF~bxc~qF From a26a4709dd2ca1fe2149d6cda03a9d95f468daba Mon Sep 17 00:00:00 2001 From: profobbb Date: Fri, 2 May 2025 21:06:57 +0900 Subject: [PATCH 28/59] =?UTF-8?q?[week2]=2015=EA=B8=B0=20=EB=B0=95?= =?UTF-8?q?=EC=B1=84=EC=9C=A4=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 6148 -> 6148 bytes week2/.DS_Store | Bin 0 -> 6148 bytes .../reflection.md" | 25 ++++++++++++++++++ ...64\352\263\274\355\212\234\355\224\214.ts" | 7 +++++ ...00\354\210\230\354\204\240\354\226\270.ts" | 7 +++++ .../\354\241\260\352\261\264\353\254\270.ts" | 9 +++++++ ...50\354\210\230\354\204\240\354\226\270.ts" | 3 +++ 7 files changed, 51 insertions(+) create mode 100644 week2/.DS_Store create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/reflection.md" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/\353\263\200\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/\354\241\260\352\261\264\353\254\270.ts" create mode 100644 "week2/15 \353\260\225\354\261\204\354\234\244/\355\225\250\354\210\230\354\204\240\354\226\270.ts" diff --git a/.DS_Store b/.DS_Store index a07d95611763c2fa7ca7cc72524f44729a524f44..2f8370714bfcc824113cf994c738eae76d15dcdf 100644 GIT binary patch delta 267 zcmZoMXfc@J&&a+Tzf>_fy3=NER6by}wC;ww9 zW>p3%xB(OvRldFpD9y@H z&X5X(*$hTG>4w3{`MCu^Q5Zmy&CPdlff~s%#bQ%v*`s5QKxHT@QV6Ih$UwG125bwG b0cF8Oc{%xc=|FMD&2_ADjGNgx{_+C=l7>K4 delta 69 zcmZoMXfc@J&&atkU^g=(=VTrhRYu3jhU}7)y;(#io3M*bE@f%tFg7yPQ7|+$o&1lb Xn6Voqz4;rPAmhe{Y{t#(9Dn%%j4TtK diff --git a/week2/.DS_Store b/week2/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b2bf364848e5071b4918ca3d7ea975303c3c9f4b GIT binary patch literal 6148 zcmeHKO^ee&7=A{Jt#*~oMfM`hFW9w$;K4&&<3SJ)TNONM+eEvVn$V_-x7_Xh~O z;8k!BDy(=G_7C_QJSd3zyfcIJBU$hwqVtxSXXc&feUo{T%ya;#&1u{LRspnF1REz< zRhW!RS+XO}vqDsoBj^P$f>S|1Xb0mZws&|1yaIol0`l#)(ZPA>pgH^f20K^NY|u}$ zJ{epd)HC9jAI8iiYNFEno$eqT<%VOc8s;dABA35)aqIi-N1xtbVn8iB{tb3MT)K;s z7$dm^oq24cub>6jQbn zdN&ZE$FUw;H`z~kH{u;*h?w^h^OqWyupf|_A!q-x$s&0Z=8}jTyw05p|6?)|MxG<5 z@_9mY1UP&)*WGMRSE?oN$Trvb<9t)3wPW>T*4EzH{m;AKK0ZHKp|8MXUQ@`Eoz=9t z_vYQ&TfP6PlKpalee6TNTfDwd#Z_k(xXpuMeP;D^fz9rJYuvNNT5XHI_6m3fyaK-z zko7^c2!;+zi)QIyWsU&E2HnQkma~M!XosQ0(jrG_%7zkcsB%XPWy9&$ju$#CE!uD> zclc25%F3Nkl({WN zd+XBVWUtjMcUi=QS6Vb7tlV~N8nP9yu^8i+mIg6&SX!iq=Kly78GPjx_@fH^1oz&> AFaQ7m literal 0 HcmV?d00001 diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/reflection.md" "b/week2/15 \353\260\225\354\261\204\354\234\244/reflection.md" new file mode 100644 index 0000000..0190d52 --- /dev/null +++ "b/week2/15 \353\260\225\354\261\204\354\234\244/reflection.md" @@ -0,0 +1,25 @@ +# week2 : Variable, Type, Condition and Function + +## 기본 개념 +1. 자료형 +-기본 타입 = string(문자열), number(정수, 실수), boolean(TF), null(값X), undefined, bigint, symbol(고유 식별자) +-배열, 튜플(길이 고정+형태 다른 요소) +-객체, any(아무거나 가능), unknown, union(복수 타입 가능), literal type(정해진 값만), enum(상수 그룹) +2. 조건문 +-조건식 결과는 무조건 T,F 중 하나 +-타입 비교!! +3. 함수 선언 +-매개변수 지정 + +## 알게 된 점 +1. any, unknown 타입이 있음 +2. 반환 타입 지정이 선택임 + +## 헷갈렸던 점 +1. 변수 개수에 따라 선언이 다름 +2. 변수 선언 방식이 다름 + +## 느낀 점 (Playground or StackBlitz 포함) +1. 생각보다는 변수 선언이나 조건문이 파이썬과 비슷해서 어렵지는 않았다. +2. 그러나 잔실수로 인한 에러가 많아서 주의가 필요하다. +3. 명령어가 조금씩 달라 잘 기억해야 할 것 같다. diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" "b/week2/15 \353\260\225\354\261\204\354\234\244/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" new file mode 100644 index 0000000..9b0b82a --- /dev/null +++ "b/week2/15 \353\260\225\354\261\204\354\234\244/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" @@ -0,0 +1,7 @@ +//배열: 좋아하는 음식 출력 +let food : string[] = ["초밥", "샌드위치", "밀크티"]; +console.log(food) + +//튜플 선언: 학교, 학년 출력 +let studID : [string, number] = ["이화여자대학교", 1]; //학교, 학년 +console.log(studID) \ No newline at end of file diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/\353\263\200\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \353\260\225\354\261\204\354\234\244/\353\263\200\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..9e0b80f --- /dev/null +++ "b/week2/15 \353\260\225\354\261\204\354\234\244/\353\263\200\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,7 @@ +let 이름 : string = '박채윤'; +let 나이 : number = 23; +let 합격여부 : boolean = true; + +console.log("이름은 " + 이름); +console.log("나이는 " + 나이); +console.log("합격여부는 " + 합격여부); \ No newline at end of file diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/\354\241\260\352\261\264\353\254\270.ts" "b/week2/15 \353\260\225\354\261\204\354\234\244/\354\241\260\352\261\264\353\254\270.ts" new file mode 100644 index 0000000..4261d7c --- /dev/null +++ "b/week2/15 \353\260\225\354\261\204\354\234\244/\354\241\260\352\261\264\353\254\270.ts" @@ -0,0 +1,9 @@ +//점수 선언 +let score : number = 25; + +//조건문 +if (score >= 60) { + console.log("합격"); +} else { + console.log("불합격"); +} \ No newline at end of file diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \353\260\225\354\261\204\354\234\244/\355\225\250\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..2629a1e --- /dev/null +++ "b/week2/15 \353\260\225\354\261\204\354\234\244/\355\225\250\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,3 @@ +function add(a: number, b: number): number { + return a + b; + } \ No newline at end of file From 74bc592b540a491f611d144c504c7124e9868686 Mon Sep 17 00:00:00 2001 From: yoona Date: Sun, 4 May 2025 02:28:17 +0900 Subject: [PATCH 29/59] =?UTF-8?q?Revert=20"[week2]=2015=EA=B8=B0=20?= =?UTF-8?q?=EB=B0=95=EC=B1=84=EC=9C=A4=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit a26a4709dd2ca1fe2149d6cda03a9d95f468daba. --- .DS_Store | Bin 0 -> 6148 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a07d95611763c2fa7ca7cc72524f44729a524f44 GIT binary patch literal 6148 zcmeHKyKdVs6uoquMrshiLknaHK%lFU`Vj{xx+tzQWattV?a&skRT-%eMGX9?2E%~n z_8;;KUHc{ZmrU)sB!l|7WC#j_*SI|7<+&7iWRfBgiS{_I6IF=FgEN+&qF75#4{K1-L_F5nb!3jA*h@Y?n19P9RkIyAF>)z>Ih5qf!RIDsGj(S{n) zHs#dE?~>|g=`2$mtY=2~@Y;^~JGxGj;iy)-6{W56_LCiN$J_Njhu>5lj(VfbG~Z^6ecjFn?jpStgp!HdX=qFZXsg zc7|?ZP64ODLlxltLBbgWi-keGb)e8!0ALwmZK(4H1LsJKfyKfgdSJq&0!^y0R}5j& z5to)1SS$>hbQ1RRA?%Zdy`c#Gbc`=GokU>Jl}-Vtz`O!mrdi?h|8)KRe?G~zoB~dP zjZ#3AJ7K4dDcQ4iX>xqlO86Hz8}kZ-It7J2j&+5P;(fR_^hvG&1B-=0L}2biK+E6? Jr@*5s@E3O#oWKA8 literal 0 HcmV?d00001 From cf162ac65bfccb5770d1b199b4d7b9b38b4ae5e9 Mon Sep 17 00:00:00 2001 From: yoona Date: Sun, 4 May 2025 02:56:18 +0900 Subject: [PATCH 30/59] Merge pull request #8 from EwhaKing/uri-git23 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [week2] 15김유리 회고 제출 --- week2/reflection.md | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/week2/reflection.md b/week2/reflection.md index 067da21..bc7c485 100644 --- a/week2/reflection.md +++ b/week2/reflection.md @@ -6,21 +6,25 @@ -배열, 튜플(길이 고정+형태 다른 요소) -객체, any(아무거나 가능), unknown, union(복수 타입 가능), literal type(정해진 값만), enum(상수 그룹) 2. 조건문 --조건식 결과는 무조건 T,F 중 하나 --타입 비교!! +-조건식 결과는 무조건 T OR F +-타입 비교 틀리면 컴파일 에러 3. 함수 선언 --매개변수 지정 +-매개변수 타입 지정 필요 +-정해진 타입, 정해진 개수를 전달하지 않으면 에러 ## 알게 된 점 -1. any, unknown 타입이 있음 -2. 반환 타입 지정이 선택임 +1. any(아무 타입이나 가능), unknown 같은 타입이 있음 +2. 조건식의 결과가 무조건 true OR false +3. 매개변수 타입은 지정 필수; BUT 반환 타입은 선택 ## 헷갈렸던 점 -1. 변수 개수에 따라 선언이 다름 -2. 변수 선언 방식이 다름 +1. C나 Java와는 변수 선언 방식이 다르다 +2. 매개변수 타입도 반드시 지정해줘야 한다(무려 컴파일 단계에서 에러!) +3. +사소한 거지만 let으로 변수 선언한다(근데 직관적이어서 좋음) ## 느낀 점 (Playground or StackBlitz 포함) -1. 생각보다는 변수 선언이나 조건문이 파이썬과 비슷해서 어렵지는 않았다. -2. 그러나 잔실수로 인한 에러가 많아서 주의가 필요하다. -3. 명령어가 조금씩 달라 잘 기억해야 할 것 같다. - +1. Playground는 온라인 에디팅이 간단해서 편리했다(설치 필요X) +2. 컴파일 단계에서 에러 내주는 것도 좋다(코드 확인하기 쉬움) +3. 다른 컴퓨터 언어와는 명령 체계 같은 것이 또 달라서 헷갈린다 +4. 사용자에게 직접 input 받는 것도 짜보고 싶어졌다! +5. 타입 체크를 any로 하면 함수 가독성이 떨어져서 문제인가요??? \ No newline at end of file From 73464e846709170104e3e91631547b7dcde620c5 Mon Sep 17 00:00:00 2001 From: yoona Date: Sun, 4 May 2025 03:19:43 +0900 Subject: [PATCH 31/59] =?UTF-8?q?=EC=9E=98=EB=AA=BB=EB=90=9C=20=EB=A8=B8?= =?UTF-8?q?=EC=A7=80=20=ED=9B=84=20=EC=9C=A0=EC=8B=A4=EB=90=9C=20week2/15?= =?UTF-8?q?=EA=B9=80=EC=9C=A0=EB=A6=AC=20=ED=8C=8C=EC=9D=BC=20=EB=B3=B5?= =?UTF-8?q?=EA=B5=AC=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 6148 -> 6148 bytes week1/.DS_Store | Bin 8196 -> 8196 bytes .../reflection.md" | 0 week2/.DS_Store | Bin 8196 -> 10244 bytes .../arrayTuple.ts" | 0 .../condition.ts" | 0 .../function.ts" | 0 .../reflection.md" | 0 .../variable.ts" | 0 9 files changed, 0 insertions(+), 0 deletions(-) rename reflection.md => "week1/15 \352\271\200\355\230\234\354\233\220/reflection.md" (100%) rename week2/arrayTuple.ts => "week2/15 \352\271\200\354\234\240\353\246\254/arrayTuple.ts" (100%) rename week2/condition.ts => "week2/15 \352\271\200\354\234\240\353\246\254/condition.ts" (100%) rename week2/function.ts => "week2/15 \352\271\200\354\234\240\353\246\254/function.ts" (100%) rename week2/reflection.md => "week2/15 \352\271\200\354\234\240\353\246\254/reflection.md" (100%) rename week2/variable.ts => "week2/15 \352\271\200\354\234\240\353\246\254/variable.ts" (100%) diff --git a/.DS_Store b/.DS_Store index a07d95611763c2fa7ca7cc72524f44729a524f44..d457c41d61bd2ea78d7334cf0817a8fadff4bfeb 100644 GIT binary patch delta 74 zcmZoMXfc@J&&a(oU^g=(_hcTHR~#mmraB5Hrbd(hvGg(;O)g_;;4m>a*HJLCv;Ycu d@*0%|7v<&T=cO|+FfeYeW1Y*mnVsV=KL9N~7100y delta 44 zcmZoMXfc@J&&atkU^g=(=VTt1R~*JhraB6SrlynsvGi^(XPdw{vEj{Tc8)xJ@<^I)^IYC+xwt z&f%KOu?v$Mgc?xfgdpN&!9{sF`FZIK3=E8udxR}m4$2&3#8kXT6eNzKc!w~;EnwRZ ui8%7IF&HwKGANu7J+5-p1=ARaII=Ml3(YsPOMGLQ+$&&>>OLA;X#xQ1Txq}n delta 110 zcmZp1XmOa}&&a)xJ@<^I>%vTY7UgP wFa-HV%6u{r5p>-4@MW}%cMY2T4Q1U?_h{c33u#yS}Kp}2Iv2g7uAB~U|DI*^< zD}O-+8y`{!I?#Z`z?A=lfeGHbyHMJ-&JOfi^n z$9`Sf8B!007Vf}g^1i#kGgkCvLym zt#^B!a=m?@jy7G_HjmnM^RCtG*OIF@U8h^OoMxLlSdAu{Jh*2$4Yyx*drqUneXC+X zi)pc1@~r1&Gy28S)j>x0uH~_Pxo~ALh-s+{m#*KbJ+*fn_c@Obn0&xMLL490FR&Ge zez)3oY}eVwe)2gQGe-KSy&xHO9>>Ed8soLY9}~8(!fp3c2Wx@d6(r7n&9nX2#ETg{ zmn;4q;v)KR;`^!ZmC<^TVubEW2ytQSBlGdZ=VIFPa@hj1$rt9Zd5PDLGIKW4ERi!# z#1zivYihLqr4nSr*Yum|H7#s?Y(AVgn{%F5z-g1um*$|Mg@`f}4WW~0L`V~85>SUW ze(LZHHlYVCu%QVX(1p$fD0-mzL7j#zaKV8FSZHnWc8DKe?tZ^GJjU}l=snMiZmHiZ zf!EkXPr5q4=MFT2*BLp3p09m3G!DBwMhk0mR&;!c_|J!5qGXW>EQw&#l>gtFz5l;R zNK~wfz`_w=(Mq*a#;}im`c4v{TwBNT2nz|>4Ta_|SOqo$@c8%-Lu~74NWU4)cc?B(Wv)7pMQ&5{Q-N|0Dk}g diff --git a/week2/arrayTuple.ts "b/week2/15 \352\271\200\354\234\240\353\246\254/arrayTuple.ts" similarity index 100% rename from week2/arrayTuple.ts rename to "week2/15 \352\271\200\354\234\240\353\246\254/arrayTuple.ts" diff --git a/week2/condition.ts "b/week2/15 \352\271\200\354\234\240\353\246\254/condition.ts" similarity index 100% rename from week2/condition.ts rename to "week2/15 \352\271\200\354\234\240\353\246\254/condition.ts" diff --git a/week2/function.ts "b/week2/15 \352\271\200\354\234\240\353\246\254/function.ts" similarity index 100% rename from week2/function.ts rename to "week2/15 \352\271\200\354\234\240\353\246\254/function.ts" diff --git a/week2/reflection.md "b/week2/15 \352\271\200\354\234\240\353\246\254/reflection.md" similarity index 100% rename from week2/reflection.md rename to "week2/15 \352\271\200\354\234\240\353\246\254/reflection.md" diff --git a/week2/variable.ts "b/week2/15 \352\271\200\354\234\240\353\246\254/variable.ts" similarity index 100% rename from week2/variable.ts rename to "week2/15 \352\271\200\354\234\240\353\246\254/variable.ts" From 4939901a20486a82bcc119a40f4bd7531e87b4e5 Mon Sep 17 00:00:00 2001 From: yoona Date: Sun, 4 May 2025 03:26:46 +0900 Subject: [PATCH 32/59] =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit . --- .DS_Store | Bin 6148 -> 6148 bytes week1/.DS_Store | Bin 8196 -> 8196 bytes week2/.DS_Store | Bin 10244 -> 10244 bytes 3 files changed, 0 insertions(+), 0 deletions(-) diff --git a/.DS_Store b/.DS_Store index d457c41d61bd2ea78d7334cf0817a8fadff4bfeb..195b24b45f323c54cb26c43ba6e43a850f2156aa 100644 GIT binary patch delta 16 XcmZoMXffEp%QpEtOTgw>w&j8VGZqEd delta 24 fcmZoMXffEp%f@bQuA^XNX)*a9i|6K8w&j8VR;LF% diff --git a/week1/.DS_Store b/week1/.DS_Store index ffc2038bb49da8b4626066a91749d15c6c129907..5a7db2980c37bc49cbcbb150c1d03b9c54defbf6 100644 GIT binary patch delta 130 zcmZp1XmQxUD9mnduA^XNX)*bNfZJq0;qxf`ED<<=vxBH8BV5u!)MN4zv9oYKQ1j+} Q;?=A$0fMS0?-O?e07*0?dH?_b delta 72 wcmZp1XmQxUC_MS3fbV2K;qzcRO9Vo?f7m539&Jvj=3;;^?52647 delta 53 zcmZn(XbISGQed*BsPAMk!Si6+Na!4gnSrs6f{~@+3Bll_D*OwN&Toy;%DzBx-| GmM{SIoe{PG From 42507e082fa89bd8103cff71da429f86588710f2 Mon Sep 17 00:00:00 2001 From: yoonad16 Date: Sun, 4 May 2025 03:23:10 +0900 Subject: [PATCH 33/59] Merge pull request #12 from nyamic/nyamic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [week2] 15김혜원 회고 제출 --- week1/reflection.md | 48 +++++++++++++++++ ...00\354\210\230\354\204\240\354\226\270.ts" | 7 +++ ...64\352\263\274\355\212\234\355\224\214.ts" | 5 ++ ...3-\354\241\260\352\261\264\353\254\270.ts" | 9 ++++ ...50\354\210\230\354\204\240\354\226\270.ts" | 18 +++++++ week2/week2.md | 54 +++++++++++++++++++ 6 files changed, 141 insertions(+) create mode 100644 week1/reflection.md create mode 100644 "week2/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" create mode 100644 "week2/3-\354\241\260\352\261\264\353\254\270.ts" create mode 100644 "week2/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" create mode 100644 week2/week2.md diff --git a/week1/reflection.md b/week1/reflection.md new file mode 100644 index 0000000..5259073 --- /dev/null +++ b/week1/reflection.md @@ -0,0 +1,48 @@ +## week 1: 서버와 프레임워크, Colyseus 구조 이해 +## 새로 알게 된 개념 3가지 + +서버 클라이언트 ex) 아파치 PHP mysql + +**서버의 운용형태** +1) 온프레미스 + - 스스로 설비 보유 + --> 설비구축 시간소요 큼 but 원하는 대로 가능 + +2) 클라우드 + - 다른 사업자가 보유한 설비 + --> 설비구축조달 소요x but 사업자가 제공하는 범위 안에서만 구축가능 + - 트러블슈팅 어려움 + ex) AWS, GCP, Azure + + +**서버와 클라이언트 +PHP?** +서버 쪽 기술 +Common Gateway Interface: 웹서버와 PHP엔진 사이의 통신 규약 +확장자명 PHP --> PHP 엔진이 실행해라 + +리눅스: 서버 os 많이씀 +자바, 파이썬, JS 등: os 종류 관계없이, os와 프로그램 사이 어댑터 +서버개발은 보통 리눅스+어댑터프로그램(?) + +cf. API 문서: 프로그램의 특정 기능이 어떻게 작동하는지 정리한 문서 + - 요청, 응답으로 나눠서 기능 + +프론트엔드 클라이언트 +백엔드 서버 + + +**라이브러리vs프레임워크** +라이브러리(ex jQuery) --> 내가 코드를 컨트롤. 내가 필요할 때 소환 +프레임워크(ex django) --> 정해진 규칙에 맞춰서 코딩하기 +근데 리액트, vue같은건 관점에 따라 달라지긴함 + + +**Colyseus** + + + +## 헷갈렸던 부분 +1주차 내용은 괜찮은데 아직 깃크라켄이 너무 어색해요..............ㅠㅠ + +## 느낀 점 +항상 백엔드 개념이 추상적으로만 느껴졌는데 서버개발을 하는 과정과 원리에 대해 전체적으로 볼 수 있어서 좋았다! 리눅스, PHP 등 들어는 봤지만 정확히 모르는 개념도 정리해 보는 기회가 되었다. \ No newline at end of file diff --git "a/week2/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" "b/week2/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..2adb3ca --- /dev/null +++ "b/week2/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,7 @@ +let 이름: string = "혜원킴"; +let 나이: number = 20; +let 합격여부: boolean = true; + +console.log(이름); +console.log(나이); +console.log(합격여부); \ No newline at end of file diff --git "a/week2/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" "b/week2/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" new file mode 100644 index 0000000..ac71e58 --- /dev/null +++ "b/week2/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" @@ -0,0 +1,5 @@ +let favoriteFoods: Array = ["복숭아", "키위", "스파게티"]; +let univ: [string, number] = ["Ewha Womans University", 25]; + +console.log(favoriteFoods); +console.log(univ); \ No newline at end of file diff --git "a/week2/3-\354\241\260\352\261\264\353\254\270.ts" "b/week2/3-\354\241\260\352\261\264\353\254\270.ts" new file mode 100644 index 0000000..49a3e6d --- /dev/null +++ "b/week2/3-\354\241\260\352\261\264\353\254\270.ts" @@ -0,0 +1,9 @@ +// 점수 입력받기 +let score: number = prompt("점수를 입력하세요:"); + +// 60점 넘었는지 확인 +if (score > 60) { + console.log("합격"); +} else { + console.log("불합격"); +} \ No newline at end of file diff --git "a/week2/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..1266b89 --- /dev/null +++ "b/week2/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,18 @@ +// 숫자 2개 입력받기 +let num1: number = Number(prompt("첫 번째 숫자를 입력하세요:")); +let num2: number = Number(prompt("두 번째 숫자를 입력하세요:")); + +/** +* number 2개의 합 구하기 +* +* @param x 첫 번째 숫자 +* @param y 두 번째 숫자 +* @returns 두 숫자의 합 +*/ +//저번 세션에서 배웠던 주석규칙을 활용해 보았습니당. 이거 맞나요? +function add(x: number, y: number): number { + return x + y; +} + +// num1+num2 값을 콘솔에 출력 +console.log(add(num1, num2)); \ No newline at end of file diff --git a/week2/week2.md b/week2/week2.md new file mode 100644 index 0000000..90f9d48 --- /dev/null +++ b/week2/week2.md @@ -0,0 +1,54 @@ +# Week 2: 변수, 타입, 조건문, 함수 + +## 새로 알게 된 개념 +1. TypeScript Playground 에디터로 웹에서 코드 작성 및 실행이 가능하다. +2. TS는 변수 선언 시 타입을 같이 명시할 수 있다. + let 변수명: 자료형 = 값; + *타입을 쓰지 않아도 타입 추론 기능이 있어서 초기 값이 있다면 그 값에 따라 변수 타입을 자동으로 유추해 준다. + +**배열 선언** + let 숫자들: number[] = [1, 2, 3]; + let 문자열들: Array = ["a", "b", "c"]; +**튜플 선언** + let 좌표: [number, string] = [123, "px"]; +**unknown** + 선언 시 아무 타입이든 상관없음, 타입 체크를 하면 사용할 수 있음 +**union** + 복수 타입 허용 + let ID: string | number; +**literal type** + 정해진 값만 허용 + let 방향: "left" | "right" | "up" | "down"; + 방향 = "left"; // 가능 + + +## 헷갈렸던 부분 +**enum 타입을 어떤 상황에 쓰는 건지 감이 잘 안 온다.** +--> 찾아보니 서로 관련 있는 상수들의 집합을 정의할 때 사용한다고 한다. + +ex) GameState라는 자료형을 하나 더 만드는 느낌인 듯 하다! + enum GameState { + Start, + Playing, + GameOver + } + let state: GameState = GameState.Playing; + +**TS에서는 변수명을 한글로도 쓸 수 있는 것인가??** +앗... 생각해 보니 파이썬도 가능했던 것 같다. +--> 찾아보니 C, C++ 말고는 거의 다 가능하다고 한다. (+ TS는 JS 기반이어서 유니코드 완전 지원) + +**unknown, any는 언제 쓸까?** +입력받을 값의 타입이 확실하지 않을 때 쓰는 걸까? + + + +## Playground 사용해 본 소감 +뭔가를 추가로 깔아야 하는 게 귀찮아서 항상 코랩 replit 주피터 등등 웹 에디터를 애용했던 사람으로서... 편하고 좋아요! + + +## 느낀 점 +1. 명석한 1학년둥이로 봐 주셔서 감사합니다 기대를 충족시키기 위해 분발할게요 노력할게요 아자아자 +2. JS를 정말 오랜만에 봐서 반가웠다. 변수 선언할 때 데이터형을 지정할 필요가 없다는 것도 까먹고 있었다가 오늘 다시 알았다. +3. 읽는 내내 JS에 타입을 지정하고 확인하는 절차가 빠져 있는 게 너무너무 의아하고 신기했다. +(+ 질문&답 부분 넘 유익해용) \ No newline at end of file From dc619cb57ae286c64f7b761b695d03397280efe2 Mon Sep 17 00:00:00 2001 From: yoona Date: Sun, 4 May 2025 03:41:13 +0900 Subject: [PATCH 34/59] =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/.DS_Store | Bin 10244 -> 8196 bytes ...00\354\210\230\354\204\240\354\226\270.ts" | 0 ...64\352\263\274\355\212\234\355\224\214.ts" | 0 ...3-\354\241\260\352\261\264\353\254\270.ts" | 0 ...50\354\210\230\354\204\240\354\226\270.ts" | 0 .../week2.md" | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename "week2/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" => "week2/15 \352\271\200\355\230\234\354\233\220/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" (100%) rename "week2/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" => "week2/15 \352\271\200\355\230\234\354\233\220/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" (100%) rename "week2/3-\354\241\260\352\261\264\353\254\270.ts" => "week2/15 \352\271\200\355\230\234\354\233\220/3-\354\241\260\352\261\264\353\254\270.ts" (100%) rename "week2/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" => "week2/15 \352\271\200\355\230\234\354\233\220/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" (100%) rename week2/week2.md => "week2/15 \352\271\200\355\230\234\354\233\220/week2.md" (100%) diff --git a/week2/.DS_Store b/week2/.DS_Store index b5f73040ece458f12603c1c1c9e5c259ec226f6d..4997a0301c39e1df154c48fa1bad5d7b1062b5e4 100644 GIT binary patch delta 534 zcmZn(XmOBWU|?W$DortDU;r^WfEYvza8E20o2aMAD7rCVH$S83WF7%`#_f{}1Pj%~ ztE){cO?4E^4Qq82sx6HSbQCNM&1-8pIYgE9t%KsTb8_?YJ10Ac$TN0L<`GOLN1KKa zS=wBL$a zyFEVU2xQ|_or0p;1HbZu3}T%zd7rrF#s)VwL1u`16}W-4D=3gR7Jg@*%r6rt!UPF= a4Uhsx1_lEVJ-I;UAh$$ywF!k`Dg^+IyJ}AW diff --git "a/week2/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \352\271\200\355\230\234\354\233\220/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" similarity index 100% rename from "week2/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" rename to "week2/15 \352\271\200\355\230\234\354\233\220/1-\353\263\200\354\210\230\354\204\240\354\226\270.ts" diff --git "a/week2/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" "b/week2/15 \352\271\200\355\230\234\354\233\220/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" similarity index 100% rename from "week2/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" rename to "week2/15 \352\271\200\355\230\234\354\233\220/2-\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" diff --git "a/week2/3-\354\241\260\352\261\264\353\254\270.ts" "b/week2/15 \352\271\200\355\230\234\354\233\220/3-\354\241\260\352\261\264\353\254\270.ts" similarity index 100% rename from "week2/3-\354\241\260\352\261\264\353\254\270.ts" rename to "week2/15 \352\271\200\355\230\234\354\233\220/3-\354\241\260\352\261\264\353\254\270.ts" diff --git "a/week2/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \352\271\200\355\230\234\354\233\220/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" similarity index 100% rename from "week2/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" rename to "week2/15 \352\271\200\355\230\234\354\233\220/4-\355\225\250\354\210\230\354\204\240\354\226\270.ts" diff --git a/week2/week2.md "b/week2/15 \352\271\200\355\230\234\354\233\220/week2.md" similarity index 100% rename from week2/week2.md rename to "week2/15 \352\271\200\355\230\234\354\233\220/week2.md" From 85544c7525c2b9baa35f5bad72474260c4cd0478 Mon Sep 17 00:00:00 2001 From: profobbb Date: Tue, 6 May 2025 19:53:40 +0900 Subject: [PATCH 35/59] =?UTF-8?q?[week2]=2015=EA=B8=B0=20=EB=B0=95?= =?UTF-8?q?=EC=B1=84=EC=9C=A4=20reflection.md=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git "a/week2/15 \353\260\225\354\261\204\354\234\244/reflection.md" "b/week2/15 \353\260\225\354\261\204\354\234\244/reflection.md" index 0190d52..9cf660b 100644 --- "a/week2/15 \353\260\225\354\261\204\354\234\244/reflection.md" +++ "b/week2/15 \353\260\225\354\261\204\354\234\244/reflection.md" @@ -2,24 +2,25 @@ ## 기본 개념 1. 자료형 --기본 타입 = string(문자열), number(정수, 실수), boolean(TF), null(값X), undefined, bigint, symbol(고유 식별자) --배열, 튜플(길이 고정+형태 다른 요소) --객체, any(아무거나 가능), unknown, union(복수 타입 가능), literal type(정해진 값만), enum(상수 그룹) +-bigint, number, undefined, symbol 등 새로운 타입을 알게됨 +-배열, 튜플: 길이가 고정 +-unknown, any, union, literal type 2. 조건문 --조건식 결과는 무조건 T,F 중 하나 --타입 비교!! +-형태 자체는 파이썬과 유사하다고 느껴짐 +-결과값이 무조건 T 혹은 F 3. 함수 선언 -매개변수 지정 ## 알게 된 점 -1. any, unknown 타입이 있음 -2. 반환 타입 지정이 선택임 +1. 위의 자료형에서 정리한 모든 타입들과 그 의미를 처음 알게됨 +2. 기존에 알고 있던 유일한...언어인 파이썬과 유사한 문법을 공유하면서도 타입이나 모양에서 차이를 보임 ## 헷갈렸던 점 -1. 변수 개수에 따라 선언이 다름 -2. 변수 선언 방식이 다름 +1. 조건문에서 타입을 맞춰주어야함 +2. 습관적으로 파이썬에서 쓰던 자료형을 선언함 ## 느낀 점 (Playground or StackBlitz 포함) 1. 생각보다는 변수 선언이나 조건문이 파이썬과 비슷해서 어렵지는 않았다. 2. 그러나 잔실수로 인한 에러가 많아서 주의가 필요하다. 3. 명령어가 조금씩 달라 잘 기억해야 할 것 같다. + From 457090c2aa53864d1cfa201288d7040bb8b9011b Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Sun, 11 May 2025 23:33:06 +0900 Subject: [PATCH 36/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week1/reflection.md | 22 ++++++++++++++++ week3/1-object.ts | 27 +++++++++++++++++++ week3/2-interface.ts | 0 week3/3-class.ts | 53 +++++++++++++++++++++++++++++++++++++ week3/4-challenge.ts | 63 ++++++++++++++++++++++++++++++++++++++++++++ week3/reflection.md | 39 +++++++++++++++++++++++++++ 6 files changed, 204 insertions(+) create mode 100644 week1/reflection.md create mode 100644 week3/1-object.ts create mode 100644 week3/2-interface.ts create mode 100644 week3/3-class.ts create mode 100644 week3/4-challenge.ts create mode 100644 week3/reflection.md diff --git a/week1/reflection.md b/week1/reflection.md new file mode 100644 index 0000000..c949f81 --- /dev/null +++ b/week1/reflection.md @@ -0,0 +1,22 @@ +# week1 : Server, Framework, Colyseus + +## 기본 개념 +1. 서버 = 서비스(데이터 or 기능 in web) 제공 +//중앙 컴퓨터, 프로그램 +2. 클라이언트 = 서비스 요청 + 소비 +//웹 브라우저, 모바일 앱 +3. 프레임워크 = 개발 템플릿 소프트웨어 + -Colyseus = 실시간 멀티플레이어 + 오픈소스 프레임워크 + //룸 매칭, 동기화, 확장성, 클라우드 독립적 + -Node.js = Typescript 실행 환경 + + +## 알게 된 점 +1. 클라이언트가 각각 앱 실행 -> 중앙 서버 접속(based on Colyseus Framework) -> 클라이언트 쪽에서 데이터 전송 -> 서버가 데이터 가공 후 다시 클라이언트에게 전송 -> 반영 +//클라이언트 - 서버 간의 통신은 상호적 +2. 실시간 멀티플레이어 게임 = 이런 통신이 즉각적으로 이루어져야 함 +3. 일일이 코딩해야 하는 단계를 줄여주는 Framework가 Colyseus + +## 느낀 점 +1. 멀티플레이어 게임의 기본 원리에 대해 알게 되었다 +2. Colyseus는 개발자에게 편리한 환경을 제공한다 \ No newline at end of file diff --git a/week3/1-object.ts b/week3/1-object.ts new file mode 100644 index 0000000..b870ccb --- /dev/null +++ b/week3/1-object.ts @@ -0,0 +1,27 @@ + +// 1. 객체 실습 +// `Person` 객체를 선언하고, 이름(`name`: string), 나이(`age`: number), 이메일(`email`: string, 선택적)을 속성으로 가진다. +// 콘솔에 이름과 나이를 출력한다. 이메일이 있다면 이메일도 출력한다. + + +//객체를 선언 +//타입을 객체에 직접 지정 +let person : {name : string; age : number; email? : string }= { + //이때 email 뒤에 ?를 붙여 선택적 속성으로 + name : "youri", + age : 23, + email : "2376064@ewhain.ac.kr" +}; + +console.log("Your name is " + person.name); +console.log("Your age is " + person.age); +if (person.email !== undefined) { + //if문을 통해 email이 있을 경우(undefined가 아닌) 출력 + console.log("Your email address is " + person.email); +} + +/* +[LOG]: "Your name is youri" +[LOG]: "Your age is 23" +[LOG]: "Your email address is 2376064@ewhain.ac.kr" +*/ \ No newline at end of file diff --git a/week3/2-interface.ts b/week3/2-interface.ts new file mode 100644 index 0000000..e69de29 diff --git a/week3/3-class.ts b/week3/3-class.ts new file mode 100644 index 0000000..d13b44c --- /dev/null +++ b/week3/3-class.ts @@ -0,0 +1,53 @@ + +// 3. 클래스 실습 +// `Animal` 클래스를 정의한다. + + //속성: `name`: string + + //메서드: `move(distance: number)` → `console.log`로 이동 거리 출력 + +// `Dog` 클래스를 `Animal`에서 상속받아 + + //`bark()` 메서드(`console.log("Woof!")`)를 추가한다. + +// `Dog` 인스턴스를 만들어 `bark()`와 `move()`를 호출해본다 + + + +//Animal 클래스 정의 +class Animal { + //instance 속성 선언 + name : string; + + //외부의 name 값을 this.name에 저장 + constructor(name : string) { + this.name = name; + } + + //move 메서드에 distance 매개변수 + move(distance : number = 0) { //default 0 + console.log(this.name + " moved " + distance + " miles."); + } +} + + +//extends로 상속 +class Dog extends Animal { + //Dog만의 메서드 bark 추가 + bark() { + console.log("Woof!"); + } +} + +//Dog의 인스턴스 생성 +const dog = new Dog("Nero"); +//이때 this.name에 Nero 들어감 + +//호출 +dog.bark(); +dog.move(); + +/* +[LOG]: "Woof!" +[LOG]: "Nero moved 0 miles." +*/ \ No newline at end of file diff --git a/week3/4-challenge.ts b/week3/4-challenge.ts new file mode 100644 index 0000000..e42aa3a --- /dev/null +++ b/week3/4-challenge.ts @@ -0,0 +1,63 @@ + +// 4. 인스턴스 -> 면적 출력 +// `Shape` 인터페이스 정의 (`getArea(): number`) +// `Rectangle` 클래스(`width`, `height`)와 `Circle` 클래스(`radius`)에서 `Shape` 인터페이스를 `implements`한다. +// 각 클래스에서 `getArea()` 메서드를 구현한다. +// 사각형과 원 인스턴스를 만들어 면적을 출력한다. + + + +//Shape 인터페이스 정의 +interface Shape { + //getArea() 메서드 + getArea() : number; +} + +//Rectangle 클래스 정의; Shape 인터페이스를 implements +class Rectangle implements Shape { + width : number; + height : number; + + //생성자는 weight와 height를 내부 속성으로 지정 + constructor(width : number, height : number) { + this.width = width; + this.height = height; + } + + getArea() : number { + //Rectangle의 Area 계산 + return this.width * this.height; + } +} + +class Circle implements Shape { + radius : number; + + constructor(radius : number) { + this.radius = radius; + } + + getArea() : number { + //PI 내장 상수 + return this.radius * this.radius * Math.PI; + } +} + +//getArea 출력해주는 함수 +function printArea(obj : Shape) : void { + //Shape 인터페이스가 타입; Rectangle, Cirlcle 모두 인자 가능 + console.log("The area is " + obj.getArea()); +} + +//Rectangle과 Circle 클래스 인스턴스 생성 +const Rectangle1 : Shape = new Rectangle(4,5); //생성자 호출 +printArea(Rectangle1); + +const Circle1 : Shape = new Circle(3); +printArea(Circle1); + + +/* +[LOG]: "The area is 20" +[LOG]: "The area is 28.274333882308138" +*/ \ No newline at end of file diff --git a/week3/reflection.md b/week3/reflection.md new file mode 100644 index 0000000..b356fdc --- /dev/null +++ b/week3/reflection.md @@ -0,0 +1,39 @@ +# week3 : Object, Interface, and Class + + + +## 기본 개념 +1. 객체 = 속성 모음(키+값) +-객체 정의 시 속성의 이름과 타입 나열 +-Typescript는 속성들과 그 타입을 검사 +2. 선택적 속성 = Doesn't matter +-물음표를 속성 이름 뒤에 붙이기 +-속성이 없을 경우를 고려하기 +3. 타입 추론 = Typescript가 객체 타입을 추론 +4. 인터페이스 = 객체 타입 정의 +-특정 객체의 속성과 타입을 묶어 정의 +5. 클래스 = 객체 생성 틀 +-내부에 속성과 메서드 정의 +-생성자로 초기화 +6. implements = 클래스가 특정 인터페이스 구현 +7. extends = 상속 +-코드 재사용 +-객체들을 조직화 + + +## 알게 된 점 +1. 속성을 선택적으로 만들어 생략 가능한 값을 제시할 수 있다 +2. 인터페이스를 통해 객체가 갖는 쌍을 정리한다(재사용이 가능함) +3. 인터페이스는 런타임에 존재하지 않는다(컴파일 타임의 타입 검사만 함) +4. Typescript는 객체 형태만을 통해 인터페이스의 구현을 확인한다(구조적 타이핑) +5. 클래스는 실제 인스턴스 객체 생성 가능 <-> 인터페이스는 객체 형태만 정의 +6. Typescript에서는 클래스도 일종의 타입 + +## 헷갈렸던 점 +1. 클래스 인스턴스를 인터페이스 타입으로 정의할 때도 메서드를 포함해서(단순 객체 리터럴로 생성하면 X) 인터페이스의 조건을 충족해야 한다 +2. 선택적 속성 쓸 때 if로 조건 지정해줘서 출력하면 좋다 + +## 느낀 점 +1. Typescript도 상속이 가능해서 편하다 +2. 인터페이스를 타입으로 잡으면 implements된 클래스를 인자로 받을 수 있어서 좋다다 +3. + Math.PI를 쓰면 자동으로 PI값을 사용할 수 있어서 신기하다 \ No newline at end of file From ba28d9ca800e811e6cf72bc16eaae16ae865b4f1 Mon Sep 17 00:00:00 2001 From: skong302 Date: Mon, 12 May 2025 01:38:44 +0900 Subject: [PATCH 37/59] =?UTF-8?q?[week3]=2015=EA=B3=B5=EC=84=B8=EC=98=81?= =?UTF-8?q?=203=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../1-object.ts" | 18 +++ .../2-interface.ts" | 30 ++++ .../3-class.ts" | 24 +++ .../4-challenge.ts" | 36 +++++ .../reflection.md" | 20 +++ .../summary.md" | 151 ++++++++++++++++++ 6 files changed, 279 insertions(+) create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/1-object.ts" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/2-interface.ts" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/3-class.ts" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/4-challenge.ts" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/reflection.md" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/summary.md" diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/1-object.ts" "b/week3/15 \352\263\265\354\204\270\354\230\201/1-object.ts" new file mode 100644 index 0000000..d2a0864 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/1-object.ts" @@ -0,0 +1,18 @@ +// person 객체 생성. 이름, 나이, 이메일의 타입은 명시하지 않았음. +let person = { + name: "공세영", + age: 22, + email: "skong302@ewhain.net" +}; + +// 정보를 출력하기 위해 함수 생성. +// 이름, 나이, 이메일 타입을 정의하고 출력하게 함. +function printInfo(p: { name: string; age: number; email: string; }) { + console.log(`이름: ${p.name}`); + console.log(`나이: ${p.age}세`); + if (p.email !== undefined) { + console.log(`이메일: ${p.email}`); + } +} + +printInfo(person); \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/2-interface.ts" "b/week3/15 \352\263\265\354\204\270\354\230\201/2-interface.ts" new file mode 100644 index 0000000..b60ada1 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/2-interface.ts" @@ -0,0 +1,30 @@ +// 프로덕트 각 변수 타입 정의와 함께 인터페이스 작성 +interface Product { + name: string, + price: number, + description?: string +}; + +// 상품 정보 출력 함수 정의. Product 인터페이스에 부합하는 객체만 p로 인정. +// description이 있을 때만 if로 받아와서 출력. +function printProduct(p:Product){ + console.log(p.name); + console.log(p.price); + if(p.description) console.log(p.description); +}; + +// 상품 정보가 있는 예제 +const product1: Product = { + name: "딸기", + price: 10000, + description: "딸기입니다." +}; + +// 상품 정보가 없는 예제 +const product2: Product = { + name: "황금 바나나", + price: 999999999, +}; + +printProduct(product1); +printProduct(product2); \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/3-class.ts" "b/week3/15 \352\263\265\354\204\270\354\230\201/3-class.ts" new file mode 100644 index 0000000..91a22e3 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/3-class.ts" @@ -0,0 +1,24 @@ +class Animal{ + name: string; + + constructor(name:string){ + this.name = name; + } + + move(distance: number){ + console.log(distance + "미터 만큼 이동."); + } +}; + + +class Dog extends Animal{ + bark(){ + console.log("Woof!"); + } +} + + +const pup = new Dog("pup"); + +pup.bark(); +pup.move(30); \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/4-challenge.ts" "b/week3/15 \352\263\265\354\204\270\354\230\201/4-challenge.ts" new file mode 100644 index 0000000..ef5e137 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/4-challenge.ts" @@ -0,0 +1,36 @@ +interface Shape{ + getArea():number +}; + + +class Rect implements Shape{ + width: number; + height: number; + + constructor(width: number, height: number){ + this.width = width; + this.height = height; + } + + getArea(){ + return this.width*this.height; + } +}; + +class Circle implements Shape{ + radius: number; + + constructor(radius: number){ + this.radius = radius; + } + + getArea(){ + return 3.14*(this.radius^2) + } +}; + +const rect = new Rect(10, 10); +const circle = new Circle(10); + +console.log(rect.getArea()); +console.log(circle.getArea()); \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/reflection.md" "b/week3/15 \352\263\265\354\204\270\354\230\201/reflection.md" new file mode 100644 index 0000000..e7b8439 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/reflection.md" @@ -0,0 +1,20 @@ +다음 질문에 짧게 답해주세요: + +1. 이번 주 학습에서 새로 알게 된 점은 무엇인가요? +템플릿 리터럴에서 ${...} 구문을 사용하려면 작은따옴표(')나 큰따옴표(")가 아닌 **백틱()** 을 써야 한다는 걸 알게 되었다. +또한 const`로 선언한 객체는 속성은 수정할 수 있지만 전체 재할당은 불가능하다는 점도 새롭게 알았다. + + +2. 헷갈렸거나 어려웠던 부분은 무엇인가요? +this 키워드의 동작 방식과, 클래스 내부에서 상위 클래스(super class)의 생성자나 메서드를 호출할 때의 문법이 종종 헷갈렸음.... +this는 상황에 따라 참조 대상이 달라질 수 있어서, 함수 문맥과 클래스 문맥을 잘 구분해야 한다는 점이 정신 안 차리면 오류 뜨게 만드는 주 원인. +any 타입 오류가 자꾸만 반겨줌. +그리고 자바처럼 Dog dog = new Dog("개이름"); 같이 썼다가 한참 고민함. +변수: 타입 형태로 써야 한다............... +let dog: Dog = new Dog();나 const dog = new Dog(); 이건 타입 추론. + +3. (선택) 심화 과제를 해본 소감은 어떤가요? +자프실 생각나서 재밌었음. +그때 배운 객체 지향 개념들이 TypeScript에서도 그대로 적용된다는 점이 흥미로웠다. +시험 문제로 자바에서 사용하는 8개 타입은 무엇일까요. 같은 질문도 나왔었는데... +number만 있으면 byte, short, int 같은 거 몰라도 된다니 편하다~ \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/summary.md" "b/week3/15 \352\263\265\354\204\270\354\230\201/summary.md" new file mode 100644 index 0000000..eb3927c --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/summary.md" @@ -0,0 +1,151 @@ +# WEEK 03 : TypeScript 문법 개념 이해 + +## 배운 것 요약 + +01. 객체 / Object +>> 속성(property)들의 집함. 사용자 지정으로 여러 값을 key-value 형태로 저장할 때 사용. +>> 데이터와 기능은 객체로 구현. +>> 객체도 타입이 있음 = object type +>> 컴파일 시 속성 및 타입 검사를 위해 + +``` +// 캐릭터의 위치 정보를 출력하는 함수 +function printPosition(pos: {x: number; y: number}) { + console.log(`캐릭터의 위치 - X: ${pos.x}, Y: ${pos.y}`); +} +printPosition({x:120, y:340}); // 실제 사용 - 캐릭터의 위치를 출력한다. +``` + + +02. 선택적 속성(Optional Properties) +>> 이 속성은 있을 수도, 없을 수도 있습니다. +>> 물음표(?)를 이용해 표시한다. + +``` +function printWeaponInfo(weapon: { name: string; upgradeLevel?: number }) { + console.log(`무기 이름: ${weapon.name}`); + if (weapon.upgradeLevel !== undefined) { // 속성이 없을 경우를 고려해서 코드를 작성할 것 + console.log(`강화 레벨: +${weapon.upgradeLevel}`); + } +} + +// 실제 사용 - 입력에 따라 강화 레벨 출력 여부가 다름. +printWeaponInfo({ name: "핸드건" }); +// 출력: 무기 이름: 핸드건 + +printWeaponInfo({ name: "매그넘", upgradeLevel: 3 }); +// 출력: 무기 이름: 매그넘, 강화 레벨: +3 +``` + + + +03. 객체 타입 명시 vs 타입 추론 +>> 타입을 직접 선언하느냐, TypeScript에게 초기값 기반 타입 판단을 맡기느냐. + +``` +// 타입 추론의 경우 +let player = { + name: "Leon", + level: 10, + weapon: "Matilda" +}; +``` + + + +04. 인터페이스(Interface) +>> 객체의 구조/모양을 정의하는 방법 +>> 일종의 규약. 컴파일 타임 타입 검사 용도로 사용. +>> 객체의 형태만 맞으면 인터페이스로 간주 - 구조적 타이핑(structural typing) +>> implement 선언도 필요 없다. 헉. 진짜냐. + +``` +interface Character { + name: string; + weapon?: string; +} + +function introduce(c: Character) { // 타입이 Character인 변수 c를 이용해 함수를 정의 + console.log(`이름: ${c.name}`); + if (c.weapon) console.log(`무기: ${c.weapon}`); +} + +introduce({ name: "Leon", weapon: "Matilda" }); +introduce({ name: "Claire" }); +``` + + + +05. 클래스(Class) +>> 객체를 생성하기 위한 청사진 +>> 필드(속성)와 메소드(기능)을 정의하고, constructor로 초기화. +>> 이것으로 객체를 반복해서 찍어낼 수 있다. +>> this.어쩌구는 현재 인스턴트를 가리킴. + +``` +class Character { + name: string; + + constructor(name: string) { + this.name = name; + } + + attack() { + return `${this.name}이(가) 공격했다!`; + } +} + +const leon = new Character("Leon"); +console.log(leon.attack()); // Leon이(가) 공격했다! +``` + + + +06. 상속(extends)과 구조적 가이드/제약?(implements) +>> 상속이란? super class의 필드 및 메소드를 물려받아 사용할 수 있다. +>> implements를 사용하면? 클래스가 인터페이스에 적힌 구조를 따르게 강제함. + +``` +// 무기 인터페이스: 모든 무기는 이름과 공격 메서드를 가져야 함 +interface Weapon { + name: string; + attack(): void; +} + +// 총기 클래스: Weapon 인터페이스를 구현 +class Gun implements Weapon { + name: string; + + constructor(name: string) { + this.name = name; + } + + attack() { + console.log(`${this.name}에서 탄환을 발사합니다.`); + } +} + +// 칼 클래스: Weapon 인터페이스를 구현 +class Knife implements Weapon { + name: string; + + constructor(name: string) { + this.name = name; + } + + attack() { + console.log(`${this.name}로 적을 벱니다.`); + } +} + +function useWeapon(w: Weapon) { + console.log(`플레이어가 ${w.name}을(를) 사용합니다.`); + w.attack(); +} + +const matilda = new Gun("Matilda"); +const combatKnife = new Knife("Combat Knife"); + +useWeapon(matilda); // Matilda에서 탄환을 발사합니다. +useWeapon(combatKnife); // Combat Knife로 적을 벱니다. +``` \ No newline at end of file From 7fbd264bba3439d5c3ee2518ce2a4ec4c78b3d73 Mon Sep 17 00:00:00 2001 From: sum-young Date: Tue, 13 May 2025 18:46:16 +0900 Subject: [PATCH 38/59] =?UTF-8?q?[week3]=2015=EB=B0=95=EC=84=9C=EC=98=81?= =?UTF-8?q?=203=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../challenge.ts" | 34 +++++++++++++++++++ .../class.ts" | 21 ++++++++++++ .../interface.ts" | 21 ++++++++++++ .../object.ts" | 9 +++++ .../reflection.md" | 27 +++++++++++++++ 5 files changed, 112 insertions(+) create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/class.ts" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/object.ts" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" new file mode 100644 index 0000000..aa2123f --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" @@ -0,0 +1,34 @@ +interface Shape{ + getArea(): number; +} + +class Rectangle implements Shape{ + width: number; + height: number; + + constructor(width: number, height:number){ + this.width = width; + this.height = height; + } + + getArea(): number{ + return this.width*this.height; + } +} + +class Circle implements Shape { + radius : number; + + constructor(radius: number){ + this.radius = radius; + } + getArea(): number { + return this.radius*this.radius*3.14; + } +} + +let circle1 = new Circle(5); +let rect1 = new Rectangle(5,6); + +console.log(`원의 반지름: ${circle1.radius}, 원의 면적: ${circle1.getArea()}`); +console.log(`사각형의 높이: ${rect1.height}, 사각형의 가로: ${rect1.width}, 사각형의 넓이: ${rect1.getArea()}`); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" new file mode 100644 index 0000000..4a15636 --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" @@ -0,0 +1,21 @@ +class Animal { + name: string + + constructor (name: string){ + this.name = name; + } + + move (distance: number){ + console.log(`${this.name}이/가 ${distance}m만큼 이동합니다.`); + } +} + +class Dog extends Animal{ + bark(){ + console.log("Woof!"); + } +} + +let dog = new Dog("바둑이"); +dog.bark(); +dog.move(30); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" new file mode 100644 index 0000000..9bd5275 --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" @@ -0,0 +1,21 @@ +interface Product { + name: string; + price: number; + description?: string; +} + +function printProduct(p: Product){ + console.log(`제품 이름: ${p.name}`); + console.log(`가격: ${p.price}`); + + if(p.description!==undefined){ + console.log(`설명 ${p.description}`); + } + console.log("------------------") +} + +let p1 :Product = {name: "초콜릿", price: 2300}; +printProduct(p1); +const p2 = {name: "사탕", price:200, description: "츄파츕스-딸기"}; +printProduct(p2); + diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" new file mode 100644 index 0000000..26e8728 --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" @@ -0,0 +1,9 @@ +let Person = { + name: "박서영", + age: 22, + email: "summeryoung@ewhain.net" +} + +console.log(`이름: ${Person.name}`); +console.log(`나이: ${Person.age}`); +console.log(`이메일: ${Person.email}`); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" "b/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" new file mode 100644 index 0000000..06b4fdf --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" @@ -0,0 +1,27 @@ +# Week3. 객체, 인터페이스, 클래스 + +## 1. 새롭게 알게된 점 + +### 객체 + : 타입 스크립트 내에서 객체 정의하고 사용하는 방법에 대해서 알게되었습니다! + 객체변수명: {객체 내용..} 이런 식으로 정의. +### 객체 타입명시와 타입추론 + : 타입을 명시할 때는 변수명 : {객체내 변수들 써주기} = {각 변수에 값들 입력} 이렇게 진행 + +### 선택적 속성 + : ?(물음표)를 뒤에 붙여서 표시. 객체의 속성 중 일부는 선택적으로 만들게할 수 있음. + last?:string 이런 식으로 만들기. + + +### 인터페이스 + : 자바와는 다르게 인터페이스 내에 메소드의 바디 구현하면 안됨. 컴파일의 과정에서만 사용되고 이후에 실행되면 폐기됨 + + +## 2. 헷갈리거나 어려웠던 부분 + - 이번 주차와는 무관하지만, 리턴타입이나 타입을 뒤에 적는 것이 아직 익숙하지 않아서 계속 실수한 점.. + - Q: 타입스크립트에서는 함수를 function 함수명.. 이렇게해서 만들었던 것 같은데, 클래스 내에서는 function을 딱히 붙이지 않는 것 같은데... 맞을까요?? 이 부분을 처음에 놓쳐서 오류 났었습니다.. + - 자바를 배우고 있지만 객체라는 개념이 아직 익숙하지 않아서 굉장히 헷갈렸습니다. + + +## 3. 심화과제 소감 + - 클래스 활용한 부분은 자프실 수업에서 진행하고 있는 내용이라 생각보다 재밌게 진행한 것 같습니다! 심화과제를 해보니까 생각보다 많은 부분을 놓치고 있었고, 타입스크립트 문법에 정말 안 익숙해있어서..문법 오류를 굉장히 많이 일으켰던 것 같습니다. 과제 진행하면서 부족한 부분을 알 수 있어서 너무 좋았습니다! 감사합니다. From 72b56b21122e88599b79beeb97aae2655d940f1f Mon Sep 17 00:00:00 2001 From: yoona Date: Sat, 17 May 2025 15:40:47 +0900 Subject: [PATCH 39/59] =?UTF-8?q?fix:=20Move=20=EA=B9=80=EC=9C=A0=EB=A6=AC?= =?UTF-8?q?=20week3=20=EA=B3=BC=EC=A0=9C=20=ED=8C=8C=EC=9D=BC=20into=20per?= =?UTF-8?q?sonal=20folder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../15 \352\271\200\354\234\240\353\246\254/1-object.ts" | 0 .../15 \352\271\200\354\234\240\353\246\254/2-interface.ts" | 0 .../15 \352\271\200\354\234\240\353\246\254/3-class.ts" | 0 .../15 \352\271\200\354\234\240\353\246\254/4-challenge.ts" | 0 .../15 \352\271\200\354\234\240\353\246\254/reflection.md" | 0 5 files changed, 0 insertions(+), 0 deletions(-) rename week3/1-object.ts => "week3/15 \352\271\200\354\234\240\353\246\254/1-object.ts" (100%) rename week3/2-interface.ts => "week3/15 \352\271\200\354\234\240\353\246\254/2-interface.ts" (100%) rename week3/3-class.ts => "week3/15 \352\271\200\354\234\240\353\246\254/3-class.ts" (100%) rename week3/4-challenge.ts => "week3/15 \352\271\200\354\234\240\353\246\254/4-challenge.ts" (100%) rename week3/reflection.md => "week3/15 \352\271\200\354\234\240\353\246\254/reflection.md" (100%) diff --git a/week3/1-object.ts "b/week3/15 \352\271\200\354\234\240\353\246\254/1-object.ts" similarity index 100% rename from week3/1-object.ts rename to "week3/15 \352\271\200\354\234\240\353\246\254/1-object.ts" diff --git a/week3/2-interface.ts "b/week3/15 \352\271\200\354\234\240\353\246\254/2-interface.ts" similarity index 100% rename from week3/2-interface.ts rename to "week3/15 \352\271\200\354\234\240\353\246\254/2-interface.ts" diff --git a/week3/3-class.ts "b/week3/15 \352\271\200\354\234\240\353\246\254/3-class.ts" similarity index 100% rename from week3/3-class.ts rename to "week3/15 \352\271\200\354\234\240\353\246\254/3-class.ts" diff --git a/week3/4-challenge.ts "b/week3/15 \352\271\200\354\234\240\353\246\254/4-challenge.ts" similarity index 100% rename from week3/4-challenge.ts rename to "week3/15 \352\271\200\354\234\240\353\246\254/4-challenge.ts" diff --git a/week3/reflection.md "b/week3/15 \352\271\200\354\234\240\353\246\254/reflection.md" similarity index 100% rename from week3/reflection.md rename to "week3/15 \352\271\200\354\234\240\353\246\254/reflection.md" From c96ee6c31326998d928c6325664bdbb3ace4bb5d Mon Sep 17 00:00:00 2001 From: skong302 Date: Sat, 17 May 2025 15:53:51 +0900 Subject: [PATCH 40/59] =?UTF-8?q?3=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C?= =?UTF-8?q?=20=EC=9E=AC=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit main pull 후 다시 커밋 --- .../1-object.ts" | 18 +++ .../2-interface.ts" | 30 ++++ .../3-class.ts" | 24 +++ .../4-challenge.ts" | 36 +++++ .../reflection.md" | 20 +++ .../summary.md" | 151 ++++++++++++++++++ 6 files changed, 279 insertions(+) create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/1-object.ts" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/2-interface.ts" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/3-class.ts" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/4-challenge.ts" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/reflection.md" create mode 100644 "week3/15 \352\263\265\354\204\270\354\230\201/summary.md" diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/1-object.ts" "b/week3/15 \352\263\265\354\204\270\354\230\201/1-object.ts" new file mode 100644 index 0000000..d2a0864 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/1-object.ts" @@ -0,0 +1,18 @@ +// person 객체 생성. 이름, 나이, 이메일의 타입은 명시하지 않았음. +let person = { + name: "공세영", + age: 22, + email: "skong302@ewhain.net" +}; + +// 정보를 출력하기 위해 함수 생성. +// 이름, 나이, 이메일 타입을 정의하고 출력하게 함. +function printInfo(p: { name: string; age: number; email: string; }) { + console.log(`이름: ${p.name}`); + console.log(`나이: ${p.age}세`); + if (p.email !== undefined) { + console.log(`이메일: ${p.email}`); + } +} + +printInfo(person); \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/2-interface.ts" "b/week3/15 \352\263\265\354\204\270\354\230\201/2-interface.ts" new file mode 100644 index 0000000..b60ada1 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/2-interface.ts" @@ -0,0 +1,30 @@ +// 프로덕트 각 변수 타입 정의와 함께 인터페이스 작성 +interface Product { + name: string, + price: number, + description?: string +}; + +// 상품 정보 출력 함수 정의. Product 인터페이스에 부합하는 객체만 p로 인정. +// description이 있을 때만 if로 받아와서 출력. +function printProduct(p:Product){ + console.log(p.name); + console.log(p.price); + if(p.description) console.log(p.description); +}; + +// 상품 정보가 있는 예제 +const product1: Product = { + name: "딸기", + price: 10000, + description: "딸기입니다." +}; + +// 상품 정보가 없는 예제 +const product2: Product = { + name: "황금 바나나", + price: 999999999, +}; + +printProduct(product1); +printProduct(product2); \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/3-class.ts" "b/week3/15 \352\263\265\354\204\270\354\230\201/3-class.ts" new file mode 100644 index 0000000..91a22e3 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/3-class.ts" @@ -0,0 +1,24 @@ +class Animal{ + name: string; + + constructor(name:string){ + this.name = name; + } + + move(distance: number){ + console.log(distance + "미터 만큼 이동."); + } +}; + + +class Dog extends Animal{ + bark(){ + console.log("Woof!"); + } +} + + +const pup = new Dog("pup"); + +pup.bark(); +pup.move(30); \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/4-challenge.ts" "b/week3/15 \352\263\265\354\204\270\354\230\201/4-challenge.ts" new file mode 100644 index 0000000..ef5e137 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/4-challenge.ts" @@ -0,0 +1,36 @@ +interface Shape{ + getArea():number +}; + + +class Rect implements Shape{ + width: number; + height: number; + + constructor(width: number, height: number){ + this.width = width; + this.height = height; + } + + getArea(){ + return this.width*this.height; + } +}; + +class Circle implements Shape{ + radius: number; + + constructor(radius: number){ + this.radius = radius; + } + + getArea(){ + return 3.14*(this.radius^2) + } +}; + +const rect = new Rect(10, 10); +const circle = new Circle(10); + +console.log(rect.getArea()); +console.log(circle.getArea()); \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/reflection.md" "b/week3/15 \352\263\265\354\204\270\354\230\201/reflection.md" new file mode 100644 index 0000000..e7b8439 --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/reflection.md" @@ -0,0 +1,20 @@ +다음 질문에 짧게 답해주세요: + +1. 이번 주 학습에서 새로 알게 된 점은 무엇인가요? +템플릿 리터럴에서 ${...} 구문을 사용하려면 작은따옴표(')나 큰따옴표(")가 아닌 **백틱()** 을 써야 한다는 걸 알게 되었다. +또한 const`로 선언한 객체는 속성은 수정할 수 있지만 전체 재할당은 불가능하다는 점도 새롭게 알았다. + + +2. 헷갈렸거나 어려웠던 부분은 무엇인가요? +this 키워드의 동작 방식과, 클래스 내부에서 상위 클래스(super class)의 생성자나 메서드를 호출할 때의 문법이 종종 헷갈렸음.... +this는 상황에 따라 참조 대상이 달라질 수 있어서, 함수 문맥과 클래스 문맥을 잘 구분해야 한다는 점이 정신 안 차리면 오류 뜨게 만드는 주 원인. +any 타입 오류가 자꾸만 반겨줌. +그리고 자바처럼 Dog dog = new Dog("개이름"); 같이 썼다가 한참 고민함. +변수: 타입 형태로 써야 한다............... +let dog: Dog = new Dog();나 const dog = new Dog(); 이건 타입 추론. + +3. (선택) 심화 과제를 해본 소감은 어떤가요? +자프실 생각나서 재밌었음. +그때 배운 객체 지향 개념들이 TypeScript에서도 그대로 적용된다는 점이 흥미로웠다. +시험 문제로 자바에서 사용하는 8개 타입은 무엇일까요. 같은 질문도 나왔었는데... +number만 있으면 byte, short, int 같은 거 몰라도 된다니 편하다~ \ No newline at end of file diff --git "a/week3/15 \352\263\265\354\204\270\354\230\201/summary.md" "b/week3/15 \352\263\265\354\204\270\354\230\201/summary.md" new file mode 100644 index 0000000..eb3927c --- /dev/null +++ "b/week3/15 \352\263\265\354\204\270\354\230\201/summary.md" @@ -0,0 +1,151 @@ +# WEEK 03 : TypeScript 문법 개념 이해 + +## 배운 것 요약 + +01. 객체 / Object +>> 속성(property)들의 집함. 사용자 지정으로 여러 값을 key-value 형태로 저장할 때 사용. +>> 데이터와 기능은 객체로 구현. +>> 객체도 타입이 있음 = object type +>> 컴파일 시 속성 및 타입 검사를 위해 + +``` +// 캐릭터의 위치 정보를 출력하는 함수 +function printPosition(pos: {x: number; y: number}) { + console.log(`캐릭터의 위치 - X: ${pos.x}, Y: ${pos.y}`); +} +printPosition({x:120, y:340}); // 실제 사용 - 캐릭터의 위치를 출력한다. +``` + + +02. 선택적 속성(Optional Properties) +>> 이 속성은 있을 수도, 없을 수도 있습니다. +>> 물음표(?)를 이용해 표시한다. + +``` +function printWeaponInfo(weapon: { name: string; upgradeLevel?: number }) { + console.log(`무기 이름: ${weapon.name}`); + if (weapon.upgradeLevel !== undefined) { // 속성이 없을 경우를 고려해서 코드를 작성할 것 + console.log(`강화 레벨: +${weapon.upgradeLevel}`); + } +} + +// 실제 사용 - 입력에 따라 강화 레벨 출력 여부가 다름. +printWeaponInfo({ name: "핸드건" }); +// 출력: 무기 이름: 핸드건 + +printWeaponInfo({ name: "매그넘", upgradeLevel: 3 }); +// 출력: 무기 이름: 매그넘, 강화 레벨: +3 +``` + + + +03. 객체 타입 명시 vs 타입 추론 +>> 타입을 직접 선언하느냐, TypeScript에게 초기값 기반 타입 판단을 맡기느냐. + +``` +// 타입 추론의 경우 +let player = { + name: "Leon", + level: 10, + weapon: "Matilda" +}; +``` + + + +04. 인터페이스(Interface) +>> 객체의 구조/모양을 정의하는 방법 +>> 일종의 규약. 컴파일 타임 타입 검사 용도로 사용. +>> 객체의 형태만 맞으면 인터페이스로 간주 - 구조적 타이핑(structural typing) +>> implement 선언도 필요 없다. 헉. 진짜냐. + +``` +interface Character { + name: string; + weapon?: string; +} + +function introduce(c: Character) { // 타입이 Character인 변수 c를 이용해 함수를 정의 + console.log(`이름: ${c.name}`); + if (c.weapon) console.log(`무기: ${c.weapon}`); +} + +introduce({ name: "Leon", weapon: "Matilda" }); +introduce({ name: "Claire" }); +``` + + + +05. 클래스(Class) +>> 객체를 생성하기 위한 청사진 +>> 필드(속성)와 메소드(기능)을 정의하고, constructor로 초기화. +>> 이것으로 객체를 반복해서 찍어낼 수 있다. +>> this.어쩌구는 현재 인스턴트를 가리킴. + +``` +class Character { + name: string; + + constructor(name: string) { + this.name = name; + } + + attack() { + return `${this.name}이(가) 공격했다!`; + } +} + +const leon = new Character("Leon"); +console.log(leon.attack()); // Leon이(가) 공격했다! +``` + + + +06. 상속(extends)과 구조적 가이드/제약?(implements) +>> 상속이란? super class의 필드 및 메소드를 물려받아 사용할 수 있다. +>> implements를 사용하면? 클래스가 인터페이스에 적힌 구조를 따르게 강제함. + +``` +// 무기 인터페이스: 모든 무기는 이름과 공격 메서드를 가져야 함 +interface Weapon { + name: string; + attack(): void; +} + +// 총기 클래스: Weapon 인터페이스를 구현 +class Gun implements Weapon { + name: string; + + constructor(name: string) { + this.name = name; + } + + attack() { + console.log(`${this.name}에서 탄환을 발사합니다.`); + } +} + +// 칼 클래스: Weapon 인터페이스를 구현 +class Knife implements Weapon { + name: string; + + constructor(name: string) { + this.name = name; + } + + attack() { + console.log(`${this.name}로 적을 벱니다.`); + } +} + +function useWeapon(w: Weapon) { + console.log(`플레이어가 ${w.name}을(를) 사용합니다.`); + w.attack(); +} + +const matilda = new Gun("Matilda"); +const combatKnife = new Knife("Combat Knife"); + +useWeapon(matilda); // Matilda에서 탄환을 발사합니다. +useWeapon(combatKnife); // Combat Knife로 적을 벱니다. +``` \ No newline at end of file From ac9f250204cff2b8d0bb5cac5a1dfc14b7cde61f Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Sun, 18 May 2025 23:19:41 +0900 Subject: [PATCH 41/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/2-interface.ts | 45 +++++++++++++++++++ .../MyRoom.ts" | 40 +++++++++++++++++ .../MyState.ts" | 28 ++++++++++++ .../index.ts" | 27 +++++++++++ .../reflection.md" | 41 +++++++++++++++++ 5 files changed, 181 insertions(+) create mode 100644 "week4/15 \352\271\200\354\234\240\353\246\254/MyRoom.ts" create mode 100644 "week4/15 \352\271\200\354\234\240\353\246\254/MyState.ts" create mode 100644 "week4/15 \352\271\200\354\234\240\353\246\254/index.ts" create mode 100644 "week4/15 \352\271\200\354\234\240\353\246\254/reflection.md" diff --git a/week3/2-interface.ts b/week3/2-interface.ts index e69de29..4a29e8a 100644 --- a/week3/2-interface.ts +++ b/week3/2-interface.ts @@ -0,0 +1,45 @@ + +// 2. 인터페이스 실습 +// `Product` 인터페이스를 정의한다. + + //속성: `name`: string, `price`: number, `description?`: string (선택적) + +//`Product` 타입의 매개변수를 받아 정보를 출력하는 `printProduct()` 함수를 작성한다. +// 두 가지 예제(`description` 있음/없음)를 테스트한다. + + + +//Product 인터페이스 정의 +interface Product { + name : string; + price : number; + description? : string; + //description 속성은 선택적 +} + +function printProduct(p: Product) : void { + //매개변수에 타입 지정 + console.log("상품명: " + p.name); + console.log("가격 : " + p.price); + if(p.description) { + //if문을 통해 선택적 출력 + console.log("설명 : " + p.description); + } +} + +//product1 상수가 product 타입임을 명시 +const product1 : Product = { name : "팥붕", price : 1000}; +//함수 호출 +printProduct(product1); + +const product2 : Product = { name : "슈붕", price : 1500, description : "팥붕보다 500원 비싸다"}; +printProduct(product2); + + +/* +[LOG]: "상품명: 팥붕" +[LOG]: "가격 : 1000" +[LOG]: "상품명: 슈붕" +[LOG]: "가격 : 1500" +[LOG]: "설명 : 팥붕보다 500원 비싸다" +*/ \ No newline at end of file diff --git "a/week4/15 \352\271\200\354\234\240\353\246\254/MyRoom.ts" "b/week4/15 \352\271\200\354\234\240\353\246\254/MyRoom.ts" new file mode 100644 index 0000000..3490294 --- /dev/null +++ "b/week4/15 \352\271\200\354\234\240\353\246\254/MyRoom.ts" @@ -0,0 +1,40 @@ +/* +**Room 클래스 (게임 방 역할)를 정의하는 파일이에요.** + +- `Room` 클래스를 만들고 아래 메서드를 포함해주세요: + - `onCreate`: Room이 만들어질 때 호출 + - `onJoin`: 플레이어가 입장할 때 호출 + - `onLeave`: 플레이어가 나갈 때 호출 +- 입장한 플레이어마다 **Player 객체를 만들고**, `state.players`에 추가해보세요. +- 나간 플레이어는 `state.players.delete()`로 제거해요. +*/ + + +//import 사용 +import { Room, Client } from "colyseus"; +import { MyState, Player } from "./MyState"; +//MyState로부터 MyState와 Player Class를 import + +export class MyRoom extends Room { + onCreate(options: any) { + //onCreate when first made + this.setState(new MyState()); + //init + } + + onJoin(client: Client, options: any) { + //onJoin whenever log-in happens + const player = new Player(); + //player instance + player.name = 'Player_${client.sessionId}'; + //Id appointing + this.state.players.set(client.sessionId, player); + //using sessionId as a key storing player + } + + onLeave(client: Client) { + //onLeave whenever log-out happens + this.state.players.delete(client.sessionId); + //deleting info of the player + } +} \ No newline at end of file diff --git "a/week4/15 \352\271\200\354\234\240\353\246\254/MyState.ts" "b/week4/15 \352\271\200\354\234\240\353\246\254/MyState.ts" new file mode 100644 index 0000000..7c786b8 --- /dev/null +++ "b/week4/15 \352\271\200\354\234\240\353\246\254/MyState.ts" @@ -0,0 +1,28 @@ +/* +**게임 상태(state)를 정의하는 파일이에요.** `MyState`라는 클래스는 `MyRoom.ts`에서 사용할 상태 정의입니다! + +- `Player` 클래스 안에 다음 세 가지 속성을 추가해주세요: + - `name: string`, `x: number`, `y: number` +- `MapSchema`를 사용해서 플레이어 목록을 관리하세요! +*/ + +//MyState = Defines state used in MyRoom + +import { Schema, type, MapSchema } from "@colyseus/schema"; +//Schema = Base Class used when defining State +//type = Decorator indicating what type is this field +//MapSchema = Auto-sync using network + +export class Player extends Schema { + //Player = becomes traceable object(extends) + @type("string") name: string = ""; + @type("number") x: number = 0; + @type("number") y: number = 0; + //3 properties in Player class +} + +export class MyState extends Schema { + @type({ map: Player }) players = new MapSchema(); +} +//players= multi-Player collection +//MapSchema = real time auto-sync \ No newline at end of file diff --git "a/week4/15 \352\271\200\354\234\240\353\246\254/index.ts" "b/week4/15 \352\271\200\354\234\240\353\246\254/index.ts" new file mode 100644 index 0000000..57af730 --- /dev/null +++ "b/week4/15 \352\271\200\354\234\240\353\246\254/index.ts" @@ -0,0 +1,27 @@ +/* +**서버를 실행하고, 방(Room)을 등록하는 파일이에요.** + +- Colyseus 서버를 만들고 `"my_room"`이라는 이름으로 `MyRoom`을 등록해주세요. +- 서버 포트는 2567로 설정! +*/ + + +import { Server } from "colyseus"; +//importing server class used when making game server +import { MyRoom } from "./MyRoom"; +import { createServer } from "http"; +//importing createServer to make basic http server + +const port = 2567; +//port number where server opens +const httpServer = createServer(); +//creating new http server which has colyseus game server on it +const gameServer = new Server({ server : httpServer }); +//making game server instance using newly made http server + +gameServer.define("my_room", MyRoom); +//room and room class appointed + +gameServer.listen(port); +//game server waiting for network request +console.log("서버 실행 중! 포트: ${port}"); \ No newline at end of file diff --git "a/week4/15 \352\271\200\354\234\240\353\246\254/reflection.md" "b/week4/15 \352\271\200\354\234\240\353\246\254/reflection.md" new file mode 100644 index 0000000..066e409 --- /dev/null +++ "b/week4/15 \352\271\200\354\234\240\353\246\254/reflection.md" @@ -0,0 +1,41 @@ +# week4 : Room, State and Client + + + +## 회고 질문 + + +1. Room / State / Client는 각각 어떤 역할을 하나요? +-Room = 교실 +-State = 자리 배치도(교수님이 관리) +-Client = 학생 +-이때 State는 Client끼리 모두 공유하게 됨 +-State 변경 -> Client에 자동 반영 + + +2. 직접 서버 코드를 실행해본 느낌은 어땠나요? +-타입스크립트를 vs code에서 실행해보니까 재밌었다 +-import export extends 를 활발하게 쓰니까 여러 파일들을 만들고 같은 구조는 재활용할 수 있는 게임 시스템이 더 잘 이해되는 것 같았다 + + +3. State가 어떻게 바뀌고, 클라이언트가 그걸 어떻게 받는 구조인지 이해가 되나요? +-server는 room class 내부에서 this.state라는 객체를 가진다 +-우리가 정의해놓은 properties가 바뀌면 colyseus가 그걸 자동으로 감지한다는 게 신기했다 +-colyseus는 모든 client에게 변경된 부분만을 전송해준다 + + +4. 어려웠던 부분이나 헷갈린 부분은? +-import 할 때 undefined라고 자꾸 에러가 났었는데 알고 보니까 tsconfig에서 데코레이터 관련 코드가 true가 아니라 주석 처리되어 있어서 에러가 났었다... +-방 log in과 log out에 따라 player 객체가 state에 추가되고 제거되는 것이 신기했다 +-처음에는 어떻게 "실시간"으로 정보를 주고 받는다는 건지 와닿지 않았다 + + +5. 실습을 통해 Colyseus의 흐름이 어떻게 이해되었나요? +-client는 room에 모여 state를 공유 +-그걸 중매해주는 것이 server +-코드를 직접접 써보니 room이 만들어지고 player가 오고가는 흐름이 잘 보여서 좋았다 + + +6. Playground가 아닌 환경에서 코드를 돌려보니 어땠나요? +-따로 파일을 설치해야 했지만 한 번 설치하고 나서부터는 Visual Studio Code에서 돌려볼 수 있어서 편했다 +-import 할 때 자꾸 에러 나서 새로 파일 깔고 또 파일 깔고 하는 게 까다로웠다 From c41fdeef7e2ccfd2e7c7a5d42ede485ec68fd63b Mon Sep 17 00:00:00 2001 From: sum-young Date: Tue, 20 May 2025 14:15:26 +0900 Subject: [PATCH 42/59] =?UTF-8?q?Revert=20"[week3]=2015=EB=B0=95=EC=84=9C?= =?UTF-8?q?=EC=98=81=203=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20?= =?UTF-8?q?=EC=A0=9C=EC=B6=9C"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 7fbd264bba3439d5c3ee2518ce2a4ec4c78b3d73. --- .../challenge.ts" | 34 ------------------- .../class.ts" | 21 ------------ .../interface.ts" | 21 ------------ .../object.ts" | 9 ----- .../reflection.md" | 27 --------------- 5 files changed, 112 deletions(-) delete mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" delete mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/class.ts" delete mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" delete mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/object.ts" delete mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" deleted file mode 100644 index aa2123f..0000000 --- "a/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" +++ /dev/null @@ -1,34 +0,0 @@ -interface Shape{ - getArea(): number; -} - -class Rectangle implements Shape{ - width: number; - height: number; - - constructor(width: number, height:number){ - this.width = width; - this.height = height; - } - - getArea(): number{ - return this.width*this.height; - } -} - -class Circle implements Shape { - radius : number; - - constructor(radius: number){ - this.radius = radius; - } - getArea(): number { - return this.radius*this.radius*3.14; - } -} - -let circle1 = new Circle(5); -let rect1 = new Rectangle(5,6); - -console.log(`원의 반지름: ${circle1.radius}, 원의 면적: ${circle1.getArea()}`); -console.log(`사각형의 높이: ${rect1.height}, 사각형의 가로: ${rect1.width}, 사각형의 넓이: ${rect1.getArea()}`); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" deleted file mode 100644 index 4a15636..0000000 --- "a/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" +++ /dev/null @@ -1,21 +0,0 @@ -class Animal { - name: string - - constructor (name: string){ - this.name = name; - } - - move (distance: number){ - console.log(`${this.name}이/가 ${distance}m만큼 이동합니다.`); - } -} - -class Dog extends Animal{ - bark(){ - console.log("Woof!"); - } -} - -let dog = new Dog("바둑이"); -dog.bark(); -dog.move(30); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" deleted file mode 100644 index 9bd5275..0000000 --- "a/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" +++ /dev/null @@ -1,21 +0,0 @@ -interface Product { - name: string; - price: number; - description?: string; -} - -function printProduct(p: Product){ - console.log(`제품 이름: ${p.name}`); - console.log(`가격: ${p.price}`); - - if(p.description!==undefined){ - console.log(`설명 ${p.description}`); - } - console.log("------------------") -} - -let p1 :Product = {name: "초콜릿", price: 2300}; -printProduct(p1); -const p2 = {name: "사탕", price:200, description: "츄파츕스-딸기"}; -printProduct(p2); - diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" deleted file mode 100644 index 26e8728..0000000 --- "a/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" +++ /dev/null @@ -1,9 +0,0 @@ -let Person = { - name: "박서영", - age: 22, - email: "summeryoung@ewhain.net" -} - -console.log(`이름: ${Person.name}`); -console.log(`나이: ${Person.age}`); -console.log(`이메일: ${Person.email}`); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" "b/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" deleted file mode 100644 index 06b4fdf..0000000 --- "a/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" +++ /dev/null @@ -1,27 +0,0 @@ -# Week3. 객체, 인터페이스, 클래스 - -## 1. 새롭게 알게된 점 - -### 객체 - : 타입 스크립트 내에서 객체 정의하고 사용하는 방법에 대해서 알게되었습니다! - 객체변수명: {객체 내용..} 이런 식으로 정의. -### 객체 타입명시와 타입추론 - : 타입을 명시할 때는 변수명 : {객체내 변수들 써주기} = {각 변수에 값들 입력} 이렇게 진행 - -### 선택적 속성 - : ?(물음표)를 뒤에 붙여서 표시. 객체의 속성 중 일부는 선택적으로 만들게할 수 있음. - last?:string 이런 식으로 만들기. - - -### 인터페이스 - : 자바와는 다르게 인터페이스 내에 메소드의 바디 구현하면 안됨. 컴파일의 과정에서만 사용되고 이후에 실행되면 폐기됨 - - -## 2. 헷갈리거나 어려웠던 부분 - - 이번 주차와는 무관하지만, 리턴타입이나 타입을 뒤에 적는 것이 아직 익숙하지 않아서 계속 실수한 점.. - - Q: 타입스크립트에서는 함수를 function 함수명.. 이렇게해서 만들었던 것 같은데, 클래스 내에서는 function을 딱히 붙이지 않는 것 같은데... 맞을까요?? 이 부분을 처음에 놓쳐서 오류 났었습니다.. - - 자바를 배우고 있지만 객체라는 개념이 아직 익숙하지 않아서 굉장히 헷갈렸습니다. - - -## 3. 심화과제 소감 - - 클래스 활용한 부분은 자프실 수업에서 진행하고 있는 내용이라 생각보다 재밌게 진행한 것 같습니다! 심화과제를 해보니까 생각보다 많은 부분을 놓치고 있었고, 타입스크립트 문법에 정말 안 익숙해있어서..문법 오류를 굉장히 많이 일으켰던 것 같습니다. 과제 진행하면서 부족한 부분을 알 수 있어서 너무 좋았습니다! 감사합니다. From dc47561ebc033177474fe566d53810b426ab49be Mon Sep 17 00:00:00 2001 From: sum-young Date: Tue, 20 May 2025 14:25:29 +0900 Subject: [PATCH 43/59] =?UTF-8?q?Reapply=20"[week3]=2015=EB=B0=95=EC=84=9C?= =?UTF-8?q?=EC=98=81=203=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20?= =?UTF-8?q?=EC=A0=9C=EC=B6=9C"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit c41fdeef7e2ccfd2e7c7a5d42ede485ec68fd63b. --- .../challenge.ts" | 34 +++++++++++++++++++ .../class.ts" | 21 ++++++++++++ .../interface.ts" | 21 ++++++++++++ .../object.ts" | 9 +++++ .../reflection.md" | 27 +++++++++++++++ 5 files changed, 112 insertions(+) create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/class.ts" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/object.ts" create mode 100644 "week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" new file mode 100644 index 0000000..aa2123f --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/challenge.ts" @@ -0,0 +1,34 @@ +interface Shape{ + getArea(): number; +} + +class Rectangle implements Shape{ + width: number; + height: number; + + constructor(width: number, height:number){ + this.width = width; + this.height = height; + } + + getArea(): number{ + return this.width*this.height; + } +} + +class Circle implements Shape { + radius : number; + + constructor(radius: number){ + this.radius = radius; + } + getArea(): number { + return this.radius*this.radius*3.14; + } +} + +let circle1 = new Circle(5); +let rect1 = new Rectangle(5,6); + +console.log(`원의 반지름: ${circle1.radius}, 원의 면적: ${circle1.getArea()}`); +console.log(`사각형의 높이: ${rect1.height}, 사각형의 가로: ${rect1.width}, 사각형의 넓이: ${rect1.getArea()}`); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" new file mode 100644 index 0000000..4a15636 --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/class.ts" @@ -0,0 +1,21 @@ +class Animal { + name: string + + constructor (name: string){ + this.name = name; + } + + move (distance: number){ + console.log(`${this.name}이/가 ${distance}m만큼 이동합니다.`); + } +} + +class Dog extends Animal{ + bark(){ + console.log("Woof!"); + } +} + +let dog = new Dog("바둑이"); +dog.bark(); +dog.move(30); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" new file mode 100644 index 0000000..9bd5275 --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/interface.ts" @@ -0,0 +1,21 @@ +interface Product { + name: string; + price: number; + description?: string; +} + +function printProduct(p: Product){ + console.log(`제품 이름: ${p.name}`); + console.log(`가격: ${p.price}`); + + if(p.description!==undefined){ + console.log(`설명 ${p.description}`); + } + console.log("------------------") +} + +let p1 :Product = {name: "초콜릿", price: 2300}; +printProduct(p1); +const p2 = {name: "사탕", price:200, description: "츄파츕스-딸기"}; +printProduct(p2); + diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" "b/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" new file mode 100644 index 0000000..26e8728 --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/object.ts" @@ -0,0 +1,9 @@ +let Person = { + name: "박서영", + age: 22, + email: "summeryoung@ewhain.net" +} + +console.log(`이름: ${Person.name}`); +console.log(`나이: ${Person.age}`); +console.log(`이메일: ${Person.email}`); \ No newline at end of file diff --git "a/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" "b/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" new file mode 100644 index 0000000..06b4fdf --- /dev/null +++ "b/week3/15 \353\260\225\354\204\234\354\230\201/reflection.md" @@ -0,0 +1,27 @@ +# Week3. 객체, 인터페이스, 클래스 + +## 1. 새롭게 알게된 점 + +### 객체 + : 타입 스크립트 내에서 객체 정의하고 사용하는 방법에 대해서 알게되었습니다! + 객체변수명: {객체 내용..} 이런 식으로 정의. +### 객체 타입명시와 타입추론 + : 타입을 명시할 때는 변수명 : {객체내 변수들 써주기} = {각 변수에 값들 입력} 이렇게 진행 + +### 선택적 속성 + : ?(물음표)를 뒤에 붙여서 표시. 객체의 속성 중 일부는 선택적으로 만들게할 수 있음. + last?:string 이런 식으로 만들기. + + +### 인터페이스 + : 자바와는 다르게 인터페이스 내에 메소드의 바디 구현하면 안됨. 컴파일의 과정에서만 사용되고 이후에 실행되면 폐기됨 + + +## 2. 헷갈리거나 어려웠던 부분 + - 이번 주차와는 무관하지만, 리턴타입이나 타입을 뒤에 적는 것이 아직 익숙하지 않아서 계속 실수한 점.. + - Q: 타입스크립트에서는 함수를 function 함수명.. 이렇게해서 만들었던 것 같은데, 클래스 내에서는 function을 딱히 붙이지 않는 것 같은데... 맞을까요?? 이 부분을 처음에 놓쳐서 오류 났었습니다.. + - 자바를 배우고 있지만 객체라는 개념이 아직 익숙하지 않아서 굉장히 헷갈렸습니다. + + +## 3. 심화과제 소감 + - 클래스 활용한 부분은 자프실 수업에서 진행하고 있는 내용이라 생각보다 재밌게 진행한 것 같습니다! 심화과제를 해보니까 생각보다 많은 부분을 놓치고 있었고, 타입스크립트 문법에 정말 안 익숙해있어서..문법 오류를 굉장히 많이 일으켰던 것 같습니다. 과제 진행하면서 부족한 부분을 알 수 있어서 너무 좋았습니다! 감사합니다. From ac39ac6403f69da9e77f6baadcdef6830ccbfadb Mon Sep 17 00:00:00 2001 From: sum-young Date: Tue, 20 May 2025 18:03:04 +0900 Subject: [PATCH 44/59] =?UTF-8?q?add:=20[week4]=20=EA=B3=BC=EC=A0=9C=20?= =?UTF-8?q?=EB=B0=8F=20=ED=9A=8C=EA=B3=A0=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyRoom.ts" | 24 +++++++++++++++++++ .../MyState.ts" | 16 +++++++++++++ .../index.ts" | 11 +++++++++ .../reflection.md" | 19 +++++++++++++++ 4 files changed, 70 insertions(+) create mode 100644 "week4/15 \353\260\225\354\204\234\354\230\201/MyRoom.ts" create mode 100644 "week4/15 \353\260\225\354\204\234\354\230\201/MyState.ts" create mode 100644 "week4/15 \353\260\225\354\204\234\354\230\201/index.ts" create mode 100644 "week4/15 \353\260\225\354\204\234\354\230\201/reflection.md" diff --git "a/week4/15 \353\260\225\354\204\234\354\230\201/MyRoom.ts" "b/week4/15 \353\260\225\354\204\234\354\230\201/MyRoom.ts" new file mode 100644 index 0000000..6049c88 --- /dev/null +++ "b/week4/15 \353\260\225\354\204\234\354\230\201/MyRoom.ts" @@ -0,0 +1,24 @@ +import {Room, Client} from "colyseus"; +import {MyState, Player} from "./MyState"; + +export class MyRoom extends Room{ + onCreate(options: any){ + this.setState(new MyState()); + + this.onMessage("ping", (client, message) => { + console.log(client.sessionId, "sent ping: ", message); + client.send("pong", {received: true}); + }) + } + + onJoin(client: Client, options: any){ + const player = new Player(); + player.name = `Player_${client.sessionId}`; + this.state.players.set(client.sessionId,player); + } + + onLeave(client: Client){ + this.state.players.delete(client.sessionId); + } + +} \ No newline at end of file diff --git "a/week4/15 \353\260\225\354\204\234\354\230\201/MyState.ts" "b/week4/15 \353\260\225\354\204\234\354\230\201/MyState.ts" new file mode 100644 index 0000000..86c4240 --- /dev/null +++ "b/week4/15 \353\260\225\354\204\234\354\230\201/MyState.ts" @@ -0,0 +1,16 @@ +import {Schema, type, MapSchema} from "@colyseus/schema"; + +export class Player extends Schema{ + @type("string") name: string = ""; + @type("number") x: number = 0; + @type("number") y: number = 0; + @type("number") hp: number = 100; + @type("number") score: number = 0; + @type("string") color: string = ""; + +} + +export class MyState extends Schema{ + @type({map:Player}) players = new MapSchema(); + //여러 플레이어를 저장하는 맵, 각 플레이어는 고유한 키(sessionId)로 구분됨 +} \ No newline at end of file diff --git "a/week4/15 \353\260\225\354\204\234\354\230\201/index.ts" "b/week4/15 \353\260\225\354\204\234\354\230\201/index.ts" new file mode 100644 index 0000000..bf0801a --- /dev/null +++ "b/week4/15 \353\260\225\354\204\234\354\230\201/index.ts" @@ -0,0 +1,11 @@ +import {Server} from "colyseus"; +import {MyRoom} from "./MyRoom"; +import {createServer} from "http"; + +const port = 2567; +const httpServer = createServer(); +const gameServer = new Server({server: httpServer}); + +gameServer.define("my_room", MyRoom); +gameServer.listen(port); +console.log(`게임 서버 실행 중! 포트: ${port}`); diff --git "a/week4/15 \353\260\225\354\204\234\354\230\201/reflection.md" "b/week4/15 \353\260\225\354\204\234\354\230\201/reflection.md" new file mode 100644 index 0000000..2510dd9 --- /dev/null +++ "b/week4/15 \353\260\225\354\204\234\354\230\201/reflection.md" @@ -0,0 +1,19 @@ +## ✅ Room/State/Client의 역할? + Room: 플레이어의 접속 공간으로, 생성, 플레이어들의 접속, 접속종료, 메시지 등을 관리. 서버에 방을 구성할 때 상속받는 클래스. + +onMessage를 this로 호출?하는데, Room에 정의되어있는 메소드이기에 상속받은거라 가능함. + Client: 방에 접속한 플레이어 인스턴스. (=플레이어), 세션/고유id? 존재재 + State: 방의 상태 (플레이어 목록, 위치) + +## ✅ 코드를 작성하며 흥미로웠던 부분? + 함수 정의 형식? => 이런 방식으로 onMessage의 함수? 부분을 정의하게되는 것 같아서 신기했습니다... 사실 함수인지 처음에 모르고 괄호를 이상하게 쳐서 오류가 났었기에 기억에 남습니다. => (화살표 함수?)라고하고 익명함수, 콜백/이벤트 핸들러에 쓰는거라고..? 검색? 결과 알게되었습니다. + + 서버 포트 번호 설정해서, 뭔가 생각보다 간단하게? 만든 것 같아서 신기했습니다. + +## ✅ 막혔던/헷갈렸던 점? + 앞에서 말한 화살표 함수 쓰는 부분에서 조금 막혔었습니다..ㅎ Room이라는 거랑 MyRoom?의 개념에 대해 헷갈렸던것 같은데.. 여기에서 MyRoom이라는 클래스를 Colyseus에 이미 있는 Room 클래스를 상속받아서 만든 느낌...?이라고 이해하였습니다. + export를 통해서 그렇게 만든 것 내보내기.. 등등등 + +## ✅ 실습을 통해 이해한 Colyseus 흐름? + Room에 플레이어가 접속하게되면 플레이어의 state 정보들(위치, 이름, 체력 등등)을 통해서 서버에서 계속해서 플레이어의 정보를 가져오고, 이 정보를 다른 플레이어들에게도 공유할 수 있게되는...? 그런 흐름으로 이해하였는데 잘 이해했는지는 모르겠습니다.. + +## ✅ Playground가 아닌 환경에서 코드 돌려본 소감? + 이전에 VSCode에서 돌릴 때는, .ts파일을 node.js 통해서 실행할 수 있는 .js파일로 바꿔서..? 어찌저찌 돌렸던 거 같은데, ts파일 자체로 돌릴 수 있어서 신기했고, 뭔가 웹 서버를 만들 때 처럼 주소를 통해서 접속해보고싶었는데, 그런 식으로..페이지가 보여지는건 아닌 것 같았습니다..? From e7eace4fdaf9e3baef81ed58db36e129ad75882f Mon Sep 17 00:00:00 2001 From: jigi Date: Fri, 16 May 2025 23:48:18 +0900 Subject: [PATCH 45/59] =?UTF-8?q?[week3]=2015=EA=B8=B0=EC=A7=80=ED=98=84?= =?UTF-8?q?=203=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../1-object.ts" | 11 ++++++++ .../2-interface.ts" | 26 +++++++++++++++++++ .../3-class.ts" | 17 ++++++++++++ .../reflection.md" | 6 +++++ 4 files changed, 60 insertions(+) create mode 100644 "week3/15 \352\270\260\354\247\200\355\230\204/1-object.ts" create mode 100644 "week3/15 \352\270\260\354\247\200\355\230\204/2-interface.ts" create mode 100644 "week3/15 \352\270\260\354\247\200\355\230\204/3-class.ts" create mode 100644 "week3/15 \352\270\260\354\247\200\355\230\204/reflection.md" diff --git "a/week3/15 \352\270\260\354\247\200\355\230\204/1-object.ts" "b/week3/15 \352\270\260\354\247\200\355\230\204/1-object.ts" new file mode 100644 index 0000000..1f8b702 --- /dev/null +++ "b/week3/15 \352\270\260\354\247\200\355\230\204/1-object.ts" @@ -0,0 +1,11 @@ +let person = { + name : "지현", + age : 23, + email : "micekj0904@ewhain.net" +}; + +console.log(`이름: ${person.name}`); +console.log(`나이: ${person.age}`); +if (person.email) { + console.log(`이메일: ${person.email}`); +} diff --git "a/week3/15 \352\270\260\354\247\200\355\230\204/2-interface.ts" "b/week3/15 \352\270\260\354\247\200\355\230\204/2-interface.ts" new file mode 100644 index 0000000..b23f1fd --- /dev/null +++ "b/week3/15 \352\270\260\354\247\200\355\230\204/2-interface.ts" @@ -0,0 +1,26 @@ +//인터페이스 생성 +interface Product { + name : string; + price : number; + description? : string; +} + +//프린트함수 +function printProduct(p : Product) : void{ + console.log(`name : ${p.name}`); + console.log(`price : ${p.price}`); + if(p.description){ + console.log(`description : ${p.description}`); + } + console.log("\n"); +} + +//물건1 : descriptoin 있음 +const p1 : Product = {name : "물건1", price : 10000, description : "아이들이 선호함."}; + +//물건2 : description 없음 +const p2 : Product = {name : "물건2", price : 50000}; + +//물건 1, 2 차례대로 출력 +printProduct(p1); +printProduct(p2); \ No newline at end of file diff --git "a/week3/15 \352\270\260\354\247\200\355\230\204/3-class.ts" "b/week3/15 \352\270\260\354\247\200\355\230\204/3-class.ts" new file mode 100644 index 0000000..1f19263 --- /dev/null +++ "b/week3/15 \352\270\260\354\247\200\355\230\204/3-class.ts" @@ -0,0 +1,17 @@ +class Animal{ + name : string; + + move(distance: number){ + console.log('이동 거리는 ' + distance); + } +} + +class Dog extends Animal { + bark(){ + console.log("Woof! Woof!"); + } +} + +const dog = new Dog(); +dog.bark(); +dog.move(10); \ No newline at end of file diff --git "a/week3/15 \352\270\260\354\247\200\355\230\204/reflection.md" "b/week3/15 \352\270\260\354\247\200\355\230\204/reflection.md" new file mode 100644 index 0000000..1349039 --- /dev/null +++ "b/week3/15 \352\270\260\354\247\200\355\230\204/reflection.md" @@ -0,0 +1,6 @@ +회고록 +1.이번 주 학습에서 새로 알게 된 점은 무엇인가요? +TypeScript에서는 꼭 존재하지 않아도 되는 속성을 '?'로 표현할 수 있게 해두었다는 것을 새롭게 알 수 있었다. if문으로 처리하는 것보다 효율적인 방법이라는 생각을 했다. 꼭 TypeScript에서뿐 아니라, 이처럼 여러 언어에서 조금만 찾아보면 편리한 기능을 제공하는 것을 자주 볼 수 있는데 내가 평소에 쓰는 방법 외에 더 좋은 방법이 있는지를 종종 찾아봐야겠다는 생각을 할 수 있었다. + +2. 헷갈렸거나 어려웠던 부분은 무엇인가요? +이번 주에는 크게 헷갈린다고 생각되는 부분은 없었다. \ No newline at end of file From 99e4415fb6ca65e7e3fb54515af1a1a57c9adf5a Mon Sep 17 00:00:00 2001 From: yoona Date: Thu, 22 May 2025 13:48:24 +0900 Subject: [PATCH 46/59] =?UTF-8?q?[week=202,3,4]=2015=20=EC=A0=95=EC=9C=A4?= =?UTF-8?q?=EC=95=84=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 8 ++++++ ...64\352\263\274\355\212\234\355\224\214.ts" | 6 +++++ ...00\354\210\230\354\204\240\354\226\270.ts" | 19 ++++++++++++++ .../\354\241\260\352\261\264\353\254\270.ts" | 8 ++++++ ...50\354\210\230\354\204\240\354\226\270.ts" | 6 +++++ .../class.ts" | 18 +++++++++++++ .../interface.ts" | 25 +++++++++++++++++++ .../object.ts" | 5 ++++ .../reflection.md" | 5 ++++ .../MyRoom.ts" | 18 +++++++++++++ .../MyState.ts" | 15 +++++++++++ .../index.ts" | 12 +++++++++ .../reflection.md" | 16 ++++++++++++ 13 files changed, 161 insertions(+) create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/reflection.md" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/\353\263\200\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/\354\241\260\352\261\264\353\254\270.ts" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/\355\225\250\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/class.ts" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/interface.ts" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/object.ts" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/reflection.md" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/MyRoom.ts" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/MyState.ts" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/index.ts" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/reflection.md" diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/reflection.md" "b/week2/15 \354\240\225\354\234\244\354\225\204/reflection.md" new file mode 100644 index 0000000..c0559c2 --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/reflection.md" @@ -0,0 +1,8 @@ +이번 주 학습에서 새롭게 알게 된 점은 무엇인가요? +- any, unknwon, union, enum을 다루어보았다 + +실습하면서 헷갈렸던 부분이 있었나요? +-세미콜론을 안 찍는 게 어색했다. 자바스크립트를 안 써본 게 오히려 배울 때 안 헷갈리고 좋은 것 같음. + +Playground(또는 StackBlitz) 사용해본 소감은 어떤가요? +-편리해서 좋았다. 코랩이 생각났다. \ No newline at end of file diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" "b/week2/15 \354\240\225\354\234\244\354\225\204/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" new file mode 100644 index 0000000..30f065b --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" @@ -0,0 +1,6 @@ +let 숫자들: number[] = [1, 2, 3, 4, 5]; +let 문자들: string[] = ["안녕", "반가워"]; +let 부울들: boolean[] = [true, false]; +let 튜플: [number, string] = [1, "안녕"]; +let 튜플2: [number, string, boolean] = [1, "안녕", true]; +let 튜플3: [number, string, boolean] = [1, "안녕", true]; \ No newline at end of file diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/\353\263\200\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \354\240\225\354\234\244\354\225\204/\353\263\200\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..0b3f5a8 --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/\353\263\200\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,19 @@ +let 이름: string = "정윤아"; +let 나이: number = 23; +let 생일: number = 1216; +let 뭐든지: any = "문자열"; +뭐든지 = 123; + +let 입력값: unknown = "문자열"; +let ID: string | number; +ID = "user123"; +ID = 456; +let 방향: "left" | "right" | "up" | "down"; +방향 = "left"; + +enum 요일 { + 월 = "Mon", + 화 = "Tue" +} + +let 오늘: 요일 = 요일.월; diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/\354\241\260\352\261\264\353\254\270.ts" "b/week2/15 \354\240\225\354\234\244\354\225\204/\354\241\260\352\261\264\353\254\270.ts" new file mode 100644 index 0000000..a3d5a81 --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/\354\241\260\352\261\264\353\254\270.ts" @@ -0,0 +1,8 @@ +let score: number = 85; + +if (score>=60) { + console.log("합격입니다."); +} else { + console.log("불합격입니다."); +} + diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \354\240\225\354\234\244\354\225\204/\355\225\250\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..07bdc78 --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/\355\225\250\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,6 @@ +function add(x: number, y: number): number { + return x+y; +} + +let result = add(10, 20); +console.log(result); diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/class.ts" "b/week3/15 \354\240\225\354\234\244\354\225\204/class.ts" new file mode 100644 index 0000000..d1f1378 --- /dev/null +++ "b/week3/15 \354\240\225\354\234\244\354\225\204/class.ts" @@ -0,0 +1,18 @@ +class Animal{ + name:string; + constructor(name:string){ + this.name = name; + } + move(distance:number):void{ + console.log(`${this.name}이 ${distance}m 움직였습니다.`); + } +} + +class Dog extends Animal{ + bark():void{console.log("Woof!");} +} + +let 배추 = new Dog("배추"); +배추.move(10); +배추.bark(); + diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/interface.ts" "b/week3/15 \354\240\225\354\234\244\354\225\204/interface.ts" new file mode 100644 index 0000000..94c320d --- /dev/null +++ "b/week3/15 \354\240\225\354\234\244\354\225\204/interface.ts" @@ -0,0 +1,25 @@ +interface Product { + name: string; + price: number; + description?: string; +} + +function printProduct(product: Product) { + console.log(`${product.name} - ${product.price}원 - ${product.description}`); +} + +let product1: Product = { + name: "치킨", + price: 10000, + description: "맛있는 치킨" +} + +printProduct(product1); + +let product2: Product = { + name: "치즈볼", + price: 5000, +} + +printProduct(product2); + diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/object.ts" "b/week3/15 \354\240\225\354\234\244\354\225\204/object.ts" new file mode 100644 index 0000000..285c495 --- /dev/null +++ "b/week3/15 \354\240\225\354\234\244\354\225\204/object.ts" @@ -0,0 +1,5 @@ +let person = { + name: "윤아", + age: 23, + email: "ellajya@ewha.ac.kr" + }; \ No newline at end of file diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/reflection.md" "b/week3/15 \354\240\225\354\234\244\354\225\204/reflection.md" new file mode 100644 index 0000000..d42850d --- /dev/null +++ "b/week3/15 \354\240\225\354\234\244\354\225\204/reflection.md" @@ -0,0 +1,5 @@ +1. 이번 주 학습에서 새로 알게 된 점은 무엇인가요? +-자바와 생성자가 약간 다르지만 대체적으로 OOP 개념이 비슷하다는 것을 알게 되었다. + +2. 헷갈렸거나 어려웠던 부분은 무엇인가요? +-생성자 초기화 부분이 헷갈렸다. 자바와 조금 다르게 생성자 초기화를 해야하는 것 같다. 인스턴스 생성할 때 약간 오류가 났다. \ No newline at end of file diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/MyRoom.ts" "b/week4/15 \354\240\225\354\234\244\354\225\204/MyRoom.ts" new file mode 100644 index 0000000..c713555 --- /dev/null +++ "b/week4/15 \354\240\225\354\234\244\354\225\204/MyRoom.ts" @@ -0,0 +1,18 @@ +import { Room, Client } from "colyseus"; +import { MyState, Player } from "./MyState"; + +export class MyRoom extends Room { + onCreate(options: any) { + this.setState(new MyState()); + } + + onJoin(client: Client, options: any) { + const player = new Player(); + player.name = `Player_${client.sessionId}`; + this.state.players.set(client.sessionId, player); + } + + onLeave(client: Client) { + this.state.players.delete(client.sessionId); + } +} \ No newline at end of file diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/MyState.ts" "b/week4/15 \354\240\225\354\234\244\354\225\204/MyState.ts" new file mode 100644 index 0000000..a35ac4e --- /dev/null +++ "b/week4/15 \354\240\225\354\234\244\354\225\204/MyState.ts" @@ -0,0 +1,15 @@ +// MyState.ts + +import "reflect-metadata"; +import { Schema, type, MapSchema } from "@colyseus/schema"; + +export class Player extends Schema { + @type("string") name: string; + @type("number") x: number; + @type("number") y: number; +} + +export class MyState extends Schema { + @type("map", Player) + players = new MapSchema(); +} \ No newline at end of file diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/index.ts" "b/week4/15 \354\240\225\354\234\244\354\225\204/index.ts" new file mode 100644 index 0000000..a921a64 --- /dev/null +++ "b/week4/15 \354\240\225\354\234\244\354\225\204/index.ts" @@ -0,0 +1,12 @@ +import { Server } from "colyseus"; +import { MyRoom } from "./Myroom"; +import { createServer } from "http"; + +const port = 2567; +const httpServer = createServer(); +const gameServer = new Server({ server: httpServer }); + +gameServer.define("my_room", MyRoom); + +gameServer.listen(port); +console.log(`서버 실행 중! 포트: ${port}`); \ No newline at end of file diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/reflection.md" "b/week4/15 \354\240\225\354\234\244\354\225\204/reflection.md" new file mode 100644 index 0000000..b8d73bd --- /dev/null +++ "b/week4/15 \354\240\225\354\234\244\354\225\204/reflection.md" @@ -0,0 +1,16 @@ +1. Room, State, Client 각각이 어떤 역할을 하는지 설명해보세요. +- Room: 게임 서버의 기본 단위로, 게임 세계의 물리적 공간을 정의. 플레이어들이 참여하는 공간을 정의하고, 게임 로직을 적용. +- State: 게임의 상태를 저장하고 관리하는 객체. 게임 내의 모든 객체와 속성을 포함하며, 게임 로직에 따라 업데이트. +- Client: 게임 클라이언트를 나타내는 객체로, 플레이어의 입력을 받고 게임 상태를 표시. + +2. 코드를 작성하면서 어떤 부분이 흥미로웠나요? +-OOP를 제대로 적용하면서 코딩하는 느낌이라 재미 있었다 + +3. 막히거나 헷갈렸던 점이 있었나요? +-colyseus를 처음 import해서 사용하는 거라 오류가 여러 번 났다 + +4. 실습을 통해 Colyseus의 흐름이 어떻게 이해되었나요? +-client들의 state를 업데이트하고 공유하는 체계가 room을 통해 이루어진다 + +5. Playground가 아닌 환경에서 코드를 돌려보니 어땠나요? +- 많이 불편했지만 처음에 거쳐야 할 과정이라고 생각한다 \ No newline at end of file From 67e95d7f7c987e039e1c291430c8bb4766a8a39e Mon Sep 17 00:00:00 2001 From: jigi Date: Sat, 24 May 2025 18:27:18 +0900 Subject: [PATCH 47/59] feat: add MyRoom, MyState, index for week4 --- .../MyRoom.ts" | 18 ++++++++++++++++++ .../MyState.ts" | 11 +++++++++++ .../index.ts" | 12 ++++++++++++ .../reflection.md" | 14 ++++++++++++++ 4 files changed, 55 insertions(+) create mode 100644 "week4/15 \352\270\260\354\247\200\355\230\204/MyRoom.ts" create mode 100644 "week4/15 \352\270\260\354\247\200\355\230\204/MyState.ts" create mode 100644 "week4/15 \352\270\260\354\247\200\355\230\204/index.ts" create mode 100644 "week4/15 \352\270\260\354\247\200\355\230\204/reflection.md" diff --git "a/week4/15 \352\270\260\354\247\200\355\230\204/MyRoom.ts" "b/week4/15 \352\270\260\354\247\200\355\230\204/MyRoom.ts" new file mode 100644 index 0000000..c713555 --- /dev/null +++ "b/week4/15 \352\270\260\354\247\200\355\230\204/MyRoom.ts" @@ -0,0 +1,18 @@ +import { Room, Client } from "colyseus"; +import { MyState, Player } from "./MyState"; + +export class MyRoom extends Room { + onCreate(options: any) { + this.setState(new MyState()); + } + + onJoin(client: Client, options: any) { + const player = new Player(); + player.name = `Player_${client.sessionId}`; + this.state.players.set(client.sessionId, player); + } + + onLeave(client: Client) { + this.state.players.delete(client.sessionId); + } +} \ No newline at end of file diff --git "a/week4/15 \352\270\260\354\247\200\355\230\204/MyState.ts" "b/week4/15 \352\270\260\354\247\200\355\230\204/MyState.ts" new file mode 100644 index 0000000..5b12e57 --- /dev/null +++ "b/week4/15 \352\270\260\354\247\200\355\230\204/MyState.ts" @@ -0,0 +1,11 @@ +import { Schema, type, MapSchema } from "@colyseus/schema"; + +export class Player extends Schema { + @type("string") name: string = ""; + @type("number") x: number = 0; + @type("number") y: number = 0; +} + +export class MyState extends Schema { + @type({ map: Player }) players = new MapSchema(); +} \ No newline at end of file diff --git "a/week4/15 \352\270\260\354\247\200\355\230\204/index.ts" "b/week4/15 \352\270\260\354\247\200\355\230\204/index.ts" new file mode 100644 index 0000000..d805aa6 --- /dev/null +++ "b/week4/15 \352\270\260\354\247\200\355\230\204/index.ts" @@ -0,0 +1,12 @@ +import { Server } from "colyseus"; +import { MyRoom } from "./MyRoom"; +import { createServer } from "http"; + +const port = 2567; +const httpServer = createServer(); +const gameServer = new Server({ server: httpServer }); + +gameServer.define("my_room", MyRoom); + +gameServer.listen(port); +console.log(`서버 실행 중! 포트: ${port}`); \ No newline at end of file diff --git "a/week4/15 \352\270\260\354\247\200\355\230\204/reflection.md" "b/week4/15 \352\270\260\354\247\200\355\230\204/reflection.md" new file mode 100644 index 0000000..f6bd796 --- /dev/null +++ "b/week4/15 \352\270\260\354\247\200\355\230\204/reflection.md" @@ -0,0 +1,14 @@ +1. room은 말 그대로 '방'의 개념. 게임이 이루어질 수 있는 공간으로써의 역할을 한다. +client는 플레이어. state는 room의 전반적인 상태를 의미. + +2. 어렵다.. 내가 쓰는 서버들이 저런 코드로 만들어져서 관리되다가 없어지고 다시 생기고 했겠구나 + +3. this.onMessage("chat", (client, message) => { + console.log(받은 메시지: ${message}); + this.state.message = message; // 상태 업데이트 + }); + } + +이 코드를 통해 state가 바뀌는 것 같다. 클라이언트가 메시지를 보내면 그 내용으로 this.state.message가 변경되는 개념이라고 이해했다. 자동 동기화가 실행되고 있기에 서버와 클라이언트가 연결되어있다면 state의 변화를 클라이언트가 바로바로 받을 수 있다. + +4. export class 문이 무슨 의민지 제대로 이해하지 못했다. extends 부분도 어렵다. 왜 쓰는지 그 이유가 납득이 안 되는 느낌이다. \ No newline at end of file From e9a5b9afd98e63c98d87563091ef282e5d79c571 Mon Sep 17 00:00:00 2001 From: yoona Date: Sat, 24 May 2025 19:12:37 +0900 Subject: [PATCH 48/59] chore: add .gitignore to ignore node_modules --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9905a3b --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +package-lock.json +.DS_Store \ No newline at end of file From dd3a9cc6820472cc6a97fc7aec83b2f6d9e3c082 Mon Sep 17 00:00:00 2001 From: yoona Date: Thu, 22 May 2025 13:48:24 +0900 Subject: [PATCH 49/59] =?UTF-8?q?[week=202,3,4]=2015=20=EC=A0=95=EC=9C=A4?= =?UTF-8?q?=EC=95=84=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reflection.md" | 8 ++++++ ...64\352\263\274\355\212\234\355\224\214.ts" | 6 +++++ ...00\354\210\230\354\204\240\354\226\270.ts" | 19 ++++++++++++++ .../\354\241\260\352\261\264\353\254\270.ts" | 8 ++++++ ...50\354\210\230\354\204\240\354\226\270.ts" | 6 +++++ .../class.ts" | 18 +++++++++++++ .../interface.ts" | 25 +++++++++++++++++++ .../object.ts" | 5 ++++ .../reflection.md" | 5 ++++ .../MyRoom.ts" | 18 +++++++++++++ .../MyState.ts" | 15 +++++++++++ .../index.ts" | 12 +++++++++ .../reflection.md" | 16 ++++++++++++ 13 files changed, 161 insertions(+) create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/reflection.md" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/\353\263\200\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/\354\241\260\352\261\264\353\254\270.ts" create mode 100644 "week2/15 \354\240\225\354\234\244\354\225\204/\355\225\250\354\210\230\354\204\240\354\226\270.ts" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/class.ts" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/interface.ts" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/object.ts" create mode 100644 "week3/15 \354\240\225\354\234\244\354\225\204/reflection.md" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/MyRoom.ts" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/MyState.ts" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/index.ts" create mode 100644 "week4/15 \354\240\225\354\234\244\354\225\204/reflection.md" diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/reflection.md" "b/week2/15 \354\240\225\354\234\244\354\225\204/reflection.md" new file mode 100644 index 0000000..c0559c2 --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/reflection.md" @@ -0,0 +1,8 @@ +이번 주 학습에서 새롭게 알게 된 점은 무엇인가요? +- any, unknwon, union, enum을 다루어보았다 + +실습하면서 헷갈렸던 부분이 있었나요? +-세미콜론을 안 찍는 게 어색했다. 자바스크립트를 안 써본 게 오히려 배울 때 안 헷갈리고 좋은 것 같음. + +Playground(또는 StackBlitz) 사용해본 소감은 어떤가요? +-편리해서 좋았다. 코랩이 생각났다. \ No newline at end of file diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" "b/week2/15 \354\240\225\354\234\244\354\225\204/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" new file mode 100644 index 0000000..30f065b --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/\353\260\260\354\227\264\352\263\274\355\212\234\355\224\214.ts" @@ -0,0 +1,6 @@ +let 숫자들: number[] = [1, 2, 3, 4, 5]; +let 문자들: string[] = ["안녕", "반가워"]; +let 부울들: boolean[] = [true, false]; +let 튜플: [number, string] = [1, "안녕"]; +let 튜플2: [number, string, boolean] = [1, "안녕", true]; +let 튜플3: [number, string, boolean] = [1, "안녕", true]; \ No newline at end of file diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/\353\263\200\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \354\240\225\354\234\244\354\225\204/\353\263\200\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..0b3f5a8 --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/\353\263\200\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,19 @@ +let 이름: string = "정윤아"; +let 나이: number = 23; +let 생일: number = 1216; +let 뭐든지: any = "문자열"; +뭐든지 = 123; + +let 입력값: unknown = "문자열"; +let ID: string | number; +ID = "user123"; +ID = 456; +let 방향: "left" | "right" | "up" | "down"; +방향 = "left"; + +enum 요일 { + 월 = "Mon", + 화 = "Tue" +} + +let 오늘: 요일 = 요일.월; diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/\354\241\260\352\261\264\353\254\270.ts" "b/week2/15 \354\240\225\354\234\244\354\225\204/\354\241\260\352\261\264\353\254\270.ts" new file mode 100644 index 0000000..a3d5a81 --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/\354\241\260\352\261\264\353\254\270.ts" @@ -0,0 +1,8 @@ +let score: number = 85; + +if (score>=60) { + console.log("합격입니다."); +} else { + console.log("불합격입니다."); +} + diff --git "a/week2/15 \354\240\225\354\234\244\354\225\204/\355\225\250\354\210\230\354\204\240\354\226\270.ts" "b/week2/15 \354\240\225\354\234\244\354\225\204/\355\225\250\354\210\230\354\204\240\354\226\270.ts" new file mode 100644 index 0000000..07bdc78 --- /dev/null +++ "b/week2/15 \354\240\225\354\234\244\354\225\204/\355\225\250\354\210\230\354\204\240\354\226\270.ts" @@ -0,0 +1,6 @@ +function add(x: number, y: number): number { + return x+y; +} + +let result = add(10, 20); +console.log(result); diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/class.ts" "b/week3/15 \354\240\225\354\234\244\354\225\204/class.ts" new file mode 100644 index 0000000..d1f1378 --- /dev/null +++ "b/week3/15 \354\240\225\354\234\244\354\225\204/class.ts" @@ -0,0 +1,18 @@ +class Animal{ + name:string; + constructor(name:string){ + this.name = name; + } + move(distance:number):void{ + console.log(`${this.name}이 ${distance}m 움직였습니다.`); + } +} + +class Dog extends Animal{ + bark():void{console.log("Woof!");} +} + +let 배추 = new Dog("배추"); +배추.move(10); +배추.bark(); + diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/interface.ts" "b/week3/15 \354\240\225\354\234\244\354\225\204/interface.ts" new file mode 100644 index 0000000..94c320d --- /dev/null +++ "b/week3/15 \354\240\225\354\234\244\354\225\204/interface.ts" @@ -0,0 +1,25 @@ +interface Product { + name: string; + price: number; + description?: string; +} + +function printProduct(product: Product) { + console.log(`${product.name} - ${product.price}원 - ${product.description}`); +} + +let product1: Product = { + name: "치킨", + price: 10000, + description: "맛있는 치킨" +} + +printProduct(product1); + +let product2: Product = { + name: "치즈볼", + price: 5000, +} + +printProduct(product2); + diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/object.ts" "b/week3/15 \354\240\225\354\234\244\354\225\204/object.ts" new file mode 100644 index 0000000..285c495 --- /dev/null +++ "b/week3/15 \354\240\225\354\234\244\354\225\204/object.ts" @@ -0,0 +1,5 @@ +let person = { + name: "윤아", + age: 23, + email: "ellajya@ewha.ac.kr" + }; \ No newline at end of file diff --git "a/week3/15 \354\240\225\354\234\244\354\225\204/reflection.md" "b/week3/15 \354\240\225\354\234\244\354\225\204/reflection.md" new file mode 100644 index 0000000..d42850d --- /dev/null +++ "b/week3/15 \354\240\225\354\234\244\354\225\204/reflection.md" @@ -0,0 +1,5 @@ +1. 이번 주 학습에서 새로 알게 된 점은 무엇인가요? +-자바와 생성자가 약간 다르지만 대체적으로 OOP 개념이 비슷하다는 것을 알게 되었다. + +2. 헷갈렸거나 어려웠던 부분은 무엇인가요? +-생성자 초기화 부분이 헷갈렸다. 자바와 조금 다르게 생성자 초기화를 해야하는 것 같다. 인스턴스 생성할 때 약간 오류가 났다. \ No newline at end of file diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/MyRoom.ts" "b/week4/15 \354\240\225\354\234\244\354\225\204/MyRoom.ts" new file mode 100644 index 0000000..c713555 --- /dev/null +++ "b/week4/15 \354\240\225\354\234\244\354\225\204/MyRoom.ts" @@ -0,0 +1,18 @@ +import { Room, Client } from "colyseus"; +import { MyState, Player } from "./MyState"; + +export class MyRoom extends Room { + onCreate(options: any) { + this.setState(new MyState()); + } + + onJoin(client: Client, options: any) { + const player = new Player(); + player.name = `Player_${client.sessionId}`; + this.state.players.set(client.sessionId, player); + } + + onLeave(client: Client) { + this.state.players.delete(client.sessionId); + } +} \ No newline at end of file diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/MyState.ts" "b/week4/15 \354\240\225\354\234\244\354\225\204/MyState.ts" new file mode 100644 index 0000000..a35ac4e --- /dev/null +++ "b/week4/15 \354\240\225\354\234\244\354\225\204/MyState.ts" @@ -0,0 +1,15 @@ +// MyState.ts + +import "reflect-metadata"; +import { Schema, type, MapSchema } from "@colyseus/schema"; + +export class Player extends Schema { + @type("string") name: string; + @type("number") x: number; + @type("number") y: number; +} + +export class MyState extends Schema { + @type("map", Player) + players = new MapSchema(); +} \ No newline at end of file diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/index.ts" "b/week4/15 \354\240\225\354\234\244\354\225\204/index.ts" new file mode 100644 index 0000000..a921a64 --- /dev/null +++ "b/week4/15 \354\240\225\354\234\244\354\225\204/index.ts" @@ -0,0 +1,12 @@ +import { Server } from "colyseus"; +import { MyRoom } from "./Myroom"; +import { createServer } from "http"; + +const port = 2567; +const httpServer = createServer(); +const gameServer = new Server({ server: httpServer }); + +gameServer.define("my_room", MyRoom); + +gameServer.listen(port); +console.log(`서버 실행 중! 포트: ${port}`); \ No newline at end of file diff --git "a/week4/15 \354\240\225\354\234\244\354\225\204/reflection.md" "b/week4/15 \354\240\225\354\234\244\354\225\204/reflection.md" new file mode 100644 index 0000000..b8d73bd --- /dev/null +++ "b/week4/15 \354\240\225\354\234\244\354\225\204/reflection.md" @@ -0,0 +1,16 @@ +1. Room, State, Client 각각이 어떤 역할을 하는지 설명해보세요. +- Room: 게임 서버의 기본 단위로, 게임 세계의 물리적 공간을 정의. 플레이어들이 참여하는 공간을 정의하고, 게임 로직을 적용. +- State: 게임의 상태를 저장하고 관리하는 객체. 게임 내의 모든 객체와 속성을 포함하며, 게임 로직에 따라 업데이트. +- Client: 게임 클라이언트를 나타내는 객체로, 플레이어의 입력을 받고 게임 상태를 표시. + +2. 코드를 작성하면서 어떤 부분이 흥미로웠나요? +-OOP를 제대로 적용하면서 코딩하는 느낌이라 재미 있었다 + +3. 막히거나 헷갈렸던 점이 있었나요? +-colyseus를 처음 import해서 사용하는 거라 오류가 여러 번 났다 + +4. 실습을 통해 Colyseus의 흐름이 어떻게 이해되었나요? +-client들의 state를 업데이트하고 공유하는 체계가 room을 통해 이루어진다 + +5. Playground가 아닌 환경에서 코드를 돌려보니 어땠나요? +- 많이 불편했지만 처음에 거쳐야 할 과정이라고 생각한다 \ No newline at end of file From f89d0071023d4b047ca7cb5bb32f8188b988bf9e Mon Sep 17 00:00:00 2001 From: profobbb Date: Fri, 16 May 2025 23:45:53 +0900 Subject: [PATCH 50/59] =?UTF-8?q?[week3]=2015=EA=B8=B0=20=EB=B0=95?= =?UTF-8?q?=EC=B1=84=EC=9C=A4=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/.DS_Store | Bin 0 -> 6148 bytes .../1-object.ts" | 15 +++++++++++ .../2-interface.ts" | 16 +++++++++++ .../3-class.ts" | 25 ++++++++++++++++++ .../reflection.rtf" | 13 +++++++++ 5 files changed, 69 insertions(+) create mode 100644 week3/.DS_Store create mode 100644 "week3/15 \353\260\225\354\261\204\354\234\244/1-object.ts" create mode 100644 "week3/15 \353\260\225\354\261\204\354\234\244/2-interface.ts" create mode 100644 "week3/15 \353\260\225\354\261\204\354\234\244/3-class.ts" create mode 100644 "week3/15 \353\260\225\354\261\204\354\234\244/reflection.rtf" diff --git a/week3/.DS_Store b/week3/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c980f482abda4cdeb8024494bf705201ce9a2b29 GIT binary patch literal 6148 zcmeHK%}yIJ5Vn()IEq?jB@i4fagEd@{0PKl3E{w%MfA|3beD}_VY80%Lk>}-y~1m7 zLE;Yg9(vFJr!*nuaN2LKcUn5@)@y}9r&}uhqN#M|!%UWCS)Ls@$D;3a-EOZ_b=zODwV^5iU}>euE0wijkq_1@ zr6ONmS{)8^Y;N)M#%}#IY)0Z-E}u~NWTkx6ID!i>5-16e%Fdx^wnm}JkxfynX&Ttc z-S3+p4?j2m741JGx^?`&t2lGoQ7ED#n0d6@v85Z+Fkl#XzYORjf#u&X1!m`l0mDE7 z19(1gP()i}tWX{u(8v-1FavHWVB^ms=5UR+##kYYfKZhRs8XpeF{nxhKi6@###o_B zCsY?7RL@Lxg+k@*@O&=A3AGiP)-Yfgm}DTWx&^%dx0CDt$t2S=3>XI96azF Date: Tue, 20 May 2025 00:53:32 +0900 Subject: [PATCH 51/59] =?UTF-8?q?[week3]=2015=EA=B9=80=ED=98=9C=EC=9B=90?= =?UTF-8?q?=203=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../1-object.ts" | 34 ++++++++++++++ .../2-interface.ts" | 29 ++++++++++++ .../3-class.ts" | 33 +++++++++++++ .../4-challenge.ts" | 47 +++++++++++++++++++ .../reflection.md" | 12 +++++ 5 files changed, 155 insertions(+) create mode 100644 "week3/15 \352\271\200\355\230\234\354\233\220/1-object.ts" create mode 100644 "week3/15 \352\271\200\355\230\234\354\233\220/2-interface.ts" create mode 100644 "week3/15 \352\271\200\355\230\234\354\233\220/3-class.ts" create mode 100644 "week3/15 \352\271\200\355\230\234\354\233\220/4-challenge.ts" create mode 100644 "week3/15 \352\271\200\355\230\234\354\233\220/reflection.md" diff --git "a/week3/15 \352\271\200\355\230\234\354\233\220/1-object.ts" "b/week3/15 \352\271\200\355\230\234\354\233\220/1-object.ts" new file mode 100644 index 0000000..828aad3 --- /dev/null +++ "b/week3/15 \352\271\200\355\230\234\354\233\220/1-object.ts" @@ -0,0 +1,34 @@ + + +// 1️⃣ 객체 실습 – 1-object.ts +// Person 객체를 선언하고, 이름(name: string), 나이(age: number), 이메일(email: string, 선택적)을 속성으로 가진다. +// 콘솔에 이름과 나이를 출력한다. 이메일이 있다면 이메일도 출력한다. +// 예시: +// let person = { +// name: "윤아", +// age: 23, +// email: "ellajya@ewha.ac.kr" +// }; + + +let person = { + name: "혜원", + age: 20, + email: "kimh@ewha.ac.kr" +} + +console.log(`name: ${person.name}`); + console.log(`age: ${person.age}`); + if(person.email !== undefined) { + console.log(`email: ${person.email}`); + } + +// //왜 인자에 person을 넣으면 안 되고 객체를 다 정의?해 줘야 하는 걸까 +// function printName(person: {name: string, age: number, email?: string}){ +// console.log(`name: ${person.name}`); +// console.log(`age: ${person.age}`); +// if(person.email !== undefined) { +// console.log(`email: ${person.email}`); +// } +// } + diff --git "a/week3/15 \352\271\200\355\230\234\354\233\220/2-interface.ts" "b/week3/15 \352\271\200\355\230\234\354\233\220/2-interface.ts" new file mode 100644 index 0000000..ee4e018 --- /dev/null +++ "b/week3/15 \352\271\200\355\230\234\354\233\220/2-interface.ts" @@ -0,0 +1,29 @@ +// 2️⃣ 인터페이스 실습 – 2-interface.ts +// Product 인터페이스를 정의한다. +// 속성: name: string, price: number, description?: string (선택적) +// Product 타입의 매개변수를 받아 정보를 출력하는 printProduct() 함수를 작성한다. +// 두 가지 예제(description 있음/없음)를 테스트한다. +// 예시: +// interface Product { ... } +// function printProduct(p: Product) { ... } + + +interface Product { + name: string; + price: number; + descrption?: string; +} + +function printProduct(p: Product): void { + console.log(`name: ${p.name}`); + console.log(`price: ${p.price}`); + if(p.descrption !== undefined){ + console.log(`descrption: ${p.descrption}`); + } +} + +const ohyes: Product = { name: "Ohyes", price: 650, descrption: "reccommended by Seoyeon"}; +printProduct(ohyes); + +const sandwiches: Product = {name: "Sandwiches", price: 3500}; +printProduct(sandwiches); \ No newline at end of file diff --git "a/week3/15 \352\271\200\355\230\234\354\233\220/3-class.ts" "b/week3/15 \352\271\200\355\230\234\354\233\220/3-class.ts" new file mode 100644 index 0000000..bd9b100 --- /dev/null +++ "b/week3/15 \352\271\200\355\230\234\354\233\220/3-class.ts" @@ -0,0 +1,33 @@ +// **3️⃣ 클래스 실습 – `3-class.ts`** +// - `Animal` 클래스를 정의한다. +// 속성: `name`: string +// 메서드: `move(distance: number)` → `console.log`로 이동 거리 출력 +// - `Dog` 클래스를 `Animal`에서 상속받아 +// `bark()` 메서드(`console.log("Woof!")`)를 추가한다. +// - `Dog` 인스턴스를 만들어 `bark()`와 `move()`를 호출해본다. + + + +class Animal { + name: string; + + constructor(message: string) { + this.name = message; + } + + move(distance: number) { + console.log(`${this.name} moved ${distance} meters`); + } +} + +class Dog extends Animal { + bark() { + console.log("Woof!"); + } +} + + +const dog = new Dog("jina"); +dog.bark(); +dog.move(15); +dog.bark(); diff --git "a/week3/15 \352\271\200\355\230\234\354\233\220/4-challenge.ts" "b/week3/15 \352\271\200\355\230\234\354\233\220/4-challenge.ts" new file mode 100644 index 0000000..e155f75 --- /dev/null +++ "b/week3/15 \352\271\200\355\230\234\354\233\220/4-challenge.ts" @@ -0,0 +1,47 @@ +// **4️⃣ 심화 도전 (선택 과제) – `4-challenge.ts`** + +// - `Shape` 인터페이스 정의 (`getArea(): number`) +// - `Rectangle` 클래스(`width`, `height`)와 `Circle` 클래스(`radius`)에서 `Shape` 인터페이스를 `implements`한다. +// - 각 클래스에서 `getArea()` 메서드를 구현한다. +// - 사각형과 원 인스턴스를 만들어 면적을 출력한다. + + + +interface Shape { + getArea(): number; +} + +class Rectangle implements Shape { + width: number; + height: number; + + constructor(num1: number, num2: number){ + this.width = num1; + this.height = num2; + } + + getArea(): number { + // console.log(`Area is ${this.width*this.height}`) + return (this.height * this.width); + } +} + +class Circle implements Shape { + radius: number; + + constructor(num1: number){ + this.radius = num1; + } + + getArea(): number { + return (this.radius * this.radius); + } +} + + + +const rectangle = new Rectangle(2, 5); +console.log(rectangle.getArea()); + +const circle = new Circle(5); +console.log(circle.getArea()); diff --git "a/week3/15 \352\271\200\355\230\234\354\233\220/reflection.md" "b/week3/15 \352\271\200\355\230\234\354\233\220/reflection.md" new file mode 100644 index 0000000..e8959b7 --- /dev/null +++ "b/week3/15 \352\271\200\355\230\234\354\233\220/reflection.md" @@ -0,0 +1,12 @@ + 동적으로 값을 할당할 때 필요하니 보통은 다 넣는다고 생각하면 되는구나 + +3. (선택) 심화 과제를 해본 소감은 어떤가요? +implements를 한 번 써 보니까 확실히 인터페이스와 클래스의 차이가 잘 이해된다. 인터페이스는 클래스에 끼웠다 뺐다 하는 토핑 같은 거구나! \ No newline at end of file From 0e7dde844d7503281d333c3083bdb9e1dc43f19d Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Sun, 25 May 2025 15:23:08 +0900 Subject: [PATCH 52/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyRoom.ts" | 32 +++++++++++++++++++ .../MyState.ts" | 17 ++++++++++ .../reflection.md" | 29 +++++++++++++++++ 3 files changed, 78 insertions(+) create mode 100644 "week5/15 \352\271\200\354\234\240\353\246\254/MyRoom.ts" create mode 100644 "week5/15 \352\271\200\354\234\240\353\246\254/MyState.ts" create mode 100644 "week5/15 \352\271\200\354\234\240\353\246\254/reflection.md" diff --git "a/week5/15 \352\271\200\354\234\240\353\246\254/MyRoom.ts" "b/week5/15 \352\271\200\354\234\240\353\246\254/MyRoom.ts" new file mode 100644 index 0000000..b408064 --- /dev/null +++ "b/week5/15 \352\271\200\354\234\240\353\246\254/MyRoom.ts" @@ -0,0 +1,32 @@ +//1. 클라이언트에서 `room.send("scoreUp")` 메시지 보내기 +//2. 서버가 `onMessage("scoreUp")`로 받고 +//3. 서버 상태에 있는 `score += 1` 하기 +//4. Colyseus가 모든 클라이언트에 `score` 자동 전파 +//5. 클라이언트는 `state.score` 변화 감지해서 화면에 보여줌 + + + +import { Room, Client } from "colyseus"; +import { MyState } from "./MyState"; + +export class MyRoom extends Room { + //defining room of colyseus + //using MyState as state + onCreate() { + this.setState(new MyState()); + //init + + this.onMessage("scoreUp", (client) => { + //out when client sends message + this.state.score += 1; + //score change + console.log(`score +1! score now : ${this.state.score}`); +}); + } + + onJoin(client: Client) { + //when client comes in + console.log(`${client.sessionId} is with us!`); + } +} + diff --git "a/week5/15 \352\271\200\354\234\240\353\246\254/MyState.ts" "b/week5/15 \352\271\200\354\234\240\353\246\254/MyState.ts" new file mode 100644 index 0000000..72d7ef1 --- /dev/null +++ "b/week5/15 \352\271\200\354\234\240\353\246\254/MyState.ts" @@ -0,0 +1,17 @@ +//1. 클라이언트에서 `room.send("scoreUp")` 메시지 보내기 +//2. 서버가 `onMessage("scoreUp")`로 받고 +//3. 서버 상태에 있는 `score += 1` 하기 +//4. Colyseus가 모든 클라이언트에 `score` 자동 전파 +//5. 클라이언트는 `state.score` 변화 감지해서 화면에 보여줌 + + + +import { Schema, type } from "@colyseus/schema"; + +//schema extending +export class MyState extends Schema { + //score defining + @type("number") score : number = 0; + //@type for pointing this field is synchronizing target of colyseus + //init value is 0 +} \ No newline at end of file diff --git "a/week5/15 \352\271\200\354\234\240\353\246\254/reflection.md" "b/week5/15 \352\271\200\354\234\240\353\246\254/reflection.md" new file mode 100644 index 0000000..289e99b --- /dev/null +++ "b/week5/15 \352\271\200\354\234\240\353\246\254/reflection.md" @@ -0,0 +1,29 @@ +# week5 : Message and Synchronizing + + + +## 회고 질문 + + +1. `room.send()`와 `onMessage()`가 어떤 역할을 했는지 설명해봅시다! +-room.send = 클라이언트가 서버에게 메시지 +-onMessage = 서버가 메시지 받고 + 처리(반응) + + +2. `state.score`가 바뀌면 모든 사람이 똑같이 보게 되는 이유는? +-서버는 state를 기억 + 변화 +-colyseus가 모든 접속자의 화면에 이를 반영시켜줌 + + +3. 상태를 직접 화면에 반영하지 않아도 되는 이유는? +-모든 상태를 서버(진행자)에서 변화시킴 +-클라이언트는 요청만 ! + + +4. 내가 버튼을 누른 건데, 다른 사람 점수도 왜 바뀌는 걸까? +-클라이언트 요청 -> 서버 반응 -> 모든 클라이언트에게 변화 적용 + + +5. 이번 실습에서 가장 신기하거나 재밌었던 포인트는? +-클라이언트는 요청만 할 수 있고 모든 변화는 서버에서 담당한다는 게 신기했다(근데 당연하게 협동 게임인데 혼자만 점수가 바뀌면 안되겠지) +-서버 동기화 과정이 서버와 클라이언트 간의 상호작용처럼 느껴져서 재밌었다(진짜 서버를 다루는 느낌 !) \ No newline at end of file From 40caa44f288a736a3f4550cce69cb662283c426c Mon Sep 17 00:00:00 2001 From: 7amm-0302 Date: Tue, 27 May 2025 15:36:45 +0900 Subject: [PATCH 53/59] =?UTF-8?q?[week4]=2015=EA=B3=B5=EC=84=B8=EC=98=81?= =?UTF-8?q?=204=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat: add summary.md, reflection.md, MyRoom.ts, MyState.ts, index.ts for week4 --- .../MyRoom.ts" | 36 ++++++ .../MyState.ts" | 17 +++ .../index.ts" | 16 +++ .../reflection.md" | 31 +++++ .../summary.md" | 53 ++++++++ .../tsconfig.json" | 113 ++++++++++++++++++ 6 files changed, 266 insertions(+) create mode 100644 "week4/15 \352\263\265\354\204\270\354\230\201/MyRoom.ts" create mode 100644 "week4/15 \352\263\265\354\204\270\354\230\201/MyState.ts" create mode 100644 "week4/15 \352\263\265\354\204\270\354\230\201/index.ts" create mode 100644 "week4/15 \352\263\265\354\204\270\354\230\201/reflection.md" create mode 100644 "week4/15 \352\263\265\354\204\270\354\230\201/summary.md" create mode 100644 "week4/15 \352\263\265\354\204\270\354\230\201/tsconfig.json" diff --git "a/week4/15 \352\263\265\354\204\270\354\230\201/MyRoom.ts" "b/week4/15 \352\263\265\354\204\270\354\230\201/MyRoom.ts" new file mode 100644 index 0000000..df8c968 --- /dev/null +++ "b/week4/15 \352\263\265\354\204\270\354\230\201/MyRoom.ts" @@ -0,0 +1,36 @@ +// Colyseus에서 제공하는 Room 클래스를 확장하여 하나의 게임 방을 구성합니다. +import { Room, Client } from "colyseus"; +import { MyState, Player } from "./MyState"; + +// 방이다. +export class MyRoom extends Room { + + // 방이 생성될 때 호출됨. + // 기본 상태를 설정하고, 이후 이벤트 리스너 설정 가능. + onCreate(options: any) { + this.setState(new MyState()); + console.log(`[시스템] 방이 개설되었습니다.`); + } + + // 플레이어가 방에 입장했을 때 호출됨. + onJoin(client: Client, options: any) { + const player = new Player(); + player.name = `Survivor_${client.sessionId.slice(0, 5)}`; // 세션ID 기반 코드명 + player.x = 0; // 초기 위치 설정 (맵의 출발 지점) + player.y = 0; + + // 방 상태에 플레이어 등록 + this.state.players.set(client.sessionId, player); + console.log(`[입장] ${player.name} 플레이어가 방에 들어왔습니다.`); + } + + // 플레이어가 방에서 나갔을 때 호출됨. + onLeave(client: Client) { + const player = this.state.players.get(client.sessionId); + this.state.players.delete(client.sessionId); + + if (player) { + console.log(`[이탈] ${player.name} 플레이어가 구역을 벗어났습니다.`); + } + } +} diff --git "a/week4/15 \352\263\265\354\204\270\354\230\201/MyState.ts" "b/week4/15 \352\263\265\354\204\270\354\230\201/MyState.ts" new file mode 100644 index 0000000..00f3b1a --- /dev/null +++ "b/week4/15 \352\263\265\354\204\270\354\230\201/MyState.ts" @@ -0,0 +1,17 @@ +// 목적: 게임의 상태(state)를 정의 +// Colyseus의 Schema를 기반으로 서버와 클라이언트 간 상태를 자동으로 동기화한다고.... +import { Schema, type, MapSchema } from "@colyseus/schema"; + +// 목적: 개별 플레이어를 나타내는 클래스 +export class Player extends Schema { + @type("string") name: string = ""; // 이름 + @type("number") x: number = 0; // 현재 위치 X + @type("number") y: number = 0; // 현재 위치 Y +} + +// 목적: 게임 룸의 전체 상태(state)를 관리하는 클래스 +export class MyState extends Schema { + // 모든 플레이어를 저장하는 맵 + // 키는 sessionId, 값은 Player 객체 + @type({ map: Player }) players = new MapSchema(); +} diff --git "a/week4/15 \352\263\265\354\204\270\354\230\201/index.ts" "b/week4/15 \352\263\265\354\204\270\354\230\201/index.ts" new file mode 100644 index 0000000..4ff2da2 --- /dev/null +++ "b/week4/15 \352\263\265\354\204\270\354\230\201/index.ts" @@ -0,0 +1,16 @@ +// 목적: 엔트리 파일 - Colyseus 게임 서버를 생성 및 방을 등록 +import "reflect-metadata"; // 데코레이터 기능 활성화를 위한 필수 import << 이거 안 하니까 오류 뜸. +import { Server } from "colyseus"; +import { MyRoom } from "./MyRoom"; +import { createServer } from "http"; + +const port = 2567; +const httpServer = createServer(); +const gameServer = new Server({ server: httpServer }); + +// 'my_room'이라는 이름으로 방 정의 +gameServer.define("my_room", MyRoom); + +// 서버 시작 +gameServer.listen(port); +console.log(`방이 포트 ${port}에서 활성화되었습니다.`); diff --git "a/week4/15 \352\263\265\354\204\270\354\230\201/reflection.md" "b/week4/15 \352\263\265\354\204\270\354\230\201/reflection.md" new file mode 100644 index 0000000..1576406 --- /dev/null +++ "b/week4/15 \352\263\265\354\204\270\354\230\201/reflection.md" @@ -0,0 +1,31 @@ +1. Room / State / Client 각각 어떤 역할을 하나요? +Room: 방이다. 존재한다. 클라이언트들을 모아둔다. +State: Room의 상태다. 방 안의 플레이어 목록, 좌표, 아이템 등의 모든 게임 정보가 여기에 포함? 변화가 있으면 서버가 알아채고 다른 클라이언트들에게 알려준다. 동기화가 이루어진다. +Client: 플레이어다. 변화를 일으키는 주체 중 하나다. 서버가 주는대로 받기도 한다. + + +2. 직접 서버 코드를 실행해본 느낌은 어땠나요? +코드를 실행하면 터미널에 올라오는 Colyseus 아스키 아트가 고등학생 때 Zork 처음 플레이했던 향수를 불러일으켜서 좋았음! 로우레벨하게 직접 서버를 작동시킨다는 감각이 신선하네요. +아직 서버가 일하는 걸 직접 본 게 아니라서 실감이 나진 않지만요. + + +3. State가 어떻게 바뀌고, 클라이언트가 그걸 어떻게 받는 구조인지 이해가 되나요? +리얼타임으로 서버가 감시하는 구조. +Room 내부에서 상태에 변화가 있으면 서버가 캐치. +동기화를 위해 모든 클라이언트에게 뿌려준다. + + +4. 어려웠던 부분이나 헷갈린 부분은? +Mac 기준으로 작성된 실습 큐레이션을 처음 봤을 때는 경로라든가 실행 방식이 조금 달라 보여 당황했지만, 터미널을 쓴다는 점에서는 큰 차이는 없어서 곧 익숙해졌음. + + +5. 코드를 작성하면서 어떤 부분이 흥미로웠나요? +생각보다 구조가 간단하다? + + +6. 실습을 통해 Colyseus의 흐름이 어떻게 이해되었나요? +방을 만들고 거기에 상태를 넣으면서, 클라이언트가 접속을 하는... 흐름이 명확한 것 같아요. + + +7. Playground가 아닌 환경에서 코드를 돌려보니 어땠나요? +VS Code 환경이 익숙해서 오히려 Playground보다 편했어용. \ No newline at end of file diff --git "a/week4/15 \352\263\265\354\204\270\354\230\201/summary.md" "b/week4/15 \352\263\265\354\204\270\354\230\201/summary.md" new file mode 100644 index 0000000..e139319 --- /dev/null +++ "b/week4/15 \352\263\265\354\204\270\354\230\201/summary.md" @@ -0,0 +1,53 @@ +# WEEK 04 : Colyseus 서버 구조를 이해하자 - Room, State, Client를 중심으로 + +## 배운 것 요약 + +01. Colyseus란 무엇인가. +Colyseus는 Node.js 기반 프레임워크. +플레이어(n명): 접속할게. +서버: 상태 관리하면서 모든 클라이언트를 위해 리얼타임 정보 동기화 할게. +클라이언트: 감사합니다? + +Colyseus의 구조: Room, Client, State. +Room은 플레이어들이 게임하는 (개념적) 공간. +Client는 플레이어의 다른 이름. +State는 방의 현재 상태. 서버가 관리. + +``` +클라이언트 → Room 입장 → Room 안에서 상태 변경 → 모든 Client에게 실시간 전송 + +[Client] ──> [Room] ──> [State] + ↑ ↓ ↑ + └───── message ───────────┘ + +``` + +GM / PC1 / PC2 / PC3 / PC4가 Roll20 방에 입장 중. +PC2가 카드를 덱에 추가함. +서버: 음. Room의 State가 바뀌었군. 업데이트하고 공지를 때린다. +나머지 PC들: 아하. PC2가 카드를 추가했군요. 감사합니다. + +@type({ map: Player }) players = new MapSchema(); + + + + +02. 실습 + +준비할 것: node.js, vscode(혹은 터미널) + +``` +사견: 시소실 생각나고 정겨움. + +mkdir colyseus-test +cd colyseus-test +npm init -y + +npm install colyseus +npm install -D typescript ts-node @types/node +``` + +이후 MyRoom.ts와 index.ts를 생성하는데, 주의해야 할 점은 tsconfig.json에서 주석처리된 기능을 켜 줘야 정상 작동을 한다. +"experimentalDecorators": true, +"emitDecoratorMetadata": true, +이 두개를 켜야 Colyseus 타이틀이 터미널에 나타나는 듯. \ No newline at end of file diff --git "a/week4/15 \352\263\265\354\204\270\354\230\201/tsconfig.json" "b/week4/15 \352\263\265\354\204\270\354\230\201/tsconfig.json" new file mode 100644 index 0000000..2b59c85 --- /dev/null +++ "b/week4/15 \352\263\265\354\204\270\354\230\201/tsconfig.json" @@ -0,0 +1,113 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "libReplacement": true, /* Enable lib replacement. */ + "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ + "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ + // "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */ + // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ + // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ + // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ + // "noUncheckedSideEffectImports": true, /* Check side effect imports. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + // "outDir": "./", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ + // "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */ + // "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} From 6ef755f0f1522b76cc3c4147a179e9d072897bca Mon Sep 17 00:00:00 2001 From: 7amm-0302 Date: Tue, 27 May 2025 17:58:04 +0900 Subject: [PATCH 54/59] =?UTF-8?q?[week5]=2015=EA=B3=B5=EC=84=B8=EC=98=81?= =?UTF-8?q?=205=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat: add MyRoom.ts, MyState.ts, client.ts, reflection.md, summary.md...etc --- .../MyRoom.ts" | 18 +++ .../MyState.ts" | 5 + .../client.ts" | 37 ++++++ .../index.ts" | 13 ++ .../reflection.md" | 23 ++++ .../summary.md" | 15 +++ .../tsconfig.json" | 113 ++++++++++++++++++ 7 files changed, 224 insertions(+) create mode 100644 "week5/15 \352\263\265\354\204\270\354\230\201/MyRoom.ts" create mode 100644 "week5/15 \352\263\265\354\204\270\354\230\201/MyState.ts" create mode 100644 "week5/15 \352\263\265\354\204\270\354\230\201/client.ts" create mode 100644 "week5/15 \352\263\265\354\204\270\354\230\201/index.ts" create mode 100644 "week5/15 \352\263\265\354\204\270\354\230\201/reflection.md" create mode 100644 "week5/15 \352\263\265\354\204\270\354\230\201/summary.md" create mode 100644 "week5/15 \352\263\265\354\204\270\354\230\201/tsconfig.json" diff --git "a/week5/15 \352\263\265\354\204\270\354\230\201/MyRoom.ts" "b/week5/15 \352\263\265\354\204\270\354\230\201/MyRoom.ts" new file mode 100644 index 0000000..c58ef51 --- /dev/null +++ "b/week5/15 \352\263\265\354\204\270\354\230\201/MyRoom.ts" @@ -0,0 +1,18 @@ +import { Room, Client } from "colyseus"; +import { MyState } from "./MyState"; + +export class MyRoom extends Room { + onCreate() { + this.setState(new MyState()); + + // 메시지 받았을 때 처리. + this.onMessage("scoreUp", (client) => { + this.state.score += 1; + console.log(`🎯 점수 +1! 현재 점수: ${this.state.score}`); + }); + } + + onJoin(client: Client) { + console.log(`😀 ${client.sessionId} 님이 입장했습니다!`); + } +} \ No newline at end of file diff --git "a/week5/15 \352\263\265\354\204\270\354\230\201/MyState.ts" "b/week5/15 \352\263\265\354\204\270\354\230\201/MyState.ts" new file mode 100644 index 0000000..f712a3e --- /dev/null +++ "b/week5/15 \352\263\265\354\204\270\354\230\201/MyState.ts" @@ -0,0 +1,5 @@ +import { Schema, type } from "@colyseus/schema"; + +export class MyState extends Schema { + @type("number") score: number = 0; +} \ No newline at end of file diff --git "a/week5/15 \352\263\265\354\204\270\354\230\201/client.ts" "b/week5/15 \352\263\265\354\204\270\354\230\201/client.ts" new file mode 100644 index 0000000..a1bf3c8 --- /dev/null +++ "b/week5/15 \352\263\265\354\204\270\354\230\201/client.ts" @@ -0,0 +1,37 @@ +import { Client } from "colyseus.js"; +import WebSocket from "ws"; +import readline from "readline"; + +// Node.js용 WebSocket을 전역으로 등록 +(global as any).WebSocket = WebSocket; + +const client = new Client("ws://localhost:2567"); + +async function main() { + const room = await client.joinOrCreate("my_room"); + console.log(`✅ 방에 입장했습니다. 세션 ID: ${room.sessionId}`); + console.log(`💡 Enter 키를 누르면 점수가 올라갑니다.`); + + room.onStateChange((state: any) => { + console.log(`🎯 현재 점수: ${state.score}`); + }); + + const rl = readline.createInterface({ + input: process.stdin, + output: process.stdout, + }); + + rl.on("line", () => { + console.log("📤 scoreUp 메시지 전송"); + room.send("scoreUp"); + }); + + room.onLeave(() => { + console.log("❌ 서버와 연결 종료됨"); + rl.close(); + }); +} + +main().catch((err) => { + console.error("❌ 클라이언트 오류:", err.message); +}); diff --git "a/week5/15 \352\263\265\354\204\270\354\230\201/index.ts" "b/week5/15 \352\263\265\354\204\270\354\230\201/index.ts" new file mode 100644 index 0000000..94ffe99 --- /dev/null +++ "b/week5/15 \352\263\265\354\204\270\354\230\201/index.ts" @@ -0,0 +1,13 @@ +import "reflect-metadata"; +import { Server } from "colyseus"; +import { MyRoom } from "./MyRoom"; +import { createServer } from "http"; + +const port = 2567; +const httpServer = createServer(); +const gameServer = new Server({ server: httpServer }); + +gameServer.define("my_room", MyRoom); + +gameServer.listen(port); +console.log(`🧠 Colyseus 서버 실행 중! 포트 ${port}`); diff --git "a/week5/15 \352\263\265\354\204\270\354\230\201/reflection.md" "b/week5/15 \352\263\265\354\204\270\354\230\201/reflection.md" new file mode 100644 index 0000000..8cc3dbf --- /dev/null +++ "b/week5/15 \352\263\265\354\204\270\354\230\201/reflection.md" @@ -0,0 +1,23 @@ +1. `room.send()`와 `onMessage()`가 어떤 역할을 했는지 설명해봅시다! +room.sent()는 클라이언트 --> 서버 메시지 전송 메서드. +onMessage()는 괄호 안 메시지를 받았을 때 처리할 내용/동작을 담고 있음. + +2. `state.score`가 바뀌면 모든 사람이 똑같이 보게 되는 이유는? +state.score은 클라이언트들이 공유하는 상태 객체이며, 서버가 관리하는 상태에 포함되어 있기 때문. +점수를 바꾸면 서버가 score값을 올리고, colyseus가 변화를 감지해 다른 클라이언트들에게도 push해줌. + +3. 상태를 직접 화면에 반영하지 않아도 되는 이유는? +room.onStateChange()로 변화를 감지하기 때문. +Colyseus가 감시하고 있다가 변화를 뿌려줌. + +4. 내가 버튼을 누른 건데, 다른 사람 점수도 왜 바뀌는 걸까? +상태를 공유하고 있으니까. +클라이언트: 누를게. +서버: 어? 상태 바꿀게. +Colyseus: 어? 동기화할게. +다른 클라이언트들: 어? 감사합니다? + +5. 이번 실습에서 가장 신기하거나 재밌었던 포인트는? +클라이언트에서 만든 변화를 서버에서 감지하는 구조가 눈에 보이니까 신기했음. +room.send()랑 onStateChange()만 사용해도 되니 편하네요. +근데 client 여러 개 띄워두고 진짜 뿌려주는지, 실시간으로 변화가 반영되는지도 보고 싶음. \ No newline at end of file diff --git "a/week5/15 \352\263\265\354\204\270\354\230\201/summary.md" "b/week5/15 \352\263\265\354\204\270\354\230\201/summary.md" new file mode 100644 index 0000000..734c8db --- /dev/null +++ "b/week5/15 \352\263\265\354\204\270\354\230\201/summary.md" @@ -0,0 +1,15 @@ +# WEEK 05 : Colyseus 서버 구조를 이해하자 - 동기화와 메시지 처리를 중심으로 + +## 배운 것 요약 + +01. 서버-클라이언트는 어떻게 소통할까? +클라이언트 --> 서버 : "점수 올려줘!" room.send("scoreUp") +서버: "알았어. 처리할게." onMessage("scoreUp") +Colyseus: 어? 상태가 바뀌었네? 동기화해야지~ + +변경사항을 서버에게 알려주는 이유는? +클라이언트가 둘 이상이고, 클라이언트들은 정보를 공유하고 있기 때문에. += 서버 중심 구조를 취한다. += authoritative server + + diff --git "a/week5/15 \352\263\265\354\204\270\354\230\201/tsconfig.json" "b/week5/15 \352\263\265\354\204\270\354\230\201/tsconfig.json" new file mode 100644 index 0000000..2b59c85 --- /dev/null +++ "b/week5/15 \352\263\265\354\204\270\354\230\201/tsconfig.json" @@ -0,0 +1,113 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "libReplacement": true, /* Enable lib replacement. */ + "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ + "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ + // "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */ + // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ + // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ + // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ + // "noUncheckedSideEffectImports": true, /* Check side effect imports. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + // "outDir": "./", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ + // "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */ + // "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} From a736303b37d9e39b0bf409434468a6aa24a232e4 Mon Sep 17 00:00:00 2001 From: yoona Date: Thu, 29 May 2025 23:12:50 +0900 Subject: [PATCH 55/59] =?UTF-8?q?[week5]=2015=20=EC=A0=95=EC=9C=A4?= =?UTF-8?q?=EC=95=84=205=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20?= =?UTF-8?q?=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyState.ts" | 5 +++++ .../Myroom.ts" | 18 ++++++++++++++++++ .../reflection.md" | 12 ++++++++++++ 3 files changed, 35 insertions(+) create mode 100644 "week5/15 \354\240\225\354\234\244\354\225\204/MyState.ts" create mode 100644 "week5/15 \354\240\225\354\234\244\354\225\204/Myroom.ts" create mode 100644 "week5/15 \354\240\225\354\234\244\354\225\204/reflection.md" diff --git "a/week5/15 \354\240\225\354\234\244\354\225\204/MyState.ts" "b/week5/15 \354\240\225\354\234\244\354\225\204/MyState.ts" new file mode 100644 index 0000000..bd6f0b6 --- /dev/null +++ "b/week5/15 \354\240\225\354\234\244\354\225\204/MyState.ts" @@ -0,0 +1,5 @@ +import { Schema, type } from "@colyseus/schema"; + +export class MyState extends Schema { + @type("number") score: number = 0; +} \ No newline at end of file diff --git "a/week5/15 \354\240\225\354\234\244\354\225\204/Myroom.ts" "b/week5/15 \354\240\225\354\234\244\354\225\204/Myroom.ts" new file mode 100644 index 0000000..b46e26c --- /dev/null +++ "b/week5/15 \354\240\225\354\234\244\354\225\204/Myroom.ts" @@ -0,0 +1,18 @@ +import { Room, Client } from "colyseus"; +import { MyState } from "./MyState"; + +export class MyRoom extends Room { + onCreate() { + this.setState(new MyState()); + + // 메시지 받았을 때 처리! + this.onMessage("scoreUp", (client) => { + this.state.score += 1; + console.log(`🎯 점수 +1! 현재 점수: ${this.state.score}`); + }); + } + + onJoin(client: Client) { + console.log(`😀 ${client.sessionId} 님이 입장했습니다!`); + } +} \ No newline at end of file diff --git "a/week5/15 \354\240\225\354\234\244\354\225\204/reflection.md" "b/week5/15 \354\240\225\354\234\244\354\225\204/reflection.md" new file mode 100644 index 0000000..c9d8aa0 --- /dev/null +++ "b/week5/15 \354\240\225\354\234\244\354\225\204/reflection.md" @@ -0,0 +1,12 @@ +1. room.send()와 onMessage()가 어떤 역할을 했는지 설명해봅시다! +-state 변경을 요청 +-state 변경 요청을 수락하고 반영 + +2. state.score가 바뀌면 모든 사람이 똑같이 보게 되는 이유는? +- 서버에서 상태 변화를 체크하고 다른 클라이언트들에게도 반영하기 때문 + +3. 상태를 직접 화면에 반영하지 않아도 되는 이유는? +-서버가 직접 상태를 반영하고 변경해줌 + +4. 내가 버튼을 누른 건데, 다른 사람 점수도 왜 바뀌는 걸까? +- 서버에서 상태 변화를 체크하고 다른 클라이언트들에게도 반영하기 때문 \ No newline at end of file From 6ecc1df18d544c0f339b240f4ef456df14ba1d13 Mon Sep 17 00:00:00 2001 From: sum-young Date: Thu, 29 May 2025 23:27:56 +0900 Subject: [PATCH 56/59] =?UTF-8?q?[week5]=2015=EB=B0=95=EC=84=9C=EC=98=81?= =?UTF-8?q?=205=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyRoom.ts" | 18 ++++++++++++++++++ .../MyState.ts" | 18 ++++++++++++++++++ .../reflection.md" | 16 ++++++++++++++++ 3 files changed, 52 insertions(+) create mode 100644 "week5/15 \353\260\225\354\204\234\354\230\201/MyRoom.ts" create mode 100644 "week5/15 \353\260\225\354\204\234\354\230\201/MyState.ts" create mode 100644 "week5/15 \353\260\225\354\204\234\354\230\201/reflection.md" diff --git "a/week5/15 \353\260\225\354\204\234\354\230\201/MyRoom.ts" "b/week5/15 \353\260\225\354\204\234\354\230\201/MyRoom.ts" new file mode 100644 index 0000000..be73733 --- /dev/null +++ "b/week5/15 \353\260\225\354\204\234\354\230\201/MyRoom.ts" @@ -0,0 +1,18 @@ +import { Room, Client } from "colyseus"; +import { MyState } from "./MyState"; + +export class MyRoom extends Room { + onCreate() { + this.setState(new MyState()); + + // 메시지 받았을 때 처리! + this.onMessage("scoreUp", (client) => { + this.state.score += 1; + console.log(`점수 +1! 현재 점수: ${this.state.score}`); + }); + } + + onJoin(client: Client) { + console.log(`${client.sessionId} 님이 입장했습니다!`); + } +} \ No newline at end of file diff --git "a/week5/15 \353\260\225\354\204\234\354\230\201/MyState.ts" "b/week5/15 \353\260\225\354\204\234\354\230\201/MyState.ts" new file mode 100644 index 0000000..5b67579 --- /dev/null +++ "b/week5/15 \353\260\225\354\204\234\354\230\201/MyState.ts" @@ -0,0 +1,18 @@ +import { Schema, type } from "@colyseus/schema"; + +export class MyState extends Schema { + @type("number") score: number = 0; +} + +//우선 여기에 그냥 넣었는데, 과제 진행..때는 따로 client.ts처럼 빼서 동작시켰었습니다.. +const room = await client.joinOrCreate("my_room"); + +// 상태가 바뀔 때마다 호출됨! +room.onStateChange((state) => { + scoreText.innerText = `현재 점수: ${state.score}`; +}); + +// 버튼 클릭 시 메시지 보내기 +scoreButton.addEventListener("click", () => { + room.send("scoreUp"); +}); diff --git "a/week5/15 \353\260\225\354\204\234\354\230\201/reflection.md" "b/week5/15 \353\260\225\354\204\234\354\230\201/reflection.md" new file mode 100644 index 0000000..68a1f7e --- /dev/null +++ "b/week5/15 \353\260\225\354\204\234\354\230\201/reflection.md" @@ -0,0 +1,16 @@ +## Q1. room.send()와 onMessage()가 어떤 역할을 했는지? + +- room.send()는 클라이언트, 즉, 유저가 서버에 정보를 전달하기 위해 사용되었습니다. 이걸 통해서 변경된 정보(state)들을 서버로 전달하고, 그것을 서버에서 변경시켜주고, 업데이트하는 역할을합니다. +- onMessage()는 이렇게 서버롤 보내진 정보를 서버 측에서 받아와서 처리하는 역할을 한다고 이해했습니다. + +## Q2. state.score가 바뀌면 모든 사람이 똑같이 보게 되는 이유? +- score가 변경되는 과정이, 유저가 변경 정보를 서버로 전달하여 서버가 해당 변경된 정보를 업데이트하는 것으로 중앙에 집중되어 정보가 저장되기 때문에, 모든 사람들이 보는 정보가 동일하게 중앙이 되면서 state.score가 바뀔 때 모두가 같은 결과를 보게 된다고 이해했습니다. + +## Q3. 상태를 직접 화면에 반영하지 않아도 되는 이유는? +- 제가 사실 직접 실행시키는 것을 실패해서 제대로된 설명일지 모르겠지만, score(또는 상태)가 업데이트됐을 때, innerText를 통해서 페이지를 수정해주고 있기 때문에 상태를 직접 반영하지 않아도 되는 것 같습니다. + +## Q4. 내가 버튼을 누른건데, 다른 사람의 점수도 바뀌는 이유? +- 버튼을 눌러서 변경되는 정보가 중앙인 서버에 반영이 되어 변경됨으로써, 다른 사람들도 모두 그 변경사항을 볼 수 있기 때문이라고 이해했습니다. + +## Q5. 이번 실습에서 가장 신기하거나 재밌었던 포인트? +- 사실 제대로 서버를 띄우지는 못했습니다. 열심히 서치도 하고 ai한테도 물어봤는데, html이 필요하다고도 하고.. 이것저것 수정 및 설치해야한다고 해서 모두 했는데, 설치 파일들이 꼬이고 서버 실행시키는 것이 제대로 동작하지 않으면서 만든 html 파일의 웹페이지가 뜨기만하고, 서버와 연동되어서 변동되지는 않는 처참한 상태가 되었습니다. 하하. 이후 시간 날 때 수정해서 서버를 띄울 수 있도록 노력해볼 듯 합니다... \ No newline at end of file From 775eff735b5efbbdf0c746eafc8afcb16f637cc4 Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Thu, 19 Jun 2025 18:36:32 +0900 Subject: [PATCH 57/59] =?UTF-8?q?docs:=20add=20=ED=9A=8C=EA=B3=A0=20week6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../projRepo.md" | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 "week6/15 \352\271\200\354\234\240\353\246\254/projRepo.md" diff --git "a/week6/15 \352\271\200\354\234\240\353\246\254/projRepo.md" "b/week6/15 \352\271\200\354\234\240\353\246\254/projRepo.md" new file mode 100644 index 0000000..92f8fa0 --- /dev/null +++ "b/week6/15 \352\271\200\354\234\240\353\246\254/projRepo.md" @@ -0,0 +1,61 @@ +# Project Analysis +## About 21 Online + + + +1. Project Name +21 Online + + +2. Link +[Github](https://stopnoanime.github.io/21-online/, "Go BlackJack") + + +3. Description (어떤 게임인지, 주요 기능) +-멀티플레이어 블랙잭 게임 +-딜러와 Player(혹은 Players)는 게임이 시작하면 두 장의 카드를 각각 배분받고 Hit과 Stay 중 하나를 선택해 최대한 21에 가깝도록 만든다 +-Colyseus를 활용한 턴제 카드 게임의 상태 관리와 동기화 +-실시간 상호작용 + + +4. Structure (클라이언트와 서버) +| 구성요소 | 설명 | +|---|---:| +| Player 클래스 | 각 플레이어의 베팅 금액, 총 자산, 손패, 상태(Stay, Hit) 등을 상태로 가짐 | +| GameState 클래스 | 전체 게임 상태 / player, dealer, turn, deck, roundState 등의 필드 포함 | +| GameRoom | 게임 룸 / 플레이어의 입장과 퇴장, 게임 시작, 턴 관리, 메시지 처리 등 | +| `onMessage("hit")` | 클라이언트로부터 히트 요청을 받아 해당 플레이어에게 카드 추가, 상태 갱신 | +| `onMessage("stay")` | 클라이언트로부터 스테이 요청을 받아 플레이어의 턴을 종료, 다음 턴으로 전환 | +| State 구조 | player, dealer, turn, deck, roundState 등으로 구성된 Schema 상태 객체 / 모든 Client와 실시간 동기화 | + + +5. Colyseus Use (룸 관리, 상태 동기화, 메시지 처리) +| 메서드 | 기능 | 설명 | +|---|:---:|---:| +| Room | 게임 테이블 | 서버가 새로운 룸을 생성 / 기존 빈 룸에 플레이어들 매칭 | +| `onjoin` | Room 상태에 Player 등록 | 플레이어 입장 시 트리거 | +| `onLeave` | Room 상태에서 제거 | 플레이어 퇴장 시 트리거 | +| State | 게임 상태 | 딜러와 플레이어들의 카드, 점수, 베팅액, 턴 등 / Schema 기반 | +| `this.setState()` | GameState를 생성 후 this.state로 지정 | 게임 상태 전체를 서버에서 생성하고 관리 / 변경 시 자동으로 모든 클라이언트에 동기화 | +| `this.onMessage()` | Client의 액션(Stay, Hit 등)을 서버가 수신 | 유효성 검사 후 서버가 상태 갱신 / 로직(카드 추가 배분, 턴 종료 등)과 검증은 서버만이 수행 | +| `this.clock.setInterval()` | 게임 흐름 | Colyseus 내장 타이머 시스템 사용 / 자동 행동(Auto Ready 등) 구현 가능 | +| `this.broadcast()` | 모든 Client에게 서버가 알림 전송 | Round 시작, 턴 종료, 승패 결과 등 / 클라이언트는 메시지를 수신해 화면에 반영 | + + +6. In Previous Weeks... (배운 개념과 연결되는 부분) +-this.setState()가 초기 상태를 설정하는데, 21 online의 경우 플레이어에게서 베팅 금액을 빼고 딜러와 플레이어에게 카드를 두 장씩 배분함 +-onJoin()과 onLeave()를 통해 플레이어의 입장과 퇴장을 Room 상태에 반영할 수 있음 + + +7. Impressive Structure or Idea +-onMessage()를 활용해 hit와 stay 기능 구현 +-게임 시작 시 나오는 Round Start는 this.broadcast()를 활용함 +-턴에 상관없이 BlackJack이 나오는 카드 배분 직후의 로직이 존재함(서버 내부의 로직 검사) + + +8. Personal Opinions +-블랙잭은 원래 좋아하던 카드게임이었는데 웹 기술 스택 + Colyseus를 통해 구현할 수 있는 방법을 알게 되어 뿌듯하다 +-간단한 로직으로 구성된 게임이라고 생각했는데 의외로 필요한 State와 구조가 많다... +-실습해본 건 일부뿐이긴 하지만 Colyseus를 통해 실시간 통신과 상태 동기화를 직접 구현해볼 수 있어서 좋았다 +-솔직히 Typescript나 Colyseus 모두 생소했는데 이번에 스터디를 계기로 다같이 배워서 더 동기부여가 된 듯하다 +-멀티플레이어 게임을 만들어보고 싶다!!!는 생각이 갑자기 들었다 \ No newline at end of file From 3298de56a69414e9725d64018d5b704701356348 Mon Sep 17 00:00:00 2001 From: uri-git23 Date: Thu, 19 Jun 2025 18:40:06 +0900 Subject: [PATCH 58/59] fix: typo --- ...5\224\210\354\206\214\354\212\244_\353\266\204\354\204\235.md" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename "week6/15 \352\271\200\354\234\240\353\246\254/projRepo.md" => "week6/15 \352\271\200\354\234\240\353\246\254/6\354\243\274\354\260\250_\354\230\244\355\224\210\354\206\214\354\212\244_\353\266\204\354\204\235.md" (100%) diff --git "a/week6/15 \352\271\200\354\234\240\353\246\254/projRepo.md" "b/week6/15 \352\271\200\354\234\240\353\246\254/6\354\243\274\354\260\250_\354\230\244\355\224\210\354\206\214\354\212\244_\353\266\204\354\204\235.md" similarity index 100% rename from "week6/15 \352\271\200\354\234\240\353\246\254/projRepo.md" rename to "week6/15 \352\271\200\354\234\240\353\246\254/6\354\243\274\354\260\250_\354\230\244\355\224\210\354\206\214\354\212\244_\353\266\204\354\204\235.md" From 9135f38d1174d1bbc80a2ba7f33486eabf848c24 Mon Sep 17 00:00:00 2001 From: skong302 Date: Sat, 12 Jul 2025 14:24:13 +0900 Subject: [PATCH 59/59] =?UTF-8?q?[week6]=2015=20=EA=B3=B5=EC=84=B8?= =?UTF-8?q?=EC=98=81=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...4\354\212\244_\353\266\204\354\204\235.md" | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 "week6/15 \352\263\265\354\204\270\354\230\201/6\354\243\274\354\260\250_\354\230\244\355\224\210\354\206\214\354\212\244_\353\266\204\354\204\235.md" diff --git "a/week6/15 \352\263\265\354\204\270\354\230\201/6\354\243\274\354\260\250_\354\230\244\355\224\210\354\206\214\354\212\244_\353\266\204\354\204\235.md" "b/week6/15 \352\263\265\354\204\270\354\230\201/6\354\243\274\354\260\250_\354\230\244\355\224\210\354\206\214\354\212\244_\353\266\204\354\204\235.md" new file mode 100644 index 0000000..0744191 --- /dev/null +++ "b/week6/15 \352\263\265\354\204\270\354\230\201/6\354\243\274\354\260\250_\354\230\244\355\224\210\354\206\214\354\212\244_\353\266\204\354\204\235.md" @@ -0,0 +1,57 @@ +1. 프로젝트 명 - TOSIOS(The Open-Source IO Shooter) +[Github](https://github.com/halftheopposite/TOSIOS.git) + + + +2. 어떤 게임? +- 브라우저 기반의 실시간 멀티플레이어 슈팅 게임. +- Node.js와 Colyseus 기반. +- 게임 방을 생성하거나, 이미 만들어진 방에 입장 가능. 설정된 인원 수 전원 입장 시 자동으로 게임 시작. 마우스 커서로 shooting direction 전환, 클릭으로 shoot. 3의 HP가 깎이면 사망 처리. 1명의 플레이어(또는 팀)이 남으면 그 플레이어(또는 속한 팀)가 해당 라운드의 승리자. +- 클라이언트가 키 입력과 마우스 클릭 상태를 Colyseus 서버로 전송해 룸 상태 업데이트 > 클라이언트 동기화 + + + +3. 클라이언트-서버 구조 +- 모노레포 구조. Client, Server, Common. + +3.1. GameRoom(server/src/rooms/GameRoom.ts) +- Colyseus의 Room를 상속 +- 게임 룸 생성 시 초기 상태(및 메시지 핸들러)를 설정하거나, 플레이어의 입장 및 퇴장, 라운드 종료 시 룸 정리 작업 등을 위한 메서드 보유. + +3.2. GameState(server/src/states/GameState.ts) +- Colyseus의 Schema를 상속. +- 상태 정의하는 데 사용되며 @type으로 동기화 함. + +3.3. Player(client/src/game/entities/Player.ts) +- 캐릭터의 위치, 무기, 이름, 생명력, 죽음 여부, 힐 또는 피격, 이동, 사격 등... 다양한 메소드 보유 +- BaseEntity.ts, Bullet.ts, Monster.ts 등 플레이어 이외 클래스도 많음. + + + +4. Colyseus가 사용된 부분 요약 + +``` +onJoin(client: Client, options: Types.IPlayerOptions) { + this.state.playerAdd(client.sessionId, options.playerName); + console.log(`${new Date().toISOString()} [Join] id=${client.sessionId} player=${options.playerName}`); + } +onLeave(client: Client) { + this.state.playerRemove(client.sessionId); + console.log(`${new Date().toISOString()} [Leave] id=${client.sessionId}`); +} +``` +onJoin과 onLeave로 룸 생성 및 제거 관리 + +onMessage() keydown, shoot 같은 메시지 처리도 Colyseus 사용. + +- 플레이어 상태:move, rotate, shoot +- 이외로 몬스터 상태, 탄환 상태, 맵 상태 등이 있음. +- set~의 형태의 메소드 이용해서 업데이트. + + + +5. 개인적인 감상 +- 구조가 생각한 것보다 복잡하다. 슈팅 게임은 관리해야 하는 파라미터가 많으니 어쩔 수 없겠지만... +- 그래도 서버 연결은 간편해서 멀티 플레이어 게임 제작 허들이 조금 낮아진 것 같음. +- 코드 조금 본 거라 놓친 것일 수도 있는데 왜 broadcast() 안 쓰지? +- 다시 보니 GameState에서는 메소드 만들어 놓고 GameRoom에서 broadcast하는 것이었음. \ No newline at end of file