JawsBean

[JS] 클로저 모듈 패턴

2023-01-19T00:00:00+09:00

클로저 모듈 패턴
- 클로저를 이용해 새로운 객체 생성

객체 지향 프로그래밍은, 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한 곳에 묶어서 처리한다.
속성과 메서드가 하나의 “객체”라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object와는 다르게, 클래스(Class)라는 이름으로 부른다.

클로저 모듈 패턴

메서드 호출은 객체.메서드()와 같이 객체 내에 메서드를 호출하는 방법이다.
메서드 호출 방식을 이용할 때에는 ==화살표 함수==를 쓰지 않는다.

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

클로저를 이용해 새로운 객체 생성

똑같은 기능을 하는 counter함수가 여러 개 필요할 떄, 같은 코드를 여러 번 복사, 붙여넣기 하는건 비효율적이다.
아래 코드는 똑같은 기능을 하는 카운터를 여러 개 만드는 방법 중 하나인 ==클로저 모듈 패턴==이다.

function makeCounter() {
  let value = 0;
  return {
    increase: function() {
      value++;
    },
    decrease: function() {
      value--;
    },
    getValue: function() {
      return value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

[JS] 클래스와 인스턴스

2023-01-19T00:00:00+09:00

객체 지향 프로그래밍
- instance 만들기
- class 만들기
  - ES5
  - ES6
속성과 메서드
중요하니 외우자

객체 지향 프로그래밍은, 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한 곳에 묶어서 처리한다.
속성과 메서드가 하나의 “객체”라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object와는 다르게, 클래스(Class)라는 이름으로 부른다.

객체 지향 프로그래밍

객체 지향 프로그래밍은
하나의 ==모델이 되는 청사진==을 만들고 class
그 ==청사진을 바탕으로 한 객체==를 만드는instance
==프로그래밍 패턴==

기본적인 설계로 자동차의 청사진을 그려놓기. -> 청사진을 바탕으로 각각의 객체가 특정한 자동차 모델로 만들어짐

instance 만들기

instance는 그냥 일반적인 함수를 정의하듯 만든다.
근데 함수를 이용하는 방법이 조금 다르다.
==new==키워드를 사용해 만든다.

let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'ini', 'white');
let beetles = new Car('volkswagen', 'beetles', 'red');
//각각의 인스턴스는 'Car'라는 클래스의 고유한 속성과, 메소드를 갖는다.

class 만들기

ES5

==대문자==로 시작하며 ==일반명사==로 만든다.
(일반 함수는 적절한 동사를 포함하고 소문자로 시작하는 것과는 대조적이다.)

ES6

신문법 ES6에 새로운 방법이 도입되었는데 class키워드이다.
최근엔 이 방법이 자주 쓰인다고 한다.

ES5와 ES6의 차이를 아래 코드로 알아보면

//ES5
function Car(brand, name, color){
  //인스턴스가 만들어질 때 실행되는 코드
}

//ES6
class Car {
  constructor(brand, name, color){
    //인스턴스가 만들어질 때 실행되는 코드
  }
}

위에서 보이는 함수는 객체지향 프로그래밍에서 생성자(constructor)함수라고 한다.
생성자 함수는 return 값을 만들지 않는다.

속성과 메서드

클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용한다.

? 자동차로 속성과 메서드를 생각해보면

속성: 브랜드, 차 이름, 색상, 현재 연료 상태, 최고 속력 , 옵션 등
메서드: (객체에 딸린 함수) 연료 주입, 속력 설정, 운전 등

속성? this?

객체 지향 프로그래밍에서 빠지지 않고 등장하는 키워드 this.
==인스턴스 객체==를 의미한다.

//ES5
function Car(brand, name, color){
  this.brand = brand;
  this.name = name;
  this.color = color;
}

//ES6
class Car {
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이며,
this에 할당한다는 것은 => 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미.

메서드?

//ES5
function Car(brand, name, color){
  Car.prototype.refuel = function(){
    //연료 공급을 구현하는 코드
  }
  Car.prototype.drive = function(){
    //운전을 구현하는 코드
  }
}

ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있다.
Car 클래스에 메서드를 추가하기 위해서 Car.prototype.fuel같이 prototype을 이용해야 함.

class Car {
  constructor(brand, name, color){/* 생략 */}

  refuel(){

  }

  drive(){

  }
}

ES6는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다.
refule(){},drive(){}와 같이 작성되어 있는 부분을 말한다.

Instance에서 사용하는 법

let avante = new Car('hyundai', 'avante', 'black');
avante.color; // 'black'
avante.drive(); //아반떼가 운전을 시작합니다.

let mini = new Car('bmw', 'nmini', 'white');
mini.brand; // 'bmw'
mini.refuel(); //미니에 연료를 공급합니다.

prototype? constructor? this?

중요하니 외우자

ES5방식이고 현재는 신문법이 더 잘 쓰이므로 신문법도 잘 외워두자.

class Car{
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  drive(){
    console.log(this.name + '가 운전을 시작합니다');
  }
}

let avante = new Car('hyundai', 'avante', 'black');
avante.color; //'black'
avante.drive(); // 'avante'가 운전을 시작합니다.

배열은 Array의 인스턴스다?

let avante = new Car('hyundai', 'avante', 'black');
avante.color; //'black'
avante.drive(); //아반떼가 운전을 시작합니다.

let arr = ['hi', 'my', 'name'];
arr.length //3
arr.push('is') // ['hi', 'my', 'name', 'is']

배열은 전부 Array의 인스턴스이다!!!!
속성, 메서드 사용법이 동일하다!!

new Array(__, __, __)

와 같은 방식으로도 배열을 만들 수 있다!

==배열을 정의한다 === Array의 인스턴스를 만들어낸다==

(mdn 메서드 설명에 prototype이라고 붙어있는 이유는 모든 메서드들이 클래스의 원형 객체에 정의되어 있기 때문이다.)

[JS] 객체 지향 프로그래밍 OOP

2023-01-19T00:00:00+09:00

절차적 언어
객체 지향 언어
- OOP

객체 지향 프로그래밍은, 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한 곳에 묶어서 처리한다.
속성과 메서드가 하나의 “객체”라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object와는 다르게, 클래스(Class)라는 이름으로 부른다.

절차적 언어

옛날 옛적엔 프로그래밍언어를 보통 ‘절차적 언어’라고 불렀다. (C, 포트란 등이 있다고 한다)
절차적 언어란 무엇이냐, ‘절차대로 합시다!‘ 에서 풍기는 뉘앙스처럼 순서대로,

순차적으로 명령들을 처리하는 언어를 말한다.

근데 이게 생각보다 불편한거다.
왜? 순서가 지나가면 그대로 끝인거니까..!
예전에 학교에서 급식먹다보면 맛있는 반찬은 더 먹고 싶을 때가 있지 않은가?
하지만 그렇다고 해서 중간에 끼어서 반찬을 더 달라고 했다간 뒤에서 차례를 기다리며 쏘아보는 학우들의 눈빛레이저에 타버리고 말 것이다.

객체 지향 언어

그래서 등장한 것이 바로 이 객체 지향 언어이다.
물론 순차적으로 작동은 한다. 하나의 커다란 대 전제인 것이다.
하지만 그 안에서 데이터의 접근, 처리과정에 대한 것들이 각각 그룹을 만들어 보다 효율적으로 데이터를 처리할 수 있게 된 것이다.

이렇게 생각하면 어떨까?
우리가 레고를 만든다고 생각해보자.

당신은 집을 만들 것이고 나는 자동차를 만들거다.
함께 레고들을 모두 가운데에 쏟아놓고 이제 레고를 만드는데…. <-이러면 진행속도도 더디고 아무거나 갖다쓰다가 뒤늦게 다시 부품을 찾고.. 이런 일이 반복될 것이다.

하지만, 각자의 레고를 서로에게서 분리하고, 그 안에서 색깔대로, 모양대로 모아 레고를 만든다면? 비록 분류과정에서 시간이 조금 걸릴지 몰라도 실제로 조립을 시작하면 금방 완성될 것이다!

이러한 개념의 객체 지향 언어는 ‘클래스’라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성하는 특징이 있고,
현대의 언어들은 대부분 객체 지향의 특징을 가지고 있다. (Java, C++, C#..등등..)
(그러나 자바스크립트는 엄말히 말해 객체 지향 언어는 아니다. 하지만 객체 지향 패턴으로 작성할 수는 있지.)

OOP

OOP는 프로그램 설계철학이다.
OOP의 모든 것은 “객체”로 그룹화된다.
OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있다.

객체 내에는 ==데이터와 기능이 함께 있다==라는 원칙에 따라 메서드와 속성이 존재한다.

[JS/브라우저] DOM

2023-01-18T00:00:00+09:00

HTML에 JavaScript 적용하기
DOM 다루기

HTML에 JavaScript 적용하기

HTML에 JavaScript를 적용하려면 태그를 이용한다.
웹 브라우저가 작성된 코드를 해석하다 스크립트 태그를 만나면 HTML코드 해석을 멈추고 스크립트 태그를 먼저 실행한다. (등장과 함께)

**이 떄, 스크립트 요소를 HTML에 추가하는 두 가지 방법이 있다.

에 추가하기
</body>가 끝나기 전에 추가하기.

//* 왜 인지 추가하기

자바스크립트라는 프로그래밍 언어와 DOM을 이용해 HTML에 접근하고 조작한다.

DOM 다루기

Tip

DOM구조를 조회할 때에는 console.dir이 유용하다 console.dir은 console.log와 달리 DOM을 객체의 모습으로 출력한다.

아래의 이미지처럼 Tweetlist를 만들어보았다.
요소를 만들고, 추가하고, 수정하고, 삭제해볼 것이다.

CREATE

document.createElement(‘div’)
= 새로운 ‘div’요소를 만든다

document.createElement('div'); //'div'요소를 만들었다

const tweetDiv = document.createElement('div'); //'div'요소를 만들어 'twetDiv'에 할당했다.

‘div’요소를 만들었다. 그러나 Tweetlist에는 보이지 않을 것이다. 왜냐하면 요소에 추가하지 않았기 때문이다.

APPEND

create에서 생성한 twwetDiv라는 변수는 아직 공중에 붕 뜬 상태다. 그러므로 create에서 생성한 tweetDiv를 트리구조와 연결한다. -> Tweetlist에 append한다.

document.body.append(tweetDiv)
= tweetDiv에 담긴 새로운 <div>요소를 <body>요소에 append한다.

‘tweetDiv’에 담긴 ‘div’요소를 ‘body’요소에 append했다. 그러나 아직 Tweetlist에는 보이지 않을 것이다. 왜냐하면 추가된 요소에 내용이 작성되어 있지 않기 때문이다.

그런데 뭔가 거슬린다. 왜 새로 만든 ‘div’요소는 ‘#container’에 들어가 있지 않을까? 넣으려면 어떻게 해야할까?

READ

DOM을 이용해 HTML Element를 조회하는 방법이다.

클래스 이름이 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회한다. querySelector

const oneTweet = document.querySelector('.tweet');

클래스 이름이 tweet인 HTML 엘리먼트 전부를 조회한다. querySelectorAll

그리고

이렇게 조회한 HTML요소들은 배열처럼 ‘for’문을 사용할 수 있다. (배열은 아님)
이런 배열 아닌 배열을 ‘유사배열’, ‘배열형 객체’ 등 다양하게 부른다.
정식 명칭은 Array-like Object이다.

const tweets = document.querySelectorAll('.tweet');

+옛날방식인 getElementById

DOM조회 메서드인 getElementById는 querySelector와 비슷한 역할을 하는 오래된 방식이다.

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

tweetDiv를 container에 추가하기

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

)

각각 변수에 담아 append해주면 된다.
내용을 추가해보자

UPDATE

예시는 아래 코드로 시작한다.

const oneDiv = document.createElement('div');

1. 비어있는 엘리먼트에 문자열 추가하기

textContent

oneDiv.textContent = 'dev';
console.log(oneDiv); //<div>dev</div>

2. 엘리먼트에 `class` 추가하기

CSS스타일링 적용 등 클래스가 필요할 때 사용한다.
classList.add

oneDiv classList.add('tweet');
console.log(oneDiv); // <div class="tweet">dev</div>

텍스트를 넣고, 클래스를 추가해 CSS까지 적용되게 한 후 다시 append한다.

class, id 말고 다른 속성(attribute)추가하려면 -> setAttribute

DELETE

삭제하는 방법에도 여러 가지가 있다.

1. 삭제하려는 요소의 위치를 알고 있는 경우

앞서 생성하고 추가한 tweetDiv를 remove 메서드를 이용해 삭제해보자

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

//id가 container인 요소 아래에 TweetDiv를 추가하고, remove로 삭제한다.

2. 여러 개의 자식 요소를 지우고 싶다면

innerHTML을 이용한다.

// 컨테이너의 모든 자식 요소를 지우려면,
document.querySelector('#container').innerHTML = '';

innerHTML은 분명 편리하나 보안에서 몇 가지 문제를 가지고 있기에 다른 메서드를 사용한다.

removeChild

removeChild는 자식 요소를 지정해서 삭제하는 메서드이다.
모든 자식 요소를 삭제하기 위해, 반복문(for, while, etc)을 활용할 수 있다.

//자식 요소가 남아있지 않을 때까지 첫 번째 자식 요소를 삭제하는 코드

const container = document.querySelector('#container');
while(container.firstChild){
  container.removeChild(container.firstChild)
}

//container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거한다

removeChild와 while을 사용해 자식 요소를 삭제하면 제목인 H2 “Tweet List”까지 삭제된다.
이를 방지하는 많은 방법 중 세가지를 아래에 기술하자면

자식 요소가 담고 있는 문자열을 비교해 “Tweet List”만 남기거나,
새로운 변수를 생성하고 Tweet List를 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가하거나
혹은 자식 요소를 하나만 남기게 하거나
직접 클래스 이름이 ‘tweet’인 요소만 찾아 지우는 방법이 있다.

//3. 자식 요소 하나만 남기기

const container = document.querySelector('#container');
while(container.children.length > 1){
  container.removeChild(container.lastChild);
}


//4. 클래스 이름이 tweet인 요소만 찾아 제거하기

const tweets = document.querySelectorAll('.tweet');
tweets.forEach(function(tweet){
  tweet.remove();
})

//혹은

for(let tweet of tweets){
  tweet.remove();
}

클래스 이름이 ‘tweet’인 요소를 모두 삭제한다

[JS] 이벤트 객체

2023-01-18T00:00:00+09:00

이벤트
실습

이벤트

이벤트는 사용자의 어떤 행동에 의해 생기는 어떤 변화를 말한다.
이벤트가 발생하는 시점이나 순서는 ‘사용자’ 맘대로이므로 접근방식이 달라야 한다.

이벤트 실행 방식은 다음과 같다.
이벤트 발생! => 이벤트 감지! => 이벤트 처리!

이 때, 이벤트가 발생하면 실행하는 함수를 이벤트 핸들러라고 한다.

이벤트의 종류

기본

‘a’ 요소를 클릭 하면 해당 페이지로 이동
브라우저 화면에서 우측 마우스 클릭시 나오는 메뉴
‘form’요소 내 ‘submit’ 버튼 클릭하면 지정 경로로 내용 전송

마우스 이벤트

키보드 이벤트

폼 이벤트

값 변경 이벤트

이벤트 객체

이벤트 객체는 이벤트 발생시 전달되는 정보.
특정 이벤트와 연관된 객체로, 해당 이벤트에 대한 정보를 담고 있다.
이는 이벤트 핸들러에 전달되는 인수(매개변수)이다.
보통 ==event, e, ev== 등으로 표시한다.

이벤트 객체의 주요 속성 (property)

이벤트 핸들러 (이벤트 리스너)

이벤트가 발생했을 때, 이에 반응하도록 ==실행 코드에 연결== 하는 처리기 혹은 실행을 담당하는 코드.

이벤트 핸들러 (Event Handler)

==하나의 요소==에 ==하나의 이벤트=만 처리 가능

HTML요소의 ==on—-==속성에 등록하기 (태그에 직접 지정 -> 인라인 이벤트 핸들러)
그러나 ==관심사 분리==를 위해 리액트 등의 프레임워크/라이브러리에서 작성하는게 아닌 이상 인라인 이벤트 핸들러 방식으로 이벤트를 처리하지 않는게 좋다.

<button onclick="func()">클릭하라</button>

JS에서 DOM요소의 프로퍼티에 등록하기

case1.

el.onclick = Function;

//객체명.on이벤트명 = 호출할 함수명;

case2.

el.onclick = function(){
  console.log('클릭했나')
}

이벤트 리스너 (Event Listener)

==하나의 요소==에 ==여러 이벤트== 처리 가능
이벤트 핸들러보다 요걸 자주 쓰자.

addEventListener 메소드 등록하기
1. HTML태그요소에 해당 이벤트 리스너를 요소 객체의 메소드와 연결시켜 이벤트가 발생했을 때, 원하는 처리 실행하기.
target.addEventListener(type, 콜백함수[,타겟팅종류])

type: 이벤트 유형(‘click’, ‘dbclick’등)
콜백함수: 이벤트 처리 내역
타겟팅 종류: true/false(true: 캡처링, flase: 버블링 단계/기본값)

실습

커피, 주스라는 버튼을 만들어,
각 버튼을 누를 때마다 콘솔에 출력시키기.

html 만들기

<body>
    <button>커피</button>
    <button>주스</button>
    <script src="script.js"></script>
</body>

script 작성

let menus = document.querySelectorAll("button");

let btnCoffie = menus[0];
let btnJuice = menus[1];
  
btnCoffie.onclick = handleClick;
btnJuice.onclick = handleClick;


function handleClick(event) {
    let currentMenu = event.target.textContent;
    //btnCoffie 혹은 btnJuice 요소의 '텍스트' = currentMenu
    console.log(currentMenu + "를 주문하셨습니다만 문제라도?");
}

[JS] 배열과 객체

2023-01-14T00:00:00+09:00

배열
객체

배열

배열만들기

배열은 순서가 있는 값이다.
순서는 ==인덱스==라고 부르며 ==1이 아닌 0부터== 번호를 매긴다.

각각의 엘리먼트는 쉼포로 구분하고, 대괄호를 이용해 배열을 만든다.
let order = [a, b, c, d, e]
order라는 배열의 0번째 인덱스 값은 a이다.

배열의 값에 접근하기

값은 인덱스를 이용해 접근한다.

위의 예시를 참고하여 order라는 배열의 0번째 인덱스를 ==조회==하려면
order[0] //a

배열의 값을 변경하려면

order[3] = 321;
console.log(order) // [a, b, c, 321, e]

배열 활용하기

길이 알아내기 (.length)
order길이 알아내려면 => ==order.length== //5

(.(dot)을 이용해 변수가 갖고 있는 속성(property)에 접근할 수 있다.)

요소 추가하고 삭제하기 (.push, .pop, .unshift, .shift)
1. order 맨 뒤에 요소 추가하기(.push)
```
 order.push(3) // [a, b, c, 321, e, 3]
```
2. order 맨 뒤에 요소 삭제하기(.pop)
```
 order.pop() // [a, b, c, 321, e]
```
3. order 맨 앞에 요소 추가하기(.unshift)
```
 order.unshift(1) // [1, a, b, c, 321, e]
```
4. order 맨 앞에 요소 삭제하기(.shift)
```
 order.shift() // [a, b, c, 321, e]
```

배열 + 반복문 = 배열 반복하기

배열의 요소를 한 번씩 출력하자

let myNum = [5, 4, 3, 2, 1]

//배열 myNum의 n번째 인덱스를 출력하자 === 배열의 요소를 한번씩 모두 출력하자.
//1. n은 0부터 시작한다
//2. n을 배열의 길이보다 작을 때까지 반복한다 (index가 0부터이므로)
//3. n은 반복문이 실행될 때마다 1씩 증가한다.

for(let n = 0; n<myNum.length; n++){
  console.log(myNum[n])
}

그 외 배열 메서드들

Array.isArray() 이 값이 배열인지 아닌지 판별할 수 있다.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

indexOf() 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 리턴한다.
존재하지 않으면 -1을 리턴한다.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// Expected output: 1

// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4

console.log(beasts.indexOf('giraffe'));
// Expected output: -1

includes() 배열이 특정 요소를 포함하고 있는지 판별한다.

  const array1 = [1, 2, 3];

  console.log(array1.includes(2));
  // Expected output: true

  const pets = ['cat', 'dog', 'bat'];

  console.log(pets.includes('cat'));
  // Expected output: true

  console.log(pets.includes('at'));
  // Expected output: false

객체

키와 값으로 구성된 프로퍼티들의 집합.
원시타입을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 모두 객체.

객체만들기

객체 리터럴

가장 일반적인 객체 생성 방식.
중괄호를 사용하여 객체를 생성하는데 {}내에 1개 이상의 프로퍼티를 작성하면 해당 프로퍼티가 추기된 객체를 생성할 수 있다.
{}내에 아무 것도 작성하지 않으면 빈 객체가 생성된다.

  let me = {};

  let you = {
    name: 'Lee',
    gender: 'male',
    hi: function(){
      console.log('Hi!, How are you ' + this.name)
    }
  }

Object 생성자 함수

new연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다.
빈 객체 생성 이후 프로퍼티 또는 메소드를 추가해 객체를 완성하는 방법. (사용빈도수는 낮다.)

빈 객체를 만든다
객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당한다
이미 존재하는 프로퍼티 키에 새로운 값을 할당하면 프로퍼티 값은 할당한 값으로 변경된다. (덮어쓰기)

생성자 함수란 new키워드와 함께 객체를 생성하고 초기화하는 함수.
생성자 함수를 통해 생성된 객체를 인스턴스라고 함.
생성자 함수의 이름은 파스칼 케이스를 사용하는 것이 일반적이다 (구분하기 위해서)

  let person = new Object();

  person.name = 'Jaw';
  person.gender = 'female';
  person.hi = function(){
    console.log('say it ' + this.name);
  }

  console.log(person)
  //{name: 'Jaw', gender: 'female', hi: f} 
  //f -> function

생성자 함수

위의 방식들은 프로퍼티 값만 다른 여러 개의객체를 생성할 때 불편하다.
동일한 프로퍼티를 갖는 객체임에도 매번 같은 프로퍼티를 작성해야하기 때문이다. (노가다)
생성자 함수를 사용하면 객체 생성 템플릿마냥 뚝딱 찍어낼 수 있다.

  function Person(name, gender){
    this.name = name;
    this.gender = gender;
    this.hi = function(){
      console.log('say it ' + this.name);
    };
  }

  let person1 = ('Jaw', 'female');
  let person2 = ('Yang', 'male');

생성자 함수 이름은 일반적으로 대문자로 시작한다.
프로퍼티 또는 메소드명 앞에 작성한 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 외부에서 참조 가능하다. (public)
생성자 함수 내에서 선언된 일반 변수는 외부에서 참조 불가하다. (private)

객체의 키와 값에 접근하기

프로퍼티 키는 일반적으로 문자열(빈 문자열 포함)을 지정함. (따옴표 사용함)
(그 외 값을 지정하면 암묵적으로 타입변환되어 문자열이 된다.)
(자바스크립트에 사용 가능한 이름인 경우 따옴표 생략 가능 그 외에는 따옴표 붙이기)
(표현식을 키로 사용하려면 대괄호로 묶어야 함.)
(예약어는 쓰지 프로퍼티 키로 쓰지 말자.)
프로퍼티 값은 모든 값과 표현식이 올 수 있으며 함수인 경우 메소드라 한다.

키 (in 연산자 사용해 확인하기, keys 사용해 접근하기)

in연산자를 사용해 해당 키가 존재하는지 확인할 수 있다.

  //person이라는 객체가 있다고 치고

  'content' in person; //트루나 폴스 하나 중에 나올 것임

.keys()

  //person이라는 객체가 있다고 치고

  Object.keys(person)
  // (4) ['1', 'first-name', 'last-name', 'gender']

  let name = Object.keys(person)[1] // first-name

값 (마침표(.), 대괄호([])표기법, .values())

  let person = {
    'first-name': 'bean',
    'last-name': 'Jaws',
    gender: 'female',
    1: 10
  }

  console.log(person.first-name); //NaN: undefined-undefined
  console.log(person[first-name]); //ReferenceError: first is not defined
  console.log(person['first-name']); //'bean'

  console.log(person.gender); //'female'
  console.log(person[gender]);   // ReferenceError: gender is not defined
  console.log(person['gender']); // 'female'

  console.log(person['1']); // 10
  console.log(person[1]);   // 10 : person[1] -> person['1']
  console.log(person.1);  //SyntaxError

프로퍼티키 : 유효한 자바스크립트 이름 && 예약어가 아닌 경우 => 마침표, 대괄호 표기법 모두 이용 가능
프로퍼티키 : 유효한 자바스크립트 이름이 아니거나 예약어라면 => 대괄호 표기법 이용 (프로퍼티 키는 반드시 문자열이어야 함)
객체에 존재하지 않는 프로퍼티를 참조하면 undefined
.values()

  Object.values(person)
  // (4) ['1', 'first-name', 'last-name', 'gender']

객체의 키와 값을 변경하려면

  let person = {
    name: 'lee',
    gender: 'male',
    age: 49,
  }

객체가 소유하고 있는 프로퍼티에 새로운 값 할당하기
```
  person.name = 'Jaws';
```
객체가 소유하고 있지 않은 프로퍼티 키에 값 할당하기 (객체에 추가하기)
```
  person.hobby = 'sleep'  
```
프로퍼티를 삭제하려면 - delete연산자 사용
```
  delete.person.hobby;
```

[JS] 핵심 개념과 주요 문법은?

2023-01-13T00:00:00+09:00

원시 자료형 & 참조 자료형
- 원시자료형
- 참조자료형
스코프
클로저
- 클로저의 특징
- 클로저의 활용
  - 1. 데이터를 보존하는 클로저 함수
  - 2. 클로저 모듈 패턴
ES6 주요문법
- spread / rest
- 구조분해할당

원시 자료형 & 참조 자료형

원시자료형

JavaScript에서 원자시료형은 객체가 아니면서 method를 갖지 않는 6개의 타입 string, number, ~~bigint~~, boolean, undefined, ~~symbol~~, (null) (취소선은 자주 쓰지 않는 타입)

원시자료형은 모두 “하나”의 정보, 즉 데이터를 담고 있다.
==데이터 보관함 한 칸에 하나의 데이터만== 넣을 수 있는 “원시적인”방식.
그래서 원시자료형이 담기는 보관함의 크기는 고정하는 것이 합당하다. (데이터 크기를 예측 가능하기 때문)
=> 변수에는 하나의 데이터만 담는다

원시 자료형은 값 자체에 대한 변경이 불가능하지만 변수에 다른 데이터를 할당할 수는 있다.

참조자료형

원시 자료형이 아닌 것은 모두 참조 자료형이다. (배열, 객체 함수가 대표적이다.) 참조 자료형에는 하나가 아닌 여러 개의 데이터가 담긴다.

변수에는 참조 자료형이 저장되는 데이터 보관함을 찾아갈 수 있는 ==주소==가 담겨있고 주소가 가리키는 곳에 위치한 데이터 보관함의 사이즈는 동적으로 변한다.

:smirk: 정리하면 원시 자료형이 할당될 땐 변수에 값 자체가 담기고,
참조 자료형이 할당될 땐 보관함으 주소가 담긴다.

참조자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변화는 특별한 보관함을 사용할 수 있다.

스코프

스코프는 ‘변수 접근 규칙에 따른 유효 범위’이다.

스코프의 주요 규칙

안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있으나 반대는 불가능
스코프는 중첩이 가능하다.
1. 가장 바깥쪽 스코프는 전역 스코프라고 부른다.
2. 전역이 아닌 다른 스코프는 전부 지역 스코프라고 부른다.
  1. 지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역변수라고 부른다.
지역 변수는 전역변수보다 우선순위가 높다.

스코프와 변수 선언

스코프는 두 가지 종류가 있다.
블록스코프 : 중괄호를 기준으로 번위가 구분된다. (단, 화살표함수는 블록스코프다.)
함수스코프 : function keyword가 등장하는 함수 선언식 및 함수 표현식

var로 변수를 선언하면?

for(var i = 0; i < 5; i++>{
  console.log(i);
})
console.log('iis i:', i);

= 블록범위를 벗어나도 변수 i 에 접근이 가능하다.
var키워드는 블록 스코프를 무시하고 함수 스코프만 따른다. (단, 화살표함수의 블록스코프는 제외)

그러나 위처럼 예외의 예외가 있는 등 사용시 고려해야할 점이 많으므로,
블록 단위로 스코프를 구분했을 때 훨씬 더 예측 가능한 코드를 작성할 수 있는 ‘let’키워드의 사용을 권장한다.

var보다 let을 더 권장하는 또 다른 이유
- var키워드는 재선언을 해도 에러가 나지 않지만 let 키워드는 에러가 나 재선언을 방지한다. (재선언 남발하면 뭐가 뭔지 알 수 없어 코드작성에 혼란을 가져다 줄 수 있다.)
또 다른 변수 선언 키워드 const
- 변하지 않는 값. 상수를 정의할 때 사용.
- 값의 재할당이 불가하여 의도치 않은 값의 변경을 막을 수 있다.

변수 선언에서 주의할 점.

var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다.

  var myName = 'jscho';
  console.log(window.myName); // jscho

  function func(){
    console.log('bar');
  }

  console.log(foo === window.foo); //true

전역 변수에 너무 많은 변수를 선언하지 말 것.
1. 편리하지만 다른 함수 혹은 로직에 의해 의도치 않은 변경 발생할 수 있다. (side effect)
let, const를 주로 사용하라
1. var는 블록 스코플르 무시하며 재선언을 해도 에러를 내지 않아 버그를 유발한다.
2. 전역 변수를 var로 선언하면 window 기즌을 덮어씌워 내장 기능을 사용할 수 없게 만들 수 있다.
선언 없는 변수 할당 금지
1. 선언 키워드( var, let const)없이 변수를 할당하면 해당 변수는 var로 선언한 전역변수처럼 취급된다.
  1. ‘use strict’ (엄격모드)를 사용해 보다 엄격하게 에러를 판단할 수 있다. (파일 상단에 입력)

클로저

클로저의 특징

함수를 리턴한다.
내부 함수는 외부 함수에 선언된 변수에 접근 가능.

함수를 리턴하는 함수

  const adder = x => y => x + y;

  const adder = function (x) {
    return function (y) {
      return x + y;
    }
  }

  // 위, 아래의 adder 함수는 동일하게 작동한다.

클로저는 리턴하는 함수에 의해 스코프가 구분된다.
클로저의 핵심은 스코프를 이용해 변수의 접근 범위를 닫는 데에 있다. (closure)
중요한 건, 변수가 선언된 곳.

클로저의 활용

일반적인 함수는, 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없다.
그러나 클로저는 외부 함수의 실행이 끝나도, 오부 함수 내 변수가 메모리 상에 저장된다.

예시를 보자

1. 데이터를 보존하는 클로저 함수

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

const divMaker = tagMaker('div');
//`<div>${content}</div>`

divMaker('hello') //`<div>hello</div>`
divMaker('codestates') // `<div>codestates</div>`

const anchorMaker = tagMaker('a');
//`<a>${content}</a>`

anchorMaker('go') // `<a>go</a>`
anchorMaker('urclass') // `<a>urclass</a>`

2. 클로저 모듈 패턴

클로저를 이용해 내부 함수를 하나만 리턴하지 않고 객체에 담아 여러 개 리턴하게 만든다.

const makeCounter = () => {
  let value = 0;

  return {
    increase: () => {
      value = value + 1
    },
    decrease: () => {
      value = value - 1
    },
    getValue: () => value
  }
}

const counter1 = makeCounter();
//counter1은 객체이다.

Q. makeCounter함수를 바꾸지 않고 value란 변수에 값을 새로 할당할 방법이 있을까?
A. NO. 직접 수정은 불가능하다. (-> 캡슐화라고 한다.)리턴하는 객체가 제공하는 메서드를 통해 간접 조작은 가능.

const counter1 = makeCounter();
counter1. increase();
counter1. getValue(); //1

const counter2 = makeCounter();
counter2.decrease();
counter2.getValue(); //-1

counter1과 counter2는 각각의 값을 가지고 있다.
함수 사용성을 극대화하여 서로에게 영향을 끼치지 않고 각각의 값을 독립적으로 가질 수 있다.

이와 같이 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것

=> 모듈화

클로저는 모듈화에 유리하다.

ES6 주요문법

spread / rest

spread문법 배열을 풀어서 인자로 전달하거나 배열을 풀어 각각의 요소로 넣을 때 사용한다.
spread문법은 배열에서 잘 쓰인다.
spread문법은 immutable(변경하지 않는다)하다. (필요하면 값 재할당을 해야함)

function sum(x, y, z){
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers) ///6
//배열을 풀어 각각의 요소로 넣었다.

rest문법 파라미터를 배열의 형태로 받아서 사용할 수 있다. (파라미터 개수가 가변적일 때 유용하다.)

function sum(...theArgs){
  return the Args.reduce((pre, cur)=>{
    return pre + cur
  });
}

sum(1, 2, 3) //6
sum(1, 2, 3, 4) //10
//파라미터를 배혈의 형태로 받아 사용했다.

응용

배열

배열 합치기

  let parts = ['shourders', 'knees'];
  let lyrics = ['head', ...parts, 'and', 'toes'];

  console.log(lyrics) //['head', 'shourders', 'knees', 'and', 'toes']

배열 복사

  let arr = [1, 2, 3];
  let arr2 = [...arr]; // arr.slice()와 유사하다.
        
  console.log(arr2) // [1, 2, 3]

객체

   let obj1 = {foo: 'bar', x: 42};
   let obj2 = {foo: 'baz', y: 13};

   let clonedObj = {...obj1}; //{foo: 'bar', x: 42}
   let mergedObj = {...obj1, ...obj2}; //{foo: 'bax', x: 42, y: 13} 
   //foo의 값만 obj2의 값으로 덮어씌워지고 나머지는 합쳐진다.

함수에서 나머지 파라미터 받아오기

   function myFun(a, b, ...manyMoreArgs){
     console.log("a", a);
     console.log("b", b);
     console.log("manyMoreArgs", manyMoreArgs);
   }

   myFun("one", "two", "three", "four", "five", "six")
   //a one
   //b two
   //manyMoreArgs ['three', 'four', 'five', 'six']
      

구조분해할당

구조분해할당은 spread문법을 이용해 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정이다.

분해 후 새 변수 할당

배열

const [a, b, ...rest] = [10, 20, 30, 40, 50];
      
console.log(a); //10
console.log(b); //20
console.log(rest) //[30, 40, 50]

객체

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}

console.log(a); //10
console.log(b); //20
console.log(rest); //{c: 30, d: 40}

객체에서 구조 분해 할당을 사용하는 경우, 선언키워드와 함께 사용하지 않으면 에러가 발생할 수 있다.

예제: 함수에서 객체 분해하기

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user) //jdoe is John

[HTML, CSS] Layout & Wireframe

2023-01-05T00:00:00+09:00

와이어프레임(Wireframe)
- 목업(Mock-up)
  - 와이어프레임의 목적?
- 와이어프레임 그리기
  - HTML 구성하기
  - 레이아웃 리셋

와이어프레임(Wireframe)

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 -> 와이어프레임

단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. (화면의 영역을 구분함)
아주 단순하게 레이아웃과 제품의 구조를 보여주는 용도.
- 전환 효과, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX까지 표현하는 것이 아님

목업(Mock-up)

‘실물 크기의 모형’이라는 뜻을 가진 목업.
무형의 웹, 앱에서는 실제 제품이 작동하는 모습과 동일하게 HTML문서를 작성하여목업을 만든다

와이어프레임의 목적?

HTML문서작성을 통해 영역을 구분하고 구조를 그려보지 않으면 JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어려워진다.

와이어프레임 그리기

HTML 구성하기

대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다.
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용해 콘텐츠의 흐름을 따라 작업을 진행한다.

레이아웃 리셋

HTML문서는 기본적인 스타일을 가지고 있다. -> 기본 스타일이 레이아웃잡는데 방해가 될 때가 있다.

박스의 시작을 정확히 (0, 0)의 위치에서 시작하고 싶은데 body요소가 가진 기본 스타일에 약간의 여백이 있다.
width, height 계산이 여백을 포함하지 않아 계산이 어렵다.
브라우저마다 여백이나 글꼴과 같은 기본 스타일이 다르다

이럴 때는 아래의 코드를 CSS에 적고 시작하자.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

[CSS] Flexbox

2023-01-05T00:00:00+09:00

Flexbox?
- 부모요소에 적용하는 Flexbox 속성?
- 자식요소에 적용하는 Flexbox 속성?

Flex(Flexible)는 “잘 구부러지는, 유연한”이라는 뜻이다. Flexbox는 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는방법.

Flexbox?

display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법.
flexbox의 속성들을 활용해 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다.

부모요소에 적용하는 Flexbox 속성?

Flexbox의 부모요소에 적용해야하는 속성은 자식 요소들의 ‘정렬’과 관련이 있다.

1. flexbox-direction : 정렬 축 정하기

flex-direction속성은 자식 요소들을 정렬할 정렬 축을 정한다.
아무 설정 없을 시, 기본값은 가로정렬이다. (row)

main{
  display: flex;
  flex-direction: row;
}

2. flex-wrap : 줄 바꿈 설정하기

flex-wrap속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 기본값은 줄 바꿈을 하지 않는다.

main{
  display: flex;
  flex-wrap: nowrap;
}

3. justify-content: 축 수평 방향 정렬

justify-content속성은 자식 요소들의 수평 방향으로 어떻게 정렬할 것인지 정한다.
요소들이 가로로 정렬되어 있다면 가로로 어떻게 정렬할 것인지,
요소들이 세로로 정렬되어 있다면 세로로 어떻게 정렬할 것인지 정하는 속성이다.

주요 속성값으로는 flex-start, flex-end, center, space-betwee, space-around가 있다.

flex-direction: row인 경우
flex-direction: column인 경우

4. align-items: 축 수직 방향 정렬

align-items속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.
요소들이 가로 정렬되어 있다면 세로 방향으로 어떻게 정렬할 것인지
요소들이 세로 정렬되어 있다면 가로 방향으로 어떻게 정렬할 것인지 정하는 속성이다.

주요 속성값으로는 stretch, flex-start, flex-end, center, baseline이 있다.

flex-direction: row인 경우
flex-direction: column인 경우

자식요소에 적용하는 Flexbox 속성?

Flexbox의 자식요소에 적용해야하는 속성은 요소가 차지하는 ‘공간’과 관련이 있다.

1. flex 속성의 값

flex속성에는 세 가지 값을 지정해줄 수 있다.

grow (팽창 지수) : 요소의 크기가 늘어나야 할 때, 얼마나 늘어날 것인가
shrink (수축 지수) : 요소의 크기가 줄어들어야 할 때, 얼마나 줄어들 것인가
basis (기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인가

자식 요소에 flex 속성을 따로 설정하지 않았을 때의 기본값은 다음과 같으며 왼쪽에서 오른쪽으로 콘텐츠의 크기만큼 배치된다.

flex: 0 1 auto;

/* 
flex: grow shrink basis;
*/

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

2. grow: 얼마나 늘어날까?

팽창지수는 공간 총합에서의 비율로 빈 공간을 자치하게 된다.

3. shrink: 얼마나 줄어들까?

수축지수는 grow와 반대로 설정한 비율만큼 박스크기가 작아진다.
grow 속성과 함께 사용하는건 지양해야한다. 기본값은 1이다.

4. basis: 기본 크기는 얼마일까?

기본크기는 자식박스가 grow, shrink에 의해 변하기 전까지는 기본크기다.
flex-grow가 0일 때만, basis 크기를 지정하면 그 크기는 유지된다.

Tip

width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됨.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.

[HTML] HTML에 대해 가장 먼저 알아야 할 것은?

2023-01-04T00:00:00+09:00

HTML 기본 구조와 문법
자주 사용하는 HTML요소
시멘틱 요소
- 시멘틱 요소가 필요한 이유 및 상황
- 시멘틱 요소의 종류
HTML에서 id 및 class 목적에 맞게 사용하기
- 태그와 id, class 선택자

HTML(HyperText Markup Language)은 JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업 언어이다. 그래서 HTML로 기본 뼈대를 만들고 CSS로 스타일을 입힌 다음 JavaScript로 동적으로 움직이게 만들 수 있다. 이와 같이 웹 페이지의 뼈대역할을 하는 HTML에 대해 알아보자.

HTML 기본 구조와 문법

HTML은 tag들의 집합이다.

tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소 ```javascript

```

여는 태그 + 닫는 태그의 짝을 지어 작성한다. (: 여는태그, : 닫는태그)
Self-Closing Tag : 태그 내부에 내용이 없다면 닫는 태그를 사용하지 않아도 된다. ()

자주 사용하는 HTML요소

태그	설명
div	Division
span	Span
img	Image
a	Link
ul & li	Unordered List & List Item
input	Input(Text, Radio, Checkbox)
textarea	Multi-line Text Input
button	Button

div VS span
- div태그는 한 줄을 차지한다.
- span태그는 컨텐츠 크기만큼 공간을 차지한다.
img : src속성으로 이미지 주소를 가져와 삽입한다. (닫는 태그 필요없음)
a : 링크 삽입 href속성으로 링크 주소를 가져와 삽입한다.
ul : unordered list -> 숫자로 순서를 지정하지 않는 리스트
ol : ordered list -> 숫자로 순서를 지정하는 리스트
- ul, ol은 직계자식요소로 li만 올 수 있다.
input, textarea : 다양한 입력폼이다. 아이디를 입력하거나 체크박스에 체크하는 등.
- checkbox vs radio? : checkbox는 여러개 선택 가능하지만 radio는(name이라는 속성으로 그룹설정시) 하나만 선택 가능하다.
- textarea : 줄바꿈이 되는 입력폼
- button : 클릭하면 상태가 변하는, 우리가 흔히 아는 그 버튼.

시멘틱 요소

시멘틱이란 ‘의미가 있는, 의미론적인’이라는 뜻으로, 의미를 가진 요소를 사용하는 방식을 추구하는 것이다.

시멘틱 요소가 필요한 이유 및 상황

모든 단락에 div만 사용한다면 나중에 수많은 div를 마주하게 되었을 때, 이게 어떤 내용을 담는 부분인지 구조적으로 파악하기 어렵고 혼란스러워질 것이다. (div를 하나하나 탐색하는 것보다 의미 있는 코드블록을 찾는 게 더 편리하고 요소 안에 채워질 데이터 유형을 예측하기 쉽다.)
검색 엔진이 시멘틱요소를 더 좋아한다. 즉, 시멘틱 요소에 담긴 의미에 따라 검색 결과에 따른 상위노출이 결정될 수 있다.

시멘틱 요소의 종류

태그 이름	설명
article	독립적이고 자체 포함된 콘텐츠 지정
aside	본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소, 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됨
footer	일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치, 사이트의 라이센스, 주소 연락처 등이 있음
header	일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다
nav	네비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됨. 보통은 안에 ul을 넣어 목록 형태로 사용
main	문서의 주된 콘텐츠 표시

HTML에서 id 및 class 목적에 맞게 사용하기

id : 고유한 이름을 붙일 때
변화가 없이 고정으로 고유한 영역에는 id로 이름을 붙인다.

class : 반복되는 영역을 유형별로 분류할 때
반복되는 항목은 class로 지정한다. 같은 class값을 지정해줌으로서, 동일한 유형임을 알 수 있다.

태그와 id, class 선택자

HTML tag	Selector
‘<span id=”writing-section”’>	div#writing-section
‘<li class=”“comment”>’	li.comment

JawsBean

[JS] 클로저 모듈 패턴

클로저 모듈 패턴

클로저를 이용해 새로운 객체 생성

[JS] 클래스와 인스턴스

객체 지향 프로그래밍

instance 만들기

class 만들기

ES5

ES6

속성과 메서드

속성? this?

메서드?

Instance에서 사용하는 법

prototype? constructor? this?

중요하니 외우자

[JS] 객체 지향 프로그래밍 OOP

절차적 언어

객체 지향 언어

OOP

[JS/브라우저] DOM

HTML에 JavaScript 적용하기

DOM 다루기

CREATE

APPEND

READ

tweetDiv를 container에 추가하기

UPDATE

1. 비어있는 엘리먼트에 문자열 추가하기

2. 엘리먼트에 class 추가하기

DELETE

1. 삭제하려는 요소의 위치를 알고 있는 경우

2. 여러 개의 자식 요소를 지우고 싶다면

[JS] 이벤트 객체

이벤트

이벤트의 종류

기본

마우스 이벤트

키보드 이벤트

폼 이벤트

값 변경 이벤트

이벤트 객체

이벤트 객체의 주요 속성 (property)

이벤트 핸들러 (이벤트 리스너)

이벤트 핸들러 (Event Handler)

이벤트 리스너 (Event Listener)

실습

[JS] 배열과 객체

배열

배열만들기

배열의 값에 접근하기

배열의 값을 변경하려면

배열 활용하기

배열 + 반복문 = 배열 반복하기

그 외 배열 메서드들

객체

객체만들기

객체 리터럴

Object 생성자 함수

생성자 함수

객체의 키와 값에 접근하기

키 (in 연산자 사용해 확인하기, keys 사용해 접근하기)

값 (마침표(.), 대괄호([])표기법, .values())

객체의 키와 값을 변경하려면

[JS] 핵심 개념과 주요 문법은?

원시 자료형 & 참조 자료형

원시자료형

참조자료형

스코프

스코프의 주요 규칙

스코프와 변수 선언

var로 변수를 선언하면?

변수 선언에서 주의할 점.

클로저

클로저의 특징

클로저의 활용

1. 데이터를 보존하는 클로저 함수

2. 클로저 모듈 패턴

ES6 주요문법

spread / rest

2. 엘리먼트에 `class` 추가하기