자바스크립트란? 개요

1. html 마크업 랭귀지 (언어)

2. css 스타일 시트

 

3. 자바스크립트

동작을 구현하는 프로그래밍 언어

언어 읽기 쓰기 

단어 3-4천개 응용필요..(css 15-20배)

그중에 웹 ui 개발에 필요한것 익히기

프론드엔드용

 

4. 자바

백엔드용 완전히 다름

 

---

 

ES란? 자바스크립트의 초창기 이름 - 에크마 스트립트 (ES) > 현재 자바이름으로 통용

자바는 대부분 제작가능, 브라우저 기반으로 구현된다.

멀티플래폼 맥,os,모바일 등등 인터넷을 통해 모든 환경에 다 쓰일 수 있다. 

 

ES5(2009년)
- 레거시(예전사이트 5-6년전) 프로젝트에서 대부분 사용
- 일반사이트, 관공서, 대기업에서 여전히 사용

(우리나라는 익스 맞추는것이 기본이였기 때문에 ES6 를 사용을 잘 안함, 현재까지 ES5 사용)

---

ES6(2015년)
- 많은 메서드가 추가되고, let, const 변수등 이전버전에 비해 많은 내용이 개선됨
- 클래스(모듈) 문법이 추가됨
- IE11에서 지원하지않는 문법이 많음
- ES6 사용조건
-- 프로젝트구성원(서버개발자, 프론트개발자, 퍼블리셔)들 모두 ES6 스펙을 이해해야함
-- 신규 프로젝트
-- 프론트엔드개발도구 활용(babel(트랜스파일러) 사용하여 es5로 변환,
   webpack(모듈번들러) 사용하여 모듈(js파일)을 번들링하여 한파일로 묶어줌)
- 자바스크립트관련 레퍼런스가 모두 ES6로 바뀌고 있음

(새로 추가된 리액트 등등 ES6만 지원하는 경우가 많아서 ES5/6 둘다사용)

---

변수선언 방식이 다름 - ES5 : var ES6 : let, const 으로 변수선언 단어가 다르다

아시아권에선 익스를 다루기 때문에 ES5/6 둘다 알아야한다.

---

ES7, ES8, ES9(ES next)
- 1년단위로 신규스펙이 추가되고있음

 

---

그럼 자바스크립트로 뭘 할 수 있나?

애니메이션(css같이) 마우스 따라다니는것.. 오늘하루 보지않기 창.. 등등 여러가지 동작들

자바스크립트로 구현가능한것들
- UI개발(메뉴동작처리) + 제이쿼리 라이브러리 사용
- Canvas 프로그래밍을 통한 인터렉션 2D 애니메이션 구현 (게임화면같은, 일반적인 웹사이트는 사용안함)
- webgl 기술을 이용한 3D VR 구현
- 구글 인공지능 플랫폼으로 인공지능개발 + 파이썬
- node.js(자바스크립트 기반의 백엔드 플랫폼) 사용한 백엔드 데이터처리

  자바보단 백엔드를 빠르게 개발가능 
- 일렉트론(MS 플랫폼) 활용한 응용프로그램(pc설치형)개발

  (포토샵 처럼 설치 vs코드가 node와 일렉트론으로 응용개발됨)
- 사물인터넷(IOT) 플랫폼에서 화면단 처리

 

---

UI개발자 (퍼블리셔)
- html, css + 자바스크립트(es5) + 제이쿼리 + [Canvas 프로그래밍(쌤 비추천) 을 이용하여 UI동작, 2d, 3d애니메이션]
- 프론트엔드기술(리액트 ,뷰)을 사용하지않는 모든 웹사이트 UI개발

 

ict 정보개발 어플개발 회사 리액트,뷰사용 = 네(이버) 카(카오) 라(인) 쿠(팡) 배(민) 토(스)

 

---

프론트엔드개발자
- html, css + 자바스크립트(es6이상) + [제이쿼리] + 화면단에서 데이터조작
- React, Vue 프레임웍(모듈방식개발) + Next, Nuxt(SSR방식 프레임웍) + Git, Github 버전관리
- Webpack(모듈번들러) + Babel(트랜스파일러)
- Node.js, Mysql, MongoDB를 통한 백엔드 개발방식 이해
- 프론트엔드기술을 사용하는 웹사이트 또는 웹앱의 UI개발