javascript (1)

브라우저 렌더링 과정

---

• 브라우저 렌더링 과정이란 도메인 주소(웹 주소)를 브라우저에 요청할 때
  해당 html과 css, js를 불러와서 화면에 표현하는 과정을 말한다.

  1. HTML파일을 파싱
     : 웹 브라우저에서 html파일을 읽어오고 구조를 해석하는 과정을 말한다.
     브라우저가 html문서를 파싱하면 DOM(Document Object Model)트리를 만든다.
     DOM은 웹 페이지의 구조를 표현하는 트리 구조로, 각 요소는 노드로 표현된다
     
     2. CSS파일을 파싱
     : HTML문서를 파싱한 이후에 CSS파일을 파싱하여 CSSOM(CSS Object Model)트리를 만든다. CSSOM은 스타일 규칙을 표현하는 트리구조로 각 스타일 규칙을 노드로 표현한다.
     
     3. DOM과 CSSOM을 결합
     : 브라우저는 DOM과 CSSOM을 결합하여 Render Tree(렌더 트리)를 생성한다.
     렌더 트리는 화면에 표시되는 요소들만 구성된 트리 구조로, 각 요소는 화면에 어떻게 배치될지 결정하는 정보를 가지고 있다.
     
     4. 레이아웃
     : 렌더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산해서 레이아웃을 수행한다.
     이 과정에서 각 요소의 크기, 위치, 여백, 색상 등이 계산되고 레이아웃은 화며에 보여지는 모습을 그려주는 과정으로 굉장히 중요한 과정이다.
     
     5. 페인팅
     : 레이아웃이 완성되면 브라우저는 화면에 보여질 요소들을 페인팅하여 실제 화면에 표시한다. 이 과정에서 각 요소의 색상, 텍스트, 이미지 등이 화면에 그려지며, 사용자가 볼 수 있는 최종 결과물이 나온다.

자바스크립트 코드 입력 시 주의사항(=코딩 컨벤션/코딩 스타일)

---

1. 자바스크립트는 대/소문자를 구분하여 작성해야 한다.

• document.write('문자') => o 올바른 문법
• Document.write('문자') => x 틀린 문법 오류가 난다.

2. 코드를 한 줄 작성한 후에는 ;으로 마무리한다.

• 만약 세미콜론을 쓰지 않고 한 줄에 두 문장을 쓸 경우 오류가 발생한다.
  한 줄에 한 문장만 쓰는 것이 가독성이 좋다.
• document.write(); => o 올바른 문법
• document.write() document.write() => x 틀린 문법 오류가 난다

3. 문자형 데이터를 작성할 때에는 ""(큰따옴표)와 ''(작은따옴표)로 문자를 감싸야 하고 따옴표의 겹침 오류를 주의해야 한다.

• document.write('hello "김땡땡" world'); => o 올바른 문법

• document.write('hello \'김땡땡\' world'); => o 올바른 문법
  => \ : 역 슬래쉬 보통 엔터 위에 있는 원화표시(￦).
  \를 기호 앞에 붙여주면 문자의 시작과 끝을 구분하는 따옴표가 아니라 그 다음기호를
  단순한 문자로 처리한다. 즉, \다음에 등장하는 기호를 단순 문자처리하는 기능을 가지고 있다.

• document.write("hello '김땡땡' world"); => o 올바른 문법

• document.write("hello "김땡땡" world"); => x 틀린 문법 큰따옴표 안에 큰따옴표는 오류가 난다.

• document.write('hello '김땡땡' world'); => x 틀린 문법 작은따옴표 안에 작은따옴표는 오류가 난다.

• document.write('hello "김땡땡' world"); => x 틀린 문법 따옴표가 교차될 수 없다.

4. 코드를 작성할때에는 {}나 ()나 []의 짝이 맞아야 한다.

• document.write(] => x 틀린 문법
• document.write() => o 올바른 문법

자바스크립트의 식과 문

• 자바스크립트 언어의 큰 줄기는 '식'과 '문'이다.
• 자바스크립트에서 '식'은 '표현식'이라고도 하는데, 연산식뿐만 아니라 실제 숫자값이나 함수를 실행하는 것도 식이 된다. 즉, 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있고, 식은 '변수'라는 것에 저장된다.
• '문'은 '명령'이라고 할 수 있다. 문의 끝에는 ;을 붙여 구분한다.

브라우저의 콘솔창 활용하기

• 브라우저의 개발자도구 안에는 '콘솔'이라는 메뉴가 있다.
• 콘솔창은 자바스크립트가 동작이나 계산식을 잘 수행하고 있는지 실험해보는 실험장이다.
• 콘솔창에 실험해보도록 명령을 내리려면 console.log()라는 문장을 사용한다.

  [기본형]
  console.log(실험할 값)

자바스크립트에서 많이 쓰는 문장

• 브라우저의 body영역에 연산 결과나 문장을 출력하여 보고 싶을때 사용하는 문장으로 document.write()라는 문장이 있다. document는 html문서를 뜻하고, .write()'문서를 써라'라는 문장이다. 즉, 브라우저 화면에 결과를 나타내고 싶을때 사용하는 문장이다.

변수

---

• 변수는 변하는 값을 저장할 수 있는 메모리 공간. 데이터를 담는 그릇이라고 할 수 있다. 변수에는 데이터가 오직 한 개만 저장된다.

• 만약 새로운 데이터가 들어오면 기존에 있던 데이터는 사라지고 마지막에 들어온 데이터만 남는다.

• 변수에 저장할 수 있는 데이터의 종류로는 문자형(String), 숫자형(Number),
  논리형(Boolean)데이터와 빈(Null)데이터와 undefined데이터가 있다.

변수 선언

• 변수를 사용할 준비를 하는 과정을 '변수 선언'이라고 한다. 변수를 선언할 때에는
  var, let, const라는 키워드를 변수명 앞에 붙여준다.

• 변수명에는 영문과 숫자, 그리고 일부 특수문자(_,$)만 포함 할 수 있다.

• 변수명을 지울때에는 의미에 맞게 만드는 것이 좋다. 만약 변수명이 단어와 단어의 조합으로 되어 있다면 두 번째 단어의 첫 글자를 대문자로 써준다.

• 예를 들어 var userName = '김땡땡'; 이런 식으로 이름을 짓는다면 두 번째 단어의 첫 글자는 대문자로 쓰여졌는데, 마치 낙타의 등모양과 비슷하다고 하여 '카멜표기법'이라고 부른다.

• 또 var user_name이런식으로 지었다면 마치 모양이 뱀과 비슷하다고 하여 '스네이크 표기법' 이라고 부른다. 이렇게 이름을 규칙에 따라 짓는 것을 '코딩 컨벤션'이라고 한다.

  [기본형]
  
  1. var 변수명 = 값;
  : 변수에 초기 값을 넣어 초기화 한 상태
  
  2. var 변수명;
  : 변수를 만들어 둔 상태