웹 서비스의 역사와 발전

🚩1세대, 2세대, 3세대 웹 서비스의 특징

1세대 웹 서비스(전통적인 Web System Architecture. 정적 웹.)

• 웹 서버가 HTML 페이지 전체를 클라이언트(ex. Web browser)에게 전송
• 초창기 웹사이트/서비스에 적합했던 시스템 - 초창기 웹사이트는 단순한 정보 제공 위주였다. 특별히 기능이 많지 않으며, 무엇보다 User Interaction 이 많이 요구되지 않았다.
• 1세대 웹이 정적인 이유? HTML, CSS 자체가 정적
  • Hyper Text : 링크로 연결된 문서
  • Markup Language : “이렇게 보여줘라” 에 대한 지시
  • HTML : 웹페이지의 내용을 브라우저에게 어떻게 렌더링(rendering) 해주라고 마크업 해주는 것
• 어떻게 보여지는가에 대한 것이기 때문에 로직(동적)이 없다. 정적.
  
  

2세대 웹 서비스(User Interaction 의 증가. 동적 웹 (자바스크립트))

• 웹서비스들이 점점 발전함에 따라 단순한 정적 페이지가 아닌 다이나믹한 요소들이 요구됨.
• 웹 기반의 언어인 자바스크립트가 출현. 자바스크립트의 역할이 커지기 시작함.
• 참고) 그 이전의 언어들은 사용할 수 없었을까? 왜 자바스크립트가 필요했을까?
  : 그 이전의 언어는 브라우저에서 동작을 안 함.
• 이렇게 2세대 웹 서비스가 출현
• Web server에서 전체 HTML 페이지 뿐만이 아니라 JavaScript를 통해 서버와 필요한 데이터만 주고 받음으로 dynamic한 user interaction을 구현하게 됨.
• 그러나 아직 JavaScript 는 일부분에서만 사용되었고, 또한 현재 통용되는 API 의 개념이 아직은 널리 사용 되지 않음 → 동일한 서버에서 HTML, Javascript(프론트 영역) 데이터(백엔드 영역) 둘 다 전송.

3세대 웹 서비스(SPA. 구별되기 시작하는 Frontend / Backend.)

• 주객전도. 동적인 기능이 주가 되버림. → 자바스크립트가 주가 되고 그 안에 일부 HTML, CSS 가 포함.
• 이게 바로 **SPA(Single Page Application)** - 하나의 파일로 전체 사이트를 구현
• 이름 그대로, 단일의 html 페이지에서 전체 웹 사이트/서비스를 구현.
• 기존의 방식대로 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, Data)를 매번 전송하는 것이 아니라, 파일은 처음 한 번만 송수신. 그 뒤로는 실시간 데이터만 주고 받음.
• 제일 처음 전송된 단일 HTML 페이지에 포함되어 있는 JavaScript 에서 필요한 데이터를 API 서버로부터 호출하여 필요한 화면을 dynamic 하게 새롭게 구성해주는 방식.
• HTML 태그 자체를 자바스크립트가 동적으로 생성
• “명확히 두 개로 나눌 수 있겠다!” → 프론트엔드와 백엔드가 나뉘게 되는 기점.
• 즉 HTML/JavaScript 부분과 데이터 부분이 구조적으로 분리 되기 시작
• → Frontend 개발과 Backend 개발이 독립적으로 분리 (프론트 - UI UX / 백엔드 - Data)
• 명확히 나뉘어진 두 개의 시스템으로 웹이 동작하게됨.
• 기술 스택도 각자에 맞는 스택을 시용하기 시작함. (ex. Angular 의 출현!)
• 이후 사용자에게 편하고, 더 멋진 웹 Frontend 를 구현할 수 있게 도와주는 Framework 혹은 Library 들이 탄생. (ex. React, Vue)
• 프론트엔드가 개발의 혁신이 빠른 이유도 이 분야 자체의 역사가 짧음.
• Frontend 와 Backend가 구조적으로 분리가 되면서, Frontend 서버와 Backend API 서버도 분리가 되며 그에 따라 Frontend 개발과 Backend 개발 업무가 분리가 되는 구조로 발전된다.

🚩3세대 웹에 존재하는 포지션 및 각 포지션의 역할

• Product manager(기획자)
  • 개발하고자 하는 서비스를 정의하고 기획하는 역할을 담당하는 직군
  • 우리나라에서는 PM 이 개발자의 상사 같은 지위를 가지고 있는 곳이 많은데, 미국 에서는 그렇지 않다.
  • PM 과 개발자는 담당하는 일이 다른 팀원 이지 서로 상하관계가 아니다.
• Designer
  • 웹 시스템 개발에는 UI(User Interface) 및 UX (User Experience) 를 구현하는 역할을 담당
  • 사용자가 직접 경험하고 사용하는 서비스를 눈에 보기 좋게, 사용하기 편리하게 디자인하는 역할
• Frontend Developer
  • HTML, CSS, JavaScript 로 프론트엔드 시스템을 구현하는 역할
  • 사용자와 가장 밀접하게 연결되어 있는 개발자
  • (우리나라에는 퍼블리셔(publisher) 라고하는 HTML, CSS 만 담당하는 한국만의 고유 직군이 있음.)
• Backend Developer
  • 백엔드 시스템을 개발하는 역할.
  • Backend 개발자들도 크게 2가지로 나뉨
    • Backend 에서 좀더 앞 쪽을 담당하는 (즉 API 개발을 담당하는) 개발자.
    • Backend에서도 완전 뒤쪽, 즉 데이터 수집, 분석, 관리 등의 데이터 관련 시스템을 개발하는 개발자.
    • (경력이 높아질 수록 좀 더 난이도가 있는 뒷 부분에 해당하는 시스템을 많이 구현.) → DevOps
• DevOps (Development Operations)
  • 시스템 개발(Development) 뿐만 아니라 시스템 운영(Operation)까지 담당하는 것
  • 직군 이라기 보다는 개발 분야에서 나타나는 문화나 추세
  • AWS 등의 클라우드 서비스가 발달함에 따라 서버 구축 및 운영 등의 System Infrastructure 관리까지 백엔드 개발자가 직접 구현하는 추세
  • cf) IAC(Infrastructure As Code)
  • DevOps 에 대한 수요가 굉장히 높은 편. 개발 능력과 함께 DevOps 능력도 키울 것.
• SysOps (System Operations)
  • System Infrastructure 의 구현과 관리 및 운영을 담당하는 직군
  • DevOps 와 다르게 실제 하드웨어를 다룰 수 있는 직군
  • Data Center 를 사용하여 시스템을 운영하는 회사에 필요한 직군
  • 직접 데이터 센터에 서버를 구성하지 않고 AWS 같은 클라우드 서비스가 점점 더 많이 쓰이는 추세.
    따로 SysOps 인력을 두지 않고 DevOps 개발자들이 System Infrastructure 를 담당하는 추세.
• Data Scientist
  • Machine Learning, AI 등의 데이터 분석에 필요한 알고리즘과 모델링의 구현을 담당하는 직군.
  • 많은 양의 데이터를 분석해서 새로운 정보와 가치를 만들어 낼 수 있는 직군
• Data Engineer
  • Data Scientist 가 데이터를 분석할 수 있도록 데이터를 정리하고 정석화 시키는 시스템을 구현하는 역할을 담당
• Tester
  • 시스템을 테스트하여 검증하는 역할을 담당하는 직군
  • QA (Quality Assurance) - 직접 manual testing을 실행하는 직군.
  • Software Engineer in Test / Test Automation Engineer - Manual testing이 아닌 자동 테스트 시스템을 전문으로 구현하는 개발자.