프론트엔드 로드맵 스터디 #4 #javascript

so ez·2021년 12월 30일
JavaScriptfrontendstudy
0

프론트엔드 로드맵 스터디

목록 보기
5/9

🌼 구문(Syntax)과 기본 문법

변수

변수(Variable)는 값(value)을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용한다.
한번 쓰고 버리는 값이 아닌 유지(캐싱)할 필요가 있는 값은 변수에 담아 사용한다.
또한 변수에 상징적인 이름을 붙여 값의 의미를 명확히 할 수 있어 코드의 가독성이 좋아진다.
변수는 위치(주소)를 기억하는 저장소이다.
위치란 메모리 상의 주소(address)를 의미한다.
즉, 변수란 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)이다.
식별자(identifier)는 특정 규칙을 따른다.

식별자 규칙
1. 문자, 밑줄(_) 혹은 달러 기호($)로 시작한다.
2. 숫자는 식별자의 시작부분 외에 위치할 수 있다.
2. 대소문자를 구분하며, 문자는 "A"부터 "Z"(대문자)와 "a"부터 "z"(소문자)까지 모두 포함한다.

적절한 이름으로는 Number_hits, temp99, $credit 및 _name등이 있다.

선언

JavaScript의 선언에는 3가지 방법이 있다.

- let
블록 범위(scope) 지역 변수를 선언.
추가로 동시에 값을 초기화.
- const
블록 범위 읽기 전용 상수를 선언.
- var
변수를 선언. 추가로 동시에 값을 초기화.
중복 선언이 가능하고 함수를 제외한 영역(if문 등)에서는 '전역변수'로 취급되므로 사용을 지양한다.

데이터타입

1. 기본 타입(원시 타입: Primitive Type)
1) 숫자(number)
2) 문자열(string)
3) 불린값(boolean)
4) undefined
5) null
6) 심벌(symbol)

2. 참조 타입(객체 타입: Object/Reference Type)
1) 객체
2) 배열
3) 함수
4) 정규 표현식

배열, 함수, 정규표현식도 모두 객체다.

쓰다 생각난건데 나 이미 최신 자스 공부하면서 정리해놓은 글 있음
여기에서 공부하자,,

🌼 DOM 조작 방법 배우기

DOM(Document Object Model)

DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

document.getElementById(id)
document.getElementsByClassName(class)
document.getElementsByTagName(name)

위와 같은 명령어로 해당 노드를 선택할 수 있고,

document.querySelector(".className" or "#id" or "TagName")
document.querySelectorAll()
로도 선택이 가능하다.

그 외 돔 조작 명령어이다.
createElement - CREATE
querySelector, querySelectorAll - READ
textContent, id, classList, setAttribute - UPDATE
remove, removeChild, innerHTML = "" , textContent = "" - DELETE
appendChild - APPEND

🌼 Fetch API / Ajax(XHR) 배우기

ajax

XMLHttpRequest 객체를 이용해서 웹 서버와 비동기로 통신하고, DOM 을 이용해서 웹 페이지를 동적으로 바꿔주는 프로그래밍 기법
Asynchronouse JavaScript XML
현재 XML을 사용하는건 드물고 JSON을 사용
페이지 새로고침 없이 특정 데이터만 리로드
서버로부터 데이터를 받고 작업을 수행

ajax 구현하기

ajax를 구현하는 기술에는 여러 기술이 존재한다.

그 중에 대표적인 3가지에서 Fetch API에 대해서 알아보자.

  1. XMLHttpRequest
  2. Fetch API
  3. JQuery

Fetch API

Fetch API는 기본적으로 XMLHttpRequest 보다 더 강력하고 유연하다.

이벤트 기반인 XMLHttpRequest과는 달리 Fetch API는 Promise 기반으로 구성되어 있어 비동기 처리 프로그래밍 방식에 잘 맞는 형태이다.

그래서 then이나 catch 와 같은 체이닝으로 작성할 수 있다.

결국 이는 가독성에 큰 이점을 줬고, Async / Await 으로 비동기 콜백을 쉽게 벗어날 수 있기도 하다.

또한 Fetch API는 JS 기본 라이브러리기 때문에, JQuery와 같이 CDN 과 같은 다른 작업을 하지 않아도 바로 사용할 수 있다.

Fetch API의 기본 형태

앞서 말 했듯, Fetch API 는 Promise 기반이기 때문에 체이닝 형태로 사용될 수 있다.

다음은 then과 catch로 체이닝을 한 형태이다.

fetch("http://server-ip.com")
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log(JSON.stringify(myJson));
  })
  .catch((error) => {
    console.err(error);
  });

header 조작하기

서버와 통신을 할 때, HTTP 헤더를 조작하는 일은 필수적으로 진행되어야 한다.

Fetch API 에서도 header를 조작할 수 있는데, 다음과 같이 option 객체에 headers 에 들어갈 내용들을 지정하는 방법을 사용할 수 있다.

const option = {
  headers: {
    "Content-Type": "application/json",
  },
};

fetch("http://server-ip.com", option)
  .then((response) => {
    // 생략
  })
  .then((myJson) => {
    // 생략
  })
  .catch((error) => {
    // 생략
  });

Fetch API GET Method

Fetch API로 HTTP의 GET 메서드를 사용하여 데이터를 서버로 보내는 방법은 다음과 같다.

const option = {
  headers: {
    "Content-Type": "application/json",
  },
};

fetch("http://server-ip.com", option)
  .then((response) => {
    // 생략
  })
  .then((myJson) => {
    // 생략
  })
  .catch((error) => {
    // 생략
  });

Fetch API POST Method

Fetch API로 HTTP의 POST 메서드를 사용하여 데이터를 서버로 보내는 방법은 다음과 같다.

const myData = {
  id: 1,
  content: "content",
};

const option = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(myData),
};

fetch("http://server-ip.com", option).then((res) => {
  // 생략
});

Fetch API PUT Method

Fetch API로 HTTP의 PUT 메서드를 사용하여 데이터를 서버로 보내는 방법은 다음과 같다.

const myData = {
  id: 1,
  content: "content",
};

const option = {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(myData),
};

fetch("http://server-ip.com", option).then((res) => {
  // 생략
});

Fetch API DELETE Method

Fetch API로 HTTP의 DELETE 메서드를 사용하여 데이터를 서버로 보내는 방법은 다음과 같다.

const myData = { id: 1 };

const option = {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(myData),
};

fetch("http://server-ip.com", option).then((res) => {
  // 생략
});

🌼 모듈러 JavaScript와 ES6+ 배우기

모듈(module)이란?

모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일 로 다음과 같은 것들을 위해 사용한다.

유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다.
네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다.
재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다.
이런 장점들을 살리기 위해서 모듈 개념이 필요했고 자바스크립트에선 모듈을 개발하기 위한 여러가지 시도들이 있었다. CommonJS, AMD, UMD 및 ES6 등 각각의 특징과 사용법을 알아보자.

CommonJS

자바스크립트의 공식 스펙이 브라우저만 지원했기 때문에 이를 서버사이드 및 데스크탑 어플리케이션에서 지원하기 위한 노력이 있었다. 그걸 위해 만든 그룹이 CommonJS이며 여기선 자바스크립트가 범용적인 언어로 쓰이기 위한 스펙을 정의하고 있다. 그룹을 만들었을 때, 범용적인 언어로 만들기 위해서는 모듈화의 개념이 필요했고 이 그룹만의 모듈 방식을 정의하게 되었는데 그것이 바로 CommonJS 방식의 모듈화다.

다른 모듈을 사용할 때는 require 를, 모듈을 해당 스코프 밖으로 보낼 때에는 module.exports 를 사용하는 방식으로, Node.js에선 현재 이 방식을 사용하고 있다. hello world를 출력하는 함수를 가진 파일을 a.js 라고 하고 그 함수를 가져와서 사용하는 파일을 b.js 라고 하면 다음과 같이 사용할 수 있다.

a.js

const printHelloWorld = () => {
  console.log('Hello Wolrd');
};

module.exports = {
  printHelloWorld
};

b.js

const func = require('./a.js'); // 같은 디렉토리에 있다고 가정
func.printHelloWorld();

여기서 module.exports 의 module 은 현재 모듈에 대한 정보를 갖고 있는 객체이다. 이는 예약어이며 그 안에 id , path , parent 등의 속성이 있고 exports 객체를 가지고 있다.

ES6(ES2015) 방식

이건 너무 잘 설명된 영상이 있으니까 영상으로 보기!

🌼 개념 이해하기

호이스팅

변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(Hoisting) 이라고 한다.

호이스팅이 발생하는 이유는 다음과 같다.

  1. 자바스크립트 엔진은 함수선언문 해석 -> 변수 초기화 -> 코드실행 순서로 진행된다.
  2. 코드를 실행할 땐 이미 함수 선언문과 변수가 생성되어있는 상태이기 때문에
  3. 어디에서든 함수나 변수를 호출할 수 있다. (제일 윗 줄에서도 호출 가능)

호이스팅의 예시

  1. 매개 변수&변수의 호이스팅
	function hello(x) { //수집대상 1(매개변수)
        console.log(x);
        var x; //수집대상 2(선언된 변수)
        console.log(x);
        var x = 2; //수집대상 3(선언된 변수)
        console.log(x);
    }

    hello(1);

⬇

    function hello( ) { 
        var x; //수집대상 1(매개변수)
        var x; //수집대상 2(선언된 변수)
        var x  //수집대상 3(선언된 변수)
        x = 1; //함수 호출시 매개변수에 할당된 값
        console.log(x);
        console.log(x);
        x = 2;
        console.log(x);
    }

    hello(1);
  1. 함수 선언 호이스팅
    function a () {
        console.log(b); // (1)
        var b = 'bbb'; //수집대상 1(선언된 **변수**)
        console.log(b); //(2)
        function b () {} //수집대상 2(선언된 **함수**)
        console.log(b); //(3)
    };
    a();

⬇

    function a () {
        var b; //수집대상 1(선언된 **변수**) ====> 변수는 선언부만 끌어올려짐(hoisted)
        function b () {} //수집대상 2(선언된 **함수**)	===> 함수는 전체가 끌려올라감
        console.log(b); // (1)
        b = 'bbb';
        console.log(b); //(2)
        console.log(b); //(3)
    };
    a();

이벤트 버블링

특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.

스코프

Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있다.
즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 할 수 있다.
자바스크립트에선 스코프는 global(전역)과 local(지역) 으로 나뉜다.
전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미이고,
지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미이다.
자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 된다.
그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있다.
이걸 함수 스코프(function-scoped)라고 하며, 지역 스코프의 예라고 할 수 있다.

아래 코드를 보면서 전역 스코프와 지역 스코프를 비교해보자.

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print(); // 111
console.log(a); // 1

프로토타입

블로그 글을 보면서 이해중인데 아직 이해안됨.. 더 공부하고 쓰자

Shadow DOM

섀도 DOM은 DOM의 구조를 가지고 있으나 외부에는 노출되지 않은 DOM을 말하며 DOM의 구조를 캡슐화할 때 사용한다.
일반적인 외부의 style은 적용되지 않고 섀도 DOM을 추가하거나 접근하기 위해서는 별도의 방법이 필요하다.
그리고 위에서 설명한 템플릿 엘리먼트를 이용해 만들어진 데코레이터나 커스텀 엘리먼트는 모두 섀도 DOM으로 만들어진다. 다만, 데코레이터에서 만들어진 섀도 DOM은 스크립트로 접근하거나 수정할 수 없다.
그에 비해 커스텀 엘리먼트로 만들어진 섀도 DOM은 스크립트로 수정할 수 있다.

다음 그림을 보면 왼쪽이 일반적인 DOM 트리이며 오른쪽이 섀도 DOM 트리이다.

코드로 본다면 다음 코드가 왼쪽에 있는 DOM 트리의 코드다.

<x-slide is="x-slide">  
    <li><img src="http://helloworld.naver.com/img/1.jpeg" alt="1.jpeg" width="500px" height="333px" style=""></li>
    <li><img src="http://helloworld.naver.com/img/2.jpeg" alt="2.jpeg" width="500px" height="333px" style=""></li>
    <li><img src="http://helloworld.naver.com/img/3.jpeg" alt="3.jpeg" width="500px" height="333px" style=""></li>
    <li><img src="http://helloworld.naver.com/img/4.jpeg" alt="4.jpeg" width="500px" height="333px" style=""></li>
</x-slide>

그리고 다음 코드가 섀도 DOM이 된다.

<element name="x-slide" extends="ul" constructor="SlideControl">  
    <template>

        <div class="slide">
            <ul>
                <content select="li"></content>
            </ul>
        </div>
    </template>
</element>

기존의 컴포넌트는 일반적인 DOM 트리가 렌더링된 후 해당 DOM 트리를 변경하기 때문에 리플로(reflow)와 리페인트(repaint) 등의 큰 비용이 발생한다.
하지만 섀도 DOM을 사용하면 다음 그림과 같이 섀도 호스트(shadow host),
위의 코드로 말하면 x-silde 엘리먼트를 만나는 순간 섀도 DOM이 렌더링된다.

출처 클릭

Strict

strict 모드는 ES5(ECMA Script 5)에 추가된 키워드다.
strict 모드는 자바스크립트가 묵인했던 에러들의 에러 메시지를 발생시킨다.
엄격하게 문법 검사를 하겠다는 뜻이다.

strict 모드 선언

스크립트의 시작 혹은 함수의 시작 부분에 "use strict"(또는 'use strict')를 선언하면 strict 모드로 코드를 작성 할 수 있다.

profile
so ez
여기 프론트엔드 개발자 죽어가요
이전 포스트

프론트엔드 로드맵 스터디 #3 #CSS

다음 포스트

프론트엔드 로드맵 스터디 #5 #버전관리

0개의 댓글