프론트엔드 개발자가 되기위해

프론트엔드 개발자를 준비하게 된 이유

최근 우리 학교 멋쟁이 사자처럼에서 아가사자들과 프로젝트를 진행했다. 

더 지니어스에 나온 게임을 실제 서비스로 만들어보는 작은 프로젝트였는데 생각보다 모든 팀원들이 너무 열심히 해주었고 다들 정말 엄청난 집중력을 발휘하며 작업을 해서 순조롭게(...?)최종 발표를 진행 할 수 있었다. 총 5명이 진행 한 프로젝트였고 4명이 backend, 1명이 frontend작업을 맡았다. 저 한 명이 나다ㅎㅎㅎㅎ 워낙에 python에 자신이 없기도하고 웹개발에 처음 입문을 한 것도, '아 이런 작업을 계속 해보고싶다'라고 생각을 한 것도, 처음으로 밤새 커피마시면서 코딩을 한 것도 전부 frontend 분야였기 때문에 이번 프로젝트에서도 frontend 를 맡아서 작업을 했다.

이번 프로젝트를 준비하면서 frontend분야에 대해 더욱 깊게 공부해보고싶다는 생각을 했고, 그에 맞춰서 하나씩 준비를 해볼까 한다. 학과 공부를 하느라 정신없지만 내가 하고싶은 분야이고, 작업을 할 때마다 정말 몰두해서 열심히 하는 나자신의 모습이 좋기 때문에 그저 잘 해보고 싶은 마음 뿐이다.

 

그래서 이래 저래  구글링을 하던 중 좋은 글(https://taegon.kim/archives/4810)을 봐서 한 번 가져와 보았다.

 

대부분의 사람들이 생각하는 프론트엔드 엔지니어링

1. 포토샵 파일, 이미지, 와이어프레임 등을 가지고 웹 페이지를 만드는 일

2. 때로는 앞서 나온 포토샵 파일, 이미지, 와이어프레임을 그리는 일

3. 웹 페이지에 애니메이션을 만들고 트랜지션 효과를 주기 위해 자바스크립트를 작성하는 것

4. 콘텐츠를 정의하고 이를 꾸미는 HTML과 CSS를 작성하는 것 

프론트엔드 개발자가 실제로 하는 일

1. 디자이너와 엔지니어 간의 시각적 언어 확립

2. 시각 디자인으로부터 콘텐츠, 브랜드, 기능 등을 표현할 컴포넌트 세트 정의.

3. 컨벤션, 프레임워크, 요구 사항, 시각적 언어, 스펙 면에서 웹 애플리케이션의 기준 확립

4. 웹 애플리케이션의 범위를 기기, 브라우저, 화면, 애니메이션의 측면에서 정의

5. 브랜드 충성도, 코드 품질, 관계자의 상품 리뷰를 위한 품질 보증 가이드라인 개발

6. 적절한 간격, 타이포그래피, 헤딩, 글꼴, 아이콘, 여백, 그리드 등을 사용해 웹 애플리케이션 꾸미기

7. 디자인 가이드라인을 따르며 다양한 해상도에 대응하는 이미지, 디바이스별 목업 등을 사용해 웹 애플리케이션 꾸미기

8. 시맨틱, 접근성, 검색엔진 최적화, 스키마, 마이크로포맷 등을 고려하여 웹 애플리케이션 마크업하기

9. API에 접근하여 사용하기 편하고 배터리 소모가 없는 디바이스 및 클라이언트가 인지하는 방식으로 정보를 가져오기

10. 부드러운 애니메이션, 트랜지션, 게으른 로딩lazy loading, 인터랙션, 애플리케이션 워크플로우를 수행하는 클라이언트 사이드 코드 개발. 대부분 점진적 기능 향상 및 하위 표준 호환성까지 고려.

11. CORSCross Origin Resource Sharing을 고려하는 한편 XSSCross Site Scripting와 CSRFCross Site Request Forgery 공격을 막아낼 수 있도록 백엔드 접속에 대한 안전성 확보

12. 엄격한 데드라인, 관계자들의 요구, 기기별 제한에도 불구하고 항상 사용자가 최우선이라는 점을 잊지 않는 것

이러한 목표를 달성하기 위해 프론트엔드 엔지니어들은 시각 디자인 도구(포토샵, Adobe, Macaw, Sketch)부터 프로그래밍 도구(IDE, Command Line, Source Version Control, Bash 스크립트, 빌드 태스크)까지 다양한 도구를 사용한다. 심지어 간혹 마케팅(뉴스레터, 캠페인, 분석, 검색엔진최적화, 소셜미디어), UX(애니메이션, 트랜지션, 피드백, 인터페이스, 시각적 언어)부터 콘텐츠 수정(구획점, 단어가 뚝 떨어지지 않게 하는 일, 가독성, 색상)까지 신경써야 한다.

숙련된 프론트엔드 엔지니어가 알아야 하거나 작업시 해야할 일 (힌트: 바로 여러분이 고용하고 싶은 사람이다)

1. DNS Resolution, CDNContent Delivery Networks 사용, 여러 호스트 이름을 통한 리소스 요청 성능 향상

2. HTTP 헤더 (Expires, Cache-Control, If-Modified-Since)

3. 스티브 사우더스의 규칙 전부 (고성능 웹사이트)

4. PageSpeed, YSlow, 크롬 개발자 도구 Audit, 크롬 개발자 도구 Timeline에서 보여주는 문제를 해결하는 법

5. 작업을 서버에서 해야할 때와 클라이언트에서 해야할 때 구분

6. 캐시, 프리 페칭pre-fetching 및 지연 로드 기법

7. 네이티브 자바스크립트. 직접 바닥부터 코드를 작성해야 할 때 혹은 다른 사람의 코드를 가져다 써야 할 때를 아는 것. 그리고 두 작업의 장점과 단점을 평가할 수 있는 능력

8. 최신 MVC 자바스크립트 라이브러리(예. AngularJS, EmberJS, ReactJS), 그래픽 라이브러리(예. D3, SnapSVG), DOM 관련 라이브러리(예. jQuery, Zepto), 게으른 로딩 또는 패키지 관리 라이브러리(예. RequireJS, CommonJS), 태스크 관리자(예. Grunt, Gulp), 패키지 관리자(예. Bower, Componentjs), 테스팅(예. Protractor, Selenium)에 대한 지식과 사용.

9. 이미지 포맷과 장점. 언제 무엇을 어떻게 써야 하는가에 대한 지식. 이미지 최적화 기법과 사용 계획 (스프라이트, 게으른 로딩 기법, 캐시 비움, 인터레이스드 PNG)

10. CSS 표준, 최신 컨벤션과 기법(예. BEM, SMACSS, OOCSS)에 대한 지식과 사용

11. 자바스크립트의 컴퓨터 과학(메모리 관리, 싱글 스레드 특성, 가비지 컬렉터 알고리듬, 타임아웃, 스코핑, 호이스팅, 패턴)

 

계속해서 좋은 프론트엔드 개발자가 되기 위한 조건도 검색해보고, 공부도 하면서 훌륭한 프론트엔데 개발자가 되기위해 노력해야겠다.