Chapter 1-1. 프레임워크 없이 SPA 만들기
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)
Q. 이번 주차를 지나며 겪었던 문제가 무엇이었나요?
A. 이번 주차에 프론트엔드 개발을 공부하면서, 프레임워크 없는 프론트엔드 개발이라는 도서를 읽고 학습했음에도 불구하고, 여전히 모든 것이 처음인 것처럼 느껴졌습니다. 단순히 책을 읽고 이해하는 것만으로는 부족하다는 걸 깨달았고, 작은 예제라도 직접 만들어보면서 제대로 이해하는 과정이 중요하다는 생각을 하게 된 한 주였습니다.
과제를 진행하며 겪었던 주요 문제는 history API에 대한 기본적인 이해가 부족했다는 점과, EventListener를 능숙하게 다루지 못했다는 점입니다. 이 부분들을 보완해야겠다는 생각이 들었습니다.
2. 시도
Q. 문제를 해결하기 위해 어떤 시도를 하셨나요?
A. history API에 대한 이해가 부족해 처음에는 window.location.pathname을 직접 수정하는 방식으로 진행했습니다. 그러나 이로 인해 라우팅할 때마다 페이지가 새로 렌더링되는 문제가 발생했으며, 결과적으로 전통적인 MPA(Multi-Page Application)처럼 작동하게 되었습니다. 이 방식에서는 페이지 전환 시 상태가 유지되지 않고, 매번 새로고침이 되어 불편함이 생겼습니다. SPA의 기본 원리를 잊고 있었던 것이 문제를 더 복잡하게 만든 것 같습니다.
부끄럽게도 과제를 빨리 해결하고 싶었던 마음에, 이런 간단한 문제를 인지하고 해결하는 데 꽤 오랜 시간이 걸렸습니다. 이 부분이 아쉽게 느껴졌습니다.
3. 해결
A. 이번에는 window.location.pathname을 직접 수정하는 대신, history API의 history.pushState를 사용해 라우팅 처리를 구현했습니다. history.pushState를 활용함으로써 페이지를 새로 고침하지 않고도 URL을 변경하고, 상태를 유지하는 방식으로 SPA(Single-Page Application)처럼 작동하도록 만들 수 있었습니다.
4. 알게된 것
A. history.pushState는 상태 객체, 제목, URL을 인자로 받아 상태 데이터를 브라우저 세션 기록에 저장합니다. 이 과정에서 페이지 전환 시 브라우저가 실제로 서버에 요청을 보내지 않고도 상태를 관리할 수 있게 되며, 이로 인해 브라우저의 세션 기록과 상태 관리가 어떻게 연결되는지 더 명확히 이해할 수 있었습니다. 특히, pushState를 통해 페이지 전환 시에도 상태 객체를 함께 전달할 수 있어, 각 페이지에서 세션 정보를 유지하면서도 불필요한 새로고침 없이 매끄러운 사용자 경험을 제공할 수 있음을 깨달았습니다.
이 과정을 통해 세션 관리의 중요한 개념인 상태 유지가 어떻게 이루어지는지를 다시 한번 정리하게 되었고, 페이지 전환 시 상태를 잃지 않고 지속적으로 관리하는 방식의 중요성을 재확인했습니다. 결과적으로 웹 애플리케이션의 구조와 동작 원리에 대한 이해가 더 깊어졌습니다.
Keep : 현재 만족하고 계속 유지할 부분
A. 부담감은 있었지만, 과제에 대해 꾸준히 고민하고 이 과제가 어떤 목적을 가지고 있는지 계속해서 생각했습니다. 그 결과, 이 과제를 통해 어떤 점을 얻을 수 있을지에 대해서도 깊이 고민할 수 있었습니다. 무엇보다 꾸준히 학습을 이어가고 있다는 점에서 가장 만족스럽습니다.
Problem : 개선이 필요하다고 생각하는 문제점
Q. 이번 주를 마무리 하며 개선이 필요하다고 생각했던 문제점은 무엇인가요?
A. 이번 주를 마무리하며 개선이 필요하다고 느낀 점은, 과제를 완료하고 시간이 남았음에도 불구하고 좀 더 깊이 고민하지 못했다는 점입니다. 과제를 진행하면서 "나중에 이렇게 바꿔야지"라고 생각했던 부분들, 예를 들어 모듈로 파일을 분리하는 작업 등을 미뤘던 것이 아쉬웠습니다. 시간이 있었음에도 불구하고 이러한 개선 작업을 진행하지 못한 것은 스스로도 아쉽게 느껴졌고, 앞으로는 과제를 마친 후에도 더 나은 구조와 방식을 고민하며 발전시킬 수 있도록 해야겠다는 생각이 들었습니다.
Try : 문제점을 해결하기 위해 시도해야 할 것
Q. 이 문제점을 해결하기 위해 다음 한 주간 시도 할 것은 무엇인가요?
A. 이번 주에 느낀 문제점을 해결하기 위해, 다음 한 주 동안은 과제를 마친 후에도 시간을 두고 개선할 부분을 꼼꼼히 검토하고 실제로 적용하는 데 집중할 계획입니다.
과제를 단순히 완성하는 것에 그치지 않고, 코드의 구조나 효율성을 한 번 더 점검하면서 "어떻게 하면 더 나은 방식으로 구현할 수 있을까?"라는 고민을 지속적으로 할 것입니다. 이를 위해 매일 일정 시간을 할애해, 학습한 내용을 실습하며 코드 품질을 향상시킬 수 있는 방법들을 찾아보고 적용해 나갈 계획입니다.
댓글