이 글은 Bradfrost 에 있는 "front of the front-end and back of the front-end web development" 를 번역한 글 입니다. 원문

---

계속해서 이어지는 수많은 논란들(..)
프론트엔드의 업무 범위는 과연 어디까지일까?

아토믹 디자인시스템(Atomic design system)을 정의하였던
'브래드 프로스트(Bradfrost)'가 이 논란을 종결시키려 글을 작성하였습니다.

제목은 "front of the front-end and back of the front-end web development" 입니다.

---

[1] front of the front-end

1. 프론트 코드를 위한 프론트엔드 개발자의 업무 정의

화면에 보여지는 UI를 위한 코드를 작성하는 프론트엔드 개발자는
HTML, CSS, JavaScript 코드 작성을 전문으로하는 웹 개발자 입니다.

---

2. 작업 영역

1. HTML

   시맨틱 마크업과 접근성에 중점을 두고
   친숙한 브라우저 (friendly to browsers), 기술 보조 (assistive technologies)
   검색 엔진 (search engines), 기타 다른 환경 (and other environments)
   등 을 위해 HTML을 작성합니다.

2. CSS

   보이는 것과, 느끼는 것을 컨트롤 하는
   웹 경험, 컬러, 타이포그래피, 반응형 레이아웃, 애니메이션, 기타 UI 등
   프론트엔드는 CSS 모듈 설계, 유연성, 호환성, 확장성에 중점을 둔 코드를 작성합니다.

3. DOM

   돔에서 조작 가능한 자바스크립트를 작성합니다.
   예를들어 제목을 클릭 할 때 아코디언 패널을
   열기, 닫기, 모달창 닫기 등 여러가지 조작 방법이 있습니다.

4. 크로스 브라우저

   PC, 모바일, 태블릿 등 기타 모든 웹 브라우저를 지원하는 디바이스에서
   UI가 잘 나오는지 크로스 브라우저와 디바이스를 테스트 합니다.

5. 성능 최적화

   프론트엔드 코드로 작성하는 성능 최적화는
   가볍고 빠른 로딩과, 버벅임이 없는 경험을위해 성능을 최적화 합니다.

6. 디자이너와의 협업

   브랜드, 디자인비전, 사용자경험(UX), 베스트 프랙티스(최고의 사례)들을 사람들이 실제로 프로덕트를 사용하게 될 장소인
   웹 브라우저에 적절하게 보여줄 수 있도록 디자이너와 협업을 합니다.

7. 백엔드 코드들을 동시에 고려하는 프론트엔드 개발자들과의 협업

   서비스, API, 아키텍처 등 백엔드 코드를 작성하는 프론트엔드 개발자와 협업을 합니다.

8. UI 컴포넌트

   다른 개발자분들도 같이 사용할수 있도록
   UI 컴포넌트를 템플릿 단위로 패키지화 합니다.

9. 견고하고 직관적인 문서화

   각 presentational component들을 위한 컴포넌트 API 들에 대하여
   견고하고 직관적인 문서화를 수행하여, 개발자들이 쉽게 자신이 원하는 위치에서
   해당 컴포넌트들을 사용할 수 있도록 합니다.

10. 단위테스트

    컴포넌트가 제대로 동작하는지 확인하기 위해
    UI 컴포넌트 라이브러리 코드에 대한 단위 테스트를 작성합니다.

11. 종합 컴포넌트 라이브러리를 유연성과 구성성을 설계

    개발자들과 협력하기 위해서는 각 컴포넌트들을
    어떻게 열고/구성할 수 있는지 이해하는것과
    경직/잠금 방식이 어떻게 되어있는지 파악합니다.

12. 프로덕트에서 관리하는 컴포넌트 유지관리

    소프트웨어 제품 유지관리를 하려면
    버전관리, 배포, 관리, 릴리즈노트 작성 등 모든 운영과 관련된 관리를 합니다.

---

[2] Back of the front-end

1. 백엔드 코드들을 동시에 고려하는 프론트엔드 개발자의 업무 정의

백엔드 개발자와 협업하며 코드를 작성하는 프론트엔드 개발자는
웹 애플리케이션이 작동하는데 필요한 자바스크립트 코드를 작성하는 웹 개발자 입니다.

---

2. 작업 영역

1. 애플리케이션 비즈니스 로직 작성

   CRUD (create, read, update, delete)와 같은 로직을 처리하기 위해
   애플리케이션의 상태를 관리하고, 라우트, 캐쉬, 인증(authentication) 등등
   애플리케이션이 제대로 작동하도록 필요한 코드를 작성합니다.

2. 데이터 소스, 서비스, API들을 연결 및 통합 관리

   CMS에서 유저가 폼에 작성한 양식을 제출할때
   해당 서비스 화면에 데이터를 게시할수 있도록
   컨텐츠를 검색(retrieving), 조작(manipulating)할 수 있도록 작업 합니다.

3. UI 코드사용

   화면에 보여지는 UI를 위한 코드를 작성하는 프론트엔드 개발자와 협력하여
   화면을 구성하고 실제 기능 데이터와 서비스를 연결합니다.

4. 자바스크립트 코드 성능 최적화

   빠른 반응의 애플리케이션을 위해
   데이터를 빠르게 가져오고, 게시하도록 성능을 최적화 합니다.

5. 통합 테스트

   애플리케이션이 의도한대로 작동하도록
   한쪽 끝에서 다른쪽 끝까지(end-to-end) 작성한 것을 통합하거나 기타 테스트를 작성합니다.

6. 자바스크립트 기반 인프라 설계

   Nodejs 프레임워크나 툴, 그리고 서비스와 같은 것들로 인프라를 설계하고 관리합니다.

7. 데브옵스(Devops) 관리

   자바스크립트 번들러, 배포 도구, CI/CD 등등 데브옵스를 관리합니다.

8. 다른 프론트엔드 개발자와 협력

   화면에 보여지는 UI를 위한 코드를 작성하는 프론트엔드 개발자와 협력하여 컴포넌트 라이브러리 안에 모든 컴포넌트가 잘 포함되어있는지, 변형가능한지, 필요한 API는 잘 걸려있는지 모든 애플리케이션의 상태를 빌드하기 전에 확인합니다.

9. 프로덕트 팀과 협력

   모든 프로덕트의 상태를 라이브된 애플리케이션에서
   정확히 안전한 상태를 유지할수 있도록 프로덕트 팀과 협력합니다.

10. 백엔드 개발자와 다른 IT 부서와 협력

    자바스크립트를 사용하지 않는 백엔드 코드에서 애플리케이션이 제대로 통합/통신 할 수 있는지
    백엔드 개발자와 다른 IT 부서와 협력하여 올바른 기술 인프라를 구축 합니다.

---

이 문서는 프론트엔드 업무에 혼동을 갖고 계신 분들이 읽으면 좋을 듯 하여 작성하였습니다.
각 회사의 업무에 따라 Bradfrost 개발자가 작성한 문서와 실제 업무는 차이가 있을 수 있습니다.

---

비슷한 자료들

• 퍼블리셔, 프론트엔드 개발을 시작하다
• 2015년 웹 Front-End 실무 이야기