자바스크립트 기초 가이드

JavaScript 는 무엇이며, 어디에서 사용될까요? 그리고 장,단점은 무엇일까요?

 

웹사이트의 모든 페이지는 JavaScript를 사용할 가능성이 높습니다.

Google 애널리틱스, 이벤트 추적 또는 디스플레이 광고를 사용하는 경우 이미 JavaScript를 사용하고 있는 것입니다.

사용자에게 훌륭한 경험을 제공하기 위해 JavaScript를 더욱 활용해야 합니다. 그러기 위해서는 먼저 JavaScript가 무엇이며 어떤 용도로 사용되는지 알아야 합니다.

 

JavaScript는 무엇인가요?

JavaScript(JS)는 웹사이트와 애플리케이션을 동적이고 상호작용적으로 만드는 데 사용되는 컴퓨터 프로그래밍 언어입니다.

 

서버뿐만 아니라 브라우저에서 직접 실행할 수 있다는 점이 독특합니다.

 

HTML(hypertext markup language) 및 CSS(cascading style sheets )와 함께 JavaScript는 인터넷에서 가장 일반적으로 사용되는 프로그래밍 언어 중 하나입니다.

 

실제로 2023년 3월 기준 전체 웹사이트의 98.4%가 JavaScript를 사용하고 있습니다.

 

JavaScript, CSS, HTML은 함께 작동하여 대부분의 웹사이트와 온라인 애플리케이션의 사용자와 마주하는 요소를 구성합니다.

 

이러한 코딩 언어를 집(house)의 구성 요소라고 생각하면 됩니다:

 

• HTML은 집의 기초입니다. HTML은 웹사이트의 기본 레이아웃, 구조 및 콘텐츠를 제공합니다.

• CSS는 인테리어 디자인입니다. 디자인, 글꼴, 색상, 효과 및 기타 시각적 요소를 제공합니다.

• JavaScript는 전기 및 배관 시스템입니다. JS는 웹사이트에 생동감과 상호 작용을 제공합니다. 예를 들어 팝업, 애니메이션, 동영상 및 소셜 미디어 임베드, 드롭다운 메뉴 및 기타 여러 웹사이트 구성 요소는 JavaScript를 사용하여 만들어집니다.

출처 https://kimnewzealand.github.io/blog/sprint3-technical.html

 

JavaScript가 없다면 웹페이지는 대부분 정적이고 지루할 것입니다.

JavaScript는 동작과 상호작용을 추가합니다. 그뿐만 아니라 훨씬 더 많은 일을 할 수 있습니다.

 

JavaScript 역사

Brendan Eich는 1995년 넷스케이프에서 근무하면서 JavaScript를 개발했습니다.

 

넷스케이프는 월드와이드웹 초기 버전을 더욱 역동적으로 만드는 데 도움이 되는 스크립팅 언어를 개발하고자 했습니다.

개발자들이 웹 페이지에 역동성과 상호 작용을 추가할 수 있는 JavaScript의 기능을 깨달으면서 JavaScript는 빠르게 인기를 얻었습니다.

 

1996년, 넷스케이프는 정보 기술 시스템 사용의 표준화를 목표로 하는 단체인 유럽 컴퓨터 제조업체 협회(ECMA International)에 JavaScript를 제출했습니다.

 

이를 통해 JavaScript의 공식 사양인 ECMAScript 표준이 만들어졌습니다.

JavaScript의 인기가 높아지면서 라이브러리 및 프레임워크, V8(Chrome 구동)과 같은 전용 JS 엔진, 서버 측 환경의 개발이 촉진되었습니다.

 

이름은 비슷하지만 JavaScript는 Java와 완전히 다릅니다.

 

라이브러리 vs 프레임워크

 

라이브러리는 자주 사용하는 JavaScript 작업을 쉽게 구현하는 데 사용할 수 있는 미리 작성된 코드 모음입니다.

라이브러리를 사용하면 개발자가 모든 코드를 작성할 필요가 없으므로 개발 속도가 빨라집니다.

프레임워크는 라이브러리의 모음입니다.

 

라이브러리를 도구라고 생각하세요. 프레임워크는 완전히 갖춰진 도구 상자로 생각하면 됩니다.

라이브러리는 웹사이트의 특정 기능을 위한 코드를 제공할 수 있지만 프레임워크는 웹사이트 구축에 필요한 모든 코드를 제공할 수 있습니다.

 

일반적인 JavaScript 라이브러리에는 jQuery와 React가 있습니다. 일반적인 JavaScript 프레임워크에는 Vue.js, Node.js, Angular가 있습니다.

JavaScript는 어디에 사용되나요?

 

JavaScript는 동적 웹사이트, 웹 및 모바일 앱, 게임, 웹 서버, 백엔드 인프라 등을 만드는 데 사용됩니다.

다음은 JavaScript의 가장 일반적인 용도입니다.

 

웹 개발

JavaScript는 동적 상호작용형 웹사이트를 만드는 데 가장 일반적으로 사용됩니다.

개발자는 JS를 사용하여 애니메이션, 팝업 창, 검색창, 버튼, 오디오 및 비디오, 채팅 위젯 및 기타 대화형 요소를 웹페이지에 추가합니다.

 

또한 JS를 사용하여 페이지를 새로고침하지 않고도 실시간 업데이트를 제공할 수 있습니다.

예를 들어 뉴스 시세, 주식 또는 암호화폐 가격, 실시간 제품 재고 정보를 제공하는 웹사이트에서는 일반적으로 JavaScript를 사용하여 이 기능을 추가합니다.

 

구글, 페이스북, 트위터, 위키피디아 등 많은 일반 웹사이트의 프론트엔드(사용자 대면 쪽)는 거의 전적으로 JavaScript로 구축되어 있습니다.

 

웹 기반 게임과 애플리케이션

 

JavaScript는 인터넷에서 대부분의 게임과 애플리케이션을 만드는 데 사용됩니다.

JavaScript는 브라우저에서 직접 실행되기 때문에 사용자는 추가 소프트웨어를 다운로드하지 않고도 게임을 플레이하고 애플리케이션을 실행할 수 있습니다.

또한 JavaScript는 실행되는 즉시 머신 코드로 컴파일되기 때문에(저스트 인 타임 컴파일이라고 함) 간단한 기능과 프로세스를 빠르게 수행할 수 있습니다.

 

그 결과 동적이고 인터랙티브한 유틸리티를 많이 만들 수 있습니다.

C 및 C++와 같은 다른 언어는 사전 컴파일을 사용합니다. 즉, 언어가 실행되기 전에 더 간단한 기계어 코드로 컴파일됩니다.

특히 단순한 함수와 프로세스의 경우 사전 컴파일이 더 느릴 수 있습니다.

개발자는 JavaScript를 사용하여 간단한 아케이드 스타일의 게임부터 강력한 멀티플레이어 게임까지 무엇이든 만들 수 있습니다.

 

또한 이미지 편집기, 프로젝트 관리 도구, ChatGPT와 같은 챗봇, 계산기와 같은 대화형 애플리케이션도 모두 JavaScript를 사용합니다.

심지어 구글 미트, 줌, 슬랙과 같은 실시간 커뮤니케이션 애플리케이션도 JS 덕분에 브라우저 내에서 작동할 수 있습니다.

 

서버-사이드 프로그래밍

서버 사이드 프로그래밍이란 클라이언트의 요청(예: 웹 브라우저)을 처리하고 응답을 반환하기 위해 웹 서버에서 실행되는 코드를 말합니다.

이를 통해 개발자는 빠르고 확장 가능한 웹 애플리케이션을 구축하고, 데이터베이스와 상호 작용하고, API(Application Programming Interface)를 구축하며, 실시간 통신을 가능하게 할 수 있습니다.

예를 들어, 서버 측 프로그래밍은 Facebook의 뉴스피드와 같은 동적 페이지를 가능하게 합니다.

각 게시물, 스토리, 상태 업데이트가 개별 정적 페이지에 구축된다면 매우 비효율적이며 수백만 개의 페이지가 필요할 것입니다.

대신 Facebook은 새로운 정보가 들어올 때마다 JavaScript로 동적으로 업데이트되는 기본 HTML 및 CSS 템플릿을 사용합니다.

Amazon과 같은 이커머스 웹사이트에도 동일한 개념이 적용됩니다.

아마존 검색 결과와 스토어 페이지는 상품이 매진되거나 다른 상품이 추가되면 JavaScript를 사용하여 동적으로 업데이트됩니다.

 

모바일 앱 개발

개발자는 React Native, Ionic, NativeScript, Apache Cordova와 같은 JavaScript 프레임워크를 사용하여 Android 및 iOS용 네이티브 및 하이브리드 모바일 앱을 구축할 수 있습니다.

 

Facebook, Google, Uber, Instagram은 모두 JavaScript를 사용하여 모바일 앱을 구축합니다.

JavaScript는 빠르고 효율적이며 간단합니다. 또한 프로그래밍 언어의 인기로 인해 JavaScript 개발자를 쉽게 찾을 수 있습니다.

 

인공 지능

최근 몇 년 동안 개발자들은 JavaScript를 사용하여 인공 지능을 활용하는 애플리케이션과 시스템을 구축해 왔습니다.

TensorFlow.js 및 Brain.js와 같은 JavaScript 라이브러리를 사용하여 감정 분석 및 추천 시스템을 위한 머신러닝 모델을 구축하고 학습할 수 있습니다.

 

다른 라이브러리를 사용하여 자연어 처리(NLP) 시스템을 통해 인간의 언어를 처리하고 분석할 수 있습니다.

ChatGPT와 같은 챗봇도 JavaScript를 사용하여 구축됩니다.

 

JavaScript는 다른 프로그래밍 언어와 어떻게 다른가요?

JavaScript는 다음과 같은 점에서 다른 프로그래밍 언어와 다릅니다:

 

인터프리터 언어입니다

브라우저에서 직접 실행할 수 있다는 뜻입니다.

C, C++, Java와 같은 다른 언어는 컴파일된 언어이므로 실행하기 전에 기계어 코드로 번역해야 합니다.

 

동적 타입, 변수 선언 불필요

동적 타이핑은 변수 유형이 네이밍되거나 선언된 필드가 아닌 런타임 값과 연관된다는 의미입니다.

따라서 개발자는 변수 유형을 지정하는 것에 대해 걱정할 필요가 없으므로 코드를 더 빠르게 작성할 수 있습니다.

예를 들어 개발자가 변수 ‘a’에 100이라는 값을 할당할 수 있습니다. 컴파일러는 런타임에 “a”가 정수를 나타낸다고 추론합니다.

그러나 이는 실행 시 변수 유형이 잘못 해석될 수 있다는 의미이기도 합니다. 이로 인해 버그와 오류가 발생할 수 있습니다.

 

사용자 단에서 주로 실행에 사용됩니다

JavaScript는 사용자의 웹 브라우저에서 주로 실행된다는 점에서 독특합니다. 서버에서 실행되지 않습니다.

즉, JavaScript는 서버와 통신할 필요 없이 사용자와 상호 작용하고, 사용자 입력에 응답하고, 페이지의 콘텐츠를 동적으로 업데이트할 수 있습니다.

PHP 및 Ruby와 같은 다른 주요 언어는 주로 서버 측에서 사용됩니다.

 

유비쿼터스

특정 사용 분야에 국한된 많은 컴퓨터 프로그래밍 언어와 달리 JavaScript는 범용 언어가 되어가고 있습니다.

모든 브라우저에서 지원됩니다.

클라이언트 측과 서버 측 모두에서 사용할 수 있습니다.

또한 웹사이트, 모바일 앱, 소프트웨어를 개발하는 데 사용할 수 있습니다.

 

JavaScript의 장점과 한계는 무엇인가요?

아래에 JavaScript의 장점과 한계에 대해 간략히 설명했습니다.

 

장점

JavaScript를 사용하면 많은 이점이 있습니다:

• 비교적 쉽게 배우고 사용할 수 있습니다.
• 클라이언트 측과 서버 측, 프론트 엔드와 백엔드에 모두 사용할 수 있습니다.
• 역동적이고 상호 작용하는 웹사이트를 제공합니다.
• 많은 인기로 인해 유용한 리소스가 많이 있습니다.
• 여러 플랫폼과 기기에서 실행됩니다.
• 크로스 플랫폼 호환성을 지원합니다.
• 모든 주요 웹 브라우저에서 지원됩니다.
• 작업을 용이하게하는 데 사용할 수있는 많은 라이브러리, 프레임 워크 및 API가 있습니다.
• 클라이언트 측 작업과 간단한 작업에 빠릅니다.
• 다른 프로그래밍 언어와 함께 잘 작동합니다.

 

한계

JavaScript를 사용하면 아래와 같은 단점과 한계가 있습니다:

• 연산량이 많은 작업의 경우 속도가 느릴 수 있습니다.
• 클라이언트의 브라우저에 대한 액세스로 인해 보안 문제가 내재되어 있습니다.
• 버그를 찾고 해결하기 어려울 수 있습니다.
• JavaScript 오류로 인해 웹사이트에 렌더링되지 않을 수 있음
• JavaScript가 너무 많으면 웹사이트 로딩 및 성능 문제가 발생할 수 있습니다.
• 크롤러가 JS 콘텐츠를 크롤링하고 분석하는 데 어려움을 겪을 수 있습니다.
• 브라우저마다 JS를 다르게 해석하여 서로 다른 환경을 생성합니다.

 

JavaScript는 사이트 성능에 어떤 영향을 미치나요?

웹사이트에 JavaScript를 사용하면 성능에 부정적인 영향을 미칩니다.

하지만 JavaScript를 적당하게 적절히 사용하면, 그 이점이 부정적인 성능 영향을 상쇄할 수 있습니다.

페이지에 코드와 스크립트가 많을수록 페이지의 성능은 저하됩니다.

 

사용자의 브라우저는 HTML 표시 순서대로 각 JS 스크립트를 다운로드하고, 구문 분석하고, 실행해야 합니다.

여기에는 구글 애널리틱스, 구글 태그 매니저, 구글 광고, ImpactHero, 심지어 웹 글꼴과 같은 스크립트도 포함됩니다.

이미지 캐러셀 및 동영상 임베드와 같은 시각적 구성 요소도 페이지 로딩 시간을 늘릴 수 있습니다.

복잡한 테마와 플러그인도 사이트 성능에 부정적인 영향을 미칩니다.

 

기본적으로 JavaScript 구문 분석 및 실행은 메인 스레드에서 이루어집니다. 메인 스레드는 순서대로 완료해야 할 작업의 대기열이라고 생각하면 됩니다.

 

메인 스레드에 JavaScript 작업이 너무 많으면 다른 콘텐츠나 이미지의 로딩이 지연될 수 있습니다.

콘텐츠와 같은 중요한 페이지 내 요소가 너무 느리게 로드되면 사용자 경험에 부정적인 영향을 미치고 이탈이 발생할 수 있습니다.

 

이는 SEO 노력과 트래픽, 그리고 궁극적으로 비즈니스에 악영향을 미칠 수 있습니다.

또한 모든 사람이 고성능 디바이스와 초고속 인터넷에 연결되어 있는 것은 아닙니다.

컴퓨터에서는 페이지가 빠르게 로드될 수 있지만 사용자의 디바이스에서는 그렇지 않을 수 있습니다.

JavaScript는 사이트 성능에 영향을 미치지만 이것이 왜 중요할까요?

 

사용자 경험

웹페이지에 동적 기능과 상호 작용을 추가하면 사용자 경험이 향상되지만, 너무 많이 추가하면 오히려 역효과가 날 수 있습니다.

JavaScript가 너무 많으면 사이트가 느리게 로드됩니다.

사람들은 기다리는 것을 싫어합니다. 특히 인터넷에서는 더욱 그렇습니다.

사이트 로딩 시간이 너무 오래 걸리면 사용자는 불편함을 느껴 뒤로 버튼을 누르고 경쟁사 사이트로 떠날 수 있습니다.

이는 비즈니스에 좋지 않습니다. 검색 순위에도 좋지 않습니다.

 

Core Web Vitals

Core Web Vitals는 JavaScript 사용 및 웹사이트 성능을 평가할 때 고려해야 할 또 다른 중요한 사항입니다.

Core Web Vitals는 웹사이트의 성능과 웹사이트가 제공하는 경험을 분석하기 위해 Google에서 개발한 지표입니다.

이러한 지표는 검색 순위에 영향을 줍니다. 이러한 지표를 모니터링하고 JavaScript가 문제를 일으키지 않는지 확인하는 것이 중요합니다.

Google 검색 콘솔과 같은 도구는 웹페이지에서 JS 관련 문제를 식별할 수 있습니다.

 

웹사이트에서 JavaScript를 사용하는 방법

두 가지 방법으로 JavaScript를 추가할 수 있습니다:

Embedding-임베딩

웹페이지의 HTML 소스 코드의 <head>에 직접 JavaScript 코드를 삽입하여 웹사이트에 추가할 수 있습니다.

JS 코드는 아래와 같이 script 태그 안에 넣어야 합니다:

<script>
//  여기에 코드를 작성합니다.
</script>

 

Linking

기존 JS 파일에 링크하여 웹사이트에 JavaScript를 추가할 수도 있습니다.

이 방법은 여러 페이지에 동일한 코드를 추가하려는 경우에 유용합니다.

페이지에 추가할 코드가 많을 때도 유용합니다.

HTML 소스 코드에 수백 줄의 JavaScript를 추가하는 대신 별도의 파일에 간단히 링크할 수 있습니다.

<script src=“modulabs.js”></script>

어떤 방법을 선택하든 코드를 작동시키려는 모든 페이지에 스크립트 태그가 포함되도록 해야 합니다.

 

자바스크립트 FAQ

다음은 JavaScript에 대해 자주 묻는 질문과 답변을 정리했습니다:

JavaScript란 무엇이며 왜 사용되나요?

JavaScript는 웹페이지에 동적 기능과 상호 작용을 추가하는 데 일반적으로 사용되는 컴퓨터 프로그래밍 언어입니다. 모바일 애플리케이션과 소프트웨어를 만드는 데에도 사용할 수 있습니다.

개발자들이 JavaScript를 사용하는 이유는 배우기 쉽고 사용하기 쉽기 때문입니다. 또한 다양한 플랫폼과 기기에서 사용할 수 있습니다.

JavaScript를 간단히 말하자면 무엇인가요?

JavaScript는 웹사이트를 더욱 인터렉티브하게 만드는 데 사용되는 컴퓨터 프로그래밍 언어입니다.

JavaScript의 예시는 무엇인가요?

JavaScript의 예로는 Google 애널리틱스를 설치하기 위해 웹사이트에 삽입하는 코드가 있습니다.

다른 예로는 드롭다운 메뉴, 대화형 캘린더, 오디오 및 동영상 임베드, 대화형 지도, 이미지 캐러셀, 디스플레이 광고 등이 있습니다.

JavaScript는 프로그래밍 언어인가요?

맞습니다. JavaScript는 일반적으로 웹사이트를 보다 동적이고 인터랙티브하게 만드는 데 사용되는 프로그래밍 또는 스크립팅 언어입니다.

Java와 JavaScript는 같은 언어인가요?

아니요, Java와 JavaScript는 동일하지 않습니다. 두 언어는 서로 다른 용도와 목적을 가진 별개의 언어입니다.

JavaScript는 원래 LiveScript라고 불렸지만 공식 출시 전에 이름이 변경되었습니다. 이는 당시 Java의 인기를 활용하기 위한 것으로 보입니다.