JavaScript(js)

안녕하세요. 오늘은 프론트엔드를 구성하는 핵심 언어 중 하나인

 

JavaScript(js) - 자바스크립트에 대해 알아볼게요.

 

 

 

JavaScript(자바스크립트)

 

자바스크립트는 서버나 웹에서 작동하는 프로그램을 만드는 등 

 

웹의 모든 부분을 다룰 수 있는 스크립팅 언어이자 프로그래밍 언어예요.

 

 

 

자바스크립트의 활용

 

자바스크립트는 다양한 분야에서 활용되는데요.

 

첫 번째로 웹 클라이언트 애플리케이션 개발(프론트엔드) 개발 분야에서는

 

웹 사이트의 사용자 인터페이스(UI)를 제어하는 데 사용돼요.

 

메뉴, 버튼, 팝업 같은 요소를 통해 사용자가 웹 사이트를 편리하게 이용할 수 있도록 돕고,

 

별도의 설치 없이 브라우저만으로도 동작하는 웹 애플리케이션을 만들 수 있어요.

 

다음으로,  웹 서버(백엔드) 개발에서도 자바스크립트를 사용할 수 있어요.

 

Node.js를 활용해면 서버를 구축하고, 클라이언트의 요청을 처리하거나 데이터를 관리하는 등

 

서버 측 기능을 자바스크립트로 구현할 수 있어요.

 

마지막으로, 모바일 애플리케이션 개발에도 자바스크립트가 활용되는데요.

 

원래는 안드로이드에서 자바나 코틀린, iOS는 스위프트로 개발했지만,

 

React Native(리엑트)를 사용하면 자바스크립트 하나로 모든 모바일 운영체제에서 동작하는 앱을 만들 수 있어요.

 

 

 

자바스크립트 버전

ECMAScript 표준 - JS의 새로운 기능과 동작을 정의
    
ECMAScript 2015 (ES6)
    
ESNext - ES6 이후에 계속 업데이트 되고 있는 버전

 

 

 

자바스크립트의 특징 

 

자바스크립트는 몇 가지 중요한 특징을 가지고 있어요.

 

첫 번째로 동적 언어로서 코드가 실행되는 시점에 해석이 돼요.

 

두 번째로 객체 기반 언어로서 데이터를 객체로 묶고 함수와 함께 다룰 수 있어요.

 

세 번째는 이벤트 기반 프로그래밍을 지원해서

 

사용자의 클릭, 키보드 입력, 마우스 이동 등 다양한 행동에 따라 코드가 실행돼요.

 

 

 

자바스크립트의 주요 기능

 

HTML과 CSS를  동적으로 조작할 수 있는 DOM 조작과

 

서버와 비동기적으로 통신하며 데이터를 처리할 수 있는 비동기 처리(AJAX, Fetch API 등),

 

그리고 Angular, React, Vue.js 같은 프레임워크와 라이브러리를 활용해 복잡한 웹 애플리케이션을 개발할 수도 있어요.

 

 

 

간단한 자바스크립트 예제

// : 버튼을 클릭하면 새로운 이름을 입력받는 창이 생성
// , 작성된 이름으로 버튼 내의 player 명이 변경

// 현재 웹 문서에서 button 태그를 찾아 저장
// ? query(질문하다)Selector(선택자를)
const button = document.querySelector('button');

// 저장된 변수에 클릭 이벤트를 추가
// 변수명.기능();
// >> 객체의 속성/메서드 사용 .연산자 사용
// ? add(더하다)EventListener(이벤트읽기를)
button.addEventListener('click', updateName);

// updateName: 새로운 이름을 입력받고 버튼을 수정하는 기능
// 사용자 정의 함수
function updateName() {
  const name = prompt('새로운 이름을 입력해주세요. :)');
  button.textContent = `Player 1: ${name}`;
}

// ! 플러그인 설치
// - 코드 스니펫(JavaScript (ES6) code snippets) 설치
// >> JS 단축키 제공

// clg: console.log();
// >> 출력문(콘솔 창 출력)
//    - 간단한 코드, 결과값 출력 (개발자 친화적 코드)
// >> [개발자 도구(f12, ctrl + shift + i)] - [Console(콘솔)]
console.log('안녕하세요. :)');

 

 

 

여기까지 자바스크립트에 대해 알아봤는데요.

 

자바스크립트를 처음 접해봤는데 자바랑 비슷해서 복습하는 느낌이 강하게 들었어요.

 

여러분들은 어떠셨나요?