프론트엔드를 좀 더 자세히 들여다 보기 위해서

이때까지 난

프론트 엔드? 그냥 React해서 하면 되는거 아니야?

라고 생각했었다.

React에 대해서 아주 자세히는 아니지만, lifecycle이나 훅 등에 대해서 공부했었고,

Redux를 이용한 상태관리도 공부하면서 많은 것을 이해 했다고 생각했었다.

프론트 엔드 사실 뭐 별 거 없네?

라는 너무 우물 안 개구리의 생각을 하고 있었다.

팀 프로젝트도 간단한 기능들만 구현했었고, 그래서 그냥 간단한 컴포넌트 몇개로 이미 완성이 되었었다.

내 개인프로젝트들도 지금 생각해보면 그렇게 어렵지 않은 구조였다고 생각한다.

서버 API를 호출해서 데이터를 받아오고, 데이터를 그냥 유저에게 보여주는 틀만 만들어주면 되는 경우가 대부분이었다.

정확하게 유저데이터를 저장하는것도, 웹 페이지의 성능에 대한 부분도 전혀 고려하지 않은 개발이었다.

그렇게 여러 프로젝트만 진행하다가 보니, 컴포넌트로 개발하는건 정말 쉽고 익숙한 일이 되어버렸다.

또 여러 프로젝트를 진행하다가 보니, 컴포넌트의 크기나 구조를 짜는것도 나만의 기준을 만들어서 사용하고 있기 때문에 더 무엇이 필요한가 찾아보았다.

하지만 내가 모르는 부분들이 정말 많았다. 당장 나는 리액트가 실행되는 것만 알지 그 안에서 어떻게 페이지가 렌더링 되는지 전혀 관심이 없었다. 아니 애초에 HTML, CSS가 어떻게 렌더링 되는지, DOM Tree에 대해서도 정확하게 알고 있지 못했다.

리액트에 대한 소개영상으론 그것이 힘들고 어렵고, 품이 많이 들어서 React가 만들어지게 되었는데, 당장 나는 그것이 왜 어렵고 무엇이 힘든지 전혀 알고 있지 못했다.

단순히 자바스크립트를 이용해서 몇 번 수정해 봤지만, 정말 간단한 작업들이었기에 그 어려움을 충분히 체감하지 못했던 것이 크다고 생각한다.

따라서 좀 더 프론트엔드쪽의 기반 기술들을 공부해야겠다고 결심하였다.

당장으로선

1. DOM Tree, 렌더링 과정
2. webpack 등의 번들러
3. 프론트엔드의 성능, 최적화
4. ES6 ( 정확하게 무엇인지 조차 모른다 )
5. javascript의 더 자세한 구조, 세부 기능들
6. Vue.js, nextjs 등의 웹프레임워크

위의 사항들을 공부하면서

1. HTML이 렌더링 되는 과정을 공부해 최적화의 기반을 닦고
2. React등이 사용하는 번들러의 개념을 공부해서 리액트가 빌드되는 과정 등을 공부하며
3. 1에서 공부한 것을 바탕으로 좀 더 렌더링에서 최적화 할 수 있는 방법을 찾고
4. 현재 최신 javascript의 문법들, 추가된 기능들을 공부해보며
5. 아직 몰랐던 javascript의 기능들 또한 javascript의 동작 구조등을 공부하고
6. 공부하지 않았던 web framework들을 공부해보는
   시간을 가질것이다.

위를 공부해 나가면서 좀 더 문제가 생겼을 때 더 근본적인 부분도 해결할 수 있는 프론트엔드 개발자가 되었으면 한다.