$$config title: [프론트엔드] 프론트엔드란? 개념 정리 keywords: - IT - 프론트엔드 - 개념 - 정리 $$ # 프론트 엔드가 뭔가요? 런트엔드는 사용자 인터페이스(UI)를 가지고 동작하며 프로그램 인터페이스와 서비스의 최초 사용자와 관련된 특성을 나타내는 데 사용되는 용어이다. 여기서 “사용자”란 사람 또는 프로그램이 될 수 있다. 프런트엔드 응용프로그램은 사용자들과 직접 상호작용을 하는 프로그램이다. 프런트엔드 응용프로그램은 사용자와 직접 인터페이스할 수 있으며, 요구된 데이터를 얻거나 요구된 서비스를 수행하기 위하여 원격지의 다른 컴퓨터에 위치한 백엔드 프로그램으로 요구를 전달한다. 클라이언트/서버 컴퓨팅 모델과 비교한다면, 프런트엔드는 클라이언트로, 백엔드는 서버로 이해할 수 있다. # 데이터를 잘 보여주기 웹 문서를 잘 만들어서 보여주는 것에 대한 내용입니다. 프론트엔드는 서버에서 내려오는 데이터를 적절히 HTML, CSS를 통해서 요구하는 디자인의 형태로 나타내야 하는 영역입니다. 최초의 문서는 HTML 문서가 데이터이자 디자인이었고 이후 데이터의 영역과 디자인의 영역이 세분화되면서 발전해 왔습니다. - 디자인을 HTML + css로 만들어내는 작업 - 적절히 재사용이 가능한 형태로 디자인을 컴포넌트화 하는 작업 - 기기, 브라우저, 화면 등에 맞게 디자인이 제대로 보이기 위한 작업 - 시맨틱, 접근성, 검색엔진 최적화 등을 하기 위한 작업 - 초기 로딩을 속도를 개선하기 위한 최적화 작업 - 서버의 데이터를 적절히 디자인 콘텐츠에 연결하여 데이터와 함께 출력하는 작업 디자인을 코드로 바꾸는 작업과 서버 데이터를 코드로 바꾸는 작업이 적절히 혼재되어 있습니다. 디자인을 코드로 바꾸는 작업을 국내에서는 퍼블리셔라고 부르곤 합니다. 국내에만 있는 말인데 프론트엔드의 모든 영역에서 다소 로직이 차지하는 비중은 적은데 반해 작업량은 적지 않기 때문에 이 부분의 스페셜리스트를 두어 효율을 높이는 방법을 선호합니다. 로직을 다루지 않다 보니 퍼블리셔를 개발자로 보지 않는 인식이 있었으나, 최근의 경우 프레임워크에서 재사용이 가능한 형태로 디자인과 CSS를 같이 하면서 컴포넌트로 만들어내는 과정들은 절대로 녹록지 않은 작업이기에 당당히 프론트엔드의 영역의 한 부분이 되고 있습니다. # 데이터를 조작하기 전통 프론트엔드 개발자들의 영역이 되겠습니다. 이미 만들어진 데이터에서 사용자의 입력을 받아서 적절히 다른 데이터(화면)로 변경하는 역할을 담당합니다. UI와 DOM, WEB API에 대한 이해와 View를 이루고 있는 데이터에 대한 깊은 이해를 요구합니다. Javascript를 공부해야 하는 이유이기도 합니다. 의미 있는 데이터를 화면 내에서 만들려고 할수록 어려워지고 복잡해지고 중요해지는 경향이 있습니다. 블로그의 글쓰기 에디터나 벨로그의 마크다운 글쓰기, 구글 시트의 셀, 피그마의 기능과 같은 부분들을 떠올려 보시면 좋을 것 같아요. 대부분의 개발자들이 프론트엔드를 하고 싶어 하는 이유이기도 합니다. 하지만 엔터프라이즈급에서 이러한 것들을 하는 회사가 그렇게 많지는 않아요. 프론트엔드 개발자 수요가 그렇게 많으면서도 내가 하고 싶은 일들은 별로 없는 이유이기도 합니다. - 현재의 화면을 데이터로 구성합니다. - 사용자의 이벤트를 감지합니다. - 해당 이벤트를 적절한 행동으로 분류합니다. - 행동에 맞는 적절한 WEB API를 동작합니다. - 해당 API의 결과를 통해 새로운 데이터를 생성합니다. - 이 데이터를 기존의 데이터와 조립해서 원하는 데이터로 변경합니다. - 해당 데이터를 화면에 출력합니다. Web Framework들이 대부분 이 작업들을 쉽게 작업하기 위해서 개발되고 있습니다. # 서버로 데이터를 보내기 여기에서는 앞에서 만들어낸 중요한 데이터들을 서버로 보내는 역할을 하게 됩니다. 예전에는 백엔드를 개발하던 사람이 본인의 API를 테스트를 하면서 작업을 하던 영역이었지만 이제는 완전히 프론트엔드로 분리가 되어버린 부분입니다. 웹 디자인을 주로 하던 분들이 막히는 곳이기도 합니다. 혼자서만 공부를 하기 애매한 영역이기 때문이죠. 웹의 가치는 데이터의 공유와 유통에 있기 때문에 점점 더 중요해지고 있습니다. 백엔드로 데이터를 전달하는 작업 자체는 정말로 어렵지가 않은데도 이 부분이 어려운 이유는 이 작업이 백엔드에 의존성이 있기 때문입니다. 인증, 보안, 헤더, CORS 등 백엔드에서 만들어둔 설정에 따라 맞춰서 작업을 해야 하는데, 이것들은 코딩의 영역이 아니라 학습의 영역이고 협업의 영역이라 백엔드와 적절히 협업을 할 수 있을 정도의 CS 능력이 필요합니다. 대표적으로 HTTP 프로토콜과 REST API의 간단한 이해정도가 있겠네요. 특히 문제가 생겼을 때 프론트엔드의 문제인지 백엔드의 문제인지 판단을 할 수도 있어야 대응이 가능하므로 협업의 경험치 축적이 필요한 영역입니다. - API 문서를 숙지합니다. - 서버에서 정의한 schema에 맞게 내부적으로 type을 설정합니다. - 서버로 보내기 전 데이터를 검증하는 작업을 합니다. - 화면에 있는 데이터를 API에서 사용하는 구조에 맞게 변경합니다. - 백엔드에 지정한 API의 양식에 맞춰 URL, Method, Header, Params, Body 등을 만들어서 전달합니다. - 이때 중복 전달 방지를 위한 Distinct, 쓰로틀링, 디바운싱을 사용하기도 합니다. - 인증 및 보안은... 회사 내부 규정을 따릅니다. REST API이 대부분의 작업이나 GrpahQL이나 RPC, Web Socket, Web RTC 스트리밍 등 데이터 교환에는 여러 분야들이 존재하니 개발하는 영역에 따른 추가 공부가 필요합니다. # 서버에서 받은 데이터를 다루기 서버에서 데이터를 전달받아서 화면에 필요한 데이터로 전환하는 변환하는 과정을 주로 다룹니다. 이 역시 백엔드와의 협업이 필요하며, 서버의 API가 비동기로 이루어진다는 점, 서버와의 스키마가 화면에서의 스키마와 일치하지 않는다는 점, 내가 백엔드를 만들지 않았다는 점들이 여기 작업을 어렵게 만드는 이유입니다. - 백엔드에서 만들어둔 스펙과 실제 화면에서 보여줘야 할 스펙이 일치하지 않기 때문에 이를 적절히 만들어 줄 수 있어야 합니다. - 데이터의 응답속도가 느리기 때문에 실제 화면과 데이터 간의 타이밍이 일치하지 않습니다. 이러한 비동기성 특징으로 인한 로딩, 중복 방지 등 중간 과정을 적절히 처리할 수 있어야 합니다. - 서버 응답에 따른 문제 원인 확인 및 문제 해결 능력이 필요합니다. 최근의 GraphQL이나 React-Query 등은 이러한 부분들을 해결하기 위해 나온 라이브러리입니다. # 개발환경 관리하기, 서버로 배포하기 프로젝트를 담당하게 되면서 초기 모든 사람들이 개발을 할 수 있도록 기술 스택을 정리하고 개발 환경을 설정하는 작업도 필요합니다. 그리고 이렇게 만들어진 프론트엔드의 결과물을 외부로 배포하기 위한 작업도 필요합니다. 소스코드를 관리하고 일정을 관리하는 일도 필요하게 됩니다. 보통 이런 역할을 하는 사람을 PL(Project Leader)라고 부릅니다. - 프로젝트 개발 환경 설정 및 패키지 관리 - 프로젝트 컨벤션, 디자이너와의 컨벤션 조율 - 일정과 이슈관리 및 분배 - 배포 프로세스 및 릴리즈 관리 # 개발자들을 위한 개발 우리가 흔히 쓰는 React와 같은 도구들을 개발하는 업무입니다. 거창하게 React가 아니더라도 사내에서 쓰는 공통 모듈이나 공통 라이브러리나 디자인 시스템의 컴포넌트와 같은 것을 만들고 배포할 수 있습니다. 뿐만 아니라 git, jira, npm과 같은 도구들을 사내 환경에 맞게 설치를 하고 환경을 만들어주는 업무들도 여기에 속합니다. SDK나 OPEN API 등 외부로 공개되는 모듈을 만드는 역할도 여기에 포함이 됩니다.