[Front End] 기초부터 완성까지 - 01장. 프런트엔드 개발이란?

기초부터 완성까지, 프런트엔드 개발도서 관련 : 01장 프런트엔드 개발자란 무엇이며 어떠한 역할을 수행하는지 학습

프런트엔드 개발이란?

정의

클라이언트 영역

: 서비스를 이용하는 사용자 또는 디바이스를 의미

프런트엔드 개발

: 클라이언트 영역에서 서비스 사용자와 대화하는 UI 를 개발하는 것

작업 종류

• 사용자가 입력한 데이터를 비즈니스 로직에 따라 처리
• 서버와 통신해 가져온 데이터를 출력
• 디자인을 적용하여 스타일링 처리

목표

궁극적 목표는 서비스를 이용하는 사용자의 접근성과 편의성 증진

개발 역사

1989년 웹의 아버지 팀 버너스리

WWW(World Wide Web)의 하이퍼 텍스트 시스템 창시자

WEB 1.0(1990년대) -> WEB 3.0(현재)

	WEB 1.0	WEB 2.0	WEB 3.0
개념	카테고리를 통한 자료 검색의 형태	사용자가 직접 정보 생산, 유통, 소비하는 쌍방향 소통의 형태	시맨틱 웹기술을 이용해 지능화된 서비스 제공
특징	단방향 정보 제공 형태로 정적인 서비스 제공	외부에 개방하는 형태의 서비스들이 등장, 동적인 서비스를 만드는 기술(Ajax, RSS 등)과 웹 표준 등장	빅 데이터와 AI의 결합으로 개인 맞춤형 서비스 제공
서비스	카테고리 검색 서비스	블로그, UCC	데이터를 기반으로 한 추천 서비스

WEB 2.0 주요 특징

AJAX의 등장

• 서버로부터 필요한 데이터만 요청이 가능해짐.
• 전체 페이지를 응답받지 않아 데이터 처리량이 대폭 줄어들고, 응답 데이터에 대한 가독성이 향상 됨.
• 클라이언트 영역에서 응답받은 데이터를 처리하는 자바스크립트의 중요성이 높아짐.

웹 표준 등장

• OS, 브라우저 상관없이 동일한 정보를 제공하는 것을 목적으로 만들어짐.
• HTML, CSS, Javascript 에 대한 표준이 생기면서 플랫폼 상관없이 하나의 소스로 통합 관리 가능
• 이로인한 개발자 생산성 향상
• IE에서는 웹 표준 등장에도 불구하고 이를 완벽히 준수하지 않아 별도 처리가 필요할때가 있음…

Front-End / Back-End 분리의 시작

• 2000년대부터 클라이언트 영역 개발의 복잡도가 증가하며 프론트와 백엔드를 구분하려는 움직임이 시작됨
• jQuery 등장(2006년, 존 레식)
• Angular(2010년), React, Vue.js 와 같은 프레임워크 등장 (+ Svelte)
• ECMAScript2015(ES6) : 자바스크립트 표준명세

개발 프로세스

요구 사항 분석, 설계, 개발, 배포와 같은 개발 프로세스 내에서의 프런트엔드 개발자의 역할

요구 사항 분석

1. 개발 방향성 정의 : 요구 사항을 고려해 적합한 기술이나 프레임워크 검토
   • 기획서를 통해 UI 작업 항목 도출
   • 우선순위 정의
   • 규모별 Microservice 분리 여부 판단
   • 브라우저 지원 범위, 검색 엔진 최적화
2. 원활한 협업
   • 사용성과 미관 사이의 균형을 맞추기 위해 디자이너와 협의
   • 워크 플로우 UI 적용방법 관련 기획자와의 협의
   • 백엔드 개발자와의 전반적인 기술 공유

설계

• 개발 도구 및 환경 구성 (번들러, 정적 분석기 등)
• 데이터의 구조 설계 및 관리
• 컴포넌트 또는 모듈 간 데이터를 공유하고 변경하는 방법
• 컴포넌트(뷰)의 단위를 나누고 계층화하는 작업

구조적인 완성도를 높히기 위한 세부적인 기술 검토 단계.

협업은 계속해서 중요하며, 특히 백엔드 개발자와의 협의를 통해 API 규약과 문서화 방법을 미리 정해놓는 것이 좋다.

정형화된 API 계층을 미리 만드는 것이 향후 개발 생산성에 큰 효율을 가지고 온다.

개발

마크업과 자바스크립트 개발 시작

백엔드 개발자의 API 개발 상태에 영향을 받지 않도록 모킹해 개발을 진행한다.

모킹은 더미 데이터 생성이나 Ajax 모킹 라이브러리 보다는 중간 인터페이스 역할을 하는 별도의 모킹 인터페이스 또는 서버를 띄우는 것이 좋다.

배포

테스트 환경에서 QA 진행 (QA 팀이 없는 경우 개발자가 직접 수행)

이 후 스테이징 서버(운영 환경과 동일한 환경으로 구성된 서버) QA 진행

QA에서 나온 이슈를 대응하고 배포하고 QA 받고를 반복한다.

이러한 과정을 사람이 직접 수행한다면? 실수가 발생할 수 있다. 그렇기 때문에 명확한 배포 전략을 세우고 자동화하여 이슈를 예방하도록 해야한다.

CI/CD 도구들과 호스팅 서비스를 조합하여 최적화된 배포 전략을 수립한다.

요약

• 요구 사항 분석 : 개발 항목 구체화, 기술적 방향성 정의
• 설계 : 기능, 모듈, 서비스 전반에 사용될 세부 기술 검토 및 적용을 통한 구조 설계
• 개발 : 기능 및 모듈 개발, 백엔드와 독립적인 개발 가능한 환경 구축
• 배포 : 실 서비스 배포 전 테스트 환경 구축 및 QA 진행, 자동화된 배포전략 도입

고찰

본인은 그 동안 백엔드 개발을 주력으로 업무를 수행했으며, 프론트엔드 개발자와 함께 협업할 기회가 없었다. 그렇다보니 프론트 엔드 개발자들은 어떠한 프로세스로 각 단계에서 어떤 역할을 수행하는지 궁금했는데 실상 백엔드 개발의 프로세스와 크게 차이가 있지는 않은것 같다. 그리고 웹의 역사를 처음으로 접하게 되었는데 그 동안 얼핏 스치듯 들었던 단어들(WEB 2.0, ESMAScript, ES6)에 대한 개념이 없었는데 이번 계기로 명확히 알게 되었다. WEB 3.0에 대한 글을 찾다보니 꽤 어려운 개념들이 등장을 해서 놀란 마음으로 덮어놓게 되었는데, 나중에 한 번 별도로 정리해볼 만한 가치가 있는 것 같다.

⬅️ 기초부터 완성까지, 프런트엔드 목차보기