[JS_TS] 2주차 스터디

**스터디의 목적은 과제 형태를 지양하며,
개개인의 코드 개선과 활용성을 증대 시키는 것을 목적으로 진행하고 있습니다.**

1. 자바스크립트 학습 주제

DOM API 이해와 실전 적용

1) 자료 정리

이종국 정리
[JS 2주차] : Element-animate()
https://veil-shock-17c.notion.site/JS_Element-animate-f3d0f5d79e3f4d0cad9c583f795d984c

이인재 정리
[JS 2주차: 이벤트]
https://velog.io/@dldlswognqh/DOM2-%EC%9D%B4%EB%B2%A4%ED%8A%B8

김다빈 정리
https://dabiny.notion.site/39-2-DOM-2-e511fdfcee6f45e8aa2fbfb4c1bd2432

김유민 정리
https://devyuminkim.github.io/devlog/dev-use-dom.html

2) 구현 실습 (개인 코드 활용만 업로드)

이종국 'click API'
간단 설명 : animate를 활용해서 keyframe에는 spin효과를, options에는 지속시간을 입력하여 간단한 실습을 해봤습니다.
1. animation

2. video change event
   간단 설명 : onclick 이벤트 효과를 통해 비디오를 첫 번째 클릭 시 장면 전환 더블 클릭 시 장면 재전환 효과를 넣어서 실습을 해봤습니다.
   

3. count score
   간단 설명 : 게임스코어를 효과를 생각하며 방법을 고안하던 중 인풋을 활용해서 표현하고자 만들어봤습니다.
   

이인재 'My list's'
간단 설명 : API의 좀 더 심화적인 사용을 위해 각 태그들이 상속하는 타켓과 부모, 자식 노드를 활용해서 버튼과 연동 후 submit과 특정 태그만 remove할 수 있는 기능을 주었고 submit과 remove형태를 눈에 볼 수 있도록 브라우저에서 동작할 수 있도록 작업해봤습니다.

리스트업

김유민 '가위바위보 게임'
간단 설명 : onclick 이벤트로 가위바위보 게임 시뮬레이션화 해봤습니다. 각 3개의 버튼을 만들고 그 안에 조건문을 연결 시켰고, math.random()문법을 활용해서 랜덤으로 임의의 상대 값을 넣어주고 버튼이 클릭될 때마다 계속 새로운 행위가 나타나도록 했습니다.

또한 함수 매서드를 이용해서 결과 데이터를 축적하여 승률까지 계산할 수 있도록 의도했습니다.

김다빈 'changeBtn'
간단 설명 : click API를 이해하면서 클릭 이벤트가 발생했을 때 또 다른 버튼으로 변경하는 것을 실습해봤습니다. innerHTML을 통해 자바스크립트 인터렉션을 한 것이 특징입니다.

실습 코드

김유민
https://devyuminkim.github.io/devlog/dev-use-dom.html

이종국
https://velog.io/@kook03/%EA%B0%84%EB%8B%A8-%EC%8B%A4%EC%8A%B5-2

김다빈
https://dabiny.notion.site/39-2-DOM-2-e511fdfcee6f45e8aa2fbfb4c1bd2432

이인재
https://velog.io/@dldlswognqh/tweet-%EA%B5%AC%ED%98%84

2. 타입스크립트 학습 주제

열거형(enums), type assertion, class ...

자료 정리

이인재 정리
https://velog.io/@dldlswognqh/열거형

이종국 정리
[TS 2주차] : 열거형 / 타입 단언 / 타입 가드에 대한 이해
https://veil-shock-17c.notion.site/TS_Enums-cedd29b093a04295b6e3d4d01cb3bae8
https://veil-shock-17c.notion.site/TS_-Type-assertions-Type-Guard-1f83a9b414cd4372acb2cc987fa54efd

김유민 정리
https://devyuminkim.github.io/devlog/dev-ts.html