soom 숨의 블로그 frontend developer

190304 TIL AMAZON step5 검색자동완성 && mvc

Mar 4, 2019 » 1막, TIL (Today I Learned)

step5

mar-04-2019 11-47-38

여기까지 했다. 집에가서

  1. amazon 코드에 옮기고
  2. 하이라이트 되는 부분 디테일 넣고
  3. 디버깅 해야지~

mvc

오늘의 강의는 mvc 관련 강의였다.
예전에 한탕하면서 달리한테 많이 들었던 내용인데, 이번에 잘 배우고 실습까지 해서 좋았다.
실습은 비센스와 함께 페어 프로그래밍.

강의 내용

  • OOP에서는 객체를 잘 쓰는 게 중요 - 의존성 관리가 중요(design pattern)

    • strategy pattern
    • observer pattern
    • MVC

  • MVC는 함수형 프로그래밍과는 좀 거리가 있음

  • 전통적인 관점의 MVC (백엔드 관점에 가까움)

    • C-S / Web
    • View (클라이언트) <-> Controller (라우팅 포함) <-> Model
    • Controller는 입력을 받는 부분
    • View는 templating - 받은 데이터를 가공해서 클라이언트(브라우저)에 보내줌
    • 요즘엔 API만 주는 역할을 많이 함 (View 파트가 많이 줄어듦)
    <브라우져> - JSON을 받을 수 있게 됨 (Model의 역할) - 데이터를 받는다 -> 파싱 -> HTML 변경 - 데이터 입력(추가) -> 서버에 보내고 -> 서버에서 응답을 받고 -> HTML 변경 - 비행기 모드로 구글 docs로 작업할 수 있는 게 로컬 스토리지 같은 데다가 저장해두기 때문. 나중에 인터넷 연결됐을 때 fetch 하는 것. => 가능한 이유: model을 받기 때문

  • M - V가 서로 직접적인 호출을 하는 건 좋은 호출 방식이 아님

    • 규모가 커지면 커질수록 둘의 관계를 느슨하게 하는 게 좋음 -> 그래서 C를 만듦
    • 사실 C는 fake (견고한 frame work를 만들어놓음으로써 M - V 관계에 대한 흐름을 정리)
    • C가 M과 V의 관계를 다 알고 있어야함

  • 가장 먼저 해야할 것 : 관심사의 분리

  • event를 view에 달 것인가 controller에 달 것인가? - 고민 필요

  • 하나의 프레임워크가 컴포넌트

실습

  1. model과 view 나누기 (여러 개 객체 만들기)
  2. V1 -> M -> V2 사이에 Controller 두기
<html>

<head>
    <meta charset="utf-8">
    <title>TODO를 MVC로 해보자</title>
    <link rel="stylesheet" href="todo.css">
</head>

<body>
    <div class="container">
        <div class="countInfoWrap">
            <div class="todo-count">10</div>
            <div class="done-count">10</div>
        </div>
        <section class="todoBox section-basic-style">
            할일입력 :
            <input type="text" name="todo">
            <button>등록</button>
        </section>
        <section class="logBox section-basic-style">
            <button class="fold">접기</button>
            <div>해야할 일들</div>
            <ul class="todolist visible">
                <li id="1233"> 공부하기 <span class="deleteX"> X </span></li>
            </ul>
        </section>
    </div>
</body>

</html>

.section-basic-style {
    background-color: #a6d0d3;
  padding: 1em;
}

.visible {
  display : block!important;
}

.container {
  margin: 150px 20%;
}

.countInfoWrap {
  position: absolute;
  top: 5%;
  right: 5%;
  width:200px;
}

.countInfoWrap > div {
  float: left;
  margin-right: 10%;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 2em;
  color: #fff;
  font-weight: 500;
}

.todo-count {
  background: green;
}

.done-count {
  background: #c1adad;
  text-decoration: line-through;
}

.todoBox {
  margin-bottom: 10%;
  background-color: #a6d0d2;
  padding: 1em;
}

.todoBox button {
  height: 32px;
}

input[name=todo] {
  width: 200px;
  height: 30px;
  padding: 0.5em;
}

.logBox .todolist {
  display:none;
}

.logBox .todolist li  {
  margin-bottom: 0.5em;
}

.fold {
  display :none;
  float: right;
  width: 50px;
  height: 30px;
  font-size: 0.8em;
  border-style: none;
  cursor: pointer;
  border-radius: 0.2em;
}

.deleteX {
  cursor: pointer;
  padding: 0.1em;
  box-sizing: border-box;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  background-color: #eeb0b0;
  color: #f9f9f9;
  margin-left: 0.2em;
}