프론트엔드 개발자는 왜 구하기 어렵나요?

2020-10-04

📝 요약

Why can‘t we find Front End Developers (2014)의 번역글

  • 상대적으로 새로운 분야이다.

    • 프론트엔드 엔지니어링을 즐기려면 시각 디자인에 대한 흥미가 어느 정도 필요하다.

  • 오해

    • 대부분의 사람들이 생각하는 프론트엔드 엔지니어링과 프론트엔드 개발자가 실제로 하는 일에는 큰 차이가 있다.

  • 나쁜 프론트엔드 엔지니어가 많다.

    • 자바스크립트 라이브러리를 남용하는 사람.(자바스크립트 내부를 제대로 알지 모르기 때문에)
    • 자바스크립트 플러그인을 남용하는 사람.(다른 사람의 코드를 읽을 능력도 없이 갖다 씀)
    • 전체 CSS/JS 기능의 5%도 안쓰면서 성능 비교/평가도 하지 않고 CSS 프레임워크를 붙이는 사람
    • CSS 프레임워크만 가져다 붙이면 "반응형" 웹사이트가 된다고 하는 사람
      • 이러한 반응성이 웹 애플리케이션에 언제든 뿌리기만 하면 되는 양념으로 생각하는 사람
    • "반응형 웹 디자인"에 대해 말하면서 서버측 기법에 대해서는 알지 못하는 사람
    • 컨벤션, 전처리 도구, 네이밍 표준, 모범 예시 없이 CSS 코딩을 하며 셀렉터, 아이디, 매직 넘버, !important를 과하게 사용하는 사람
    • 성능, 메모리 누수(메모리 누수가 뭔지 모르는 점)에 대해 무시하고 자신의 코드를 검사하거나 측정 못하는 사람
    • 아무런 기준 없이 제품을 보여주는 사람 또는 "제 컴, 브라우저, 디바이스에선 잘 됩니다" 따위를 기준으로 삼는 사람
    • 30년 된 소프트웨어 엔지니어링을 무시하면서 소프트웨어를 작성하는 사람

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

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

🤔 생각하기

  • 무려 6년전 글이라는 것이 매우 놀랍다. 🙀
  • 나쁜 프론트엔드 엔지니어의 행동들을 읽으니 많이 부끄러웠고 앞으로 주의해야겠다.
  • 스티브 사우더스의 책은 절판되었는데 원가 16,000원 책이 6만원이 넘었다. 나쁜,..판매자들...도서관에 가야겠다.