프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.

8월 24일 (화)

📚 TIL

Todo App 구현

• fetch api를 통해 사용자 목록과 목롤을 클릭하면 해당 사용자의 todo 목록 조회 기능 구현

• todo를 추가하면 화면에 렌더링 되고, api 호출을 통해 서버에도 추가하는 기능 구현

• todo를 추가하고 삭제하는 동안 낙관적 업데이트를 사용하여 빠른 UI 렌더링 구현

• 서버와 비동기 통신 로딩 UI 구현

• 스토리지를 활용한 폼 데이터 유지를 통한 사용자 UX 개선

• url 쿼리스트링을 history api 통해 다루며 SPA 라우팅 구현

📮 Feelings

Todo App 구현

최근 계속해서 공부해온 Vanilla JS의 다양한 API들을 활용하여 Todo App을 SPA를 구현하게 되었다. 그러다 보니 fetch API를 통해 비동기 통신을 하는 과정과 history API를 통한 라우팅 과정을 공부하는데에 굉장히 많은 도움이 되었다.

비동기 통신을 다루면서 클라이언트에서의 빠른 렌더링을 위한 낙관적 업데이트 개념은 정말 유용하게 나에게 다가왔고 사용자를 위해 우선적인 UI를 제공하는 방법이 사용자에게 좋은 UX를 제공할 수 있겠다라는 생각을 하며 공부하게 되었고 나 역시 그런 코드를 잘 만들 수 있는 기반을 다진 것 같아서 행복했다.

이번 구현을 통해서 Component 단위의 추상화로 웹을 관리하며 쉬운 기능 확장과 코드의 재상용성에 관하여 이해하는데 도움이 많이 되었다. 그리고 CSR을 통해 프론트엔드와 백엔드의 로직 분리를 통한 웹 아키텍처의 이해도 역시 공부하는데에 많은 도움이 되었다.

storage에 대한 활용법 역시 이번 구현을 통해 많이 공부하게 되었고 사용자 편의를 위해 활용하는 방법들에 대하여 공부할 수 있었다.

직접 구현을 하는데에 적지 않은 시간이 걸렸지만 그만큼 나에게 와닿은게 많았고 좀 더 추상화가 잘 이루어져 재사용에 용이하며 클라이언트 렌더링에 대하여 부하가 적은 코딩을 잘할 수 있도록 정말 중요한 개념에 대하여 학습할 수 있는 시간들을 가져서 너무나도 유익했다.

마치며 🙏

요구사항들을 작성해보며 배운 API들을 직접 활용하며 구현하는 시간을 최근에 많이 가지게 되었는데 느낀점은 한 번씩 무에서 유를 만드는 코딩을 진행할 때 마다 추상화와 관련된 로직의 패턴이 보이기 시작했고 그로인해 개발 속도가 조금씩 빨라졌다는 것이다.

그렇게 코드를 작성하고 다시 읽어보면 내가 놓친 부분에 대하여 계속해서 보이게 되고 계속해서 보완해가는 과정을 통해 긴 로직의 코드를 바로 이해할 수 있는 점이 좋았다.

계속해서 발전해 가는 코딩실력에 소소한 행복을 느끼게 되었고 가장 중요한 기본기를 배우고 있는 이 시점에 최선을 다하여 기본기를 습득할 수 있도록 더욱 노력해야겠다.

📅 Future Action Plans

• 4주차 CS 스터디 모임 활동 및 발표

• 업무 관리 툴 Notion 클로닝 프로젝트 시작