Vanilla JS로 신년 메시지 앱 만들기 회고

이번에 넘블에서 진행하는 챌린지에 참가해서 만들게 되었다.

결과물은 여기에서 확인할 수 있다.

요약

하나의 서비스를 배포까지 해본 경험은 이번이 처음이었다. 그것도 바닐라로! 결과물이야 부끄럽다만 그래도 하나의 서비스를 온전히 해본 것 같아 나 자신을 너무 자책하지 않기로 했다.
주어진 기간은 2주였지만, 사실상 내게 주어진 기간은 그 기간보다 훨씬 짧았다. 코로나 확진으로 1주 반을 골골거리니 시간이 촉박했다.
그렇기에 아쉬운 점이 많이 남았지만 앞으로도 쭉 개발을 할 것이니 못한 것에 연연하지 않고 앞으로 할 것에 더 집중해 보기로 한다.

Keep(잘한 점)

• 코로나에도 포기하지 않고 기능을 모두 구현한 점
• 처음 해보는 바닐라 프로젝트를 잘 찾아본 점
• 배포까지 스스로 해본 점
• 바닐라로 구현해 보면서 SPA가 어떻게 작동하는 지 이해할 수 있었다.
• 라우팅의 구조와 구현 방법에 대해 알 수 있었다.

Problem(문제)

• 로직과 뷰가 분리되지 못했음.
• API 호출에 대한 인터페이스가 존재하지 않아 중복이 많고, 외부 라이브러리에 대한 의존도가 높아짐
• 성능에서 항상 모든 요소를 업데이트 하다보니 별로 좋지 않을 것 같음
• 리소스가 부족했다.
• 비동기 처리에서 로딩이나 에러에 대한 UI가 부재했다.
• 번들러를 통해 최초 요청 시간을 줄이지 못한 점

Try(시도)

• 실제로 이를 해결하기 위해 useState를 직접 제작해봤으나 렌더링을 할 때 항상 모든 것을 렌더링 하다보니 input의 포커싱을 일정하게 유지하지 못했다. 렌더링에 관한 구조를 다시 생각해봐야겠다.
• API를 호출하는 부분에 있어서는 인터페이스를 생성하고 클라이언트에선 인터페이스를 통해 정보를 조작하자. 그리고 인터페이스의 세부 구현 부분에 실제 구현 파트를 넣는다.
• 컴포넌트를 좀 더 나누어 렌더링되는 부분을 최소화해야 한다.
• 취준이라는 조급한 마음에 원티드 프리온보딩과 이 챌린지를 겸비하고 있었는데 결론적으론 어느 한 쪽을 제대로 잡지 못한 것 같아 아쉽다. 어떤 프로젝트 안에 있으면 열심히 하고 있을 것이란 생각이 들어서 그렇게 하였는데, 앞으론 내가 집중할 수 있는 리소스를 충분히 줘야할 것 같다.
• 제출 버튼을 눌렀을 때 버튼의 상태나 에러 상황에 대한 처리를 추가로 해야겠다. 또한 이런 에러 상황이나 성공 상황에 대한 것을 API 옵션으로 주면 좋을 것 같다(react-query처럼)
• 번들러를 사용해서 파일을 하나로 압축시켜보자 다음번엔 시도해 볼 수 있을 것이다.