한때 유행했지만 이제는 사라진 프론트엔드 개발 트렌드
개발자라면 알아야 할! 한때 유행했지만
이제는 사라진 프론트엔드 개발 트렌드
안녕하세요. 개발을 사랑하는 긍정맨입니다.
저는 프론트엔드 개발을 처음 시작할 때만 해도 여러 프레임워크나 라이브러리가 무척 신기했습니다. 새로운 기술을 하나씩 배울 때마다 왠지 ‘앞서가는 개발자’가 된 느낌도 받았고요. 하지만 시간이 흐르면서 유행했던 기술 중 일부는 어느새 거의 쓰이지 않게 되었고, 자연스럽게 더 새로운 기술들이 자리 잡았습니다. 이제 5년 차 개발자로서 과거 한때 주목받았지만 현재는 거의 사용되지 않는 개발 트렌드를 돌아보며, 그 변화를 이야기해보려 합니다.
한때 유행했지만 이제는 사라진 프론트엔드 기술들
개발 트렌드는 늘 변화합니다. 단순히 유행을 따라가는 것에 그치지 않고, 더 나은 성능과 유지보수를 목표로 개선되기 때문인데요. 지금은 거의 사라진, 또는 사용 빈도가 크게 줄어든 대표적인 프론트엔드 트렌드들을 살펴보겠습니다.
jQuery의 시대는 가고, React와 Vue가 자리 잡다
한때 jQuery는 프론트엔드 개발에 없어서는 안 될 도구였습니다. CSS 셀렉터와 비슷한 형태로 DOM을 쉽게 제어할 수 있었고, 짧은 코드로 복잡한 애니메이션을 구현할 수 있었죠. AJAX 요청도 손쉽게 처리할 수 있어, 동적인 웹사이트를 만드는데 필수적인 라이브러리로 자리잡았었습니다.
하지만 React, Vue, Angular 같은 컴포넌트 기반 프레임워크가 등장하면서 jQuery의 입지는 급격히 줄어들기 시작했습니다. 특히, jQuery의 DOM 조작 방식은 대규모 애플리케이션에서는 관리가 어려워 점차 선호되지 않게 되었죠. React와 Vue는 데이터 변경에 따라 자동으로 UI를 업데이트해주는 기능이 있어 유지보수가 훨씬 용이합니다.
jQuery는 이제 간단한 개인 프로젝트나 레거시 코드에서 가끔 볼 수 있을 뿐,
현대적인 대규모 웹 애플리케이션에서는 거의 사용되지 않게 되었습니다.
Flash의 완전 퇴출, HTML5의 든든한 자리매김
과거의 웹에는 Flash가 필수 요소였죠. 애니메이션이나 게임, 비디오 플레이어 등 다양한 콘텐츠를 구동하는 데 쓰였으니까요. 한때는 Flash가 설치되어 있지 않으면 웹사이트 이용이 어려울 정도로 중요했습니다.
하지만 Flash는 보안 문제가 많았고, 모바일 환경에서는 성능이 크게 떨어지는 문제가 있었습니다. 이런 이유로 Adobe는 2020년 Flash 지원을 공식 종료했고, 이제는 HTML5와 CSS3가 Flash의 자리를 완전히 대체했습니다. HTML5는 비디오와 오디오를 별도의 플러그인 없이 구현할 수 있어 훨씬 효율적이죠.
Flash는 역사 속으로 사라졌고, HTML5와 CSS3가 안정적인 대안으로 자리 잡았습니다.
CSS Float의 레이아웃 시대는 끝, 이제는 Flexbox와 Grid
과거 웹 레이아웃을 만들 때 자주 사용하던 기술 중 하나가 바로 CSS Float입니다. 이 방식은 요소들을 왼쪽 혹은 오른쪽으로 정렬하면서 배치할 수 있어, 레이아웃을 구성하는 주요 기술로 쓰였습니다. 하지만 float 속성은 주로 컨텐츠를 둘러싸는 텍스트와 이미지를 정렬하기 위해 만들어졌기 때문에, 복잡한 레이아웃에는 한계가 있었습니다.
이제는 Flexbox와 Grid가 등장하면서 CSS 레이아웃 기술에 큰 혁신이 일어났습니다. 특히 Grid는 2차원 배열의 레이아웃을 쉽게 만들 수 있어, 복잡한 레이아웃을 훨씬 간단하게 구현할 수 있습니다. Flexbox는 반응형 디자인에도 유용해 점점 더 많이 활용되고 있죠.
CSS Float은 이제 거의 잊혀졌고, Flexbox와 Grid가 그 자리를 완전히 대체했습니다.
Bower의 퇴장과 npm, Yarn의 시대
2010년대 초반에는 프론트엔드 라이브러리를 관리하기 위해 Bower라는 패키지 매니저가 주로 사용되었습니다. Bower는 외부 라이브러리들을 쉽게 설치하고 관리할 수 있어 인기를 끌었죠. 하지만 npm과 Yarn이 등장하면서 Bower의 필요성은 점차 사라졌습니다.
npm과 Yarn은 자바스크립트 생태계를 위한 훨씬 더 강력한 패키지 관리 기능을 제공하면서 프로젝트 내 라이브러리뿐만 아니라 빌드 스크립트와 같은 다양한 개발 도구를 관리할 수 있게 해줍니다. 이 덕분에 Bower는 이제 거의 모든 프로젝트에서 사라졌습니다.
Bower는 npm과 Yarn에 완전히 대체되어 더 이상 사용되지 않습니다.
Web Components의 잠재력, 그러나 실사용은 제한적
Web Components는 표준 기반의 컴포넌트 시스템을 웹에 구현할 수 있도록 해주는 기술로 큰 기대를 받았습니다. 개발자들이 표준화된 방식으로 컴포넌트를 작성하고 재사용할 수 있게 해주기 때문입니다. 그러나 Web Components는 설정이 복잡하고 일부 브라우저 호환성이 부족한 문제가 있어 실제로는 많이 사용되지 않게 되었습니다.
특히, React와 Vue 같은 프레임워크가 컴포넌트 시스템을 자체적으로 제공하면서 Web Components의 입지는 더욱 좁아졌습니다. 이러한 프레임워크들이 Web Components보다 더 간단하고 일관된 개발 환경을 제공하기 때문이죠.
Web Components는 많은 기대를 받았지만, 실제로는 React와 Vue 같은 라이브러리들이 그 자리를 채웠습니다.
RequireJS와 AMD 모듈 방식의 잊혀짐
과거에는 비동기식 모듈 관리를 위해 RequireJS와 AMD(Asynchronous Module Definition) 방식이 사용되었습니다. 이 방식은 웹 애플리케이션의 코드 분할을 가능하게 해 성능을 개선하는 역할을 했어요. 그러나 ES6 모듈 시스템(ESM)이 표준화되고, Webpack과 같은 모듈 번들러가 발전하면서 이 방식들은 거의 사라졌습니다.
Webpack은 모든 모듈을 하나의 파일로 묶어주는 기능을 제공하며, 개발자가 필요한 모듈을 자유롭게 관리할 수 있도록 해줍니다. 이 덕분에 RequireJS와 AMD 방식은 더 이상 사용되지 않게 되었죠.
정리: RequireJS와 AMD는 ES6 모듈 시스템과 Webpack으로 완전히 대체되었습니다.
지나간 트렌드, 앞으로 나아가야 할 방향
프론트엔드 개발의 트렌드는 무척 빠르게 변화합니다. 과거에는 꼭 필요했던 기술이 이제는 잊혀지거나 더 좋은 대안으로 대체되는 일이 흔하죠. 이는 더 나은 개발 환경과 성능을 위한 필수적인 변화이기도 합니다.
지나간 기술을 돌아보는 것은 단순히 옛날 방식을 그리워하는 것이 아니라, 앞으로 더 좋은 방향으로 발전하기 위한 중요한 발판이 됩니다. 앞으로도 새로운 기술이 쏟아질 것이고, 또 지금 사용하고 있는 기술 중 일부는 언젠가 사라질 것입니다. 중요한 것은 이러한 변화 속에서도 핵심 원리와 개념을 이해하고, 어떤 기술이든 유연하게 수용할 수 있는 태도입니다.
프론트엔드 개발자로서 여러분도 이 변화에 유연하게 대응하면서 더 나은 선택을 해나가시길 바랍니다!
