프론트엔드 개발의 사전적 수행 직무는,
백엔드(Back-End) API (Application Programming Interface)에서 가져온 데이터의 출력, 입력을 통한 비지니스 로직 구성과 유저가 사용하는 유저 인터페이스를 개발한다.
개인적으로 프론트엔드 개발자는 서비스의 최전선에서 유저와 끊임 없이 소통하고 피드백을 적극 수용하여 사용자의 편의성을 최우선으로 생각하는 분야라고 생각한다
사실 프론트엔드에 대해 잘 몰랐을땐 프론트엔드 개발자는 주로 웹퍼블리싱을 강조하는 분야인줄 알았다
대부분의 사람들이 생각하는 프론트엔드 엔지니어링
- 포토샵 파일, 이미지, 와이어프레임 등을 가지고 웹 페이지를 만드는 일
때로는 앞서 나온 포토샵 파일, 이미지, 와이어프레임을 그리는 일 - 웹 페이지에 애니메이션을 만들고 트랜지션 효과를 주기 위해 자바스크립트를 작성하는 것
- 콘텐츠를 정의하고 이를 꾸미는 HTML과 CSS를 작성하는 것
프론트엔드 개발자가 실제로 하는 일
- 디자이너와 엔지니어 간의 시각적 언어 확립
- 시각 디자인으로부터 콘텐츠, 브랜드, 기능 등을 표현할 컴포넌트 세트 정의.
- 컨벤션, 프레임워크, 요구 사항, 시각적 언어, 스펙 면에서 웹 애플리케이션의 기준 확립
- 웹 애플리케이션의 범위를 기기, 브라우저, 화면, 애니메이션의 측면에서 정의
- 브랜드 충성도, 코드 품질, 관계자의 상품 리뷰를 위한 품질 보증 가이드라인 개발
- 적절한 간격, 타이포그래피, 헤딩, 글꼴, 아이콘, 여백, 그리드 등을 사용해 웹 애플리케이션 꾸미기
- 디자인 가이드라인을 따르며 다양한 해상도에 대응하는 이미지, 디바이스별 목업 등을 사용해 웹 애플리케이션 꾸미기
- 시맨틱, 접근성, 검색엔진 최적화, 스키마, 마이크로포맷 등을 고려하여 웹 애플리케이션 마크업하기
- API에 접근하여 사용하기 편하고 배터리 소모가 없는 디바이스 및 클라이언트가 인지하는 방식으로 정보를 가져오기
- 부드러운 애니메이션, 트랜지션, 게으른 로딩lazy loading, 인터랙션, 애플리케이션 워크플로우를 수행하는 클라이언트 사이드 코드 개발. 대부분 점진적 기능 향상 및 하위 표준 호환성까지 고려.
- CORSCross Origin Resource Sharing을 고려하는 한편 XSSCross Site Scripting와 CSRFCross Site Request Forgery 공격을 막아낼 수 있도록 백엔드 접속에 대한 안전성 확보
- 엄격한 데드라인, 관계자들의 요구, 기기별 제한에도 불구하고 항상 사용자가 최우선이라는 점을 잊지 않는 것
자바스크립트 공부는 기본중에 기본!
웹페이지를 사람에 비유하면 HTML은 페이지의 뼈대 CSS는 옷 JaveScript는 뇌라고 생각한다
웹 페이지상에서 HTML이 웹 페이지의 큰 뼈대를 제공한다고 하면, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. Javascript는 웹 페이지의 동작을 담당하는데 예를 들어, 버튼을 클릭하면 밑에 날짜가 보이게끔 하는 식의 동적인 구현이 가능하다. 자바스크립트는 컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드르르 작성할 수 있게 도와준다. 기존 C나 자바(Java) 언어와 달리굉장히 단순한 구조와 원칙을 가지고 있기 떄문에 초보 개발자들이 쉽게 배우고 이해할 수 있다. 또한 웹에 특화된 기술이기 때문에 운영체제나 플랫폼에 상관없이 잘 작동되고, 확장성도 높다.
프론트엔드 프레임워크
개발자들 사이에는 그런 말이 있다. "개발 환경만 세팅하면 일단 50%는 진행한거야". 맞는 말이다. 예전에는 웹사이트 개발 환경을 구축하려면 많은 시간과 노력이 필요했다. 하지만 개발자들이 누군가. 한 없이 게을러지고 싶은 사람들이다. 명령어 몇 줄만으로 웹사이트 개발 환경을 구축할 수 있도록 프레임워크를 만들어버렸다.
대표적으로 리액트(React), 앵귤러(Angular), 뷰(Vue)가 있다. 많은 커뮤니티에서 앵귤러가 낫니, 리액트가 낫니, 뷰가 낫니 하지만 프로젝트 방향성에 맞게 사용하면 된다. 프레임워크는 목적에 맞게 사용하는 도구지, 어떤 프레임워크가 좋고 안좋고가 아니다.
