All Articles

[20191010 TIL]


2019-10-10 TIL


Front-End 개발자가 하는 일

대부분이 생각하는 front-end 개발은 CSS를 작성하고 HTML을 작성하고, Javascript를 작성해서, 사용자 웹페이지를 만듭니다.

페이지에 넣을 인라인 스크립트 작성(파일 분리 필요 없는 정적 페이지 개발)

폼 유효성 검사

재사용이 필요 없는.View 코드 작성

공통 모듈(jindo/query)로만 페이지 개발이 가능할 떄

대부분의 스펙은 서버 개발자가 개발해도 충분(더불어 엄청 잘함) —> 화면 동작만 잘 하면 된다. View단은 금방 고칠 수 있음.

풀스택 개발자가 다 할 수 있을 것이다. 최신 브라우저에서만!!

하지만 FE 개발자가 필요한 이유는, 저희가 주로 받는 요청 사항에 들어 있습니다.

  • 크로스 브라우저 대응 —> 아래 브라우저에서 모두 잘 동작하게 해주세요. (Internet Explorer, Firefox, Chrome. Safari..)

  • 멀티 모바일 디바이스 대응 (iOS Safari, Android OS Version)

  • 기획, 디자인과 합의점 찾기 (웹으로 다 구현 가능한거 아니에요? 최소 대응 스펙은 진저브레드, 오픈일 2주 남았어요 될까요? 이 스펙으로 전체 커버리지는 이런 문제가 있어요 성능 최대한 고려해서 이 커버리지로 구현하겠습니다. )

  • 프로토타이핑도 합니다. (이런 서비스를 개발하려고 하는데요, 기술적으로 웹에서 구현이 가능할까여? )

  • 성능 최적화 (기능 구현은 잘 됬는데, 느려요. 네이버 메인은 빠르던데 모바일에서 더 부드럽게 구현이 안될까요? 인스타그램 앱에서 스르륵 효과가 멋지던데 우리 웹은 뚝뚝 끊겨서 이상해요. 제 폰은 갤럭시 s3인테 우리 서비스가 너무 느려요, 메뉴를 누를 때마다 왜 이렇게 깜박거리죠? )

  • 유지보수가 가능한 JS 개발

  • 웹 트렌드는 아직도 변화중

==> 결론은 FE개발자들의 일은, CSS, HTML, JS을 이용하여, 화면 로직을 설계, 구현하고, 프로토타이핑을 하여 가능성을 확인한 다음. 테스트를 해서, UI 컴포넌트 작성, 통신 API를 작성합니다. 개발/기획/디자인 소통 창구 역할을 수행하기도 하구요. 성능 최적화를 하여

좀 더 빠르고 나은 웹 어플리케이션을 위해 노력합니다. 물론 최신 웹 스펙과 함께요.

——————————————————-

요새 하는 개발 프로세스

  1. 요구 사항 분석(스펙 회의)

  2. 서버 개발에서 된다고 했다가 브라우저 커버리지 때문에 FE개발자에게 HELP! IE에서 안되요!(실제로 이런경우 허다)

  3. 애초에 서비스 기획/설계 당시부터 프론트엔드 개발자가 포함되는게 좋습니다.

  4. 이번 서비스에 이 스펙을 꼭 넣어야 해요.(구현 가능성 판단 및 일정 산정. 프로토타이핑 일정이 포함되곤 합니다.)

  5. 프레임워크/라이브러리 선정 유지보수가 용이한 프로젝트를 위해선 적절한 라이브러리 선정이 매우 중요합니다.

  6. 환경 세팅 ANT YUI 빌드 정도면 되는거 아니야? 충분합니다. 하지만, 더 좋은 툴들이 너무 많이 있습니다. 다양한 종류의 프론트엔드 개발을 도와주는 도구들이 오픈소스로 공개 되어 있습니다.

[자바스크립트 개발 환경 고도화]

  • JS 개발 환경은 node.js로 인해 정말 많은 발전을 했고, 주로 아래와 같은 툴들이 있습니다. grunt, grunt-init, gulp, yeoman, bower, karma, browser-sync

[FE BUILD TOOLS]

  • JS 최적화(MIn & Uglify)
  • JS 코드 품질 검증 (JS Lint, flow)
  • JS 테스트 수행 (test code run with browser)
  • JS Code Templating
  • CSS 최적화(Min)
  • CSS Image sprite 자동화
  • HTML, CSS 리소스를 js로 변환
  • ALL FILE CONCAT to THE_ONE.js
  • checkout Flash file

BUILD 태스크를 수행 하면 3초만에 우리가 원하는 result.min.js 산출물 파일 생성

(여러가지 귀찮은 작업을 커맨드 한번에 gulp build)

  1. 개발/테스트

[여러 브라우저에서 테스트하기]

  • 무료로 할려면, (로컬에 세팅하기) BrowserSync

    • 테스트 환경을 (극적으로) 도와주는 도구입니다.
    • 태스크 러너(grunt/gulp)를 통해 쉽게 run 할 수도 있습니다.
    • weinre 자동 세팅(Remote Debugging)
    • Click & Scroll position & Form action 동기화
    • 자동 화면 갱신(리소스/코드 변경시) Many Virtual Machines (VM 환경 세팅)
    • modern.ie(IE test VM 이미지 무료로 받기)
    • Genymotion: Android VM
    • Xcode: iOS VM(Simulator)

  • 돈내고 편하게 하려면, (그냥 서비스 이용하기) SauceLabs

    • 브라우저 스택과 유사
    • 셀레니움이나 remote test 환경 지원이 좋습니다.
    • 멀티 브라우저에서 테스트를 자동화 시킬 수 있습니다. 서비스를 사용해서요.
    • naver에서 직접 사용할 수 있을지 고민중인 서비스임. Browser Stack
    • 웹 베이스 가상 머신 테스트(설치없이)

[FRONT-END PACKAGING MANAGER] 프론트엔드 패키징 매니저, bower 기존의 jquery를 받으려면 jquery사이트를 들어가서 봐야 했습니다. 이제 커맨드 만드로 간단히 받아올 수 있습니다. command 유틸로 설치하는 jqeury는 , bower install jquery

  1. 성능 최적화 조그만 그리고(draw), 조금만 연산하기 Repaint/ Reflow 최소화 리소스 로컬 캐싱 활용(Local Storage) UI 인터페이스 응답성 최대한 보장 빌드를 이용한 파일 크기 최적화

Published 10 Oct 2019

KingsoKingso
각자의 방식대로