# J5 Week2 피어세션

## 👋 참가자
| 순번 | 캠퍼ID | 이름 |
|:----:|:------:|:------:|
| 1 | J041 | 김영화 |
| 2 | J068 | 김현조 |
| 3 | J094 | 박춘화 |
| 4 | J122 | 안주영 |
| 5 | J140 | 이동현 |
| 6 | J154 | 이윤성 |
| 7 | J212 | 표석훈 |
| 8 | J207 | 최유진 |

## 👊 진행 흐름

### Ice Break 자기소개 🧊
* 저희 팀에는 다양한 분야의 정점에 있는 마스터들이 많답니다...
* 백엔드 마스터, 프론트 마스터, 차트 마스터, 리액션 마스터...

------

### 개인별 미션 내용 공유 💘

#### redis를 사용할 때 key 직접 지정하는 방법
> Auto Increasement Key 를 직접 구현할 때 어떤 방식으로 진행했는지에 대한 내용!
* Data 배열의 길이에 따라 결정을 했는데 다른 방법이 많지 않을까!

#### 스크립트 태그를 사용하여 구현할 수 있는데 pug의 활용 의미를 찾아본다면?
> 굳이 pug 내의 JS 코드를 사용할 필요가 있을까? 하는 의문이 들었다.
- pug에서는 mixin이라는 매개변수를 받고 다른 inline HTML을 반환하는 함수가 있다. (이를 활용할 수 있을 것)
-> HTML 태그 디스플레이에 관련한 JS 코드 작성을 할 수 있을 것!

#### 백엔드와 프론트엔드의 데이터 처리
> 데이터를 처리할 때 어느 곳에서 데이터를 처리 해야할까?
- 네트워크 통신을 최소화하는 방식으로 진행하는건 어떨까?
* 배포 시 로딩 시간이 있으므로 백엔드 단에서 데이터 가공 후 프론트엔드에서 렌더링 데이터만 사용하는 방법!

#### svg를 public 폴더에 넣었을 때 css 수정을 위한 접근 방법
- embed, object, img 태그 등을 사용해서 디스플레이 할 수 있었다!
-> CSS 적용이 안되는 부분이 많았다.
=> pug의 include를 써서 해결해보았습니다.

#### svg 처리 관련 내용 (차트)

- path 를 String template으로 처리하였다.

#### dropdown 이벤트: focus, blur 사용 시
> Dropdown의 하위 리스트의 'click' 이벤트가 발생할 때 'blur' 이벤트가 먼저 발생하기 때문에 'click' 이벤트를 발생 시킬 수 없는 문제가 발생!
1. focus, blur에 setTimeout을 해서 click보다 늦게 동작하게 하는 방식
2. js 내부적으로 DOM의 이벤트 순서 변경
3. (사용한 방법) 마우스의 위치 이벤트를 사용해서 리스트 안에 들어가면 blur 이벤트 작동을 막는 방식

#### 달력 만들 때 table 태그의 boarder 적용 불가능 문제

> `display: table` 상태에서는 border에 관련된 속성을 변경, 조작할 수 없다.

1. HTML 태그를 변경하기
2. display 속성 변경
-> table 태그 배치를 사용할 수 없게 된다.
3. td의 border css를 조정하여 '합쳐진 것처럼' 구현

#### canvas 애니메이션
1. requestAnimationFrame을 이용해서 차트의 애니메이션을 구현했다.
- 차트 애니메이션에 순서를 부여할 때 Promise 로 비동기 처리를 하였다.
2. setTiemout 을 이용하여 차트의 애니메이션을 구현
- 차트의 순서를 시간을 이용해 구현!

#### query Selector 사용 관련 내용

const elements = () =>{
    const e1 = document.querySelector('#.')
    return {
        e1: document.querySelector('#e1')
    }
};
elements()

* 위와 같이 사용했을 때 Element에 접근할 때마다 querySelector를 사용하게 된다.

const { aa } = (function(){
    const aa = document.querySelector('#.')
    return {
        aa
    }
})();

// aa 사용

* 클로저를 활용하면 한번의 querySelector를 이용하여 변수로 접근할 수 있다.

------

### 다같이 확인할 사항 토론 📡

#### 코드 재사용성
- 자바스크립트로 element를 컴포넌트화
- 중복되는 디스플레이에 유동적인 데이터 상황에서 유효하더라 (display 엘리먼트를 공유하지 않는 동일한 함수)

#### node 의 함수형 프로그래밍
- [Ref](https://prgms.tistory.com/53)

#### CSS 변수 JS파일에서 사용하기

* :root 태그에 변수를 선언했을 때 HTML 엘리먼트에 속성으로 이 변수를 가지고 있다
* 단 Render Tree를 생성한 뒤 가지므로 getComputedStyle로 계산된 값을 가지고 있어야 한다.

* style 속성에 getPropertyValue 함수로 접근할 수 있다.

/* Colors */
const rootStyle = getComputedStyle(document.documentElement);
const colorLine = rootStyle.getPropertyValue('--background');
const colorFont = rootStyle.getPropertyValue('--label');
const colorPrimary1 = rootStyle.getPropertyValue('--primary_1');
const colorPrimary2 = rootStyle.getPropertyValue('--primary_2');
const colorPrimary3 = rootStyle.getPropertyValue('--primary_3');

.stats__doughnut-circle[data-category='생활'] { stroke: var(--CATEGORY-COLORS-7) }
.stats__doughnut-circle[data-category='식비'] { stroke: var(--CATEGORY-COLORS-4) }
.stats__doughnut-circle[data-category='교통'] { stroke: var(--CATEGORY-COLORS-3) }
.stats__doughnut-circle[data-category='쇼핑/뷰티'] { stroke: var(--CATEGORY-COLORS-2) }
.stats__doughnut-circle[data-category='의료/건강'] { stroke: var(--CATEGORY-COLORS-1) }
.stats__doughnut-circle[data-category='문화/여가'] { stroke: var(--CATEGORY-COLORS-5) }
.stats__doughnut-circle[data-category='미분류'] { stroke: var(--CATEGORY-COLORS-6) }

* 이런 식으로 dataset attribute 설정해서 css에서 해도 된다.

#### 비동기 처리 방법 팁

* 데이터베이스에서 병렬적인 sql 처리를 고민

Promise.all([Promise 리스트]).then((res) => {
    // res는 Promise 반환값으로 이루어진 리스트
})

Promise.race([Promise 리스트]).then((res) => {
    // res는 가장 먼저 resolve된 Promise의 반환값
})

// 비동기 요청 3개를 보내서 3개의 결과를 모두 받고 싶을 때
const URLList = [url1, url2, url3]
const promiseList = URLList.map((url) => {
    return new Promise((resolve, reject) => {
        resolve(fetch(url)) // url 별로 GET 요청
    })
})
Promise.all(promiseList).then((res) => {
    // res === [url1 GET 요청의 반환값, url2 GET 요청의 반환값, url3 GET 요청의 반환값]
})

[관련 페이지](https://stackoverflow.com/questions/41949724/how-does-db-serialize-work-in-node-sqlite3)

------

### 설계 관련 내용 📋

#### git commit 메세지 작성 관련
> 커밋 메세지를 작성할 때 어려웠다!
* git template 을 사용하여 작성하면 한 번더 생각을 하게 된다!!

#### Component 재사용

<html>
  <head>
  </head>
  <body>
    <div id='parent1'></div>
    <div id='parent2'></div>
    <div id='parent3'></div>
    <script type='text/javascript' src='test.js' />
    <script type='text/javascript' src='test2.js' />
  </body>
</html>

const listElement = function ({ parent, initialState, options={ 'wrapperElement' : 'ul', 'wrapperClass' : ['myList'] } }) {
    this.state = initialState
    this.wrapper = document.createElement(options.wrapperElement)
    this.wrapper.classList.add(options.wrapperClass)
    parent.appendChild(this.wrapper)
    
    this.setState = (nextState) => {
        this.state = nextState
        this.render()
    }

    this.reverseById = () => {
        this.state.sort((a,b) => b.id - a.id)
        this.render()
    }

    this.render = () => {
        this.wrapper.innerHTML = `
        ${this.state.map((data) => {
            return `<li data-id='${data.id}'>${data.context}</li>`
        }).join('')}
        `
    }
    this.render()
}


const parent1 = document.getElementById('parent1')
const parent2 = document.getElementById('parent2')

const list1 = new listElement({
    parent : parent1,
    initialState : [
        { id : 1, context : '부스트캠프 :)'},
        { id : 2, context : '3초 뒤에 바뀌는 마법이 벌어집니다.'}
    ]
})

const list2 = new listElement({
    parent : parent2,
    initialState : [
        { id : 1, context : '두번째 리스트입니다. :)'},
        { id : 2, context : '2주차 프로젝트 끝나서 기분 좋아요 ^^'},
        { id : 3, context : '이건 5초 뒤에 바뀝니다~'}
    ],
    options : {
        wrapperElement : 'ol'
    }
})

setTimeout(() => {
    console.log(list1.state)
    list1.setState([
        { id : 1, context : '3초가 지났습니다. 까꿍 :)'},
        { id : 2, context : '여기서 박수 치셔야합니다. ^^'},
        { id : 3, context : '사실 안치셔도 됩니다.'},
        { id : 4, context : '4초 뒤에 순서가 바뀝니다.'}
    ])
    console.log(list1.state)
}, 3000)


setTimeout(() => {
    list2.setState([
        { id : 1, context : '아직도 두번째 리스트입니다. :)'},
        { id : 2, context : '오늘 맥주 한잔 어때요?'},
        { id : 3, context : '5초가 지났으니까 이게 보일거에요!'},
        { id : 4, context : '2초 뒤에 순서가 바뀝니다.'}
    ])
}, 5000)

setTimeout(() => {
    list1.reverseById()
    list2.reverseById()
}, 7000)

// 생성 싸이클
// 1. 엘리먼트 생성 선언 (new ~)
// 2. 래퍼 엘리먼트 생성(document.createElement())
// 3. 부모 엘리먼트에 래퍼 엘리먼트를 추가(parent.appendChild(wrapper))
// 4. 렌더링(this.render())

// 변경 싸이클
// 1. 엘리먼트 변경 선언(element.setState(nextState))
// 2. 엘리먼트 스테이트 변경(this.state = nextState)
// 3. 렌더링(this.render())

// 리액트에서 왜 set 함수를 쓰는가? (아마도...?)
// import { useState } from 'react'
// let [ name, setName ] = useState('winters')
// name = 'another name' -> 렌더링 함수가 호출되지 않는다.
// setName('another name') -> setName 함수 내에서 렌더링 함수가 호출된다.

const selectElement = function ({ parent, initialState, options={'wrapperClass' : ['mySelect']} }) {
    this.state = initialState
    this.wrapper = document.createElement('select')
    this.wrapper.classList.add(options.wrapperClass)
    parent.appendChild(this.wrapper)

    this.setState = (nextState) => {
        this.state = nextState
        this.render()
    }

    this.render = () => {
        this.wrapper.innerHTML = `
        ${this.state.map((data) => {
            return `<option data-index='${data.index}' data-value:'${data.value}'>${data.context}</option>`
        }).join('')}
        `
    }

    this.render()
}

const parent3 = document.getElementById('parent3')

const select1 = new selectElement({ parent : parent3, initialState : [
    {index : 1, value : 'life', context : '생활'},
    {index : 2, value : 'traffic', context : '교통'},
    {index : 3, value : 'eat', context : '식비'},
    {index : 4, value : 'culture', context : '문화/여가'},
] })

const addOption = (selectNode, options) => {
    selectNode.setState([...selectNode.state, ...options])
}

const deleteOption = (selectNode, options) => {
    const indexKeys = options.map(option => option.index)
    selectNode.setState(selectNode.state.filter(option => !indexKeys.includes(option.index)))
}

const options = [
    {index : 5, value : 'medical', context : '의료/건강'},
    {index : 6, value : 'unclassified', context : '미분류'},
]

setTimeout(() => {
    addOption(select1, options)
}, 3000)

setTimeout(() => {
    deleteOption(select1, options)
}, 5000)

const select2 = new selectElement({ parent : parent3, initialState : [
    {index : 1, value : 'cash', context : '현금'},
    {index : 2, value : 'hyundai', context : '현대카드'},
    {index : 3, value : 'samsung', context : '삼성카드'},
] })

#### 클로저 예제

function addNumber(number1) {
    return function add(number2) {
        return number1 + number2
    }
}

const add10 = addNumber(10)
const add20 = addNumber(20)

console.log(add10(1))
console.log(add10(2))

console.log(add20(1))
console.log(add20(2))

### 후기 한 마디

#### J041
- 즐거운 분위기 속에서 마스터분들의 강의 덕분에 많은 걸 배워갑니다. 감사합니다!! 👍
#### J094
- 재야에 숨겨진 마스터들이 많아 배울 점이 많았습니다.
#### J122
- 다양한 마스터분들이 계셔서 재밌었습니다 🤣
#### J140
- 고수분들한테 많이 배우고 웃고 갑니다!!
#### J068
- 와 정말 유익한 시간!! 정말 많이 배웁니다!!!!!!!!! 저도 다음에 세션 준비해갈거예요~!~!~!!
#### J154
- 많이 배우고 재미있었던 시간이었어요
#### J212
- ~~천방지축 얼렁뚱땅 빙글빙글 돌아가는 피어세션~~ (많은걸 얻어갑니다)
#### J207
- 저 혼자는 생각하지 못한 것들을 많이 배울 수 있었고, 너무 즐거운 세션 시간을 보냈어요