FE코크
탄산 가득 시원한 개발일지
FE코크
전체 방문자
오늘
어제
  • 분류 전체보기 (43)
    • 우아한테크코스 (22)
      • 우아한테크코스4기 (4)
      • 우아한테크코스3 (10)
      • 회고록 (8)
    • Web (0)
      • HTTP 웹 기본지식 (0)
    • JavaScript (2)
    • React.js (12)
    • 알고리즘 풀이 (2)
    • HTML, CSS (4)
    • 기타 (1)
      • 일상 (0)
      • 후기 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 프리코스
  • 레벨1회고
  • prop drilling
  • createRoot
  • 리액트
  • 우테코4기
  • 코어자바스크립트
  • 자바스크립트
  • react.js
  • JavaScript
  • Props
  • 주간회고
  • 개발자
  • 알고리즘
  • 4기
  • 우테코
  • 재택하고싶은데
  • CSS
  • Reactjs
  • 노마드코더
  • jsx
  • React.DOM
  • 우아한테크코스 3기
  • react
  • 회고록
  • 백준
  • 프론트엔드
  • state
  • 우아한테크코스
  • 회고

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
FE코크

탄산 가득 시원한 개발일지

우아한테크코스/우아한테크코스3

우아한테크코스 3기 프리코스 최종 미션(6) - View

2021. 1. 8. 20:39

화면을 구현하기 앞서 각 화면 컴포넌트들의 최상위 부모 객체를 만들어야 한다.

화면에서 각 컴포넌트들을 분리하고 MainController에서 이벤트를 처리하는데 메소드를 재사용하고 유지보수를 위해 View.js 부모객체를 만든다.

 

- View 클래스를 살펴보면 이벤트 발생시 init(el)메소드가 해당 element를 파라미터 값으로 받아서 초기화 한다.

- on메소드는 해당 요소에 대한 이벤트 리스너를 설정한다.

- emit메소드는 해당 이벤트가 발생할 때 원하는 이벤트를 실행시켜서 데이터를 보내를 수 있다.

 

나름 설명을 한다고 글을 섰지만 설명하는게 어렵다...다음 글들을 포스팅하면서 어떻게 사용되는지 설명하도록 하겠습니다.

View.js

export default class View {
  constructor() {
    this.tag = "[View]";
  }

  init(el) {
    if (!el) throw el;
    this.el = el;
    return this;
  }

  on(event, handler) {
    this.el.addEventListener(event, handler);
    return this;
  }

  emit(event, data) {
    const evt = new CustomEvent(event, { detail: data });
    this.el.dispatchEvent(evt);
    return this;
  }
}

github.com/intae92/woowacourse-precourse/commit/801ce5905370b6571cd52d18875239dbfcd61634

 

feat: View 설정 · intae92/woowacourse-precourse@801ce59

Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Browse files feat: View 설정 Loading branch information Showing 1 changed file with 22 additions and 0 deletions. +22 −0 src/vie

github.com

 

참고

im-developer.tistory.com/190

 

[JS/CustomEvent] 자바스크립트, 커스텀 이벤트 생성하기

회사에서 이번에 새로 맡은 업무를 기획중인데, Native 앱이 웹뷰에 뭔가를 요청할때마다 웹뷰에서 이벤트가 trigger되도록 만들어야해서 어떻게 할지 엄청 고민을 많이 했었다. 웹뷰가 Native Client

im-developer.tistory.com

 

'우아한테크코스 > 우아한테크코스3' 카테고리의 다른 글

우아한테크코스 3기 프리코스 최종 미션(8) - View-ResultView.js  (0) 2021.01.09
우아한테크코스 3기 프리코스 최종 미션(7) - View-InputView.js  (0) 2021.01.08
우아한테크코스 3기 프리코스 최종 미션(5) - App 설정  (0) 2021.01.08
우아한테크코스 3기 프리코스 최종 미션(4) - 데이터초기설정  (0) 2021.01.08
우아한테크코스 3기 프리코스 최종 미션(3) - MVC패턴  (0) 2021.01.08
    '우아한테크코스/우아한테크코스3' 카테고리의 다른 글
    • 우아한테크코스 3기 프리코스 최종 미션(8) - View-ResultView.js
    • 우아한테크코스 3기 프리코스 최종 미션(7) - View-InputView.js
    • 우아한테크코스 3기 프리코스 최종 미션(5) - App 설정
    • 우아한테크코스 3기 프리코스 최종 미션(4) - 데이터초기설정
    FE코크
    FE코크
    공부한 내용을 적는 블로그

    티스토리툴바