[기초부터 완성까지, 프런트엔드] 1장. 프런트엔드 개발이란?

1장. 프런트엔드 개발이란?

Posted by : hyerin on Feb 8, 2023

공부를 하다 보니 오히려 기초가 부족한 느낌을 더 받기 시작했고, 기초부터 탄탄히 잡아줄 수 있는 책을 찾다가 NHN Toast UI 개발자가 쓴 기초부터 완성까지, 프런트엔드 책을 발견했다.
틈틈히 읽으면서 블로그에 정리해봐야지!

프론트엔드 개발이란?

클라이언트란?

클라이언트는 서비스를 이용하는 사용자 또는 사용자의 디바이스를 의미한다.
사용자의 PC와 스마트폰에서 사용자가 서비스를 저바는 영역을 클라이언트 영역이라고 표현한다.

프론트엔드 개발이란?

프론트엔드 개발은 클라이언트 영역에서 서비스 사용자와 대화하는 인터페이스(UI)를 개발하는 것이며, 아래와 같은 작업들을 포함한다.

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

비즈니스 로직?
비즈니스 로직이란 프로그램의 핵심 로직을 뜻한다.
즉, 어떻게 데이터가 생성되고 저장되고 수정되는지를 정의한 것이다.
만약 쇼핑몰 프로그램을 사용할 경우 장바구니에 물품이 추가됨에 따라 결제 예정 금액이 수정되는 로직이 바로 비즈니스 로직이다.
비즈니스 로직은 프로그램의 핵심을 담당한다. 따라서 요구사항에 맞춰 수시로 변경해야 하는 경우가 많아 얼마나 읽기 쉽고 깔끔한지, 유지보수가 쉬운지가 실제 프로젝트에 큰 영향을 준다.

프론트엔드 개발의 목표

프론트엔드 개발의 궁극적인 목표는 서비스를 이용하는 사용자의 접근성과 편의성 증진이다.
프론트엔드 개발자가 이 목표를 이루기 위해서는 마크업 활용 능력부터 자바스크립트에 대한 높은 이해도, 복잡한 데이터를 관리하는 전체적인 구조 설계 역량까지 갖추어야 한다. 또한, 원활한 협업을 위해 디자인과 서버에 대한 기본적인 내용도 알아야 한다.

웹의 역사

1989년 웹의 아버지라고 불리는 팀 버너스리가 World Wide Web(WWW)의 하이퍼 텍스트 시스템을 고안했다.
이 기술을 기반으로 1990년대 WEB 1.0이 시작되었고, 현재의 WEB 3.0까지 발전했다.
웹 개발은 발전 과정에서 많은 시행착오를 겪었고, MVC, MV* 등 소프트웨어 공학의 개념들을 적용하며 진화했다.

WEB 1.0

개념 : 카테고리를 통한 자료 검색의 형태
특징 : 단방향 정보 제공의 형태로 정적인 서비스를 제공
서비스 : 카테고리 검색 서비스

WEB 2.0

개념 : 사용자가 직접 정보를 생산하고 유통, 소비하는 쌍방향 소통의 형태
특징 : 외부에 개방하는 형태의 서비스들이 등장, 동적인 서비스를 만드는 기술(Ajax, RSS 등)과 웹 표준 등장
서비스 : 블로그, UCC

Ajax

Ajax의 등장으로 서버에 필요한 데이터만 요청해 응답으로 받아 처리할 수 있게 되었다.
기존처럼 일부 데이터를 갱신할 때 전체 페이지를 새로 그리지 않아 데이터 처리량도 대폭 줄어들었고, 응답 데이터에 대한 가독성도 향상되었다. 또한, 클라이언트 영역에서 응답받은 데이터를 처리하는 자바스크립트의 중요성도 높아졌다.

웹 표준

웹 표준은 운영 체제나 브라우저와 상관없이 동일한 정보를 제공하는 것을 목적으로 만들어졌다.
HTML, CSS, 자바스크립트에 대한 표준이 생기면서 플랫폼과 상관없이 하나의 소스로 통합하여 관리할 수 있게 되었다.
(웹 표준이 등장한 이후에도 IE는 표준을 완벽하게 준수하지 않아 별도로 처리할 때가 있었다.)

WEB 3.0

개념 : 시맨틱 웹 기술을 이용해 지능화된 서비스를 제공
특징 : 빅 데이터와 AI의 결합으로 개인 맞춤형 서비스 제공
서비스 : 데이터를 기반으로 한 추천 서비스

개발 프로세스

1. 요구 사항 분석

고객의 요구 사항을 분석해 어떠한 기능을 도입할지 기획하고 구체화하는 단계이다. 이 단계에서 프론트엔드 개발자의 역할은 크게 두 가지이다.

요구사항을 분석해 개발의 방향을 정해야 한다.

기존 기획서와 신규 요구 사항을 분석해 UI에서 작업할 항목들을 도출하고 우선순위를 정해햐 한다.
또한, 모듈의 규모에 따라 Microservice로 나눠서 작업할지, Monolithic하게 묶어서 작업할지 판단해야 한다.
이 외에도 브라우저의 지원 범위나 검색 엔진의 최적화 등과 같은 요구 사항도 고려해 적합한 기술이나 프레임워크를 검토해야 한다.

Microservice ?
애플리케이션을 느슨하게 결합된 작은 서비스들로 나눠 구성하는 개발 기법이다.
각 서비스를 독립적으로 개발해 수정, 배포가 쉽지만, 서비스 간 통신에 별도의 인터페이스를 만들어야 한다는 단점이 있다.

Monolithic ?
> Microservice와 반대되는 개념으로, 하나의 거대한 아키텍처 안에서 서비스를 구성하는 모듈들을 개발하는 전통적인 아키텍처이다.
초기에는 단순하지만, 규모가 커질수록 모듈 간 의존성과 복잡도가 높아진다는 단점이 있다.

원활한 협업

사용성과 미관 사이의 균형을 맞추도록 디자인의 콘셉트나 레이아웃 구성에 대해 디자이너와 협의해야 한다.
또한, 워크플로우를 UI에 어떻게 적용해야 자연스럽고 편리할지 기획자와도 이야기해야 한다.
백엔드 개발자와는 전반적인 기술에 대해 서로 공유해야 한다.

2. 설계

개발 항목이 도출되면 프론트엔드 개발자는 구체적인 설계를 하고, 다음과 같은 작업들을 진행한다.

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

구조적인 완성도를 위해 좀 더 세부적인 기술을 검토하고 개발 작업물들을 쌓도록 뼈대를 만드는 단계로, 데이터 관리를 위해 Redux같은 별도의 상태 관리 라이브러리를 사용할지, 전통적인 MVC 패턴으로 관리할지 등을 결정하고 구조를 잡는 것이다.

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

3. 개발

개발 단계에서는 산출된 디자인과 기획서를 기준으로 마크업과 자바스크립트 개발을 시작한다.
백엔드 개발자는 미리 약속한 규약을 기반으로 API 데이터 포맷을 설계하고 프론트엔드 개발자와 공유한다. 프론트엔드 개발자는 백엔드 API의 개발 상태에 영향을 받지 않도록 데이터를 모킹해 개발을 진행한다.
더미 데이터를 만들거나 Ajax 모킹 라이브러리를 사용하기도 하지만, 가장 좋은 방법은 별도의 모킹 인터페이스 또는 서버를 통해 개발하는 것이다. 중간 인터페이스를 만들어 사용하면, 불필요한 더미 데이터를 만들거나 API를 모킹할 필요 없이 프론트엔드 개발을 진행할 수 있다.
결과적으로 프론트엔드와 백엔드 간 의존성이 낮아지므로 개발 생산성이 높아지고, 백엔드 API가 구현될 때 쉽게 연동할 수 있다.

모킹 ?
외부 서비스나 모듈들을 실제로 연결하지 않고, 가짜 모듈을 작성해 테스트하는 행위이다.
프론트엔드 개발에서는 주로 백엔드 API가 모킹의 대상이다.

4. 배포

개발이 완료되면 테스트 환경을 구성해 QA를 진행한다. 개발 테스트 서버와 스테이징 서버에서 QA를 진행하며, 프로젝트 규모에 따라 개발 테스트 환경에서 QA는 생략할 때도 있다.

QA ?
애플리케이션의 품질을 보증하도록 기능 정의서 및 워크 플로우에 따라 테스트 시나리오를 만들어 검증하는 작업이다.

스테이징 서버 ?
운영 환경과 동일한 환경으로 구성된 서버이다.

애플리케이션 배포가 빈번할 경우, 개발 산출물 -> 테스트 서버 배포 -> QA -> QA 이슈 대응 -> QA 완료 프로세스를 계속 반복해야 한다.
사람이 반복되는 작업을 실행하다 보면 실수로 인해 배포 중 이슈가 발생할 확률이 매우 높으므로, 명확한 배포 전략을 세워 자동화하여 이러한 이슈를 예방할 수 있다. 또한, 배포 시간도 단축되어 개발팀과 QA팀은 본연의 업무에 더 집중할 수 있다.
Github Actions, Jenkins와 같은 CI/CD 도구들과 Netlify, AWS, Firebase 등의 호스팅 서비스를 조합해 프로젝트에 최적화된 배포 전략을 수립할 수 있다.

< 참고 : https://medium.com/@su_bak/term-business-logic%EC%9D%B4%EB%9E%80-6d53c4782d73 >