[JS] - 자바스크립트란?

웹페이지에 생동감을 불어 넣기 위해 만들어진 프로그래밍 언어
객체지향, 함수형 프로그래밍 스타일에 적합한 동적 인터프리터 언어이다.

• 자바스크립트로 작성된 프로그램 ➜ Script. <script> </script>
• 웹페이지를 로드할때 스크립트가 자동으로 실행
• 컴파일 없이 문자 형태로 작성/실행 가능
• 웹브라우저 뿐만 아니라 서버에서도 실행 가능
• JS는 인터프리터언어 이다. 즉, 프로그래밍 언어의 소스 코드를 바로 실행 한다.

01. JS 엔진

1. 클라이언트 JS - [브라우저에서 작동하는 방식]

웹브라우저 자체에 JS 엔진이 내장 되어있음.

1. 페이지 로드➜
2. 브라우저가 버튼/레이블 등 요소를 DOM이라는 데이터 구조로 변환 ➜
3. JS엔진이 JS코드를 Bytecode(이진 표현법)로 변환( JS - 기계 중개자 역할) ➜ EventListener를 JS 코드 블록의 실행을 트리거함 ➜
4. 엔진이 Bytecode를 해석해 DOM을 변경 ➜
5. 브라우저에 DOM을 뿌려줌

2. 서버측 JS - [서버에서 작동하는 방식]

• JS는 백엔드 서버 로직에서 코딩 언어를 사용하는것을 의미.
• JS는 서버에 직접 위치
• JS 함수는 DB에 액세서, 로직 수행, 트리거된 이벤트를 응답할 수 있음.
• 이점 - 요구 사항 / 액세서 권한 및 웹 사이트 정보 요청에 따라 웹을 쉽게 사용자 지정 가능.

3. 클라이언트 서버 차이

가장 큰 차이는 새 콘텐츠를 생성하는 방식

차이점	서버	클라이언트
콘텐츠 생성 방식	로직 사용, DB데이터 수정을 통한 콘텐츠 동적 생성	UI 로직 사용 및 기존 웹 콘텐츠 수정을 통해 내부에서 콘텐츠 동적 생성
코드 액세스	필요에 따라 서버 시스템의 모든 리소스에 액세스 가능	JS 런타임 환경을 제어함. 코드는 브라우저가 허용한 리소스에서만 사용 가능. (~요소를 클릭하지 않으면 콘텐츠 사용 불가!)

02. JS 라이브러리

데이터 시각화, DOM 조작, 레이아웃, 함수 등을 사용할 수 있음

03. JS Framework

함수가 실행되고 재사용 가능 하게 미리 작성된 코드 조각 모음. 즉, 청사진!

• 웹 / 앱 Application 개발
• 반응형 웹 개발
• 서버측 애플리 케이션 개발

04. HTML / CSS에서의 JS

• HTML 및 CSS는 정적 콘텐츠를 조작 할 수 있음. 반면 클라이언트 JS코드와 같이 사용하면 동적으로 조작 가능.
• HTML 및 CSS와 완전한 통합 가능

05. JS 사용 이점

• 사용
  • 로직을 짜기 쉽다.
  • 개발자는 클라이언트 스크립팅을 위해 모든 웹/앱에서 JS를 사용
  • 주요 스트리밍 및 동영상 플랫폼이 Node.js로 코딩되어있음
• 독립성 확보
  • 여러 웹 개발 Framework 및 언어와 함께 사용 가능
• 서버 부화 감소
  • 클라이언트 자체에서 많은 서버 작업 수행 가능
  • 서버 로드 및 네트워크 정체를 줄일 수 있음
• UI 개선

06. JS 사용 단점

• JS는 약한 유형(loosely typed)의 동적 언어 이므로 타입 추론 불가능.
  • 0 == “0” true
  • 0 == [] true
  • “0” == [] false
  • 9 + “1” “91”
  • 91 - “1” 90

07. TypeScript 란

• JS를 개선하는 프로그래밍 언어.
• 코드 Editor가 오류를 미리 포착할 수 있도록 JS 구문에 추가
• TypeScript 코드는 JS로 변환되고, JS이점을 모두 제공
• JS Framework 및 Library와 함께 앱에서 실행됨

 

---

읽어주셔서 감사합니다🤟