프론트엔드 개발자가 할 줄 알아야 하는 것들

프론트엔드 개발자가 되기 위해 막연히 공부하던 중 아래 글을 보게 되었다.

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

이 글을 보고 프론트엔드 개발자가 되기 위해 필요한 역량을 좀 더 명확하게 파악 할 수 있었고 적어도 아래 내용들은 모두 할 수 있기 위해 메모했습니다.

프론트엔드 개발자의 업무 범위

웹 서비스란 사용자가 어떠한 입력을 하고 입력을 통해 더 가치있는 데이터를 만들어 사용자에게 잘 전달하는 것을 의미합니다. 이 과정에서 프론트엔드는 사용자와 서비스를 연결해주는 과정의 모든 것들을 구현하는 역할을 하는 것이죠.

그래서 프론트 엔드 개발자의 업무 범위 크게 6가지의 범위로 분류 할 수 있습니다.

1. 데이터를 (예쁘게) 잘 보여주기

서버에서 내려오는 데이터를 적절히 HTML, CSS를 통해서 요구하는 디자인의 형태로 나타내야 하는 영역입니다.

조금더 세분화를 해보자면

1. 텍스트 디자인을 HTML + CSS 로 만들어내는 작업
2. 적절히 재사용이 가능한 형태로 디자인을 컴포넌트화 하는 작업
3. 기기, 브라우저, 화면등에 맞게 디자인이 제대로 보이기 위한 작업
4. 시맨틱, 접근성, 검색엔진 최적화 등을 하기 위한 작업
5. 초기 로딩을 속도를 개선하기 위한 최적화 작업
6. 서버의 데이터를 적절히 디자인 컨텐츠에 연결하여 데이터와 함께 출력하는 작업

으로 나타낼 수 있다. 위 6가지에 대해 자신있게 말 할 수 있고 실천 할 수 있도록 하자

2. 데이터(화면)을 조작하는 기능

전통 프론트엔드 개발자들의 영역이 되겠습니다. 이미 만들어진 데이터에서 사용자의 입력을 받아서 적절히 다른 데이터(화면)로 변경하는 역할을 담당합니다.

대부분의 UI와 DOM, WEB API에 대한 이해와 View를 이루고 있는 데이터에 대한 깊은 이해를 요구합니다. javascript를 공부해야하는 이유이기도 합니다.

세분화해서 정리해보면,

1. 현재의 화면을 데이터로 구성합니다.
2. 사용자의 이벤트를 감지합니다.
3. 해당 이벤트를 적절한 행동으로 분류합니다.
4. 행동에 맞는 적절한 WEB API를 동작합니다.
5. 해당 API의 결과를 통해 새로운 데이터를 생성합니다.
6. 이 데이터를 기존의 데이터와 조립해서 원하는 데이터로 변경합니다.
7. 해당 데이터를 화면에 출력합니다.

Web Framework들이 대부분 이 작업들을 쉽게 작업하기 위해서 개발되고 있습니다.

3. 서버로 데이터 보내기(보완 필수!)

여기에서는 앞에서 만들어낸 중요한 데이터들을 서버로 보내는 역할을 하게 됩니다. 예전에는 백엔드를 개발하던 사람이 본인의 API를 테스트를 하면서 작업을 하던 영역이었지만 이제는 완전히 프론트엔드로 분리가 되어버린 영역입니다.

웹의 가치는 데이터의 공유와 유통에 있기 때문에 데이터가 서버를 통해 공유가 되지 않는다면 의미가 퇴색이 되는 부분이기에 점점 더 중요해지고 있는 영역입니다.

백엔드로 데이터를 전달하는 작업 자체는 정말로 어렵지가 않은데도 이 부분이 어려운 이유는 이 작업이 백엔드에 의존성이 있기 때문입니다.
인증, 보안, 헤더, CORS 등 백엔드에서 만들어둔 설정에 따라 맞춰서 작업을 해야하는데 이것들은 코딩의 영역이 아니라 학습의 영역이고 협업의 영역이기 때문에 백엔드와 적절히 협업을 할 수 있을 정도의 CS 능력이 필요하기 때문입니다. 대표적으로 HTTP프로토콜과 REST API의 간단한 이해정도가 있겠네요.

특히 문제가 생겼을때 프론트엔드의 문제인지 백엔드의 문제인지 판단을 할 수도 있어야 대응이 가능하므로 협업의 경험치 축적이 필요한 영역입니다.

세부적인 내용은 다음과 같습니다.

1. API 문서를 열심히 읽습니다(?)
2. 서버에서 정의한 schema에 맞게 내부적으로 type을 설정합니다.
3. 서버로 보내기전 데이터를 검증하는 작업을 합니다.
4. 화면에 있는 데이터를 API에서 사용하는 구조에 맞게 변경합니다.
5. 백엔드에 지정한 API의 양식에 맞춰 URL, Method, Header, Params, Body등을 만들어서 전달합니다.
6. 이때 중복 전달 방지를 위한 distint, 쓰로틀링, 디바운싱을 사용하기도 합니다.
7. 인증 및 보안은... 회사 내부 규정을 따릅니다.

REST API 대부분의 작업이나 GrpahQL이나 RPC, Web Socket, Web RTC 스트리밍 등 데이터 교환에는 여러 분야들이 존재하니 개발하는 영역에 따른 추가 공부가 필요합니다.
(취약한 부분 보완 필요)

4. 서버에서 받은 데이터 다루기

서버에서 데이터를 전달받아서 화면에 필요한 데이터로 전환하는 변환하는 과정을 주로 다룹니다. 이 역시 백엔드와의 협업이 필요하며, 서버의 API가 비동기로 이루어진다는 점, 서버와의 스키마와 화면의 스키마나 일치하지 않는다는 점, 내가 백엔드를 만들지 않았다는 점들이 여기 작업을 어렵게 만들어주는 이유입니다.

1. 백엔드에서 만들어둔 스펙과 실제 화면에서 보여줘야 할 스펙이 일치하지 않기 때문에 이를 적절히 만들어 줄 수 있어야 합니다.
2. 데이터의 응답속도가 느리기 때문에 실제 화면과 데이터간의 타이밍이 일치하지 않습니다. 이러한 비동기성 특징으로 인한 로딩, 중복 방지 등 중간 과정을 적절히 처리할 수 있어야 합니다.
3. 서버 응답에 따른 문제원인 확인 및 문제해결 능력이 필요합니다.

최근에는 graphQL이나 react-Query등은 이러한 부분들을 좀 해결하자고 나온 라이브러리입니다.

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

프로젝트를 담당하게 되면서 초기 모든 사람들이 개발을 할 수 있도록 기술 스택을 정리하고 개발 환경을 설정하는 작업도 필요합니다. 그리고 이렇게 만들어진 프론트엔드의 결과물을 외부로 배포하기 위한 작업도 필요합니다. 소스코드를 관리하고 일정을 관리하는 일도 필요하게 됩니다.

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

6. 개발자들을 위한 개발

우리가 흔히 쓰는 React와 같은 도구들을 개발하는 업무입니다. 거창하게 React가 아니더라도 사내에서 쓰는 공통 모듈이나 공통 라이브러리나 디자인 시스템의 컴포넌트와 같은 것을 만들 고 배포할 수 있습니다.

뿐만 아니라 git, jira, npm과 같은 도구들을 사내 환경에 맞게 설치를 하고 환경을 만들어주는 업무들도 여기에 속합니다.

SDK나 OPEN API등 외부로 공개되는 모듈을 만드는 역할도 여기에 포함이 됩니다.

결론

아직은 위 6가지 방법과 상세 내용들에 관해 자신있게 다 할 수 있지! 라고 말 할 수 없다.
아니, 애초에 위의 단어들 중 정확한 뜻을 모르고 대강 아는 단어들도 많다.
첫 목표는 위의 내용에 대해 자신있게 말 할 수있고 실천 할 수 있도록 하는 것이다.