AWS-Amplify를 이용한 서버리스 프로젝트에 대한 기본적인 내용을 모두 익혔고,
이제 이 내용을 가지고 조그마한 프로젝트를 진행해보고자 한다.
본래 배운 내용에 대한 전체적인 정리를 먼저 하려고 했으나,
내가 이 내용에 대해 완벽히 알고 있다고 자신하기 어려워
토이프로젝트를 먼저 진행해서 Amplify가 손에 익도록 하고 싶어 이렇게 진행한다.
프로젝트 기획안은 노션에 정리해두었고, 이 노션에 대한 얘기를 여기에 조금 풀어볼 예정이다.
Plans for POEM IT side project(with notion)
왜 시집인가?
평소에 가끔 시를 써 두었고, 40편 정도 쌓였기에 이를 보기 좋게 전시한다는 느낌의 웹사이트를 하나 구축하고 싶었다. 다만 내 시들만 보여주는 것은 너무 간단하고 좀 더 Amplify에서 배운 것을 응용하고자 이것저것 기능을 추가하였다.
아직 프로젝트를 진행중이지만, 기획을 하는 과정에서 많은 고민을 하게 되었고 이를 기억하고자 먼저 이곳에 글을 작성하게 되었다.
고민
처음 시집의 인터페이스를 생각하면서 기본적인 색 지정부터 컴포넌트 구성까지 어떻게 하면 좀 더 깔끔하고 가독성있는 구성을 짤 수 있을지 어느정도 고민하는 시간을 가졌다.
최근까지 이것저것 배운 것에 대한 나름의 애플리케이션들을 제작해보면서 fetching이나 Amplify 기능 구현에 대해서는 큰 무리없이 진행해왔다. 물론 무리가 없었던 것은 아니지만 결국 목표한 바를 성공시켰다. 그러나 문제는 언제나 UI를 구현하고 컴포넌트를 관리하는 부분에 있었다.
어느 상태를 전역적으로 관리하고 어느 상태를 지역적으로 관리할지, css 코드들을 어떤 방식으로 작성할지(module.css, css-in-js 등등...), UI를 구성하려면 컴포넌트나 html 요소들을 어떻게 배치하고 구성해야 할지...
그냥 토이 프로젝트라고 생각했는데도 세부적으로 고민해보아야할 부분이 많았다.
이것들을 고려하지 않고 무작정 코드를 짜게 되면 언젠가 코드가 꼬이고 그러면 많은 부분을 재작성해야하는 문제가 발생할 것이 뻔했다.
이전에는 다양한 도구들을 몰라 컴포넌트와 상태 관리가 어려웠지만, 이제는 조금씩 지식이 쌓여 이러한 설정들을 미리 정해두고 시작해야겠다는 생각을 하였다.
특히, 애플리케이션 내에서 기능들이 작동하는 로직에 대해 정의할 필요가 다분했다!
로직을 정하고 들어가지 않으면 나중에 무엇을 구현할지 몰라 생각이 멈추고, 결국 어영부영하다 제작이 제대로 마무리되지 못하는 경우가 아주 많았다. 그래서 이번에는 구현해야할 기능들을 미리 나열해두고 그 순서를 정해두었다.
현재 AppSync를 이용하여 API를 제작 및 연동하고, Auth를 이용해 로그인한 이용자를 불러와 작성한 시의 작성자가 저장될 수 있도록 구현하였다. 또한 시를 작성하는 창과 랜딩페이지를 구현하고 있고, 랜딩페이지에서 무한 슬라이드 기능을 구현하고 있다. 생각보다 GQL을 이용해 데이터를 불러오는 과정이 순조로워 다행이라고 생각한다.
시간 절약의 이유는 당연히 충분한 기획에 있다. 로직을 정해두니 무엇을 구현해야했는지가 명확했고, 어느 컴포넌트를 세분화하고 재사용할지 정해지니 구현이 빨랐다.
마저 프로젝트를 완성하거나, 중간에 큰 이슈가 발생하면 추가적인 글을 작성할 예정이다.
