항해 플러스 프론트엔드 1주차 후기 - 프레임워크 없이 SPA 구현하기

항해 플러스 프론트엔드 4기에 합류하다

오랜 고민 끝에 재직자를 위한 부트캠프, 항해 플러스 4기에 합류하게 되었다.

항해는 이미 개발자 양성 부트캠프로 널리 알려진 곳이다.

특히 주목할 만한 점은, 현직 주니어 개발자들의 성장을 위한 특화된 과정도 운영하고 있다는 것이다.

부트캠프답게 교육 과정은 상당히 강도 높다고 한다.

매일 집-회사-항해의 루틴만 반복해야 할 만큼 과제의 난이도가 만만치 않다는 이야기를 듣고 처음에는 망설였다.

하지만 퇴근 후의 달콤한 휴식과 맥주 한잔도 미뤄두고 이 과정을 선택한 이유는 단 하나,

탄탄한 프로그래밍 실력을 갖춘 진정한 개발자로 거듭나고 싶었기 때문이다.

합류를 결심한 계기

벨로그에 여러 차례 기록했듯, 나는 올해 많은 프로젝트를 진행하며 흥미로운 결과물들을 만들었다.

덕분에 개발자 커뮤니티에서 어느 정도 이름을 알리게 되었다.

좋은 채용 기회도 여러 번 찾아왔지만, 매번 탈락의 쓴잔을 마셔야 했다. 그 이유는 명확했다. 실무 역량과 프로그래밍 기초 지식의 부족이었다.

내 깃허브 저장소의 프로젝트 코드들을 들여다보면, 의도한 바는 알 수 있지만 체계가 없다는 것이 한눈에 보인다.

결과물 만들기에 급급해 코드 퀄리티는 신경 쓸 겨를도 없었고, 사실 그럴만한 능력도 부족했다.

새로운 결과물을 만드는 것은 자신 있었지만, 개발자로서 장기적인 성장을 좌우하는 기초 소양이 부족하다는 사실이 늘 마음 한켠에 걸림돌로 남아있었다.

혼자 공부를 시작하려 해도 무엇을 어떻게 해야 할지 갈피를 잡기 어려웠고, 꾸준히 이어나갈 만한 의지도 부족했다.

적절한 강제성과 명확한 가이드라인이 있는 프로그램이 있다면 잘 따라갈 수 있을 텐데...

이런 고민을 하던 차에 마침내 발견하게 되었다.

내 필요에 완벽하게 부합하는 주니어 개발자를 위한 부트캠프, 항해 플러스를...!

항해 플러스 프론트엔드 커리큘럼

항해 플러스 프론트엔드는 총 10주 과정으로 진행된다.

커리큘럼은 JavaScript와 React의 핵심 원리 파악부터 클린 코드 작성, 테스트 코드 구현, 성능 최적화까지 실무에 필수적인 내용들로 탄탄하게 구성되어 있다.

현재는 이직을 고려하고 있지 않지만, 과정 수료 후에는 이직 코칭 서비스도 받을 수 있다는 점이 매력적으로 다가왔다.

매주 토요일 오후 1시부터 6시까지는 QnA와 발제 시간이 마련되어 있으며, 평일에는 과제 수행과 함께 다른 수강생들과의 네트워킹, 멘토링이 진행된다.

과제 - 프레임워크 없이 SPA 만들기 (with 바닐라 자바스크립트...)

성공적인 첫 모임(오프라인)을 마치고 돌아와 과제를 확인한 순간, 눈앞이 캄캄해졌다.

발제 시간에 대략적인 내용은 들었지만, 이토록 치밀하게 짜여진 테스트 케이스까지 준비되어 있을 줄은 상상도 못 했다.

게다가 vitest로 작성된 모든 테스트를 통과하지 못하면 과제 실패라니...

라우터 구현(히스토리와 해시 방식), 라우트 가드 구현, 상태 관리 구현, DOM 조작, 이벤트 위임까지

프레임워크의 도움 없이 순수 자바스크립트만으로 이 모든 것을 구현해내야 하는 것이 첫 과제였다.

리액트나 뷰 같은 프레임워크가 얼마나 많은 것을 대신해주고 있었는지 새삼 깨닫게 되는 순간이었다.

말 그대로 눈물을 흘리며 과제를 완성했다.

다행히 이전에 바닐라 자바스크립트 강의를 미리 들어두었기에 그나마 방향을 잡을 수 있었지만,

그렇지 않았다면 이미 험난한 과제가 더욱 큰 산처럼 느껴졌을 것이다.

이번 과제의 진정한 목표는 프레임워크의 도움 없이 SPA를 직접 구현해보면서

자바스크립트의 기본기와 SPA의 동작 원리를 깊이 있게 이해하는 것이라고 했다.

고된 과정이었지만, 그 목표가 가진 가치만큼은 충분히 이해할 수 있었다.

지금부터, 과제를 하면서 깊게 고민하고 알게된 부분인 라우터 위주로 WIL을 남겨 보려고 한다.

라우터 구현하기

1. Class형 라우터 vs 함수형 라우터

• 클래스형 라우터

  
  

클래스형 라우터의 가장 큰 특징은 객체지향적 설계와 상속을 통한 확장성이다.

this 키워드를 통해 상태를 관리하고, 메서드를 논리적으로 그룹화할 수 있다.

특히 기본 라우터를 확장하여 해시 라우터를 구현할 때 상속의 이점이 두드러진다.

• 함수형 라우터

  
  

함수형 라우터는 클로저를 활용한 상태 관리와 함수 단위의 모듈화가 특징이다.

코드 구조가 더 직관적이고 이해하기 쉬우며, 가벼운 프로그래밍에 적합하다.

특히 주니어 개발자의 관점에서는 클래스의 this 바인딩 이슈를 신경 쓰지 않아도 되는 장점이 있다.

클래스형의 경우 상속을 통한 코드 재사용성이 장점이지만, 때로는 이 상속 구조가 오히려 복잡성을 가중시킬 수 있다.

반면 함수형은 단순하고 예측 가능한 코드 흐름을 만들 수 있지만, 복잡한 객체 관계를 표현하기에는 제한적일 수 있다.

***

라우터를 구현하기에 앞서, 클래스 문법을 사용할지 함수형으로 접근할지 깊이 고민했다.

클래스는 아직 익숙하지 않은 영역이었기에, 결국 함수형 구현 방식을 선택했다.

클래스를 활용했다면 객체 지향 프로그래밍을 실습하고 이해하는 좋은 기회가 되었겠지만, 나는 다른 접근을 택했다.

익숙한 함수형 프로그래밍을 바탕으로, 라우터의 핵심을 이해하고 확장 가능한 구조를 설계하는 데 더 집중하기로 한 것이다.

2. History API 기반 라우터와 Hash 라우터의 차이

• History API 라우터

History API 라우터는 브라우저의 History API를 활용하여 실제 URL을 조작한다.

/profile, /about과 같은 일반적인 URL 경로를 사용하며, 이는 실제 서버의 경로처럼 작동한다. 따라서 서버 사이드에서도 이러한 URL에 대한 적절한 처리가 필요하다.

특히 새로고침을 했을 때 해당 URL로 서버에 실제 요청이 가기 때문에, 서버에서 모든 라우트에 대해 같은 HTML 파일을 반환하도록 설정해야 한다.

그렇지 않으면 404 에러가 발생할 수 있다.

대신 URL이 깔끔하고 SEO에 더 유리하다는 장점이 있다.

• Hash 라우터

Hash 라우터는 URL의 해시(#) 부분을 활용한다.

/#/profile, /#/about처럼 #(해시) 뒤에 경로를 표시하는데, 중요한 점은 해시 이후의 부분은 서버로 전송되지 않는다는 것이다.

브라우저는 해시 이전의 부분만 서버로 요청을 보낸다.

이러한 특성 때문에 Hash 라우터는 서버 설정 없이도 SPA 라우팅이 가능하다.

새로고침을 하더라도 서버는 항상 기본 HTML 파일만 응답하면 되고, 클라이언트에서 해시 값을 기반으로 라우팅을 처리한다.

단, URL이 다소 지저분해 보이고 SEO에는 불리할 수 있다는 단점이 있다고 한다.

3. History API의 주요 메서드들

• 1. pushState

-새로운 히스토리 엔트리를 추가한다.

- 브라우저의 뒤로 가기를 사용할 수 있게 된다.

- URL은 변경되지만 페이지는 새로고침되지 않는다.

1. 일반적인 페이지 네비게이션

2. 사용자가 뒤로가기로 돌아올 수 있어야 하는 경우

• 2. replaceState

-현재 히스토리 엔트리를 새것으로 교체한다.

- 브라우저의 뒤로 가기 히스토리에 추가되지 않는다.

- URL은 변경되지만 페이지는 새로고침되지 않는다.

1. 리다이렉션

2. 에러 페이지 전환

3. 로그인/로그아웃 처리

• 3. popstate 이벤트

- 브라우저의 뒤로가기/앞으로가기 버튼 클릭 시 발생한다.

- pushState/replaceState로는 발생하지 않음

1. 발생 조건:

- 브라우저 뒤로가기/앞으로가기 버튼 클릭

- history.back() / history.forward() / history.go() 호출

2. 발생하지 않는 경우:

- pushState() 호출

- replaceState() 호출

- 일반적인 링크 클릭

이전에 pushState()나 replaceState()를 통해 저장해둔 state 객체를 popstate 이벤트가 발생할 때 event.state로 받아볼 수 있다.

마무리하면서

1주차 과제를 진행하면서 매일 새벽 3시까지 불태우는 날들이 이어졌다.

연말이라 각종 모임과 친구들과의 약속까지 겹쳐서 (진작 알았다면 약속을 안 잡았을 텐데...) 정말 정신없는 한 주를 보냈다.

첫 과제는 분명 고된 여정이었지만, 이를 통해 내가 꿈꾸던 진정한 개발자의 모습에 한 걸음 더 가까워진 것 같아 뿌듯하다.

내일부터 시작되는 2주차도 이 기세를 이어가보려 한다.

팀원들하고도 더욱 친해지고 싶다.