나는 얼마나 개발을 편하게 했는가
나는 얼마나 개발을 편하게 했는가
개요
이번 항해 1주차 과제의 핵심 목표는 React를 사용하지 않고 SPA(Single Page Application)를 구현하는 것이었다. 과제의 목적은 React와 같은 라이브러리가 어떻게 작동하는지, 그 근본적인 원리를 이해하는 데 있다. React는 우리가 웹 개발을 할 때 쉽게 쓸 수 있지만, 그 이면에 있는 바닐라 자바스크립트의 작동 방식을 이해하지 않으면 React의 강력함을 온전히 활용하기 어렵다. 그래서 이번 주차의 과제는 리액트를 사용하지 않고 SPA를 구현하는 것으로 설정되었다. 이를 통해 바닐라 자바스크립트로 어떻게 SPA를 만들 수 있는지, 그리고 React와 같은 라이브러리가 왜 필요한지에 대한 깊은 이해를 도모하는 것이 목표였다.
본론
처음에 과제를 받았을 때, 나는 “리액트 없이 SPA를 어떻게 만들지?”라는 질문을 스스로 던졌다. 리액트를 사용하면 손쉽게 해결할 수 있는 문제들이 바닐라 자바스크립트로는 생각보다 복잡하게 느껴졌다. 개발 편의성 측면에서 React가 얼마나 큰 도움을 주는지를 다시 한번 느낄 수 있었다.
바닐라 자바스크립트로 SPA를 구현한다는 것은 기본적으로 다음과 같은 주요 작업을 포함한다:
- 라우팅 관리: 페이지 리로딩 없이 URL을 변경하고, 그에 따라 새로운 화면을 보여주는 것.
- DOM 조작: 화면에 동적인 데이터를 렌더링하고, 사용자의 상호작용에 따라 화면을 업데이트하는 것.
- 상태 관리: 사용자 인터랙션에 따라 데이터의 상태를 저장하고 화면에 반영하는 것.
리액트를 쓰지 않으면, 이러한 작업들은 전적으로 바닐라 자바스크립트로 처리해야 한다. 예를 들어, SPA에서는 History API를 사용하여 브라우저의 뒤로가기/앞으로 가기 버튼을 지원하면서 페이지 전환을 관리해야 했다. 또한, 상태가 변할 때마다 직접 DOM을 조작하고 다시 렌더링해주는 작업이 필요했다.
발생한 문제
과제를 진행하는 과정에서 여러 가지 문제에 부딪혔다. 특히, DOM 요소에 이벤트를 주입하는 시점이 큰 문제였다. 페이지가 렌더링되기 전에 이벤트를 등록하려다 보니 DOM이 완전히 렌더링되기 전에 이벤트가 제대로 등록되지 않는 경우가 발생했다. 이를 해결하기 위해서는 렌더링이 완료된 후에 이벤트를 주입하는 방법을 찾아야 했다. 이 문제를 해결하기 위해, 이벤트 위임 방식을 사용하거나, 특정 시점에서만 이벤트를 바인딩하는 전략을 사용해야 했다.
이를 통해, 나는 DOM의 렌더링 시점과 이벤트 바인딩 시점을 명확하게 구분하고, 그에 맞게 코드를 작성해야 한다는 점을 깨달았다. 리액트는 이를 Virtual DOM으로 추상화하여 개발자가 이러한 세부 사항을 신경 쓰지 않도록 해주지만, 바닐라 자바스크립트에서는 직접 처리해야 한다.
SPA를 리액트 없이 만드는 이유
이번 과제는 SPA를 리액트 없이 구현하면서 내가 리액트에 얼마나 의존하고 있었는지를 깨닫게 했다. 리액트는 가상 DOM과 컴포넌트 기반 아키텍처를 통해 개발자에게 동적 UI 구성을 매우 편리하게 제공한다. 하지만, 이를 사용하지 않고 SPA를 만들다 보니, 리액트가 DOM 업데이트, 상태 관리, 라우팅 처리를 얼마나 효율적으로 해결하는지를 체감할 수 있었다. 이는 개발자의 생산성을 높여주는 중요한 이유였다.
하지만, 리액트 없이 SPA를 구현하는 경험은 매우 중요하다. 프레임워크 없이 웹 애플리케이션을 구성하는 방법을 이해함으로써, 우리는 React와 같은 라이브러리의 내부 작동 방식을 더 깊이 이해하게 된다. 특히, React의 컴포넌트 기반 렌더링, 상태 관리 방식 등이 어떻게 만들어졌는지, 그리고 그 필요성을 더 잘 알게 되었다.
느낀 점
이번 과제를 통해, 리액트의 편리함에 너무 의존하고 있었다는 사실을 깨닫게 되었다. 리액트의 동작 원리를 더 깊이 이해하기 위해서는 바닐라 자바스크립트의 개념부터 확실히 잡아야 한다는 것을 배웠다. 리액트의 Virtual DOM, 이벤트 관리, 상태 관리가 어떻게 설계되었는지에 대해 고민해볼 기회를 가질 수 있었다.
프레임워크 없이 웹 애플리케이션을 만드는 과정에서 웹 개발의 본질을 다시 되돌아보게 되었고, 앞으로도 단순히 리액트 개발자가 아닌, 근본적인 프론트엔드 기술을 이해하는 개발자가 되기 위해 더 많은 노력을 기울일 계획이다.
결론
프레임워크를 사용하지 않고 SPA를 구축하는 경험은 매우 값진 과정이었다. 이를 통해 리액트와 같은 라이브러리의 가치를 더 깊이 이해하게 되었으며, 프론트엔드 개발자로서의 역량을 한 단계 더 성장시킬 수 있었다.