-
Notifications
You must be signed in to change notification settings - Fork 0
[Day3] 20210224 쇼핑하우
- 슬라이드
- 주어진 데이터(임시데이터)로 슬라이드 만들어보기
- 데이터를 서버에서 받아오기
프레임워크를 사용할 때 단순히 사용법을 배우는 것 보다는 어떤 구조, 원리 등을 배우려고 노력해야한다.
- Request
분석(라우팅,...), 조회(DB), 다듬고(parsing), 응답(json)
Request의 분석하는 코드를 잘게 나누어서 각 미들웨어에서 일을 나누어서 처리하게 만든 것이다. 미들웨어는 파이프라인처럼 이어져있다.
- express에서 다음 미들웨어로 넘어가기 위해서는
next()를 사용하면 된다. - express의 middleware도(
use) pipe함수, fetch 처럼 작동한다. (하나가 끝난 뒤에야 뒤에 가 실행되는 동기처럼 보이는 비동기)
-
model
반드시 필요한 것은 아니다?
=> 화면에서 변경이 되는 상태(state)
-
View - 변화하는 것
모델을 구독(관심있게 주시)하고 있어야 된다.
=> 이벤트등록, 화면 렌더링
=> 사용자와 인터랙션
즉 model,view굳이 분리할 이유는 없다. 그런데!?
서로다른 view에서 상태를 공유할 때 model을 사이에 두어서 사용할 수 있다. 즉, 여러개의 view의 상태값을 바꿀 때 model을 활용하면 적절하다.
ex)검색창
검색창 view < - > 자동완성 view 둘이 통신을 할 때 사이에 model을 만들어서 서로의 변경된 상태를 공유한다.
위의 예시로 2개의 view 와 model이 연동될 때 순수한 view로 만들고싶다.
이럴때는 view <-> model 사이에 controller를 만들어서 view와 model의 관계를 줄어준다. (controller와의 관계가 생기긴 한다.)
-> 복잡도가 상승 -> 그럼 굳이 controller?? (??컨트롤러에 이벤트 콜백함수를 저장하는거였나?? 그럼 굳이 controller? 요상하다 )
=>하지만 프레임워크의 기반이 되는 좋은 구조?이다. 결국 바닐라로 힘들다 => React, Vue
역할을 잘 정의하고, 이들 관계를 어떻게 표현할지 결정해라
서로 어떻게 호출하고 관계를 맺을지 고민을하고 구현해라.
-
XHR(XMLHTTPRequest) or fetch
화면 새로고침없이 데이터를 받아서 렌더링? 할 수 있게해주는 것
-
XHR : 콜백헬 가능성
-
fetch: promise 패턴으로 골백헬을 없앨 수 있다. (fetch는 promise를 반환하기 때문에 promise패턴 사용가능)
-
express의 middleware, fetch, pipe함수처럼 사고의 흐름대로 A
PI를 만들면 좋다. (뭐하나가 끝나고나야 다른게 실행되는 흐름)
- transition-end? 를 찾아보자
- Observer 패턴
백엔드에서의 view는 뭘까?
-z-index
img가 다른 구조 뒤에있어서 hover같은 이벤트가 적용이 안됐다.
z-index를 사용해서 문제를 해결했다.
< click (왼쪽버튼 클릭)
-> style.transform = 'tranlate(~~)'해서 움직임
-> 데이터 새로 정렬해서 innerHTML로 렌더링 (항상 지금 화면이 3개 중 가운데 올 수 있도록)
-> transform으로 위치를 다시 0으로 변경
??? 근데 이렇게 하면 translate하는 시간동안 기다려주지 않는다. 뚝뚝 끊기듯 넘어가버린다.
=> 일단, setTimeout으로 정렬,render, 위치0으로 변경을 transition duration시간 만큼 걸어주니 해결됐다.
근데 setTimeout으로 그 시간만큼 똑같이 적용해서 하는게 매우 이상하고 생각한다. 차라리 메소드 체이닝을 이용하고 싶은 생각이 든다.
현재 paging-button을 control하기 위해서 button 3개를 반복문을 돌면서 상황에 맞게 class를 넣었다 빼줬다 하고있다. 뭔가 참신한 다른 방법이 없을까.. 뭔가 찝찝한 방법 같다.