React 를 다시 공부하기 전 스스로에 대한 고찰 및 비판

제목 : React 를 다시 공부하기 전 스스로에 대한 고찰 및 비판

---

이 글을 작성하게 된 계기

웹 사이트를 제작하기 위해서 어떤 도구를 사용하는가? 스스로에게 질문 해 보았다.

현재 (25-05-10) 기준으로, 간단한 웹 사이트를 만들기 위해 사용하는 템플릿은 React 일 것이다.

Vibe Coding (바이브 코딩) 이라는 패러다임이 현재 유형하는 상황인데,

이는 코드를 건드리지 않고, 단순히 AI 와 글 혹은 언어로 상호작용 함으로서 특정 어플리케이션을 만들어 가는 것을 의미한다.

물론, 뒤따라올 기술 부채는 전혀 생각하지 않고 만드는 것이니, 오래 갈 수 있는 프로그램을 작성하는 것은 거의 불가능하다 생각한다.

기술 부채란, 어떠한 프로그램을 작성하기 위해 이미 존재하는 편리한 프로그램들을 아무 생각 없이 사용하는 것을 의미하는데,

이 과정에서 사용되는 기술이 추후 고도화를 위해서 오히려 발목을 잡는 상황을 의미한다.

즉, 지금 사용하기 쉬운 기술을 "빌려서" 작성 한 뒤, 프로그램 고도화를 위해 "기술로 갚는" 상황이라는 것이다.

다시 돌아와서, React 의 사용 의미와 기술을 알지 못 한 채 웹 사이트를 제작하는 것은,

결국 웹사이트 고도화 과정 중에 반드시 특정 기술 부채는 반드시 발생하게 될 것이라고 생각한다.

위의 발언은 개인적인 생각인데, 그 만큼 React 가 HTML, CSS, JavaScript 의 역할을 대체하고 있기 때문이다.

React 로 기술 부채가 생긴다니, 위험한 발언이 아닌가?

React 라이브러리와, React 와 상호작용하는 수많은 모듈들은 정말로 웹 사이트 자체를 만들 수 있다.

React 로 웹 사이트 제작에 입문하고, npm run start 를 통해, 로컬에서 자신의 웹 사이트를 보는 것은 정말 신난다.

공식 문서를 통해 곧바로 Todo List 를 만들 수도 있으며, 관리하기 힘든 상태 변수도 저장 할 수 있다.

심지어는, 어느정도 풀스택을 지원하는 Next.js 를 사용 할 수도 있으며,

나중에 핸드폰 어플을 제작하는 React Native 를 배울 수도 있다!

그런데, 지금까지의 내가 공부 한 과정을 살펴보면, 나 스스로 간과한 부분이 많았다.

나는, 개인적으로 정말 많은 영어 공식문서를 직접 번역해서 저장하기도 하고,

특정 프레임워크나 언어를 배우기 위해 AI 보다 공식문서를 먼저 보는 편이기도 하다.

내가 간과한 것은, 특정 라이브러리, 프레임워크의 공식문서 들이 광고와 비슷하다는 것이다.

한 번 모든 종류의 광고를 생각 해 보자.

자신의 단점과, 자신의 서비스를 사용 했을 때 나타날 수 있는 단점을 알려주는 광고가 존재하는가?

라이브러리와 프레임워크들의 공식 문서 또한 비슷하다.

이러한 공식 문서가 작성 될 수 밖에 없는 이유 또한 이해하고 있는데,

자신의 라이브러리, 혹은 프레임워크가 대중성을 지녀 오래가길 원하기 때문이다.

이미 위의 기술에 대한 한계점을 알 때 까지 공부했을 때는, 같은 기술의 라이브러리나 프레임워크로 교체하기가 정말 어렵다.

React 또한, "웹 페이지 제작" 이라는 기술 도메인에 있어 막강한 위치를 가지고 있다.

그러나, React 또한, index.html 를 제공하는 웹 서버를 만드는 일종의 도구라는 것이다.

사이트를 구성하는 컴포넌트는 index.html 내부의 <div id="root">...</div> 내부에 들어가고,

동적 컴포넌트와 사이트를 구성하기 위해 index.html 내부에서 <script src="...."></script> 문구를 통해 JS 를 불러온다.

사이트, 컴포넌트의 styling 을 위해 index.html 내부에서 CSS 를 구성한다.

게다가, React 는 최종 결과물을 서버에 배포하기 위해 빌드하는 과정에서, 특정 builder 들을 선택한다.

우리가 코드로 스타일링 한 sass, scss 등등 CSS 파일들도, 결국은 .css 로 만들어 져야 하기 때문이고,

JSX 혹은 TSX 파일로 제작한 컴포넌트들도, 결국은 .js 로 변형되어야 하기 때문이다.

그래서, 나에게 이런 질문을 해 보았다. :

• "나는 위와 같은 작업들이 왜 일어나는지 알고 있나?"
• "React 가 왜 기존 방식의 웹 페이지 제작을 JSX 로 제작하는가?"
• "JS or TS 코드로 작성된 React 는, 어떻게 HTML 로 변형 될 수 있었나?"
• "React 가 웹 사이트를 제작하는 대표적인 라이브러리로 성장 할 수 있던 이유가 무엇인가?"

부끄럽게도, 나는 위에 작성한 스스로의 질문들을 정확히 답변 할 수 없었다.

이전과 같이 "알려주는 대로", "흐름 대로" 공부하게 된다면,

어느 순간 React 에서 다루는 전역 변수 관리, 데이터 흐름 관리, 아름다운 레이아웃을 만드는 과정이

다시 잊혀 질 것이 분명했다. 이유는, "왜 이렇게 작성되는지" 모르기 때문이다.

그럼 이번에는 어떻게 React 를 배울 것인가?

React 에서 만들어 놓은 웹 서버 제작 방식은 정말 편리하다.

그리고, 다양한 NPM 모듈과도 결합 할 수 있게 제작되었다.

데이터 fetching 후, 컴포넌트에 데이터를 뿌리고, 컴포넌트에 속한 하위 컴포넌트 또한 데이터를 받을 수도 있다.

React 를 대표하는 Virtual DOM (가상 DOM) 덕분에,

변화가 필요한 컴포넌트와 하위 컴포넌트가 전부 다시 렌더링 되지 않고, 변화된 컴포넌트들만 변경한다.

이러한 기능들은 기존의 웹 제작 방식에 존재하던 문제를 쉽게 해결 할 수 있게 해 주었다.

그러나, React 자체를 "웹을 제작하는 방식" 으로 인식하지 않고,

웹 서버를 제작하기 위한 "특정한 방법론" 으로 생각하며 배울 것이다.

즉, HTML, CSS 기초를 배우고, HTML 이 JS src 를 불러오는 과정을 배우고,

웹 사이트 기본적으로 가지고 있는 기능들을 익히고 들어 갈 것이다.

느린 방식으로 학습하는 이유는,

결국 React 또한 웹의 기본 기능을 참고하여 만들어 진 라이브러리이기 때문이다.

나는 React 고도화 과정에서 기술적 스트레스를 받았다. (왜 사용하는지 몰라 외웠기 때문)

즉, 기본 기능을 몰라 React 를 배우는 과정에서조차 (기술적 부채) 가 발생 한 것이다.

이러한 상황을 방지하고자 기초를 정말 튼튼히 하고자 하는 목적도 있다.

또 다른 목적도 있는데, 바로 오픈소스 기여이다.

나는 리액트가 처음부터 다양한 기능을 가졌다고 생각하지 않는다.

많은 사람들이 리액트를 사용하며 겪은 한계를 바탕으로, 리액트가 휼륭한 라이브러리가 되었다고 생각한다.

한계를 인지하기 위해서는 웹이 가진 기능을 알아야 하고, 기여하기 위해서는 라이브러리 자체를 이해해야 한다.

기초는 어떻게 쌓을 것인가?

굉장히 신중해야 하는 기로라고 생각한다.

여기서 어떤 기초를 쌓느냐에 따라 내가 React 를 활용 할 수 있는 한계가 정해 질 것이다.

다행인 것은, 내가 NestJS 를 익히는 과정에서 JavaScript 와, TypeScript 에 대한 이해도가 높다는 것이다.

또한, Node.js 환경에서의 스레드를 생성하고, 해당 스레드를 WASM(웹 어셈블리 모듈) 로 실행 하는 과정까지 다루고 글을 작성했다.

package.json 의 역할, cli 스크립팅, tsconfig.json 에서의 설정을 모두는 아니지만, 중요한 것은 알고 있다.

따라서, 나는 앞으로 웹 개발을 진행하기 전 쌓게 될 지식은 다음과 같다 :

1. 웹 서버의 존재 자체
2. 브라우저의 웹 렌더링 과정
3. 브라우저가 가진 기능
4. 브라우저 DOM, CSSOM
5. WebPack (번들러) - 외에도 어떤 번들러가 유행하는지
6. CSS 레이아웃
7. HTML, CSS 태그
8. Flex, Grid 레이아웃 기초
9. CommonJS 와 다른 ESM 의 정보
10. JSX, TSX 컴파일 과정
11. Custom Hook 고도화
12. 전역 변수 관리 라이브러리 알고리즘 이해 (어떤 브라우저 기능을 이용하는지)
13. 컴포넌트에 CSS 를 적용하기 위한 방법론 공부 (EX- styled-component or vanilla-javascript or sass 등등)
14. 웹 서버의 유닛 테스트, E2E 테스트

사실 1 시간을 더 생각해 보면 공부 할 리스트가 더 늘어 날 것이다.

그러나, 그것은 위에 대한 정보들을 블로그 글로 남기면서, 차차 진행하기로 결정했다.

---