[프론트엔드]웹 역사, 업무범위

1. 프론트엔드가 생겨난 이유

프론트엔드는 웹 산업이 발전하며 세분화하는 단계에서 생겨난 포지션입니다.

웹 역사를 간단히 보고 프론트엔드가 어떻게 생겨나게 되었는지 알아보겠습니다.

	web 1.0	web 2.0	web 3.0
시기	1990 ~ 2000	2000 ~ 2010	2010 ~
소통 방식	읽기만 가능	읽기 · 쓰기	읽기 · 쓰기 · 소유
운영 주체	회사 · 개인	거대 플랫폼	네트워크
인프라	개인 컴퓨터	클라우드 · 모바일	블록체인 · 메타버스
운영 · 소유권	탈중앙화	중앙화	탈중앙화
기반 기술	브라우저, 웹 저장	브로드밴드, 서버	클라우드 컴퓨팅
대응 단말	PC	주로 PC	PC, 모바일 단말 ,웨어러블 기기

 

 

✔️웹 1.0

​

문서를 공유하기 위해 웹이 만들어 졌습니다. (1990)

web 1.0에는 인터넷을 통해 읽기만 가능한 정보를 보여줬습니다.

간단한 글 또는 하이퍼링크가 있는 간단한 정적인 글들만 볼 수 있습니다.

​

​

​

✔️CGI(Common Gate Interface)통신 시작 (1994)

​

CGI는 웹서버가 외부 프로그램과 통신하는 방법입니다.

사용자가 정보를 입력해서 전달하면 그 정보를 바탕으로 서버에서 동적인 페이지를 생성해줄 수 있게 되었습니다.

이 후, 복잡한 CGI를 대신해 간편하게 웹사이트를 작성하기 위해 PHP가 개발되었습니다. (1995)

PHP를 시작으로 여러 서버 스크립트 언어가 만들어지면서 홈페이지 서비스들이 만들어지게 됐습니다.

(스크립트 언어란, 소스코드를 컴파일 하지 않고도 실행할 수 있는 프로그래밍 언어입니다.)

게시판 기능이 발전하게 되었습니다.

​

​

​

✔️Javascript의 탄생 (1995)

​

1994년까지만 해도 HTML과 CSS로 구현된 정적인 웹사이트밖에 없었습니다.

동적인 웹사이트를 구현하고자 Netscape에서 자바스크립트를 만들었습니다.

​

​

​

✔️웹 브라우저의 탄생과 대중화

​

 

 

마이크로소프트 사에서 만든 윈도우 운영체제가 대중화되고 인터넷 익스플로러 브라우저가 기본 탑재되었습니다. 2002년에 모질라에서 firefox 브라우저를 출시했습니다.

​

당시 자바스크립트는 표준화가 되어있지 않았기때문에 각 브라우저에서 웹페이지를 구현하려는

개발자들의 노력이 상당했다고 합니다.

당시 기능보단 디자인으로 이목을 끄는 게 쉬웠기때문에 웹디자이너가 생겼고

HTML, CSS를 주로 다루는 웹개발자는 좋은 대우를 받지 못했습니다.

​

​

​

✔️잘가, Active X. 어서와, Ajax. (2004)

​

Active X는 주로 Internet Expolorer에서 사용됐습니다.

2000년대 까지만해도 Active X를 사용하지 않고서는 각종 다운로드 서비스, 멀티미디어 재생등의 기능을

웹상에서 실행하기 어려웠습니다.

그래서 Active X는 인터넷 사이트에서 응용 프로그램 환경을 구성해주는 단비같은 존재였죠.

자바스크립트가 발전하고 구글이 V8을 출시하면서 자바스크립트 기반의 페이지가 전세계적인 대세가 됐지만 은행이나 공공기관 웹 사이트는 Active X를 버리지 못했기 때문에 Active X는 골치덩어리로 전락했었습니다.

(Active X 범벅이 되면 컴퓨터가 느려졌고 보안문제도 있었음.)

​

구글은 2004년 Gmail, 2005년 구글 지도를 아무 플러그인 없이 AJAX로 구현하여 화제가 됐습니다.

구글에서는 이런 Active X같은 것 없이도 웹에서 애플리케이션과 같은 소프트웨어가 동작하기를 바랐습니다. 자바스크립트를 통해 비동기로 화면을 동적으로 구현한 것 입니다.

지도처럼 방대한 데이터를 가지고 있는 웹애플리케이션에서 필요한 부분만 로딩해서 연속적으로 보여주는

퍼포먼스는 당시 큰 반향을 일으켰습니다.

(Ajax는 자바스크립트와 XML을 이용한 비동기적 정보 교환 기법입니다.)

​

​

​

✔️jQuery의 등장 (2006)

​

javascript를 편리하기 사용하기 위한 라이브러리인 jQuery가 등장하여 많은 환영을 받았던때가 있었습니다. IE 크로스브라우징과 Ajax에 강점이 있죠. (현재는 이 강점도 강점이 아니게 됐습니다?)

이 때부터 웹 디자이너와 웹 개발자의 영역이 조금 더 분리되게 되었습니다

이쯤부터 웹디자이너는 개발자가 사용할수 있도록 HTML, CSS를 만들어 넘겨주는 일을 했습니다.

​

​

​

✔️크롬의 등장 (2008)

​

당시 크롬은 타 브라우저들에 비해 상당히 성능이 뛰어났습니다.

자바스크립트 성능을 올리기 위한 V8 자바스크립트 엔진 들고 나왔기 때문입니다.

성능 개선 작업을 위해 다른 부라우저들의 합의로 자바스크립트를 표준화시켜 2009년에

ECMAscript5가 나오게 됐습니다.

2015년엔 ECMAscript6가 나왔습니다. 이로 인해 모든 브라우저들이 ES6의 표준사항을

잘 따라가게 되어 모든 브라우저에 동작하는 웹사이트를 구현하기 편해졌습니다.

​

​

​

✔️Node.js와 npm의 등장 (2009) (2010)

Node.js는 브라우저 밖에서 서버를 구축하는 등 코드를 실행할 수 있게 해주는 런타임 환경입니다.

Node.js로 인해 새로운 언어 학습 없이 서버개발을 할 수 있게 되었고

Node.js에서 module 방법을 채택하면서 javascript는 엄청나게 많은 양의 데이터를 처리해야 하는 서비스를 만들 수 있게 됐습니다. (거대한 소스코드를 쉽게 관리 할 수 있게 됐습니다.)

현재 유명한 서비스를 예로 들자면, 넷플릭스가 있습니다.

​

이후npm이라는 Node.js의 패키지를 관리할 수 있는 도구가 생기면서 javascript 생태계는 폭발적으로

성장했습니다.

2021년 개발자들이 가장 많이 사용한 언어! javascript

​

​

​

✔️React의 탄생 - 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축 (2013)

​

리액트는 페이스북이 만든 javascript기반의 라이브러리입니다.

리액트를 기점으로 프론트엔드 개발의 체계가 잡히면서

백엔드와 프론트엔드 각자의 전문성이 분리됐습니다.

프론트엔드는 새로 생겼다기보다 거대 웹 서비스의 등장으로 자연스레 세분화 된것입니다.

​

페이스북은 위 소제목 대로 '지속적으로 데이터가 변화하는 대규모 애플리케이션 구축'을 위해서

리액트를 만들었습니다.

리액트는 뷰, 앵귤러와 달리 MVC(Model, View, Controller)모델 중 View만을 관리합니다.

UI(유저 인터페이스)에 집중하기 위함입니다.

​

리액트는 가상DOM, 재사용이 가능한 Component, 단방향 데이터 흐름이라는 장점을 가지고 있기 때문에

현재 프론트엔드 개발자들 사이에서 큰 인기를 끌고 있습니다.

​

리액트의 컴포넌트

​

​

​

✔️프론트엔드의 폭발적 성장

​

​

데이터를 유통하면 돈이 된다는 인식의 변화와 웹 개발 환경의 개선을 통해 브라우저의 javascript를 이용한 클라이언트 개발 분야는 급속도로 성장하게 됩니다.

데이터를 시각화하고 데이터를 다루는 영역이 점차 중요해지고 있습니다.

 

서버 개발없이 데이터를 다루는 로직은 점점 더 프론트엔드가 담당하게 되면서

클라우드를 통해 작업을 하는 형태로 발전하고 있습니다.

 

2. 프론트엔드의 업무범위

프론트엔드는 사용자와 서비스를 연결해주는 과정의 모든 것들을 구현하는 역할을 합니다.

​

① 데이터 보여주기

웹 문서를 요구하는 디자인에 맞게 HTML + CSS로 만들어서 보여주는 작업입니다.

​

• 디자인을 코드로 바꾸는 작업
• 재사용이 가능한 형태로 디자인을 컴포넌트화 하는 작업
• 기기, 브라우저, 화면에 맞게 디자인이 제대로 보이게 하는 작업
• 시맨틱, 접근성, 검색엔진 최적화 등을 하기 위한 작업
• 초기 로딩 속도를 개선하기 위한 최적화 작업
• 서버의 데이터를 적절히 디자인 컨텐츠에 연결하여 데이터와 함께 출력하는 작업

​

② 데이터(화면) 조작하기

사용자의 입력을 받아 다른 데이터로 변경하는 작업입니다.

​

• 현재의 화면을 데이터로 구성하는 작업
• 사용자의 이벤트를 감지하는 작업
• 해당 이벤트를 적절한 행동으로 분류하는 작업
• 행동에 맞는 적절한 WEB API를 동작하도록 하는 작업
• 해당 API 결과를 통해 새로운 데이터를 생성하는 작업
• 이 데이터를 기존의 데이터와 조립해서 원하는 데이터로 변경하는 작업
• 해당 데이터를 화면에 출력하는 작업

​

③ 서버로 데이터 보내기

원래는 백엔드의 영역이었지만 이젠 프론트엔드로 분리된 영역입니다.

HTTP 프로토콜과 REST API의 이해가 필요합니다.

백엔드와 협업해야하는 작업입니다.

​

• API 문서를 읽고
• 서버에서 정의한 스키마에 맞게 내부적으로 타입을 설정
• 서버로 보내기전 데이터를 검증
• 화면에 있는 데이터를 API에서 사용하는 구조에 맞게 변경
• 백엔드에 지정한 API의 양식에 맞춰 URL, Method, Params, Body등을 만들어 전달
• 중복 전달 방지를 위한 distinct, 쓰로틀링, 디바운싱을 사용하기도 한다.
• 인증 및 보안은 회사 내부 규정을 따른다.

​

④ 서버에서 받은 데이터 다루기

서버에서 전달받은 데이터를 화면에 필요한 데이터로 전환하는 과정입니다.

​

• 서버의 API가 비동기로 이루어지기 떄문에 로딩, 중복 방지 등 중간 과정을 적절히 처리 할 수 있어야합니다.
• 백엔드에서 만들어둔 스펙과 실제화면에서 보여줘야 할 스펙이 일치하지 않기 때문에 이를 적절히 만들어주어야 합니다.

​

⑤ 개발환경 관리하기, 서버로 배포하기

모든 사람들이 개발을 할 수 있도록 기술 스택을 정리하고 개발 환경을 설정하는 작업이 필요합니다.

그리고 결과물을 외부로 배포하기 위한 작업도 필요합니다.

​

• 프로젝트 개발 환경 설정 및 패키지 관리
• 프로젝트 컨벤션, 디자이너와의 컨벤션 조율
• 일정과 이슈관리 및 분배
• 배포 프로세스 및 릴리즈 관리

​

⑥ 개발자들을 위한 개발

사내에서 쓰는 공통 모듈이나 공통 라이브러리, 디자인 시스템의 컴포넌트와 같은 것을 만들고 배포할 수 있습니다.

SDK, OPEN API등 외부로 공개되는 모듈을 만드는 역할도 여기에 속합니다.

​

 

 

출처

프론트엔드 역사와 미래, 업무 분야 ... 그리고 잘하는 프론트엔드 개발자란?

https://velog.io/@teo/frontend