[JavaScript] JS(자바스크립트)란?

💻  JavaScript (자바스크립트)

• 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어
• 사용자 인터렉션에 의해 반응하개 만들어 주는 것
• 페이지 전환, 화면 영역 지정, 마우스 입력, 키보드 입력 등 반응할 수 있도록 만들어주는 것
• 브라우저 안에서 동작하는 프로그래밍 언
• 표준 웹 기술
• 동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어

💻 JavaScript 특징

• 모든 웹 브라우저에서 작동
• 웹 브라우저에서 실행 결과를 즉시 확인 가능
• 풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램 만들 수 있음
• 다양한 자바스크립트 공개 API 사용 가능
• 다양한 라이브러리와 프레임워크 사용 가능

 

💻 자바스크립트 실행

• 크롬에서 F12 또는 오른쪽 버튼을 눌러 검사 탭 들어가기

• console 선택하면 자바스크립트를 사용해 볼 수 있는 탭 나옴

• console.log('hi');를 작성하면 결과가 나옴 

💻  JavaScript 사용 용도

• 브라우저는 사용자 상호 작용에 응답해서 웹 페이지의 콘텐츠 레이아웃 변경 가능
• 라이브러리, 프레임워크 및 프로그래밍 사례를 구축해서 웹 브라우저 외부에서 사용하기 시작
• 클라이언트 측 및 서버 측 개발 모두 JavaScript 사용 가능

💻  JavaScript 작동 원리

• JavaScript 엔진

- JavaScript 코드 실행하는 컴퓨터 프로그램

- JIT(Just-in-Time) 또는 런타임 컴파일 사용하여 성능 향상

• 클라이언트 측 JavaScript

-  JavaScript가 웹 브라우저에서 작동하는 방식 

- 웹 애플리케이션 개발자는 마우스 클릭 또는 마우스 호버와 같은 다양한 이벤트와 관련된 여러 함수를 사용하여 JavaScript 코드를 작성

 

- 클라이언트 측 JavaScript가 작동하는 방식 개요

1. 웹 페이지 방문 시 브라우저와 웹 페이지 로드

2. 로드하는 동안, 브라우저는 버튼, 레이블, 드롭다운 박스와 같은 페이지 및 모든 요소를 문서 객체 요소(DOM)이라는 데이터 구조로 변환

3. 브라우저의 JavaScript 엔진은 JavaScript 코드를 바이트코드로 변환 / JavaScript 구문과 기계 사이의 중개자

4. 버튼에 대한 마우스 클릭과 같은 다양한 이벤트는 연결된 JavaScript 코드 블록의 실행으로 트리거 / 바이트 코드 해석하여 문서 객체 모델 변경

5. 브라우저에 문석 객체 모델 표시

• 서버 측 JavaScript

- 백엔드 서버 로직에서 코딩 언어를 사용하는 것을 의미

- JavaScript 엔진은 서버에 직접 위치

- JavaScript 함수는 데이터베이스를 엑세스하고, 다양한 논리 작업을 수행하고, 서버의 운영 체제에 의해 트리거된 다양한 이벤트에 응답 가능

- 요구 사항, 엑세스 권한 및 웹 사이트의 정보 요청에 따라 웹 사이트 응답을 쉽게 사용자가 지정 가능

• 클라이언트 측 및 서버 측 비교 

- 동적 동작은 필요에 따라 새 콘텐츠를 생성하기 위해 웹 페이지 화면을 업데이트하는 기능

- 차이점은 새 콘텐츠를 생성하는 방식에 있습니다

- 서버 측 코드는 애플리케이션 로직 사용 및 데이터베이스 데이터 수정을 통해 새 콘텐츠를 동적으로 생성

- 클라이언트 측  JavaScript는 사용자 인터페이스 로직 사용 및 클라이언트 상의 기존 웹 페이지 콘텐츠 수정을 통해 브라우저 내부에서 새 콘텐츠를 동적으로 생성

- 코드가 엑세스할 수 있는 리소스에 차이

- 클라이언트 측에서는 브라우저는 JavaScript의 런타임 환경을 제어하고 코드는 브라우저에서 엑세스를 허용한 리소스에만 엑세스 가능

-  서버 측 함수는 필요에 따라 서버 시스템의 모든 리소스에 엑세스 가능

💻 JavaScript 라이브러리

- 웹 개발자가 표준 JavaScript 함수를 실행하기 위해 재사용할 수 있는 미리 작성된 코드 조각의 모음

- 라이브러리 코드는 필요에 따라 나머지 프로젝트 코드에 연결

- 개발자의 집의 기능을 개선하는 데 사용할 수 있는 미리 제작된 가구와 같음

• 데이터 시각화

- 사용자가 관리자 패널, 대시보드 및 성능 지표에서 통게를 확인하는 데 중요

- 차트 및 지도에 데이터를 표시하는 웹 애플리케이션을 만드는 데 사용할 수 있는 내장 함수 있음

• DOM 조작

- jQuery 및 Umbrella JS와 같은 라이브러리를 사용하면 메뉴 애니메이션, 이미지 갤러리, 버튼. 라이트박스 등과 같은 표준 웹 사이트 기능을 위한 코드를 제공하므로 쉽게 웹 개발 가능

• 양식

- 모든 웹 개발은 웹 사이트 방문자가 누군가에게 연락하고, 제품을 주문하고, 이벤트에 등록하기 위한 양식 제공

- JavaScript 라이브러리는 양식 검증. 레이아웃, 조건, 변환 등 양식 기능을 단순화

• 수학 및 텍스트 함수

- 많은 웹 애플리케이션은 수학 방정식을 풀고 날짜, 시간 및 텍스트 처리

- 모든 요청을 서버로 보내는 대신에 클라이언트 측에서 일부 요청을 처리하는 것이 더 효율적

- JavaScript  라이브러리를 사용하여 이를 수행 

 

💻 JavaScript 프레임워크

- 다양한 함수가 실행되고 재사용할 수 있는 미리 작성된 코드 조각의 모음

- 모든 웹 애플리케이션의 형성 및 구성에 도움이 되는 전체적인 도구 집합

• 웹 및 모바일 애플리케이션 개발

- AngularJS는 전자 상거래 애플리케이션, 실시간 애플리케이션 및 비디오 애플리케이션과 같은 웹 애플리케이션 개발 및 테스를 단순화하는 프레임워크

- React Native는 ios 및 Android 용으로 기본 렌더링된 모바일 애플리케이션 개발을 지원하는 또 다른 프레임워크

• 반응형 웹 개발

- 모든 디바이스에서 일관된 사용자 경험을 제공

- 개발자는 Bootstrap 및 Ember.js와 같은 프레임워크 사용하여 반응형 디자인의 이점을 누리고 다양한 플랫폼에서 웹 사이트의 모양과 느낌을 쉽게 사용자 지정 가능

• 서버 측 애플리케이션 개발

- Node.js는 브라우저 외부에서 JavaScript 코드를 실행하는 서버 측 오픈 소스 JavaScript 프레임워크

- 개발자는 프레임워크를 사용하여 확장 가능하고 빠르며 안정적인 네트워크 기반의 서버 측 애플리케이션 구축

- HTTP 요청 및 데이터 스트림을 처리하고, 파일 시스템을 지원하며, 여러 백엔드 프로세스를 동시에 관리할 수 있음 

💻 JavaScript 장점

• 쉬운 학습 및 사용

- JavaScript 구문은 Java 프로그래밍 언어에서 영감을 받았으며, 배우거나 코딩하기가 쉽다

- 개발자는 클라이언트 측 스트립팅을 위해 거의 모든 웹 사이트 및 모바일 앱에서 JavaScript 사용

- 많은 주요 스트리밍 및 동영상 플랫폼이 Node.js로 코딩   

• 플랫폼 독립성 확보

- JavaScript는 모든 웹 페이지에 삽입하여 다른 여러 웹 개발 프레임워크 및 언어와 함께 사용 가능

- JavaScript는 어떤 컴퓨터에서도 실행 가능

- JavaScript를 사용하면 애플리케이션 개발 플랫폼이 독립성을 가질 수 있음 

• 서버 부하 감소

- 논리적 작업을 실행할 수 있고 클라이언트 자체에서 많은 서버 작업을 수행할 수 있으므로 JavaScript 사용하여 서버 로드 및 네트워크 정체 줄일 수 있음

• 사용자 인터페이스 개선

- 복잡한 정보를 편리하게 찾아서 처리할 수 있는 세련된 웹 사이트 개발

- 개발자는 기능 및 가독성 확장보다 효율적인 웹 사이트 사용자 상호 작용을 위해 JavaScript 적용 

• 동시성 지원

- 여러 명령어 세트를 병렬로 실행 가능

- 백엔드에서 Node.js는 동일한 양의 대역폭을 사용하지 않고도 고도로 확장된 서버 응답을 다루고 처리 가능

 

💻 JavaScript 한계

- 프로그래밍 언어는 변수를 실제 데이터 값에 대한 자리 표시자로 사용

- 데이터는 문자열, 숫자 또는 날짜와 같은 다양한 유형

- 대부분의 프로그래밍 언어에서 변수 유형을 정의 가능

- 변수 유형은 정의되면 변경되지 않음

- 문자열 변수에 숫자로 저장 불가  

• 약한 유형의 언어

- 약한 유형의 언어이므로 프로그래머가 변수 유형을 정의할 수 없음

- 변수는 런타임에 모든 데이터 유형을 저장할 수 있으며 연산은 변수 유형을 가정

- 다른 데이터 유형으로 캐스트될 수 있음

- 코딩 실수와 유형 오류로 인한 코드 버그 유발   

💻 TypeScript란?

- 구문에 유형을 추가하여 JavaScript를 개선하는 프로그래밍 언어

- 코드 편집기 도구가 코딩 오류를 초기에 포착할 수 있도록 JavaScript에 구문 추가

- JavaScript로 변환되며, JavaScript와 동일한 이점을 모두 제공

- JavaScript 프레임워크 및 라이브러리와 함깨 앱에서 실행    

💻AWS SDK for JavaScript란?

- AWS 서비스와 통합되는 무료 오픈 소스 JavaScript 라이브러리 세트

- API 개발, 상위 수준 추상화 및 다음과 같은 3가지 유형의 애플리케이션 지원

• 브라우저용 JavaScript
• 서버용 Node.js
• 모바일 개발용 React Native

- TypeScript로 전체 작성된 다음, JavaScript로 컴파일

- 이전 버전과의 호환성에 대해 걱정할 필요 없이 TypeScript의 모든 이점 얻을 수 있음 

💻 JavaScript용 AWS Amplify란?

- 프론트엔드 웹 및 모바일 개발자가 AWS에서 풀스택 애플리케이션을 빠르고 쉽게 구축할 수 있도록 하는 특수 목적용 도구 및 기능 세트

- Amplify 오픈 소스 클라이언트 라이브러리는 다양한 범주의 클라우드 기반 작업에서 사용 사례 중심의 사용하기 쉬운 인터페이스 제공

- 다양한 웹 및 모바일 프레임워크 지원

💻  <script> 태그 안에 JavaScript 작성

• <script> 태그는 HTML 문서 어디에든 사용 가능
• <script> 태그는 한 문서 안에 여러 개 사용 가능
• <script> 태그가 삽입된 위치에서 소스 실행

💻  웹 개발자 도구 창의 콘솔 도구

- 콘솔 창은 직접 자바스크립트 명령을 실행하고 결과를 확인할 수 있는 영역