CHO YEONWOO

CHO YEONWOO

나는야 연우초

[우아한테크코스] 3월 25일 TIL

3 minute read

오늘 배운 것

  1. js 기본 문법
  2. 테코톡

js 기본 문법

html: 정보 보여주는 Hyper Text Markup Language
css: 꾸며주고
javascript: 동작하고

  1. Document Object Model
    동적인 기능이 있는 웹어플리케이션을 만들기 위해 필요한 문서 구조, 스타일 내용 등을 변경하게 도와주는 것
    객체를 가져오면 DOM API: getElement, querySelector, getElements, querySelectorAll
    tag, id, className, cssSelector로 DOM 객체를 찾을 수 있다.
    getElementsByTagName, getElementById, getElementsByClassName, querySelector 등을 활용할 수 있다.

  • 요소 찾는 방법
    .querySelector('ul');
    .getElementsByTagName('ul');
    .getElementById('wrap');

  • 요소 추가 방법
    ` now.innerHTML += “<li>뉴욕</li>”; .insertAdjacentHRML(‘beforeend’, ‘<li>뉴욕</li>’); let newDiv = document.createElement(‘li’); newDiv.textContent = “뉴욕”; now.appendChild(newDiv);`

  1. Browser Object Model
    웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델
    BOM의 역할은 웹 브라우저의 버튼, url 주소 입력 창, 타이틀 바와 같은 윈도우 및 웹페이지의 일부를 제어할 수 있게 하는 것
    • window: 브라우저 창 객체
    • screen: 사용자의 디스플레이 정보 객체
    • location: 현재 페이지의 url을 다루는 객체
    • navigator: 웹브라우저 및 브라우저 환경 정보 객체
    • history: 현재의 브라우저가 접근했던 url history
  • alert: 사용자가 확인 창 누를 때까지 메시지 alert
  • prompt: prompt(title, default) 로 텍스트 메시지와 입력 필드, ok, cancel 존재
  • confirm: confirm(question) 로 확인과 취소가 존재하는 모달 찬 보여줌
  1. event
    상호작용은 어떠한 이벤트에 의해 발생한다.
    • 사용자 인터페이스 이벤트
    • load: 웹 페이지 로드 완료
    • unload: 웹 페이지 unload(새로운 페이지 요청)
    • error: js 오류, 요청한 자원 존재하지 않는 경우
    • resize: 브라우저 창의 크기 조정
    • scroll: 사용자가 페이지 위아래 스크롤
      - 키보드 이벤트
    • keydown: 사용자가 처음 키 눌렀을 때
    • keyup: 사용자가 키 뗄 때
    • keypress: 문자가 화면에 나타나게 되면 발생하는 경우, 화살표 키에는 먹지 않음, 계속 누르고 있으면 계속 발생
      - 마우스 이벤트
    • click: 마우스 클릭
    • dblclick: 마우스 더블 클릭
    • mousedown: 마우스를 누르고 있을 때
    • mouseup: 누르던 마우스를 뗄 때
    • mousemove: 마우스를 움직일 때
    • mouseover: 요소 위로 마우스를 움직였을 때
    • mouseout: 요소 밖으로 마우스를 움직였을 때
      - focus와 blur 이벤트
    • focus: 마우스 클릭
    • blur: 마우스 더블 클릭
    • focusin: 마우스를 누를 때
    • focusout: 요소 위에서 누르고 있던 마우스 뗄 때
  • 이벤트 핸들러: HTML과 상호작용할 때 이벤트 핸들링
    • HTML 이벤트 핸들러
    • 전통적인 DOM 이벤트 핸들러
    • 이벤트 리스너: dom_element.addEventListener('event', lister[funcition, options]); 
      $stationAddButton.addEventListener('blur', function() { 
// 익명함수는 두 번째 매개변수처럼 동작하며, 이름을 가진 함수를 둘러 싼다.
onAddStationHandler(name);
})
    • 이벤트 흐름과 제어
      이벤트 버블링: 사용자의 동작에 직접 영향을 받은 노드로부터 밖으로 전파되어 나가는 방식
      이벤트 캡쳐링: 이벤트가 가장 바깥 쪽의 노드로부터 안쪽으로 전파되는 방식
    • 이벤트 객체
      이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보(이벤트를 발생시킨 요소, keypress가 어떤 키에 의해 발생했는지, 어떤 요소를 클릭해서 이벤트가 발생했는지) 제공
      target: 이벤트가 발생한 요소, type: 발생한 이벤트 종류
      preventDefault(): 이벤트의 기본 동작 취소, stopPropagation(): 이벤트의 캡쳐링이나 버블링 중단
    • 이벤트 위임
      이벤트 리스너가 실행할 작업을 부모 요소에게 위임할 수 있다.
      동적에서 추가되는 요소들에도 동작하고, 코드가 간결해진다는 장점이 있다.
      const $todoInput = document.querySelector("#new-todo-title");
  const $todoList = document.querySelector("#todo-list");

  $todoInput.addEventListener("keyup", onAddTodoItem);
  $todoList.addEventListener("click", onToggleTodoItem);

  function onAddTodoItem(event) {
      const todoTitle = event.target.value;
      const todoList = document.getElementById("todo-list");
      if (event.key === "Enter" && todoTitle !== "") {
          todoList.insertAdjacentHTML("beforeend", renderTodoItemTemplate(todoTitle));
          event.target.value = "";
      }
  }

  function onToggleTodoItem(event) {
      if(event.target.value === "on"){
          event.target.closest("li").classList.toggle("completed");
      }
  }

    위와 같이 이벤트 위임 구현

테코톡

  1. 상태 패턴
    GOF 디자인 패턴: 생성, 구조, 행위
    상태 패턴은 행위 패턴 중 하나로 객체 자신의 내부 상태에 따라 행위를 변경하도록 하는 것
    객체의 행동이 상태에 따라 달라질 수 있고, 객체의 상태에 따라 런타임에 행동이 바뀌어야 한다.
    다중 분기 조건이 너무 많을 때 사용하기 좋다.
    • 서로 다른 상태에 대한 행동을 별도의 객체로 관리할 수 있다.
    • 새로운 상태가 추가되어도 context 코드가 받는 영향이 적다.
    • 상태 전이를 명확하게 한다.
    • 상태에 따른 동작을 수정하기 쉽다.
      전략 패턴은 상속을 대체하고 외부에서 전략을 전달 받고, 상태 패턴은 코드 내 조건문을 대체한다.
  2. 객체지향 프로그래밍
    사람이 현실을 바라보는 식으로 개발, 직관적이고 유지 보수가 용이하다.
    객체는 현실의 무언가에 대응하는 개념이고, class는 객체를 표현하는 하나의 수단이다.
    객체: 협력하는 역할을 맡고 있는 대상, 역할에는 책임이 따른다.
    협력: 여러 객체가 목표 달성을 위해 행동하는 것
    책임: 협력 속에서 자신의 임무를 알고 행하는 것
    역할: 동일한 목적을 가진 책임의 묶음
    메시지: 객체는 메시지를 통해 다른 객체에 역할을 수행하기를 요청한다. 각 객체는 자율적으로 자신의 역할을 수행한다. 이를 위해서 객체는 의인화 되어 있어야 한다.
    다형성: 서로 다른 객체가 같은 메시지에 대해 다른 행동을 취하기 위해서 존재한다.
    책임 주도 개발이 장려되는데, 책임을 작게 나누어 각 객체 또는 역할을 찾아 할당한다. 다른 객체와 협력해서 책임을 수행할 수도 있다.

You may also enjoy