당신은 프론트엔드 개발자가 맞나요?

최근 프론트엔드 주니어 개발자 분들과 많은 이야기를 나누고 인사이트를 얻어갔습니다. 그 중에 가장 기억에 남는 대화 내용들은 js를 이렇게 실무에서 깊게 사용하나요?, React를 사용하는 데 이렇게 깊이 알 필요가 있나요? 라는 맥락이 많았습니다.

지금까지 시니어 개발자 분들과 얘기를 나눌 때 마다 js프레임워크(혹은 라이브러리)를 사용하기 이전에, 언어의 깊이를 이해하게 중요하다고 강조하고 있었지만, 저 또한 머리로는 그렇게 생각하지만 마음은 그렇게 가지 못했던 것이 사실입니다..

그렇기 때문에 언어의 깊이보다는 그저 React를 익히는데 급급했습니다. 그런데 한 시니어 분이 하신 말씀이 저를 자각하게 만들었는데요.
우리는 리액트 개발자가 아니다. 프론트엔드 개발자다. 라는 말이였습니다.

우리 리액트는요...

리액트에 대한 개인적인 얘기를 해보겠습니다.

첫 번째로, 서드파트 라이브러리에 대한 의존성이 좀 강합니다. 리액트 공식문서에대서 설명하듯이 철저히 UI를 다루기위한 라이브러리로 설계되었습니다. angular는 강력한 프레임워크로 자체적으로 제공하는 기능이 많으며, vue또한 공식적으로 권장되는 서드파트 라이브러리가 정해져있습니다.

하지만 react는 그러지 못한 것 같습니다. 당장에도 전역상태 관리 라이브러리가 다양하고, 광범위하게 사용되고 있습니다. 그나마 Next.js의 등장으로 ssr의 이점도 크지만, react의 라이브러리적 성격에 프레임워크적 성격을 씌워 이 부분은 대안으로 생각됩니다.

두 번째로, 렌더링 하는 방식입니다. 리액트는 렌더링 되는 조건이 트리거 되면 그 해당 컴포넌트이자 함수가 다시 실행되는 방식으로 UI를 다시 그리게 됩니다. 저는 이 부분이 전혀 이상하게 다가 오지 않았는데요.

vue를 접하고 생각이 달라졌습니다. vue는 상태관리를 반응형 데이터(ref, reactive, computed)를 기반으로 이 반응형 데이터가 바뀌게 되면, js의 Proxy기능을 이용해 실제 바인딩 된 dom만 리렌더링이 됩니다. 결국 컴포넌트 단위로 리렌더링이 되는 것이 아닙니다. 그렇기 때문에 vue에 오면서부터 react의 메모이제이션 개념을 생각할 필요가 없어졌습니다.

마지막으로는 무시못할 큰 생태계 입니다. vue를 이용해 개발을 시작하면서, 취준때 사용했던 React관련 구글링 리소스랑은 비교가 되지 않았습니다. 레퍼런스가 그 만큼 매우 많습니다. 그렇기 때문에 이로 인해 자유롭고 다양한 개발 패턴들이 등장하고 이를 지원하는 라이브러리들이 계속 생겨나고 있습니다.

결국 리액트도 Js프레임워크 중 하나로, 장단점이 있고 이로인한 트레이드 오프가 있습니다.

서론이 길었지만 저는 그동안의 개발 사고가 리액트에 종속적이였습니다. 앞에서 설명드렸던 리액트의 특징들(React의 큰생태계를 제외하고,,,) 모두 다른 프레임워크에서도 똑같이 혹은 비슷하게 처리 할거라는 안일한 생각을 가지고 있었습니다. 이런 안일한 생각들 때문에 저는 편협적인 생각을 가지고 바라봤던것 같습니다.

편협적인 생각의 예시로, CSR의 웹어플리케이션은 상태관리에 따른 DOM업데이트 방식도 다양했지만, 당연히 React의 클로져 기반으로만 상태관리가 된다는 생각을 가지고 있었습니다.
준일님의 다양한 상태관리 구현 방식

어... 이 메서드는 뭐지..?

js를 주 언어로 개발하지만 생각보다 모르는 것들이 많았습니다.
'이 object메서드는 뭐지??', '뭘 정의하는거지?', '오,, 이 메서드로 이렇게 하면 되겠군..' 최근 리액트 사용하는 것 대신에, 바닐라 js로 구현 과제가 있어 잘 사용하지 않는 Object메서드를 다뤘습니다.

충격적이게도 저는 많은 프론트 개발자들이 아시는 모던 자바스크립트 딥 다이브를 완독한 경험이 있습니다. 책을 읽을 당시에는 이런 개념이 있구나, 근데 리액트를 사용할 때 저런게 필요하나? 이런 것까지 알아야 해? 라는 생각을 많이 했습니다. 그리고 이는 결과로 이어졌습니다.

Js의 강력한 기능보다는 React라는 프레임워크의 기능들을 훨씬 더 잘 숙지하고 있는 현실을 깨달았습니다. 마치 제가 프론트엔드 개발자가 아닌 리액트 개발자로 주객전도가 된 느낌이 들었습니다.

현실은 다르다.

stackoverflow에서 조사한 js웹 프레임워크 사용경험

아시다시피 JQuery는 아직 점유율이 높습니다.
js프레임워크 3대장이라 불리는 react,angular,vue를 사용하는 개발자 채용도 많이 보이기는 하지만 다음과 같은 상황들도 있었는데요.

• vue개발자로 채용 되었지만 기존 JQuery 레거시 코드를 기반으로 사용하고 있는 케이스
• 기존 PHP/JQuery로 되어 있는 프로젝트를 react로 마이그레이션 한다는 말을 듣고 입사했지만 아직까지 바쁘다는 이유로 기존 코드 베이스로 서비스를 운영 하는 케이스
• 듣도 보도 못한 회사 자체 프레임워크를 사용하는 케이스

(++지인분들의 이야기입니다😢)

많은 분들이 이런 환경에서 성장에 대한 의구심과 괴리를 느끼며, 이직을 생각하실 것 같습니다. 저도 그렇게 생각한 사람 중 한명이였습니다. 그렇다고 현실을 회피하는 것이 맞을까요? 시간이 흐르면서 기존 기술에 대한 보완과 대책으로 새로운 기술들이 생겨나고 있고, 어려운 구현 로직 등을 추상화가 되어 쉽게 사용이 가능해지고 있습니다.

주니어라는 타이틀에서는 이런 깊이있는 부분까지 세세히 바라보지 못하는 경우가 다반사이며, 기대치가 높지 않다는 말을 정말 많이 들었습니다. 하지만 시니어라면 어떨까요?? 시니어 개발자가 되가면서, 팀의 개발환경에 맞추기 위해 많은 레퍼런스를 참고 하며, 이를 이해하기 위해 정말 많은 기초 개념을 딥하게 알고 있어야 한다고 생각합니다.(핵심 코어 개발이라면 더더욱..)

그렇다면 이상적인 환경(react를 사용하는..)에 안주하면 괜찮을까요??
많은 분들이 프론트엔드 분야는 너무 빠르게 바뀐다, 나중에 react를 대체할 무언가가 나오지 않을까라는 단골 질문을 던집니다. 프론트엔드라는 분야가 백엔드와의 분리의 역사가 길지 않아 자리잡아가는 과정이다라고 개인적으로 생각하고는 있지만, 이러한 변화를 두려워 하시는 분들이 종종 있습니다.

기술이 발전하여 우리가 react라는 편한 기술을 접함과 동시에, react에서 파생되는 문제점들이 제기되고 이로 인해 새로운 기술들이 생겨 날 수 있습니다. 과거의 개발자분들도 똑같으며 이러한 순환은 당연하다고 생각합니다. 그러나 이러한 생각의 기반은 기초를 기반으로 나옵니다. 기술의 역사와 트렌드를 타고타고 올라가고 보면 결국 프론트엔드 분야에서는 자바스크립트 언어로 귀결됩니다.

어떤 기술을 배울 때 what과 how도 중요하지만, why라는 물음이 없다면 깊이가 없어지고 앞으로의 커리어에서 힘들 것입니다.

마지막으로..

"우리는 리액트 개발자가 아니다. 프론트엔드 개발자다." 라는 말은 결국 단순히 특정 기술에 얽매이지 않고, 더 넓고 깊은 관점에서 프론트엔드 개발을 바라보라는 의미를 함축하고 있는 것입니다. 기술은 발전하고 변화하지만, 자바스크립트 언어와 웹의 기본 원리는 변하지 않습니다.

기술을 선택하는 것도 중요하지만, 그 선택에 대한 깊은 이해와 함께 왜 그 기술이 필요한지를 이해하는 것이 더욱 중요한 게 핵심입니다.

reference

https://velog.io/@teo/2024-frontend-techstack
https://json.media/blog/ko/proper-understading-of-nextjs

👍피드백은 언제든지 환영입니다~!