들어가기에 앞서

웹을 공부해보겠다고 계획도 없이 무작정 머리부터 박았더니, 추가적으로 공부 할 것들이 너무나 많습니다... 먼저 !! 웹을 자바스크립트 없이 공부를 하는것은 말이 안되기 때문에, 따로 자바스크립트 공부를 시작해봅니다 🔥🔥🔥

모던 자바스크립트 Deep Dive 라는 책과 MDN 이라는 공식 홈페이지의 내용을 참조해서 공부하였습니다. 전문가가 아니기에 정확하지 않은 내용이 있을 수 있습니다 ! 틀린 내용이 있다면 고칠 수 있게 바로 지적해주시고,
재밌게 봐주세요 🤓

자바스크립트 공부를 시작하기에 앞서 또 ? 전제 조건이 몇가지 붙는데,,,다음과 같습니다 !

• 기본적인 컴퓨터 능력
• HTML
• CSS 기초

1. 기본적인 컴퓨터 능력(CS 라고 부르더라)은 학부과정에서 충분히 배웠다고 생각합니다...
   ( 절대 잘하거나 완벽하다고 생각하는건 아니다. 이쯤하면 되지 않았나.... )

2. HTML 은 바로 옆 시리즈 ? 에서 나름 열심히 !! 공부하고 있습니다 ✌️

3. CSS 는 현재 진행중인 웹 프로젝트에서
   (REFRI BANK 나중에 정리해서 꼭 포스팅을 할 것이다.)
   무작정 시도해보고, 왜 안되지? 하고 다시 뚜드려맞고, 또 깨닫고 ... 이 과정을 무한반복 하다보니 자연스레 ?? 어느정도는 하게 되었습니다.
   (이래서 다들 머리부터 박으라고 하나보다..)

자 !! 서론이 너무 길었습니다. 본격적으로 JS 공부를 시작해봅시다 🖤

들어가기에 앞서..

자바스크립트는 복잡한 무언가 (주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입니다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다. 다른 두 층(HTML과 CSS)에 대한 보다 자세한 정보는 학습 영역의 다른 부분에서 찾아 볼 수 있습니다.


출처 : MDN Web Docs

• HTML 은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어입니다.

• CSS는 배경색, 폰트 등의 레이아웃 등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어입니다.

• JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일(물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드로 얻는 결과는 놀라울겁니다.)들을 할 수 있는 스크립트 언어입니다.

그래서 진짜로 어떤 일을 하나 ??

자바스크립트 언어의 핵심은 다음과 같은 일들을 할 수 있게하는 프로그래밍 기능들로 구성되어 있습니다.

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

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}
Copy to Clipboard

• 변수안에 값을 저장할 수 있습니다. 위의 예시를 보면, 작성된 새로운 이름을 name이라는 변수에 저장하였습니다.

• 프로그래밍에서 '문자열(strings)'이라고 불리는 문자들도 조작 가능합니다. 위 예시에 보면 "Player 1:"이라는 문자열을 name이라고 만든 변수와 겹합하여 "Player 1: Chris"라는 글을 완성할 수 있었습니다.

• 웹 페이지상의 이벤트에 응답하는 코드를 작성할 수 있습니다. 예제에서 사용한 click 이벤트를 통해 요소가 언제 클릭되고, 텍스트 라벨을 업데이트 시킬지 정정의하였습니다.

• 그리고 더 많은 것들!

하지만 더욱 흥미진진한 것은 코어 자바스크립트 언어 (core JavaScript language) 기반의 기능성입니다. 소위 Application Programming Interfaces (APIs) 라는 것은 우리가 자바스크립트 코드에 사용할 수 있는 추가적인 강력한 마법들을 제공합니다.

API는 이미 만들어진 코드의 집합체라고 볼 수 있으며, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램이라고 볼 수 있습니다. 마치 집에서 가구를 만들 때 직접 디자인하고, 재료를 구하고, 재단하고, 못을 박고 하는 등 혼자서 모든 것을 하는 대신 가구 만들기 키트를 사는 것과 같다고 보면 됩니다.

웹 페이지 안에서는 JavaScript가 어떤 일을 하는데?

여기서 몇가지 코드를 실제로 살펴보고, 페이지에서 자바스크립트가 언제 어떻게 작동하는지 알아 볼 것입니다.

브라우저에서 웹페이지를 불러올 때 어떤 일이 발생하는지 생각해봅시다. 브라우저에서 웹페이지를 불러올 때, 실행 환경(브라우저 탭)안에서 HTML, CSS, Javascript 코드가 실행됩니다. 이는 마치 공장에서 원재료(코드)가 일련의 과정을 거쳐 제품(웹페이지)으로 탄생되는 것과 같습니다.

자바스크립트는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진 후, 브라우저의 자바스크립트 엔진에 의해 실행됩니다. 이는 페이지의 구조와 스타일등을 정해놓고, 자바스크립트가 실행된다는 것과 같은 의미입니다.
( 페이지의 구조와 스타일이 먼저 정해진다는 점에 유의 !! )

동적으로 사용자 인터페이스를 업데이트하는 자바스크립트의 사용은
Document Object Model API를 통해 HTML과 CSS를 수정하는 것으로 좋은 현상입니다. 만약 자바 스크립트가 HTML과 CSS 전에 실행되었다면 문제가 분명 발생할 것입니다. ( 어떤 문제가 발생하는지는 왜 안가르쳐줘요..? )

자바스크립트 실행 순서

브라우저에서 자바스크립트를 만났을 때 일반적으로는 위에서 아래 순서대로 실행됩니다. 이는 순서에 주의해서 코드를 작성해야한다는 의미입니다. 예를 들어, 아래의 첫번째 예재를 통해 자바스크립트 블록을 반환해봅시다:

const para = document.querySelector('p');
//HTML 요소 중 p태그를 선택

para.addEventListener('click', updateName);
//para에 저장된 객체가 클릭되었을 때 updateName 함수를 실행

function updateName() {
  let name = prompt('Enter a new name');
  //'Enter a new name'과 입력란 출력하여 입력받은 값을 name에 저장
  para.textContent = 'Player 1: ' + name;
  //papa(p태그)에 새로운 문자열 저장
}

먼저 p태그의 요소를 para변수에 저장합니다(1번줄).
그리고 event listener를 붙여(3번줄) p태그가 클릭되었을 때 updateName()코드 블록(중괄호로 묶여있는 부분)이 (5-8번줄) 실행되도록 합니다. updateName() 코드 블록(이렇게 계속적으로 사용할 수 있는 코드 블럭을 함수라고 합니다.).
사용자로 하여금 새로운 이름을 입력받기를 요청하고, 사용자가 이름을 입력하면 화면에 출력하게 됩니다.

만약 1번줄과 3번줄을 바꿨다면 코드는 실행되지 않을 것입니다. 대신 브라우저의 개발자 콘솔창에 다음과 같은 에러 알림이 뜰 것입니다.

— TypeError: para is undefined. 이는 para라는 객체가 아직 존재하지 않는다는 뜻으로, para라는 변수에 event listener는 추가할 수 없습니다

다른 언어에서랑 마찬가지인.. 너무나 당연한거 같지만 !!
그래도 한번 더 꼼꼼히 복습해봅시다 👏