나쁜 프론트엔드 엔지니어

  1. 자바스크립트 라이브러리를 남용하는 사람. 자바스크립트 내부를 제대로 알지 못하기 때문에 라이브러리를 남용한다(예. 모든 작업에 jQuery 가져다 붙이기).

  2. 자바스크립트 플러그인을 남용하는 사람. 다른 사람의 코드를 읽을 능력도 없이 가져다 쓰는 경우(예. jQuery.doParallaxPls.js).

  3. 전체 CSS/JS 기능의 5% 밖에 안 쓰면서 요구사항이나 디자인도 안보고 성능 비교/평가도 안하고 웹 애플리케이션 CSS 프레임워크를 붙이는 사람.

  4. CSS 프레임워크만 가져다 붙이면 "반응형" 웹 사이트가 된다고 생각하는 사람. 또는 이러한 반응성이 웹 애플리케이션에 언제든 뿌리기만 하면 되는 양념으로 생각하는 사람.

  5. "반응형 웹 디자인"에 대해 말하면서 서버측 기법에 대해서는 알지 못하는 사람.

  6. 컨벤션, 전처리 도구, 네이밍 표준, 모범 예시없이 CSS 코딩을 하면서 셀렉터, 아이디, 매직 넘버, !important를 과하게 사용하는 사람.

    preprocessor

  7. 성능, 메모리 누수(+메모리 누수가 무엇인지 잘 모르는 점)에 대해 무시하고 자신의 코드를 검사하거나 측정하지 못하는 사람.

  8. 아무런 기준없이 제품을 보여주는 사람 또는 "제 컴퓨터/브라우저/디바이스에서는 잘 됩니다" 따위를 기준으로 삼는 사람.

  9. 30년 된 소프트웨어 엔지니어링을 무시하면서 소프트웨어를 작성하는 사람

숙련된 프론트엔드 엔지니어가 알아야 하거나 작업시 해야할 일

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

    Content 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)