프론트엔드가 나온 이유

회사에서 이런 질문을 받았다.

“프론트엔드가 왜 나왔어?”

나는 회사에서 React.js를 경험해본 몇 안되는 사람 중 한명으로서 이유를 잘 몰랐지만 아는체하며 이정도로 대답을 했다.

“Javascript가 발전하면서 브라우저에서 할 수 있는 역할이 많아졌고 그래서 프로그래밍이 프론트엔드와 백엔드로 구분되어서 현재의 모습으로 발전된 것 같습니다.”

“이정도”로 대답할 수 밖에 없었던 나는 약간의 죄책감과 함께 앞으로 내가 공부하고 싶은 것들에 대해 생각해보았고 나름의 동기부여도 확보했다.

그리고 “프론트엔드가 나온 이유”에 대한 글을 작성한다.

이 글은 웹 프로그래밍의 역사를 돌아보면서 프론트엔드의 개념이 어떻게 나오게 되었는지 작성하겠다.

” 현재를 알기 위해서는 과거를 알아야한다 ” 라는 말이 있다. 어떤 공부던지 원리와 배경을 먼저 이해해야지 학습이 잘되는 내게 공감되는 문장이다.

내가 좋아하는 개발자 중에 이런 글쓰기를 잘하시는 분이 한명 있다. 몇 안되는 프론트엔드 시니어 개발자 테오이다. (프론트엔드는 역사가 짧기에 시니어가 몇안되는 것으로 알고 있다)

이 글을 쓰는데 좋은 영향력을 준 테오의 글을 소개한다.
프론트엔드 역사와 미래, 업무 분야 … 그리고 잘하는 프론트엔드 개발자란?

글이 좀 길긴 하지만 프론트엔드에 관심이 있는 사람이라면 몰입해서 재미있게 읽을 수 있을 것이다.

글을 읽어보고 내가 쓰고 싶은 글에 포함되는 부분만 요약해서 정리해보았다.

프론트엔드 영역이 갑자기 뿅!하고 나온 것은 아니라고 한다. 특정 시점부터 지금처럼 이렇게 프론트엔드 / 백엔드 영역이 선명하게 세분화 되었다고 한다.

우선 간단하게 웹의 발전을 짚어보자면.

문서 공유를 위해 WEB 1.0이 만들어졌다.

CGI(Common Gate Interface) 통신이 가능해졌다.

• 정적인 정보만 담고 있던 문서에서 서버와 함께 동적인 페이지 생성이 가능하게 됨

Javascript의 탄생, 1995

• 브라우저에서 실행가능한 스크립트 언어의 탄생

문서를 예쁘게! 웹 디자인의 발전, CSS의 탄생, 1996

• 유지보수를 위해 컨텐츠와 서식을 분리하자는 CSS의 등장
• 그리고 브라우저의 성능상 한계로 표현하지 못하던 애니메이션을 해결할 FLASH의 등장

검색엔진과 포털, e-커머스의 등장

Internet Explore의 대중화와 웹의 상업화, 1995-2004

• 솔루션 기반의 홈페이지가 대중화
• 기능보다는 디자인, 웹 디자이너가 많이 생겨남
• HTML, CSS를 주로 다루던 웹 개발자는 천대받던 시절

Web 2.0과 RIA(Rich Web Application)

• 웹 기술을 통해 데스크탑 애플리케이션과 유사한 사용자 경험을 제공
• 그리고 퇴출된 FLASH

구글 - 마이크로소프트의 대항마로 웹을 선택하다.

• V8 자바스크립트 엔진의 등장

프론트엔드의 토대가 된 Ajax

• 자바스크립트를 통해 비동기로 화면을 동적으로 구성

웹 표준과 웹 접근성, 시맨틱.. 크로스 브라우징

• W3C 웹 문서 작성 규약이 생기고 html, css, javascript를 통해 다양한 브라우저에서 동일하게 동작, 시각장애인도 웹 사용이 가능하게 접근성을 높인다
• 좀 더 전문성을 요구하는 웹 개발

javascript 개발자를 찾습니다. jQuery의 등장!

• 웹표준 API를 포함하면서 쉬운 문법, IE 크로스브라우징, Ajax까지 해결한 jQuery의 탄생
• 이때부터 프론트엔드에서 웹 디자이너와 웹 개발자의 영역이 조금 더 분리됨
• (크로스 브라우징, 시멘틱, 접근성) !== 디자이너의 영역

크롬브라우저와 V8엔진

• javascript 성능을 개선하는 V8엔진 등장
• webkit + V8 = 크롬 브라우저 등장
• 빠른 속도와 풍부한 디버깅 환경 제공

Node와 npm

• javascript로 서버사이드 환경 개발 가능 (Node)
• module 방식의 개념의 보편화

페이스북 - 연결의 가치, 1분에 3테라의 데이터가 쌓인다

• 유래없는 단일 웹 서비스의 등장

백엔드와 프론트엔드의 각자의 전문성 분리, React의 탄생

• php 확장 라이브러리를 기반으로 React를 개발
• React를 통해 더 나은 방식의 웹 개발 방식 등장

앞으로의 프론트엔드 방향성

• 보다 Serverless하게, 클라우드 서비스
• 백엔드의 로직이 프론트로 점점 내려오고 백엔드는 데이터를 교환, 저장, 관리하는 인프라 영역으로 확대
• 클라우드를 통해 서버없이 작업하는 형태로 발전 (서버 개발이 없다는 뜻)

정리하자면..

다시한번 “프론트엔드가 왜 나왔어”라는 질문을 받게 된다면 이렇게 답할 수 있을 것 같다.

• JavaScript는 1995년에 처음 등장한 이후 수없이 발전해왔습니다.
• Ajax의 등장으로 2000년대 후반부터 비동기적으로 데이터를 주고받는 개발이 가능해졌고, jQuery의 등장과 함께 DOM 조작 및 이벤트 핸들링 등을 보다 쉽게 할 수 있게 되었습니다.
• 구글의 V8엔진, chrome브라우저가 등장하고나서 JavaScript는 node.js라는 서버개발이 가능한 형태로 발전했고 범용적 프로그래밍언어가 되었습니다.
• 또한 module 방식의 보편화와 npm 생태계는 2010년대 후반부터 JavaScript 개발에서 널리 사용되기 시작했으며, 이를 통해 JavaScript 개발의 버전 관리 및 의존성 관리가 쉬워졌습니다.
• 페이스북과 같은 거대한 단일 웹서비스의 등장 이후 2010년대 중반부터는 기존과 다른 개발 방식으로 SPA(Single Page Application)와 관련된 프레임워크 및 라이브러리가 등장했으며, 이때부터 프론트엔드와 백엔드 개발이 분리되어 웹 프로그래밍 방식이 변화하게 되었습니다.