자바스크립트 첫걸음 -MDN

Jaewoo Back·2024년 7월 13일
JavaScriptMDNjs시작
0

자바스크립트_JavaScript_JS

목록 보기
1/1
post-thumbnail

자바스크립트란 무엇인가요?

JavaScript는 동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어입니다. (모든 것이 가능한 것은 아니지만 몇 줄의 JavaScript 코드로 달성할 수 있는 것은 놀랍습니다.)

그래서 어떤 일을 할 수 있나요?

클라이언트 사이느 JavaScript

  • 변수에 값을 저장합니다.
  • 문자열을 조작합니다.
  • 웹 페이지에서 특정 이벤트에 대한 응답

흥미로운 점은 클라이언트 측 JavaScript 언어 위에 구축된 기능이다.

  • DOM API를 사용하면 HTML, CSS를 조작하여 새 스타일을 동적으로 적용

  • Geolocation API로 지리정보를 가져올 수 있다.

  • Cavas와 WebGL API를 사용하면 d애니메이션 2D, 3D 그래픽을 만들 수 있다.

  • HTMLMediaElement와 WebRTC를 포함하는 오디오,비디오 API사용하여 웹 페이지에서 바로 오디오 및 비디오를 재생

3rd party APIs
: 기본적으로 브라우저에 내장되어 있지 않으며, 일반적으로 웹 어딘가에서 해당 코드와 정보를 가져와야 합니다.

  • Twitter API로 여러분의 최신 트윗을 웹 사이트가 보여주도록 구현할 수 있습니다.
  • Google 지도 API와 OpenStreetMap API로 웹 사이트에 지도를 삽입하고, 지도 관련 기능을 추가할 수 있습니다.

웹 페이지에서 Js는 어떤일을 하나요?

브라우저에서 웹 페이지를 로드 ( DOM API를 통해 HTML, CSS를 동적으로 수정 업데이트한다. 일반적으로 웹 문서의 코드는 위에서 아래로 로드된다. JS를 먼저 불러오면 오류가 생길 수 있다.)

브라우저 보안

Js 실행 순서

일반적으로 순서대로 위에서 아래로 실행합니다. 따라서 코드 배치 순서에도 신경써야 한다. 

const para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  const name = prompt("Enter a new name");
  para.textContent = `Player 1: ${name}`;
}

코드의 처음 두 줄의 순서를 바꾸면 더 이상 작동 하지 않는다.

인터프리터와 컴파일러

인터프러터 : 인터프리터를 사용하는 언어(파이썬..)에서는 코드가 위에서 아래로 실행되고 코드 실행 결과가 즉시 반환.

자바스크립트는 인터프리터를 사용하는 프로그래밍 언어입니다. 대부분의 모던 JS 인터프리터들은 실제 성능 향상을 위해 JIT컴파일이라는 기술을 사용하는데, 스크립트의 실행과 동시에 소스코드를 더 빠르게 실행할 수 있는 이진 형태로 변환하여 속도를 높이는 방법이다. 하지만 컴파일이 미리 처리되는 것이 아니라 런타임에 처리되기 때문에 JS는 여전히 인터프리터 언어로 분류된다.

서버 사이드와 클라이언트 사이드 코드

클라이언트 사이드 코드
: 사용자의 컴퓨터에서 실행되는 코드로, 웹 페이지를 볼 때 페이지의 클라이언트 측 코드가 다운로드 된 후 실행되어 브라우저에 표시된다.

웹 페이지에 JS 넣는 법

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Apply JavaScript example</title>
  </head>
  <body>
    <button>Click me</button>
  </body>
</html>

텍스트 편집기에서 </head> 태그 바로 앞에 넣는다.

...(생략)
<script>
	// JavaScript goes here  
</script>

다음 코드를 script태그 안에 넣는다.

document.addEventListener("DOMContentLoaded", () => {
  function createParagraph() {
    const para = document.createElement("p");
    para.textContent = "You clicked the button!";
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll("button");

  for (const button of buttons) {
    button.addEventListener("click", createParagraph);
  }
});

또는, 외부 파일로 분리하고 싶다면
script.js 라는 이름을 붙여 새로운 파일에 코드를 넣는다.

그리고 <script> 요소를 다음 코드로 대체합니다.

<script src="script.js" defer></script>

일반적으로 코드를 체계적으로 정리하고 여러 HTML 파일에서 재사용할 수 있다는 측면에서 외부로 분리하는 것이 좋습니다.

스크립트 로딩 전략

JS를 사용해서 페이지 내의 요소(DOM)를 조작하려고 할 때, 해당 요소를 포함한 HTML 코드보다 JS를 먼저 불러와버리면 코드가 올바르게 동작하지 못합니다.

document.addEventListener("DOMContentLoaded", () => {
  // …
});

위의 코드는 HTML 본문 전체를 불러와 읽었다는 것을 나타내는 브라우저의 DOMContentLoaded이벤트 수신기입니다. 이 불록 내부의 JS는 이벤트가 끝나기 전에는 실행되지 않으므로 로딩 시점으로 인한 오류를 예방할 수 있다.

외부 분리 파일은 <script> 태그 요소에 속성을 추가하여 HTML 콘텐츠를 계속 다운로드하도록 지시하는 defer속성 이라는 보다 최신 JS 기능을 사용하여 문제를 해결할 수 있습니다.

<script src="script.js" defer></script>

defer 특성이 오류를 예방하므로, 외부 파일에서는 DOMContentLoaded이벤트를 사용하지 않는다. defer는 외부 스크립트에서만 작동하기 때문에 내부 JS예제에서는 사용하지 않았습니다.

! 고전적인 방법 : 스크립트 요소를 본문의 맨 마지막 </body> 태그 바로앞에 배치. 이 방법의 문제는 HTML DOM을 모두 불러오기 전에는 스크립트의 로딩과 분석이 완전히 중단되버린다. 그래서 많은 스크립트를 포함하는 대형 사이트에서는 이로 인해 사이트 속도가 느려지는 중대한 성능 문제가 발생할 수 있다.

async와 defer

스크립트 중단 문제를 해결하는 기능 두 가지

  • async
  • defer

async 특성을 지정하면 스크립트를 가져오는 동안 페이지 로딩을 중단하지 않습니다. 그러나 다운로드가 끝나면 스크립트가 바로 실행되는데, 실행 도중에는 페이지 렌더링이 중단됩니다. 스크립트의 실행 순서를 보장할 방법은 없습니다. 따라서 async는 스크립트가 서로 독립적으로 실행되고, 다른 스크립트에 의존하지 않는 경우에 사용하는 것이 가장 좋습니다.

defer 속성으로 로드된 스크립트는 페이지에 표시되는 순서대로 로드됩니다. 또한 페이지 콘텐츠를 모두 불러오기 전까지는 실행하지 않으므로, 스크립트가 DOM의 위치에 의존하는 경우(예: 페이지에서 하나 이상의 요소를 수정하는 경우) 유용합니다.

다음은 다양한 스크립트 로드 방법과 미치는 영향을 시각적으로 표현한 것이다.

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

위 코드로는 스크립트가 HTML의 순서대로 불러와질 것이라고 확실하게 예측할 수 없습니다. 이 경우 스크립트가 실행될 때 jqery가 정의되지 않기 때문에 함수가 오류를 발생시킬 수 있습니다.

async는 로드할 백그라운드 스크립트가 많고 가능한 한 빨리 제자리에 배치하고 싶을 때 사용해야 합니다.

defer 속성(아래 참조)을 사용하여 로드된 스크립트는 페이지에 표시되는 순서대로 실행되며 스크립트와 콘텐츠가 다운로드되는 즉시 실행됩니다:

-> 페이지 콘텐츠가 모두 로드될 때까지 실행되지 않으므로 스크립트가 DOM의 위치에 의존하는 경우 유용합니다.

profile
Jaewoo Back
https://blog.naver.com/jaewoo2_25

0개의 댓글