🔥 [UIUX] 0101 JAVASCRIPT Coding, 코딩 초급 1

✏️ 2025. 1월 1일 / 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. 자바스크립트는 대/소문자를 구분하여 작성해야 합니다.
        ex) document.write('문자') => O 올바른 방법
            Document.Write('문자') => X 틀린 문법
     2. 코드를 한 줄 작성한 후에는 ;으로 마무리합니다.
        만약 세미콜론을 쓰지 않고 한 줄에 두 줄의 문장을 쓸 경우 오류가 발생합니다.
        ex) document.write('문자'); => O 올바른 방법
            document.write('문자') document.write('문자') => X 틀린 문법
     3. 문자형 데이터를 작성할 때에는 ""(큰따옴표)와 ''(작은따옴표)로 문자를 감싸야 하고
        따옴표의 겹침 오류를 주의해야 합니다.
        ex) document.write('hello "김땡땡" world'); => O 올바른 방법
        ex) document.write("hello '김땡땡' world"); => O 올바른 방법
        ex) document.write('hello \'김땡땡'\ world'); => O 올바른 방법
        => \ : 역슬래쉬, 보통 엔터 위에 있는 원화표시 (￦)
               \를 기호 앞에 붙여주면 문자의 시작과 끝을 구분하는 따옴표가 아니라 그 다음 기호를 단순한 문자로 처리합니다.
               즉, \ 다음에 등장하는 기호를 단순 문자처리 하는 기능을 가지고 있습니다.
        ex) document.write('hello '김땡땡' world'); => X 틀린 문법
        ex) document.write("hello "김땡땡" world"); => X 틀린 문법
        ex) document.write("hello '김땡땡" world'); => X 틀린 문법
     4. 코드를 작성할 때에는 {}나 ()나 []의 짝이 맞아야 한다.
        ex) document.write(] => X 틀린 문법
        ex) document.write() => O 올바른 방법

❄️ 자바스크립트의 주석 기호

     1. // : 한 줄 주석입니다.
             한 줄 짜리 짧은 주석을 입력할 때 사용합니다.
             만약 다음줄로 넘어가는 주석이 있다면 오류가 발생합니다.
     2. /**/ : 여러 줄을 작성할 수 있는 주석 입니다.
               두 줄 이상의 긴 주석을 입력할 때 사용합니다.

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

⛄ 브라우저의 콘솔창 활용하기
브라우저의 개발자도구 안에는 '콘솔'이라는 메뉴가 있습니다.
콘솔창은 자바스크립트가 동작이나 계산식을 잘 수행하고 있는지 실험해보는 실험창입니다.
콘솔창에 실험해보도록 명령을 내리려면 아래와 같이 씁니다.

[기본형]
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 변수명;
: 변수를 만들어둔 상태입니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)