2주차 데모 about 2019-01

[ktseo41]

---

marp: true

• 전전 Zico..ding 전 Code Avengers
• 프로젝트에 생명을 불어넣는 과정

---

---

---

---

---

개발 환경 설정

• eslint(+prettier)
• (client, server 폴더 구조) docker-CI (CD)
• commit convention, 브랜치 전략 등

canvas, socket 실습

설계

• DB 설계
• 디렉토리 설계
• Route 설계
• protocol 설계
• 객체 설계

---

canvas animation 실습

• https://codesandbox.io/s/affectionate-sun-mnydz
• canvas에서 sprite로 animation 그리는 원리
• 닥터 스트레인지, 스파이더맨, 데드풀, 아이언맨, 미스테리오
• coming soon

---

eslint, prettier / husky

eslint prettier

• 완전히 새로운 폴더에서 clone
• npm i 로 eslint 관련 모듈들 설치
• ctrl+s
• 안되면 eslint 재설치

husky

• git commit convention, code convention
• https://github.com/connect-foundation/2019-01/wiki/Git-Rule

---

CI / CD (진행중)

• travis

• docker compose || nginx-react / express(api server)

• https://travis-ci.org/connect-foundation/2019-01/builds/611832161

• 문서화

• https://github.com/connect-foundation/2019-01/wiki/CI-CD

---

설계

• MVC, redux
  • 디렉토리
  • https://github.com/connect-foundation/2019-01/wiki/Directory-Architecture
• 서버, 클라이언트 객체 설계
  • https://github.com/connect-foundation/2019-01/wiki/Object-Architecture
• DB 설계
  • https://github.com/connect-foundation/2019-01/wiki/DB-Architecture
• 라우팅, 프로토콜
  • https://github.com/connect-foundation/2019-01/wiki/Routing-&-Protocol