2022-09-20 TIL

김재훈·2022년 9월 28일

TIL

목록 보기

2/7

추가로 배워야 하거나 정리할 내용들

블록 레벨 스코프와 함수 레벨 스코프
(2022-09-20에 추가됨)
모던 자바스크립트 Deep Dive의 프로토타입 파트까지 학습 후 프로토타입 기반 프로그래밍에 대한 설명글 작성
(2022-09-20에 추가됨)

'모던 자바스크립트 Deep Dive' 학습

1장 프로그래밍

프로그래밍은 컴퓨터에 명령하는 커뮤니케이션의 일종으로 구문(syntax)와 의미(semantics)의 조합으로 작성하는 행위를 말합니다.
동작하는 프로그램을 작성하기 위해서는 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어해야 합니다.

책에서는 최적의 문제 해결 방안을 고민하기 위해 컴퓨팅 사고가 필요하다고 하는데, 간단히 말하여 하나의 복잡한 문제를 여러 간단한 문제로 나눈 뒤 각각의 문제를 해결하여, 전체 문제를 해결하는 방법 또는 그를 위한 사고체계라 할 수 있습니다. 이러한 분해 요소 외에도 다양한 요소가 존재하며 자세한 내용은 컴퓨팅 사고를 참고해주세요.

2장 자바스크립트란?

웹페이지의 보조적인 기능을 수행하기 위한 언어로 처음 등장했으며, 중간에 대항마인 JScript가 등장하기도 했습니다.
JScript는 Microsoft가 IE에서 스크립팅을 지원하기 위해 만들었던 언어로, 이로 인해 크로스 브라우징 이슈(브라우저마다 다르게 동작함)를 발생시켰습니다.
크로스 브라우징 이슈를 해결하기 위해 표준이 필요했고, ECMAScript의 탄생으로 이어졌습니다.
Ajax라는 비동기 데이터 교환 통신 기능이 추가된 이후로 웹 페이지의 전체 변경 없이 필요한 일부분만 렌더링할 수 있게 되었습니다.
자바스크립트의 표준 사양을 ECMAScript라고 하며, 우리가 흔히 알고 있는 자바스크립트는 ECMAScript와 브라우저에서 지원하는 클라이언트 사이드 API의 집합입니다.
브라우저가 아닌 위치에서 자바스크립트를 동작하기 위해 node.js가 개발되었는데 이는 ECMAScript와 node.js에서 지원하는 API들로 구성되어 있습니다.

3장 자바스크립트 개발 환경과 실행 방법

잘못된 ID로 개체를 탐색하는 예제를 작성하고, 크롬 개발자 도구를 이용해 디버깅하는 방법에 대해 학습했습니다.

<!--예제 03-01-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Counter</title>
</head>
<body>
    <div id="counter">0</div>
    <button id="increase">+</button>
    <button id="decrease">-</button>
    <script>
        // counter-x가 아닌 counter로 검색해야 함
        const $counter = document.getElementById('counter-x');

        const $increase = document.getElementById('increase');
        const $decrease = document.getElementById('decrease');

        let num = 0;
        const render = function () { $counter.innerHTML = num; };

        $increase.onclick = function (){
            num++;
            console.log('increase 버튼 클릭', num);
            render();
        };

        $decrease.onclick = function () {
            num--;
            console.log('decrease 버튼 클릭', num);
            render();
        };
    </script>
</body>
</html>

VS Code에서 유용한 확장 프로그램 몇 가지를 세팅했습니다.
- Code Runner: 단축키로 작성된 코드를 터미널에서 바로 실행할 수 있습니다.
  - Windows: Ctrl + Alt + N
  - macOS: control + option + N
- Live Server: 설치 시 오른쪽 아래에 'Go Live' 버튼이 생기며 이를 클릭하면 HTML 파일을 실행하는 가상 서버가 실행됩니다. 실행 시 브라우저에 로딩되며 수정 사항이 실시간으로 반영됩니다.
node.js에서는 alert 키워드를 사용할 수 없는데, 해당 키워드는 클라이언트 사이드 Web API이기 때문입니다. 아래 예제에서는 alert is not defined 오류가 발생합니다.

// 예제 03-03
const arr = [1,2,3];

arr.forEach(alert);

4장 변수

재밌었던 부분: p38 변수 이름은 첫 아이 이름을 짓듯이 심사숙고해서 지어야 한다.
변수는 식별자라고도 하며 값이 아닌 메모리 주소를 기억합니다. 값은 해당 주소에 메모리에 저장됩니다.
var, let, const 키워드를 사용해 변수를 선언할 수 있지만 ES6에서 나온 let, const 키워드가 함수 레벨 스코프인 것과는 다르게 var는 블록 레벨 스코프에서 동작하는 것이 단점이라고 합니다. 이를 자세히 이해하기 위해 블록 레벨 스코프와 함수 레벨 스코프의 차이에 대한 학습이 추가로 필요합니다.
일반적으로 변수 선언 후에 초기화가 진행되지 않으면 변수를 호출할 때 쓰레기값이 불러와질 가능성이 있으며, js는 이를 방지하기 위해 기본적으로 선언 시 초기화가 자동 수행됩니다.
변수의 선언은 런타임 시점이 아닌 이전 단계에서 먼저 수행되는데 이를 변수 호이스팅이라고 합니다.
아래 예제에서도 score 변수에 80이라는 값을 먼저 저장하고, 선언을 그 후에 작성했지만 코드가 동작할 때는 선언이 런타임 이전에 이미 완료되었기 때문에 첫번째 console.log에서만 undefined 오류가 발생하고, 두번째에서는 console.log에서는 80이 출력됩니다.

// 예제 04-10
console.log(score);

score = 80;
var score;

console.log(score);

김재훈

개발하면서 새롭게 배운 내용, 시행착오한 내용들을 잊지 않기 위해 기록합니다.

이전 포스트

2021-11-14

다음 포스트