intro

1
2
3
4

10:30-19:00
11:12- 18:30 / 23:00-24:00
10:40~18:20 /18:30~21:30 seminar/ 21:30~23:00
12:10

아… 미쳣다 진짜 일찍 오는게 왜 이리 힘들지 잠을 새벽에 자는 것도 아닌데 ? 아닌가 2 시쯤이면 새벽인가 후아
오늘은 너무 했다. 알람을 좀 맞추고 옆에 두고 자자!!! 왜 맨날 안 맞추고 자는지

플래닝

오늘 할 일

1. NextStep ~ 18:00

• 탭 js 리팩토링
• 탭 스타일링
• 해더 슬라이더 작업

2. 코드스피츠 - 22:00
3. 러버덕 http cache & cookie study 23:30

NextStep

• dailyCs50 Ok
• codespitz 복습 …ing

Tab Refactoring

• 스타일 바꾸면서 클래스 naming 바꾼 부분을 인지 못하고 active 가 안되고 있었는데 다시 되도록 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    this.tabCardListEl.innerHTML = this.tabCardsTemplate(
      data.map(v => ({
        items: v.items,
        id: v.category_id,
      }))
    );
인자로 함수 결과 값 넣는 방식 괜찮으려나?

 this.randomNumber = Math.floor(Math.random() * data.length);
이거 왜 renderTabs에 꼭 있어야 되나? 그 전에 처리 해주어도 되지 않나? 라고 생각했으나 data.length를 받기 때문에 ;;;;


  handleActiveButtons(e) {
    this.activedButton.classList.remove("active");
    this.activedButton = e.target;
    this.activedButton.classList.add("active");
  }

  handleShowTabCard(hideId, showId) {
    const hideCards = qs(`#cards-${hideId}`, this.tabCardListEl);
    hideCards.classList.add("hide");

    const activedCards = qs(`#cards-${showId}`, this.tabCardListEl);
    activedCards.classList.remove("hide");
  }

다른 사람들이 만든 Tab 참고해서 수정해보자 !!!
BootsStrap & bulma & Material

코드스피츠

2 번 듣고 정리

~20 분 iterable / iterator interface

Interface

• 사양에 맞는 값과 연결된 속성키의 세트

Iterator Interface

next(){} 라는 인자를 받지 하는 함수를 키 값으로 갖고
Iterator Obj 를 반환한다.
next(){
return {
done
value
}
}

Iterator Obj 은 done 과 value 를 키 값으로 갖는다.
done 을 가지고 iterator 를 계속 돌지 판단한다. !

앞에 강의를 그래도 조금 듣다가 들어서 Iterable 동작까지는 괜찮았으나

코드스피츠 라이브

반도 이해 못함 :D ;;;
그래도 우와 코드가 깔금해지는 것 보고 너무 좋잖아
플러그인 처럼 추가하기도 너무 좋고 오늘 강의는 저번강의 부터 들어서 완전 숙달 시켜야 될 것 같다.

강의 들으면서 여러가지 꿀팁도 들었다.

• IF 를 어떻게 뺄것인가 => IF 문에 해당되는 것들을 객체로 외부로 빼서 추가하는 형식
• 성능 관련 Tip 내장 v8 엔진 을 거치는 클래스를 활용 직접 성능을 알고리즘 적으로 줄이려는 노력 미미 -> 어지간한 것들 내장메소드를 활용하 3 + 성능은 97% 렌더링 DOM 조작에서 Rendering 을 신경쓸 것 !
• 깨알팁 브라우저에서 testing 할 떄 const 로 계속 test 하는 방법 if(1){}로 감싸서 블락을 지어준다
• 꺠알팁 2 깊은복사 쉽게 하기 Json.parse(Json.stringify(data)) 내장 엔진 활용 빠르고 쉽다

RxJS
es6
js 는 계속 스펙이 추가되면서 잘 받아들인다. 웹 브라우저에서 동작하는 언어이고 / 이런 점 때문에 js 가 너무 좋다 :D

루프도 위임
코루틴 패턴

강의가 올라오기 전에 Generator Yield 를 공부하고 얼른 강의 올라오는데로 이해할 때까지 듣자 !!!

크롱과 리뷰 시간

나는 잘 활용 하고 있나? 좋은 제자는 별로 아닌 것 같다.
어떻게 질문을 안 하냐? 성격 좀 고쳐야지? 남에게 설명할 수 있나?=> No? 그러면 다 모르는 건데?

• Ajax

비동기 xml/json 등 파일 새로고침 하지 않고 중간계층을 둬서 브라우저가 제공하는 xml httpReq 함수/ 클래스를 통해서 통신한다.
좋은 UX 를 제공한다.
history web api 를 통해서 이전에 클릭했던 것을 기억할 수 있게도 할 수 있다.

breakPoint 따로 걸 수 있다.
CORS cross-domain 같은 domain 에서 요청이 일어나지 않도록 보안 상의 이유로 막고 있다. jsonp/ header 요청으로 문제 해결할 수 있다.

비동기에 대해서 어떤 것들을 알아야 할까?
내가 뭘 모르고 뭘 알아야 하는지 잘 모르겠었다.

• Animation

RequestAnimationFrame/ 잘 활용하면 사용자에게 좋은 UX 를 제공할 수 있다 !
css transition/transform 을 잘 활용할 것 !!!

코드리뷰

1. render -> 정적 data 모아 놓은 것 보통 서버가 렌더링 하고 html 파일로 내려주는 작업을 직접 처리하는 점에서는 뭐 나쁘지 않다.
   ==> 생각 그냥 listItem 은 함수로 해놨으니까 render 방식으로 하는 것이 적당한 것 같은데 dropBox 같은 것들은 안에서 처리하도록 !
   ===> 그런데 문제가 있다. listItem 으로 받고 / 그 안에 dropbox 를 또 렌더링하는 형식이여서 new class 를 dropBox ListItem 에 넘겨주는 형식으로 처리?
   or 지금과 같은 방식으로 처리해야 하는데 왠지 모듈안에서 렌더링 하는 것도 같이 가지고 있는 것이 좀 더 나은 모듈이라 생각이 되서 전자 방식으로 고치는 방향을 다시 고려해보고 리팩토링 해야겠다 .

2. hover -> subMEnu display->block 겨우 이걸 어떻게 했는지 기억 못하다니 … 아쉽

3. AjaxHelper => ajaxHelper 가 아니라 tabAjaxHelper 임 ;;; 이상하게 짰다.

4. State 같은 flag 는 어지간 하면 없앨수록 더 좋음 같이 공유하는 전역변수를 두는 것과 같음 dom 탐색 비용이 높다고 생각했는데 새로 붙이고 repaint 작업정도만 신경쓰자 !!!

5. 안 쓰이는 것들 없는지 및 동작 commit 하기 전에 체크할 것 !!!

6. App.js 에서 쭈욱 data 나열 같은 것은 하지 말고 import 형식으로 불러고오고 flow 만 있도록

7. AjaxComponents -> 맞다 그냥 notify 만 하고 data 를 받아와서 다시 보내주고 이 형식으로 바꿔야 된다. 의존성 및 모듈의 의미가 없어짐 !!!

8. tabURl … 전역에 선언해 놓다니 ;;;

9. Ajax onReadyState 보다 -> addEventListener(‘load)를 활용하 3

그냥 작업하면서 배운 점

1. push 하기 전에 늘 브라우저로 테스트를 하는 습관을 가지자 _=
   오늘 다시 보내서 망정이지 스타일 고치면서 활성화 하는 부분이 바뀌었었다.

2. 왜 내가 짠 코드도 설명을 못하지 어떻게 했는지도 설명을 못하노 바보

3. 템플릿 사용에 좀 많이 익숙해졌다. reduce 로

잘한점 아쉬운 점

잘한점

1. 모르겠음

아쉬움

1. 맨날 늦게 일어난다.
2. 스터디/ edWidth 스터디 일은 또 벌려놨는데 토요일이 다 되가는데 진행상황 1 도 없음 !;;;;