원티드 프리온보딩 프론트엔드 챌린지 10월 회고
원티드 프리온보딩 프론트엔드 챌린지 10월에 참여하면서 무엇을 얻었는가
시작
직전에 참여한 원티드 프리온보딩 프론트엔드 코스를 수료하고 이력서와 포트폴리오를 재정비하면서 “기업에 지원하는 순간에도 다른 무엇을 학습하면 좋을텐데”라고 생각했다. 개발자는 끊임없이 학습하는 직업이라고 해도 혼자서 공식 문서와 강의를 찾아 들으며 학습하는 것보다 지금은 함께 학습하고 과제를 하면서 어떻게 학습하는 것이 효율적이고 학습 과정을 체계화할 수 있을 것이라고 생각했기 때문이다.
물론 혼자 공식 문서와 씨름하고 구글링하면서 치고 박고 하면 습득할 수 밖에 없다고 생각하지만, 나보다 조금 더 나은 사람, 먼저 시작한 사람들의 노하우를 가져와 내 것으로 만드는 시간도 필요하다고 생각했다.
더불어 이번 원티드의 프리온보딩 프론트엔드 챌린지는 최근 많이 들려오는 SSR을 기반으로 진행되기 때문에 추후 면접에서 이야기할 지식 기반과 Next.js를 개인 프로젝트의 프레임워크로 설정하고 있기 때문에 적합한 주제이므로 수강을 망설일 이유가 없었다.
사전 과제
사전 과제를 통해 SPA, MPA의 차이와 SPA에서의 CSR, SSR 등 렌더링 방식 등에 대해 학습할 수 있었고, Next.js 코드를 열어보면서 어떤 방식으로 Next.js 프레임워크가 동작하는 지에 대해 확인할 수 있었다.
관련된 자세한 내용은 여기서 확인할 수 있다.
가장 인상 깊었던 내용은 매번 개발 중에 확인했던 <div id="__next"></div>를 직접 눈으로 확인했다는 점과 React에서와 마찬가지로 내부에서 Context API를 활용해 상태 관리를 하고 있다는 점이었다. 역시 이미 학습한 것을 바탕으로 깊게 파고 들면서 더 좋은 코드를 만들고 나중에는 하나의 라이브러리나 프레임워크를 만들 수 있을 정도가 되면 좋겠다.
MPA, SPA
맨 처음 JavaScript를 배울 때 웹 페이지를 브라우저에 띄우기 위해서 단순히 HTML 파일을 생성했다. 하지만 지금은 어떤가? 지금은 npx create-react-app —typescript처럼 명령어 하나로 라이브러리를 생성하고, react-router-dom을 통해 라우팅 기능을 활용하고, JSX를 반환하는 컴포넌트를 생성해 렌더링을 하고 있다.
처음으로 돌아가서 단 하나의 index.html을 만들었다고 하자.
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body></body>
</html>이때 사용자가 브라우저에서 해당 주소로 접근하면, 브라우저는 서버에 GET 요청을 보내게 되고, 서버는 그에 대해 해당 주소에 맞는 index.html을 응답하게 된다. 이러한 상황에서 라우팅 기능을 추가하기 위해서는 경로를 변경할 태그와 그 경로에 맞는 페이지를 가진 HTML이 필요하다. 따라서 사용자가 다른 페이지의 경로를 입력하는 경우, 단순히 새로운 페이지에 대응되는 새로운 HTML 파일 하나를 서버에서 가져와 화면을 통째로 갈아 끼워주면 되는 것이다.
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<a href="about.html" />
<a href="contact.html" />
<a href="blog.html" />
</body>
</html>이렇게 여러 페이지를 가지고 어플리케이션을 만드는 방식을 MPA라고 하며, MPA 방식으로 구현된 어플리케이션은 다음과 같은 장점을 가진다.
- 라우팅에 필요한 라이브러리, 번들링에 필요한 자바스크립트 툴 체인이 필요하지 않음
- 정적 페이지를 그대로 서빙하기 때문에 SEO, 로딩 속도 측면에서 이점을 가짐
MPA 구조의 어플리케이션에서는 form, input 태그를 활용해 데이터 통신을 할 수 있다. 다만, 이때 새로운 데이터를 가진 화면으로 업데이트하기 위해서는 화면을 새로고침할 수 밖에 없었고, 결국 새로운 HTML 페이지를 응답 받을 때까지 빈 화면을 볼 수 밖에 없다.
학습 과정의 노하우를 얻다
이번 챌린지를 진행하며 가장 좋았던 점은 이후 학습 방향과 학습 과정의 노하우를 얻었다는 것이다. 중구난방으로 채용 공고에 많이 적혀 있는 기술 스택을 배우려고 하는 것이 아니라
학습에 있어 조금 마음가짐이 달라졌다. 기존에는 프레임워크, 라이브러리에 대한 이해도 없이 사용법만 익히고 바로 프로젝트를 진행하며 계속된 문제 상황을 구글링하며 그 순간에 해결하고자 했다. 과거 대학교를 다닐 때 법전으로 공부하며 체득된 악취나는 습관을 아직 가지고 있었다는 것에 뼈저린 반성을 했다.
SPA에서의 라우터를 라이브러리의 코드를 뜯어보고 구조를 생각하고 방식을 고민하면서 직접 라이브러리 없이 구현하면서 사용법만 익힐 때와 다르게 정말 어렵지만 정말 재밌고 또 즐거웠다. 다른 사람의 코드에서 좋은 방법, 코드, 구조 등을 가져와 내 보잘 것 없는 코드가 한층 더 업그레이드 되고 있다는 것만으로도 정말 만족스러웠다.
마무리
4월부터 시작된 프론트엔드 개발자로 거듭나기 프로젝트는 아직도 진행 중이고, 인생의 프로젝트인 사람답게 살기 프로젝트는 데드라인이 70년은 남았기에 조급할 필요가 없었는데, 남들과 나를 비교하며 깎아 내리면서 부족한 점만을 찾아내며 조급함을 가지게 된 것 같다. 이번 프로그램을 참여하며 방향성과 과정에 대해 고민할 수 있어서 좋았고, 내게 맞는 학습 방식과 내가 정말 좋아한 것이 무엇인지에 대해 다시 깨닫게 됐다. 2주간의 프로그램에서 얻은 게 이렇게 많아도 되는가 싶다. 프로그램을 기획한 원티드도 고맙지만 가장 고마운건 역시 멘토였던 종택님이지 않을까 싶다!
끝!