JavaScript란 무엇인가요?
JavaScript는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 기능은 웹사이트의 사용자 경험을 개선할 수 있습니다. 클라이언트 측 스크립팅 언어로서 JavaScript는 월드 와이드 웹의 핵심 기술 중 하나입니다. 예를 들어 인터넷 탐색 시 웹페이지에서 이미지 슬라이드쇼, 클릭하면 표시되는 드롭 다운 메뉴 또는 객체 색상의 동적 변화를 보게 된다면 이는 JavaScript의 효과를 보는 것입니다.
JavaScript는 무엇에 사용되나요?
역사적으로 웹 페이지는 책의 페이지와 유사하게 정적이었습니다. 정적 페이지는 주로 고정된 레이아웃으로 정보를 표시했으며, 현대 웹 사이트에서 기대하는 기능을 모두 수행하지는 못했습니다. JavaScript는 웹 애플리케이션을 보다 동적으로 만드는 브라우저 측 기술로 등장했습니다. JavaScript를 사용하면 브라우저는 사용자 상호 작용에 응답해서 웹 페이지의 콘텐츠 레이아웃을 변경할 수 있습니다.
언어가 성숙해짐에 따라 JavaScript 개발자는 라이브러리, 프레임워크 및 프로그래밍 사례를 구축해서 웹 브라우저 외부에서 사용하기 시작했습니다. 오늘날에는 클라이언트 측 및 서버 측 개발 모두에 JavaScript를 사용할 수 있습니다. 다음 하위 섹션에서 일반 사용 사례 일부를 제공합니다.
역사적으로 웹 페이지는 책의 페이지와 유사하게 정적이었습니다. 정적 페이지는 주로 고정된 레이아웃으로 정보를 표시했으며, 현대 웹 사이트에서 기대하는 기능을 모두 수행하지는 못했습니다. JavaScript는 웹 애플리케이션을 보다 동적으로 만드는 브라우저 측 기술로 등장했습니다. JavaScript를 사용하면 브라우저는 사용자 상호 작용에 응답해서 웹 페이지의 콘텐츠 레이아웃을 변경할 수 있습니다.
언어가 성숙해짐에 따라 JavaScript 개발자는 라이브러리, 프레임워크 및 프로그래밍 사례를 구축해서 웹 브라우저 외부에서 사용하기 시작했습니다. 오늘날에는 클라이언트 측 및 서버 측 개발 모두에 JavaScript를 사용할 수 있습니다. 다음 하위 섹션에서 일반 사용 사례 일부를 제공합니다.
JavaScript는 어떻게 작동하나요?
모든 프로그래밍 언어는 영어와 유사한 구문을 기계어로 변환하여 운영 체제가 이 기계어를 실행하는 방식으로 작동합니다. JavaScript는 스크립팅 언어 또는 인터프리터 언어로 크게 분류됩니다. JavaScript 코드는 JavaScript 엔진에 의해 해석(기본 기계어로 직접 변환)됩니다. 다른 프로그래밍 언어를 사용하는 경우 컴파일러가 전체 코드를 별도의 단계에서 기계어로 컴파일합니다. 따라서 모든 스크립팅 언어는 프로그래밍 언어이지만 모든 프로그래밍 언어가 스크립팅 언어는 아닙니다.
Javascript 엔진
JavaScript 엔진은 JavaScript 코드를 실행하는 컴퓨터 프로그램입니다. 최초의 JavaScript 엔진은 단순한 인터프리터였지만, 모든 현대적 엔진은 JIT(Just-in-time) 또는 런타임 컴파일을 사용하여 성능을 향상시킵니다.
클라이언트 측 JavaScript
클라이언트 측 JavaScript는 JavaScript가 브라우저에서 작동하는 방식을 나타냅니다. 이 경우 JavaScript 엔진은 브라우저 코드 내부에 있습니다. 모든 주요 웹 브라우저에는 자체 JavaScript 엔진이 내장되어 있습니다.
웹 애플리케이션 개발자는 마우스 클릭 또는 마우스 호버와 같은 다양한 이벤트와 관련된 여러 함수를 사용하여 JavaScript 코드를 작성합니다. 이러한 함수가 HTML 및 CSS를 변경합니다.
다음은 클라이언트 측 JavaScript가 작동하는 방식에 대한 개요입니다.
1. 웹 페이지 방문 시 브라우저가 웹 페이지를 로드합니다.
2. 로드하는 동안, 브라우저는 버튼, 레이블, 드롭다운 박스와 같은 페이지 및 모든 요소를 문서 객체 모델(DOM)이라는 데이터 구조로 변환합니다.
3. 브라우저의 JavaScript 엔진은 JavaScript 코드를 바이트코드로 변환합니다. 이 코드는 JavaScript 구문과 기계 사이의 중개자입니다.
4. 버튼에 대한 마우스 클릭과 같은 다양한 이벤트는 연결된 JavaScript 코드 블록의 실행을 트리거합니다. 그런 다음 엔진은 바이트코드를 해석해서 DOM을 변경합니다.
5. 브라우저에 새 DOM이 표시됩니다.
서버 측 JavaScript
서버 측 JavaScript는 백엔드 서버 로직에서 코딩 언어를 사용하는 것을 의미합니다. 이 경우 JavaScript 엔진은 서버에 직접 위치합니다. 서버 측 JavaScript 함수는 데이터베이스에 액세스하고, 다양한 논리 작업을 수행하고, 서버의 운영 체제에 의해 트리거된 다양한 이벤트에 응답할 수 있습니다. 서버 측 스크립팅의 주요 이점은 요구 사항, 액세스 권한 및 웹 사이트의 정보 요청에 따라 웹 사이트 응답을 쉽게 사용자 지정할 수 있다는 것입니다.
클라이언트 측 및 서버 측 비교
dynamic이라는 단어는 클라이언트 측과 서버 측 자바스크립트를 모두 설명합니다. 동적 동작은 필요에 따라 새 콘텐츠를 생성하기 위해 웹 페이지 화면을 업데이트하는 기능입니다. 클라이언트 측 JavaScript와 서버 측 JavaScript의 차이점은 새 콘텐츠를 생성하는 방식에 있습니다. 서버 측 코드는 애플리케이션 로직 사용 및 데이터베이스 데이터 수정을 통해 새 콘텐츠를 동적으로 생성합니다. 반면 클라이언트 측 JavaScript는 사용자 인터페이스 로직 사용 및 클라이언트 상의 기존 웹 페이지 콘텐츠 수정을 통해 브라우저 내부에서 새 콘텐츠를 동적으로 생성합니다. 두 컨텍스트에서 의미는 약간 다르지만 서로 관련이 있으며 두 접근 방식은 함께 작동하여 사용자 경험을 향상시킵니다.
동적 기능의 구현 외에 두 JavaScript 용도의 또 다른 차이점은 코드가 액세스할 수 있는 리소스에 있습니다. 클라이언트 측에서, 브라우저는 JavaScript의 런타임 환경을 제어합니다. 코드는 브라우저에서 액세스를 허용한 리소스에만 액세스할 수 있습니다. 예를 들어, 다운로드 버튼을 클릭하지 않으면 하드 디스크에 콘텐츠를 쓸 수 없습니다. 반면에 서버 측 함수는 필요에 따라 서버 시스템의 모든 리소스에 액세스할 수 있습니다.
JavaScript 라이브러리란 무엇인가요?
JavaScript 라이브러리는 웹 개발자가 표준 JavaScript 함수를 실행하기 위해 재사용할 수 있는 미리 작성된 코드 조각의 모음입니다. JavaScript 라이브러리 코드는 필요에 따라 나머지 프로젝트 코드에 연결됩니다. JavaScript 애플리케이션 코드를 집이라고 가정한다면, JavaScript 라이브러리는 개발자가 집의 기능을 개선하는 데 사용할 수 있는 미리 제작된 가구와 같습니다.
다음은 JavaScript 라이브러리의 몇 가지 일반적인 용도입니다.
데이터 시각화
데이터 시각화는 예를 들어 사용자가 관리자 패널, 대시보드 및 성능 지표에서 통계를 확인하는 데 중요합니다.
Chart.js, ApexCharts 및 Algolia Places와 같은 라이브러리에는 차트 및 지도에 데이터를 표시하는 웹 애플리케이션을 만드는 데 사용할 수 있는 내장 함수가 있습니다.
DOM 조작
jQuery 및 Umbrella JS와 같은 라이브러리를 사용하면 메뉴 애니메이션, 이미지 갤러리, 버튼, 라이트박스 등과 같은 표준 웹 사이트 기능을 위한 코드를 제공하므로 쉽게 웹 개발을 할 수 있습니다.
양식
수학 및 텍스트 함수
많은 웹 애플리케이션은 수학 방정식을 풀고 날짜, 시간 및 텍스트를 처리해야 합니다. 이러한 모든 요청을 서버로 보내는 대신 클라이언트 측에서 일부 요청을 처리하는 것이 더 효율적입니다. 웹 개발자는 Date.js, Sylvester 및 JavaScript URL 라이브러리와 같은 JavaScript 라이브러리를 사용하여 이를 수행합니다.
JavaScript 프레임워크란 무엇인가요?
JavaScript 라이브러리와 마찬가지로 JavaScript 프레임워크는 다양한 함수가 실행되고 재사용할 수 있는 미리 작성된 코드 조각의 모음입니다. 그러나 JavaScript 라이브러리가 온디맨드 용도의 전문 도구인 반면, JavaScript 프레임워크는 모든 웹 애플리케이션의 형성 및 구성에 도움이 되는 전체적인 도구 집합입니다. JavaScript 애플리케이션 코드를 집으로 가정한다면 JavaScript 프레임워크는 집을 짓는 데 사용되는 청사진입니다.
다음은 JavaScript 프레임워크에 대한 몇 가지 사용 사례 예시입니다.
웹 및 모바일 애플리케이션 개발
AngularJS는 전자 상거래 애플리케이션, 실시간 애플리케이션 및 비디오 애플리케이션과 같은 웹 애플리케이션의 개발 및 테스트를 단순화하는 프레임워크입니다. React Native는 iOS 및 Android용으로 기본 렌더링된 모바일 애플리케이션 개발을 지원하는 또 다른 프레임워크입니다.
반응형 웹 개발
반응형 웹 사이트는 모든 디바이스에서 일관된 사용자 경험을 제공합니다. 예를 들어, 모바일 및 태블릿 화면은 데스크톱 및 노트북 화면보다 작습니다. 더 작은 화면에서도 웹 사이트 화면이 잘리지 않고 데이터가 정확하게 표시되기를 원할 것입니다. 개발자는 Bootstrap 및 Ember.js와 같은 프레임워크를 사용하여 반응형 디자인의 이점을 누리고 다양한 플랫폼에서 웹 사이트의 모양과 느낌을 쉽게 사용자 지정할 수 있습니다.
서버 측 애플리케이션 개발
Node.js는 브라우저 외부에서 JavaScript 코드를 실행하는 서버 측 오픈 소스 JavaScript 프레임워크입니다. 개발자는 이 프레임워크를 사용하여 확장 가능하고 빠르며 안정적인 네트워크 기반의 서버 측 애플리케이션을 구축합니다. HTTP 요청 및 데이터 스트림을 처리하고, 파일 시스템을 지원하며, 여러 백엔드 프로세스를 동시에 관리할 수 있습니다.
HTML과 CSS란 무엇인가요?
Hypertext Markup Language(HTML) 및 Cascading Style Sheets(CSS)는 개발자가 프론트엔드 개발에 사용하는 2가지 프로그래밍 언어입니다. HTML은 대부분의 웹 페이지에 사용되는 기본 빌딩 블록입니다. 모든 단락, 섹션, 이미지, 제목 및 텍스트는 HTML로 작성됩니다. 콘텐츠는 HTML에 작성된 순서대로 웹 사이트에 표시됩니다.
CSS는 HTML 콘텐츠에 스타일을 적용하는 데 사용하는 스타일 규칙 언어입니다. 배경색, 글꼴, 열 및 테두리와 같은 웹 사이트 요소를 디자인하는 데 사용할 수 있습니다.
HTML 및 CSS 및 JavaScript
이 3가지 언어가 모두 함께 작동하여 모든 사이트에서 긍정적인 사용자 경험을 제공합니다. HTML과 CSS는 주로 정적 콘텐츠를 조작할 수 있지만, 클라이언트 측 JavaScript 코드와 통합하면 콘텐츠를 동적으로 업데이트할 수 있습니다.
예를 들어 HTML 페이지의 스크립트 코드 블록은 JavaScript를 포함할 수 있습니다. 이런 경우, 브라우저는 HTML 페이지가 브라우저에 로드될 때 HTML과 내부 JavaScript 코드를 모두 처리할 수 있습니다.JavaScript를 사용하면 어떤 이점이 있나요?
쉬운 학습 및 사용
플랫폼 독립성 확보
다른 프로그래밍 언어와 달리, JavaScript는 모든 웹 페이지에 삽입하여 다른 여러 웹 개발 프레임워크 및 언어와 함께 사용할 수 있습니다. 작성된 JavaScript 코드는 어떤 컴퓨터에서도 실행될 수 있습니다. 따라서 JavaScript를 사용하면 애플리케이션 개발 플랫폼이 독립성을 가질 수 있습니다.
서버 부하 감소
JavaScript는 논리적 작업을 실행할 수 있고 클라이언트 자체에서 많은 서버 작업을 수행할 수 있으므로 JavaScript를 사용하여 서버 로드 및 네트워크 정체를 줄일 수 있습니다. 예를 들어, 등록 양식을 작성하는 프로세스를 살펴보겠습니다. JavaScript는 휴대폰 필드에 10자리 숫자가 입력되었는지를 빠르게 확인합니다. 이러한 요청이 서버로 전송되는 경우에는 오류가 발생할 때마다 페이지가 다시 로드되어 등록 프로세스가 매우 느리고 지루해집니다.
사용자 인터페이스 개선
JavaScript는 복잡한 정보를 편리하게 찾아서 처리할 수 있는 세련된 웹 사이트를 만듭니다. 개발자는 기능 및 가독성 확장과 보다 효율적인 웹 사이트 사용자 상호 작용을 위해 JavaScript를 적용합니다.
동시성 지원
JavaScript는 여러 명령어 세트를 병렬로 실행할 수 있습니다. 백엔드에서 Node.js는 동일한 양의 대역폭을 사용하지 않고도 고도로 확장된 서버 응답을 다루고 처리할 수 있습니다.
.42131cb0342fa57ce637ca4254eb58ca8fb48845.4e0329334881accb76ed8d8f1dc786bf879b16c6.png)
JavaScript의 한계는 무엇인가요?
프로그래밍 언어는 변수를 실제 데이터 값에 대한 자리 표시자로 사용합니다. 예를 들어, 개발자는 코드 블록에서 x=5 및 y=x+1을 작성할 수 있습니다. 코드가 실행되면 컴퓨터는 자동으로 x와 y를 각각 5와 6으로 변경하여 기능을 수행합니다. 데이터는 문자열, 숫자 또는 날짜와 같은 다양한 유형이 될 수 있습니다. 그렇기 때문에 대부분의 프로그래밍 언어에서 변수 유형을 정의할 수 있습니다. 변수 유형은 일단 정의되면 변경되지 않습니다. 예를 들면 문자열 변수에 숫자를 저장할 수 없습니다.
예를 들어 프로그램에 x와 y가 숫자라고 정의하고 x+y 연산을 수행하면, 컴퓨터는 이를 두 개의 숫자로 간주하고 두 숫자의 덧셈을 수행합니다. 반면에 x와 y를 문자열로 정의하면, + 연산자는 두 문자열을 함께 추가하여 더 긴 단어를 만듭니다.
약한 유형의 언어
JavaScript는 약한 유형의 언어이므로 프로그래머가 변수 유형을 정의할 수 없습니다. 변수는 런타임에 모든 데이터 유형을 저장할 수 있으며 연산은 변수 유형을 가정합니다. 결과는 다른 데이터 유형으로 캐스트될 수도 있습니다. 예를 들어, 연산은 결과를 숫자 5 대신 문자열 "5"를 반환할 수 있습니다. 이는 코딩 실수와 유형 오류로 인한 코드 버그를 유발할 수 있습니다.
TypeScript란 무엇인가요?
TypeScript는 구문에 유형을 추가하여 JavaScript를 개선하는 프로그래밍 언어입니다. TypeScript는 코드 편집기 도구가 코딩 오류를 조기에 포착할 수 있도록 JavaScript에 구문을 추가합니다. 동시에 TypeScript 코드는 JavaScript로 변환되며, JavaScript와 동일한 이점을 모두 제공합니다. 또한 JavaScript 프레임워크 및 라이브러리와 함께 앱에서 실행됩니다.
AWS SDK for JavaScript란 무엇인가요?
AWS SDK for JavaScript는 AWS 서비스와 통합되는 무료 오픈 소스 JavaScript 라이브러리 세트입니다. API 개발, 상위 수준 추상화 및 다음과 같은 3가지 유형의 애플리케이션을 지원합니다.
- 브라우저용 JavaScript
- 서버용 Node.js
- 모바일 개발용 React Native
AWS SDK for JavaScript는 TypeScript로 전체 작성된 다음, JavaScript로 컴파일됩니다. 따라서 이전 버전과의 호환성에 대해 걱정할 필요 없이 TypeScript의 모든 이점을 얻을 수 있습니다.
코드 예제와 마이그레이션 안내서를 읽거나 GitHub에서 직접 설치하여 Java용 AWS SDK를 시작할 수 있습니다.
JavaScript용 AWS Amplify란 무엇인가요?
AWS Amplify는 프론트엔드 웹 및 모바일 개발자가 AWS에서 풀스택 애플리케이션을 빠르고 쉽게 구축할 수 있도록 하는 특수 목적용 도구 및 기능 세트입니다. Amplify 오픈 소스 클라이언트 라이브러리는 다양한 범주의 클라우드 기반 작업에서 사용 사례 중심의 사용하기 쉬운 인터페이스를 제공합니다. Amplify 자바스크립트 라이브러리는 리액트, 리액트 네이티브, 앵귤러, 이오닉, Vue.js 등 다양한 웹 및 모바일 프레임워크에서 지원됩니다. Amplify JavaScript용 시작하기 가이드를 완료하여 시작할 수 있습니다.