김민태 [프론트엔드 아카데미] 2 -(3)

모던 자바스크립트란?

: ES2015부터 모던 자바스크립트로 지칭

급변한 프론트엔드 개발 환경

개발 환경이 급변한 대표적인 이유

• nodejs와 npm으로 이루어지는 생태계 변화
• 제공되는 도구와 도구를 이용한 환경의 변화

현재 프론트엔드 개발 환경은 복잡하다?

• 핵심적인 원인?
  => 웹앱의 규모가 굉장히 커지고 복잡해짐
  => HTML을 조작하기 위한 정도의 가벼운 역할로 시작된 js는 모듈이 없었음
  => ES2015부터 탑재된 모듈로 인해 복잡해진 개발 환경

모듈

: 하나의 어플리케이션을 만드는 데 있어서 여러 개의 파일을 가지고 만들 수 있어야 한다고 할 떄 필요한 스펙

• 파일과 파일 간, 특정 파일의 어떤 기능을 사용하기 위해 불러들여서 쓸 수 있는 기능
• js는 ES2015부터 모듈 제공(임포트, 익스포트)

브라우저 호환성

• 임포트와 익스포트를 그대로 사용하기 어려움
  • 브라우저 호환성 이슈
  • 최신 문법을 사용하는 것이 효율적

번들러

• 모듈 스펙을 이용한 js 코드들을 하나의 파일로 만들어 주는 소프트웨어
  => "번들링"
  => 모듈 스펙을 사용 가능케 함
  => HTML 운영을 더욱 효율적으로 가능
• 기능
  • 이미지 최적화 기능
  • 필요없는 코드 제거
  • 보안(어글리파이: 코드를 못생기게 만드는 것)
    => 번들러가 복잡해짐
• 트랜스 파일링 기능(중요!)
  : 인간이 이해할 수 있는 프로그래밍 언어를 기계어로 바꾸는 작업
  = js를 제외한 다양한 언어(JAVA, C언어 등)를 js로 변환시키는 작업
  => 최신 버전의 문법을 하위 버전으로 변환
  => 트랜스 파일러 개발 => Babel
  => 타입스크립트도 트랜스 파일러의 한 종류