-
Autism Project 시작하기Web Dev/5. Projects 2021. 5. 10. 13:53728x90
예전부터 얘기는 조금씩 나누던 프로젝트인 Autism Project를 시작하려고 한다. 지금 미국에 사는 친구랑 얘기가 잘되어서 자폐 아동들을 위한 웹 기반 교육 프로그램을 개발해보려고 한다.
사용하는 기술스택은 Next.js 가 될 것 같고, 이 프로젝트에서는 animation, svg, canvas, touch event(mouse event) 등을 적극적으로 활용하면서 공부할 예정이다.
우선 Next.js와 Amplify를 통해서 프로젝트 기본 구성을 하고, 게임을 본격적으로 개발해서 붙이는 식으로 구성을 할 것 같다!
공부할 것들 Reference
1. Next.js
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 | React Redux
Official React bindings for Redux
react-redux.js.org
3. Amplify docs
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
developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
Canvas tutorial - Web APIs | MDN
developer.mozilla.org
- 기타: mytutorials.tistory.com/359
프로젝트 목표
이번 프로젝트는 특히 User Interaction이 중요해서 이부분을 잘 채울 수 있도록 개발을 해보고 싶다!
'Web Dev > 5. Projects' 카테고리의 다른 글
[개인 블로그 renewal] 프로젝트 노선 변경 + custom notion (0) 2021.05.14 Next.js - Amplify - Tailwind CSS 세팅하기 (1) 2021.05.13 [toy blog service] 1차 마무리 (0) 2021.04.23 [toy blog service] Next.js의 API와 json (0) 2021.04.19 [toy blog service] getServerSideProps 이용하기 (0) 2021.04.18