과제
부트캠프의 두번째 과제로, 간단한 CRUD 기능을 가진 사이트를 개발했다.
이전에 기본적으로 사용하던 리액트 라이브러리를 쓰지 않고 Vanilla JS를 이용하여 구현하는걸 목표료 진행했다.
학습내용
이번 과제로 아래 내용을 학습할 수 있었다.
- Vanilla JS를 이용한 SPA 개발
- AWS Amplify를 이용한 웹 호스팅 및 백엔드 개발
- 유저 플로우 작성
Vanilla JS SPA
리액트 라이브러리를 사용하지 않고 컴포넌트와 해쉬라우터를 구현하여 SPA 방식으로 개발할 수 있었다.
화면 내 요소를 어떻게 컴포넌트로 나눠서 개발해야 할지 계속해서 고민하는 과정을 통해 조금 더 컴포넌트 방식을 이해할 수 있었다.
확실히 이전 MVC 방식이 아닌, 각 컴포넌트에 로직을 작성함으로서 코드를 확인하기 쉬웠고 좀 더 직관적으로 각각의 역할을 확인할 수 있었다.
조금 아쉬웠던 점은 각 컴포넌트 내에서 CSS를 부가하여 이전에 styled-componets는 이렇게 개발했을까 하고
느껴보고 싶었지만, 시간이 부족하여 하나의 CSS 파일에서 진행할 수 밖에 없었다.
Amplify
예전부터 관심 있었던 클라우드 서비스인 AWS의 Amplify를 간단하게 이용해 보았다.
공식 홈페이지의 튜토리얼을 진행하고, 이번 프로젝트에 적합하도록 테이블을 작성하니
자동으로 기본적인 CRUD를 진행해 주는 것을 보고 놀라웠다.
또한 하나의 서비스에서 진행을 할 수 있어 보통 웹 개발에서 주로 발생하는 CORS 문제등을 발생시키지 않아
개발하는데 여러 도움을 줄 수 있는 좋은 서비스라고 생각되었다. (대신 비용은 좀 비싸지만...)
조금 더 GraphQL에 대한 지식을 가진다면, 직접 복잡한 쿼리도 만들어서 진행할 수 있고
AWS에 더 익숙해진다면 프로젝트의 프로토타입 버전은 프론트엔드 개발자 혼자서 진행할 수 있을듯 하다.
유저 플로우
내가 생각했을때 유저가 해당 사이트를 어떻게 사용할것인지 머릿속으로 그려보고,
이를 피그잼을 활용하여 간단하게 도식화 해 보았다.
매우 기초적인 유저 플로우지만 이를 통해 각 페이지에 어떤 요소가 필요할 것인지, 어떻게 이동할 것인지
좀 더 쉽게 구상할 수 있었다.
