SNU-HCIL / 2020-Summer-MS-Seminar

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Introduction to Svelte with Typescript

This is a seminar for Master's students in SNU-HCIL.

Svelte는 새로운 웹 컴포넌트 프레임워크로, 기존의 다른 프레임워크들과 다르게 아래와 같은 특징들을 가지고 있습니다.

  • Write less code
  • No virtual DOM
  • Truly reactive

이번 2020 여름 석사세미나에서는 6주동안 Svelte를 공부해보고, 개인별로 간단한 프로젝트를 하나씩 기획하여 svelte를 이용하여 구현해보는 것을 목표료 합니다.

Learning Materials

Svelte Official Page

Google Drive

Syllabus

이번세미나는 온라인으로 Zoom을 통하여 진행됩니다. 매주 목요일 오후 4시부터 1시간 정도 세미나를 할 예정입니다. 세미나 과정에는 아래와 같은 내용이 포함됩니다.

  1. 2개의 과제 (Week1, Week2)
  2. 1개의 프로젝트 (Week3 ~ Week6)

Week 1: Svelte Tutorial (7/23)

  • Svelte 튜토리얼 요약
  • Svelte 에서 Typescript 를 이용 가능하도록 환경을 설정하는 법

HW1

  • Svelte를 이용하여 React tutorial 의 Tic-Tac-Toe를 구현해본다.
  • 링크: https://ko.reactjs.org/tutorial/tutorial.html#completing-the-game
  • 조건
    • 기본적으로 React tutorial 에서 구현한 기능들을 전부 구현해아 햡니다. 즉, React tutorial 에서 예시로 구현된 코드와 똑같이 작동해야 합니다.
    • 새로 돌을 놓거나 이전 상태로 전환할 때 svelte의 내장 transition이나 animation을 사용해야 합니다.

Week 2: Using Svelte + D3 with Python Backend (7/30)

  • Svelte에서 D3 사용법
  • 파이썬 서버를 백엔드로 사용하여 Svelte 프론트와 통신하는 법

HW2

  • Play Tic-tac-toe with simple AI
  • 목표: HW1에서 만들었던 Tic-tac-toe 게임을 고쳐서 AI와 대전을 할 수 있도록 해보자.
  • 세부 스펙:
    • 로그인 화면
      • 주소로 접속 시 로그인 화면으로 접근하도록 한다.
      • 로그인 정보를 입력하면 python 서버와의 통신을 통하여 인증을 하고, 계정의 전적 정보(승/무/패)를 불러온다.
      • 로그인에 성공하면 게임 화면으로 넘어간다.
    • 게임 화면
      • HW1을 베이스로 한다. (화면에서도 보이지 않도록 한다.)
      • 플레이어는 X로 플레이 하고, AI는 O로 플레이 한다.
      • 플레이어가 수를 두면, 서버와의 통신을 통해서 AI의 다음 수를 받아온다. AI는 playAI.py 파일에 간단한 AI가 구현이 되어있다.
      • 새로운 게임 시작 시 플레이어는 항상 선공이다.
      • History 기능은 비활성화한다.
      • Restart 버튼을 활성화하여, 클릭 시 현재까지의 플레이 기록을 지우고 처음 상태로 돌아가도록 한다.
      • 게임의 결과(승/무/패)가 결정되면, 서버와의 통신을 통해서 전적을 업데이트 해준다.
    • 전적 화면
      • 게임화면 우측에 전적화면을 새로 만든다.
      • 전적을 x전 y승 z무 w패 형식으로 표시한다.
      • Pie chart를 통해서 전적 정보를 시각화 해준다.
      • DB의 전적이 업데이트 되면 전적 화면더 이에 맞추어서 업데이트가 되어야 한다.
      • 예시 예시
    • playAI
      • playAI 는 현재 Tic-tac-toe 플레이 상황을 input으로 받아서, 다음으로 AI가 수를 놓을 위치를 반환한다.
      • input: 'O', 'X', None 으로 구성된 길이가 9인 list. HW1의 square 변수와 거의 동일하다.
      • output: 0 ~ 8 사이의 정수

Week 3: Project Proposal (8/6)

  • 프로젝트 목표 제시
  • 6분 발표 + 3분 피드백

Week 4: Present Project Proposal (8/13)

  • 진행상황 공유 & 코드리뷰
  • 코드 리뷰 조 편성
    • (백은수, 안단태, 전현), 고형권, 박석현, 정석원, 한구현
    • 총 5개의 프로젝트가 진행되므로 조를 나누지 않는 것이 좋다고 판단했습니다.
  • 각자 조별로 현재 프로젝트 진행 상황과 어려움을 겪고 있는 점에 대해서 간단하게 소개를 하고, 해당 부분의 코드를 같이 살펴보면서 어떻게 하면 문제를 해결할 수 있을지에 대해서 논의를 진행하도록 합니다.

Week 5: Lecture by Group 1 (8/20)

  • 진행상황 공유 & 코드리뷰

Week 6: Project Presentation (8/27)

  • 프로젝트 결과물 발표
  • 10분 발표 + 5분 피드백
  • 마지막 시간이므로 평소보다 시간이 많이 (2시간 정도) 소요될 예정입니다.

Participants

  • 정석원
  • 고형권
  • 박석현
  • 백은수
  • 전현
  • 안단태
  • 한구현

About


Languages

Language:HTML 48.3%Language:JavaScript 20.1%Language:Python 19.2%Language:CSS 7.2%Language:TypeScript 5.2%