Autism Project 시작하기

Web Dev/5. Projects

Autism Project 시작하기

hYhY1234 2021. 5. 10. 13:53

728x90

예전부터 얘기는 조금씩 나누던 프로젝트인 Autism Project를 시작하려고 한다. 지금 미국에 사는 친구랑 얘기가 잘되어서 자폐 아동들을 위한 웹 기반 교육 프로그램을 개발해보려고 한다.

사용하는 기술스택은 Next.js 가 될 것 같고, 이 프로젝트에서는 animation, svg, canvas, touch event(mouse event) 등을 적극적으로 활용하면서 공부할 예정이다.

우선 Next.js와 Amplify를 통해서 프로젝트 기본 구성을 하고, 게임을 본격적으로 개발해서 붙이는 식으로 구성을 할 것 같다!

공부할 것들 Reference

1. Next.js

nextjs.org/

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

nextjs.org

2. Redux(상태 관리가 많을 것으로 예상)

react-redux.js.org/

React Redux | React Redux

Official React bindings for Redux

react-redux.js.org

3. Amplify docs

docs.amplify.aws/

Amplify Framework Docs

Amplify Framework documentation - Learn how to use Amplify to develop and deploy cloud-powered mobile and web apps.

docs.amplify.aws

- SSR Support for AWS Amplify JavaScript Libraries:

aws.amazon.com/ko/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/

SSR Support for AWS Amplify JavaScript Libraries | Amazon Web Services

AWS Amplify is a set of tools and services that enable mobile and front-end web developers to build secure, scalable full stack applications powered by AWS. It consists of three main components: a set of open source libraries and UI components for adding c

aws.amazon.com

4. css animation

developer.mozilla.org/en-US/docs/Web/CSS/animation

animation - CSS: Cascading Style Sheets | MDN

The animation shorthand CSS property applies an animation between styles.

developer.mozilla.org

5. svg

developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

Getting started - SVG: Scalable Vector Graphics | MDN

Let us dive straight in with a simple example. Take a look at the following code.

developer.mozilla.org

6. touch events / mouse events