프런트엔드 개발이란?

최현석·2022년 3월 14일

기초부터완성까지프런트엔드

기초부터 완성까지 프런트앤드

목록 보기

2/4

프런트 엔드 1년차,

프런트엔드 개발자로 일한지 일 년이 지났다.

나는 기본기가 얼마나 되어 있을까,

"표준"에 가깝게 현업에 임하고 있을까 하며,

가장 표준에 가까운 네이버 개발자들이 집필한 책

기초부터 완성까지 프런트 엔드 책을 구입했다.

1장 프런트엔드 개발이란 파트를 읽고 많은 생각이 스쳤다.

사실, 소규모 팀에서 일을 1년간 지속하면서 걱정이 많이 앞섰다.

표준하고 거리있는 개발자 되진 않았을까가 가장 큰 걱정이었다.

하지만 책을 읽고 돌아보니

인력과 시간이 절대적으로 부족해 아래의 개발 철학이라던지 프로세스를 정확히 지키지는 못하고 있으나,

전반적으로 핵심 프로세스는 지켜지고 있고,

가용한 선에서 우리 팀에 최적화된 애자일한 방식으로 업무를 진행하고 있다는 것을 느꼈다.

아무래도 소규모지만, 경험 많으신 과장님 대리님께서 잘 리딩해주시는 것 같다.

우리 팀에 자부심을 갖고, 안심해도 될 것 같다.

아래 내용은 1장을 정리한 내용이다.

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

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

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

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

지금은 프런트엔드 춘추전국시대다.

계속 해서 새로운 무언가가 나오고, 대세는 바뀔 것이다.

그러나 한 가지 명확한 것은 기본기 (HTML, CSS, JAVA SCRIPT)를 튼튼히 다지면 된다.

코어 기술에 대한 이해도가 높을수록 개발 도구나 프레임워크를 더 쉽게 파악해 사용할 수 있다.

모바일 앱 개발

모바일은 하나의 플랫폼으로 진화해, 각각의 독자적 환경에서 발전했다. 이러한 것들을 통합하여 개발할수 있도록 나온 것이 하이브리드 앱이다.

하이브리드 앱은 콘텐츠 영역을 HTML, CSS, JAVASCRIPT 를 사용해 웹 애플리케이션 형태로 개발한 후 네이티브 앱으로 변환해 배포하는 애플리케이션이다.

웹 프런트엔드 개발에서만 사용되던 HTML, CSS, JAVASCRIPT로 모바일 앱을 만들 수 있게 됐다.

데스크톱 앱 개발

모바일 앱을 넘어 데스크톱 앱도 HTML, CSS, JAVASCRIPT를 사용해 만들 수 있다.

대표적인 프레임워크로는 Electron이 있다. 이를 통해 개발된 앱은 윈도우, Mac, 리눅스 환경에서 모두 동작하는 크로스 플랫폼 형태의 앱으로 사용된다.

Electron을 사용한 대표적인 앱에는 프런트엔드 개발자들에게 익숙한 VS Code, Atom 과 같은 IDE(Intergrated Development Environment) 가 있다.

개발 프로세스

어떤 방법론을 선택하느냐에 따라 프로젝트의 개발 프로세스는 완전히 달라진다.

하지만 어떤 방법론이든 관점이 다를 뿐, 요구사항을 분석하고 설계, 개발해 배포하는 작업을 수행하는 것은 동일하다.

프런트엔드 개발자의

1. 요구 사항 분석

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

기존 기획서와 신규 요구사항을 분석해 UI에서 작업할 항목들을 도출하고 우선순위를 정해야 한다.
원할한 협업을 위해 사용성과 미관 사이의 균형을 맞추도록 디자인의 콘셉트나 레이아웃 구성에 대해 디자이너와 협의해야 한다.
워크 플로우를 UI에 어떻게 적용해야 자연스럽고 편리할지 기획자와도 협의해야한다.
백엔드 개발자와는 전반적인 기술에 대해 서로 공유 해야한다.

2. 설계

개발항목이 도출되면 구체적인 설계를 한뒤, 다음과 같은 작업을 진행한다.

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

설계 단계에서 구축한 구조는 개발 생산성과 애플리케이션의 품질에도 큰 영향을 미친다.

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

정형화된 API 계층을 미리 만드는 것이 향후 개발 생산성에 훨씬 효율적이기 때문이다.

3. 개발

산출된 디자인과 기획서를 기준으로 마크업과 자바스크립트 개발을 시작한다.

마크업만 담당하는 전문 인력이 있으면 마크업과 자바스크립트를 나눠 개발하기도 한다.

하지만 프런트엔드 개발자라면 기본적으로 마크업, 자바스크립트 개발에 모두 능숙해야 한다.

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

4. 배포

개발이 완료되면 테스트 환경을 구성해 QA를 진행한다.

개발 테스트 서버와 스테이징 서버에서 QA를 진행하며, 프로젝트 규모에 따라 개발 테스트 환경에서 QA는 생략할 때도 있다.
QA에서 발견한 이슈들을 모두 해결했다면 최종 상태를 반영해 실제 서비스에 배포한다.

개발 산출물 -> 테스트 서버 배포 -> QA -> QA 이슈 대응 - QA 완료

위 과정을 사람이 모두 직접한다면 실수로 인해 배포 중 이슈가 발생할 확률이 매우 높으므로, 배포 전략을 세워 자동화하면 예방할 수 있다.
github actions, jenkins와 같은 CI/CD 도구들과 Netlify, AWSl, Firebase 등 호스팅 서비를 조합해 프로젝트에 최적화된 배포 전략을 수립할 수 이싿.
QA : 애플리케이션의 품질을 보증하도록 기능 정의서 및 워크 플로우에 따라 테스트 시나리오를 만들어 검증하는 작업.

이 글은 기초부터 완성까지 프런트엔드 책을 학습하며 핵심 정리한 내용입니다.