[Javascript] 자바스크립트 특징

[Javascript] 자바스크립트 특징Web, Front-end2024. 2. 1. 00:00@junyeokk

Table of Contents

왜 중요한가

웹 페이지를 생동감 있고, 반응적으로 만드는 데 필수적인 언어다. 사용자와의 상호작용을 원활하고 매력적으로 처리하여 웹 경험을 향상시킨다.

브라우저 환경뿐만 아니라 Node.js와 같은 서버 사이드 환경에서도 높은 호환성을 보여주며, 이를 통해 플랫폼에 구애받지 않고 다양한 분야에서 사용될 수 있다. 이는 자바스크립트가 단순한 클라이언트 사이드 언어를 넘어 서버 사이드 애플리케이션 개발에도 활용될 수 있음을 의미한다.

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

V8, SpiderMonkey와 같은 다양한 자바스크립트 엔진을 통해 거의 모든 주요 브라우저에서 효율적으로 작동한다. 이러한 엔진들은 자바스크립트 코드를 최적화하고, 빠른 실행을 가능하게 하여 개발자와 사용자 모두에게 이점을 제공한다.

메모리나 CPU 조작을 제한함으로써, 개발자의 실수로 인한 버그를 줄이고 전체 프로그램의 안정성과 신뢰성을 높인다. 이는 특히 보안이 중요한 웹 애플리케이션 개발에 있어 중요한 요소다.

HTML과 CSS를 자유롭게 조작하여, 사용자의 모든 행동에 대해 신속하고 유연하게 반응할 수 있다. 이는 웹페이지와의 상호작용을 더욱 풍부하고 생동감 있게 만들어, 최종 사용자에게 만족스러운 웹 경험을 제공한다.

제약사항

동일 출처 정책(Same-Origin Policy)

서로 다른 출처(origin)의 데이터에 대한 접근이 제한된다는 것은, 웹 보안의 핵심 원칙인 '동일 출처 정책(Same-Origin Policy)'을 의미한다.

이 정책은 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용하는 것을 제한한다. 여기서 '출처'는 프로토콜, 도메인(또는 호스트), 그리고 포트를 모두 포함하는 개념이다.

이 정책은 웹 사이트 간 정보를 보호하고, 악의적인 스크립트가 사용자 데이터에 접근하는 것을 방지하여 보안을 강화한다.

하드웨어 디바이스 접근 제한

카메라나 마이크와 같은 하드웨어 디바이스에 접근할 때는 사용자의 명시적인 동의가 필요하다.

이는 사용자의 프라이버시를 보호하기 위한 조치로, 웹 애플리케이션은 사용자의 동의 없이 이러한 디바이스에 접근할 수 없다.

사용자가 명시적으로 권한을 부여한 경우에만, 자바스크립트를 통해 이러한 디바이스를 사용할 수 있다. 이러한 접근 제한은 사용자의 개인 정보 보호와 안전을 강화하는 데 기여한다.

파일 시스템 접근 제한

자바스크립트는 브라우저 내에서 사용자의 파일 시스템에 직접 접근할 수 없어, 사용자의 데이터가 악의적인 웹 페이지의 접근으로부터 안전하게 보호된다.

예외적으로, <input type="file">과 같은 파일 입력 필드를 통해 사용자가 직접 선택한 파일들에 대해서는 스크립트에서 읽기 및 처리가 가능하다. 이는 사용자의 명시적인 행동을 통해서만 파일 접근이 허용되는 것을 의미하며, 사용자의 데이터 보호를 위한 중요한 보안 조치다.

<!DOCTYPE html>
<html>
<head>
    <title>File Reader Example</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="readButton">파일 읽기</button>
    <p id="fileContent"></p>

    <script src="script.js"></script>
</body>
</html>

document.getElementById('readButton').addEventListener('click', function() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
        document.getElementById('fileContent').textContent = e.target.result;
    };

    reader.readAsText(file);
});

사용자가 파일 입력 필드(<input type="file">)를 통해 파일을 선택한다.
사용자가 '파일 읽기' 버튼을 클릭하면 이벤트 리스너가 파일을 읽기 시작한다.
FileReader 객체를 사용하여 선택된 파일의 내용을 읽는다.
파일의 내용이 읽혀지면 이를 웹 페이지의 <p> 태그에 표시한다.

네트워크 요청 제한

자바스크립트에서는 보안을 위해 '동일 출처 정책(Same-Origin Policy)'을 따른다. 이 정책은 자바스크립트가 현재 페이지와 동일한 도메인에서만 HTTP 요청을 보낼 수 있도록 제한한다. 이는 웹 사이트가 사용자 몰래 다른 출처로 데이터를 전송하거나 요청을 보내는 것을 방지하며, 사용자의 보안을 강화한다.

예를 들어, example.com에서 로드된 자바스크립트는 기본적으로 another-example.com에 대한 요청을 보낼 수 없다. 이러한 제한은 악의적인 스크립트가 크로스 사이트 요청 위조(CSRF) 같은 공격을 수행하는 것을 방지한다.

그러나, 'Cross-Origin Resource Sharing(CORS)' 정책은 이러한 제약을 일부 완화한다. CORS는 웹 서버가 다른 출처의 페이지에서 자신의 리소스에 접근할 수 있도록 허용할 수 있게 한다. 서버는 HTTP 헤더에 Access-Control-Allow-Origin을 설정하여 특정 출처 또는 모든 출처(*)에서의 요청을 허용할 수 있다.

따라서, 다른 도메인의 서버가 CORS를 구현하고 적절한 헤더를 제공할 경우, 자바스크립트를 통해 이러한 출처의 리소스에 안전하게 접근할 수 있다. 이는 웹 애플리케이션에서 다양한 출처의 리소스를 통합할 수 있게 하며, 웹 개발에서의 유연성을 제공한다.

인터프리터 언어

자바스크립트는 인터프리터 언어다. 코드가 별도의 컴파일 과정 없이 실행 시점에 바로 해석되고 실행된다. 이 특성은 개발 과정을 더욱 신속하고 유연하게 만든다. 코드를 작성한 후 별도의 컴파일 단계를 거치지 않아도 되므로, 개발자는 즉시 결과를 보고 빠르게 수정할 수 있다.

이러한 인터프리터 언어의 특징은 특히 웹 개발에서 큰 장점이다. 웹 페이지나 애플리케이션의 수정 사항을 바로바로 적용하고 테스트할 수 있기 때문에, 개발 속도와 생산성을 높일 수 있다. 또한, 실시간으로 코드를 수정하고 결과를 확인할 수 있어, 초보 개발자들이 프로그래밍을 배우기에도 매우 적합하다.

프로토타입 기반의 객체지향 언어

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. 이는 전통적인 클래스 기반 언어와는 다른 접근 방식을 취한다. 자바스크립트에서는 '클래스' 대신 '프로토타입'이라는 개념을 사용하여 객체를 정의하고 상속 관계를 구현한다.

프로토타입은 객체의 템플릿으로 작용하며, 객체가 공통적으로 가질 수 있는 속성과 메서드를 정의한다. 새 객체를 생성할 때, 이 프로토타입을 기반으로 새로운 객체 인스턴스가 생성되고, 프로토타입에 정의된 속성과 메서드를 상속받는다.

프로토타입 기반의 접근 방식은 유연성, 재사용성, 메모리 효율성과 같은 장점을 가진다.

객체 기반 스크립트 언어

자바스크립트는 다양한 내장 객체와 사용자 정의 객체를 지원하는 객체 기반의 스크립트 언어다. 이는 자바스크립트가 데이터를 객체로 취급하고, 이 객체들을 통해 다양한 프로그래밍 작업을 수행할 수 있음을 의미한다.

객체는 속성(프로퍼티)과 메서드(함수)를 포함할 수 있는 독립된 개체로, 자바스크립트에서 데이터와 기능을 모듈화하고 조직화하는 데 사용된다. 예를 들어, 문자열, 숫자, 배열, 함수 등 모든 것이 객체로 표현될 수 있다.

내장 객체는 자바스크립트 언어 자체에 포함된 객체로, 개발자가 즉시 사용할 수 있다. 예를 들어, Date, Math, String, Array 등이 있으며, 이들은 날짜 및 시간 처리, 수학적 계산, 문자열 조작, 배열 관리 등에 사용된다.

사용자 정의 객체는 개발자가 자신의 필요에 맞게 생성하고 구성할 수 있다. 이를 통해 특정 데이터 구조와 관련 기능을 함께 묶어서 관리하고, 프로그램의 가독성과 유지 보수성을 높일 수 있다. 객체 지향적 접근 방식은 복잡한 데이터 구조와 알고리즘을 효율적으로 구현하고 관리할 수 있게 해준다.

동적 타입 언어

자바스크립트는 동적 타입 언어의 전형적인 예로, 변수의 타입이 선언 시가 아닌 실행 시점에 결정된다. 이는 프로그래밍에서 변수를 선언할 때 데이터 타입을 명시적으로 지정할 필요가 없음을 의미한다. 예를 들어, 정수, 문자열, 불리언, 객체 등 다양한 타입의 데이터를 동일한 변수에 할당하고 변경할 수 있다.

let example = 42;     // 처음에는 숫자로 시작
example = "Hello";    // 문자열로 변경
example = false;      // 그리고 불리언으로 변경

이러한 동적 타입 지정은 개발자에게 큰 유연성을 제공한다. 개발 과정에서 변수의 타입을 자유롭게 변경할 수 있으므로, 프로그램을 보다 동적으로 작성할 수 있다. 특히 프로토타이핑, 스크립팅 작업, 작은 프로젝트에 유용하다.

하지만 이 유연성에는 주의가 필요하다. 타입 관련 오류가 런타임에만 발견되기 때문에, 프로그램이 복잡해질수록 타입 관련 버그를 찾고 디버깅하는 데 더 많은 시간과 노력이 필요할 수 있다. 예를 들어, 변수가 예상과 다른 타입의 값으로 할당되어 예기치 않은 동작을 할 수 있다.

let number = "123";
console.log(number + 1); // "1231"이 출력되며, 예상치 못한 문자열 결합이 일어남

자바스크립트에서는 변수와 데이터 타입을 신중하게 관리하고 필요한 경우 타입 체크를 수행하여 프로그램의 안정성을 보장하는 것이 중요하다.

Single Thread 언어

기본적으로 싱글 스레드 언어다. 하나의 스레드로 모든 작업을 처리하기 때문에 작업이 순차적으로 실행된다. 이는 코드의 복잡성을 줄여주지만, 동시 처리 능력에 한계가 있다.

references

https://ko.javascript.info/intro

자바스크립트란?

ko.javascript.info

728x90

저작자표시

'Web, Front-end' 카테고리의 다른 글

[React] 컴포넌트 간 데이터 전달을 위한 props의 이해 (0)	2024.02.17
[Javascript] 웹 브라우저 환경에서의 자바스크립트 (0)	2024.02.14
JSON Server 활용하기 (0)	2023.11.03
ESLint 예시를 통해 활용하기 (0)	2023.11.03
[CSS] CSS Grid 정리 / 2. Grid Item (2)	2022.08.27

@junyeokk :: 나무보다 숲을

컴퓨터 전공 관련, 프론트엔드 개발 지식들을 공유합니다. React, Javascript를 다룰 줄 알며 요즘에는 Typescript에도 관심이 생겨 공부하고 있습니다. 서로 소통하면서 프로젝트 하는 것을 즐기며 많은 대외활동으로 개발 능력과 소프트 스킬을 다듬어나가고 있습니다.

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!