---
# System prepended metadata

title: '[GROUP J35] 6주차 피어세션'

---

# [GROUP J35] 6주차 피어세션

J045 김영근
J138 이민환
J174 장규영
J192 조정혜

## 논의사항

### scss
- css보다 확장된 기능을 제공한다.
- 하위 스타일을 묶어서 처리할 수 있다.
- if문, for문 등의 조건문도 사용 가능하다.
```css=
a {
  all: unset;
  color: inherit;
  &:hover {
    cursor: pointer;
    font-weight: 900;
  }
  &:focus {
    font-weight: 900;
    outline: auto;
  }
}
```

### canvas, svg 차이
 
|canvas|svg|
|---|---|
|HTML element | XML base 벡터 이미지|
|이벤트 핸들러 사용 불가 |이벤트 핸들러 사용 가능|
|비트맵 | 벡터 이미지|
|게임을 만들 수도 있다 | 크기 변화에 자유롭다|

참고 링크:[https://www.educba.com/svg-vs-canvas/](https://www.educba.com/svg-vs-canvas/)


**canvas 예시 : 원 그리기**

```html=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas width="1000" height="1000"></canvas>
  </body>
  <script>
    const canvas = document.querySelector("canvas");
    const context = canvas.getContext("2d");
    const rectangleList = [];
    function draw() {
      context.save();
      context.fillStyle = "rgba(0,0,0,0.5)";
      const x = Math.random() * 100;
      const y = Math.random() * 100;

      const rectangle = new Path2D();
      rectangle.rect(x, y, 100, 100);

      context.fill(rectangle);
      rectangleList.push(rectangle);
      context.restore();
    }

    function canvasClick(e) {
      rectangleList.forEach(box => {
        if (context.isPointInPath(box, e.offsetX, e.offsetY)) {
          console.log("clicked");
        }
      });
    }

    canvas.addEventListener("click", canvasClick);
    for (let i = 0; i < 10; i++) {
      draw();
    }
  </script>
</html>
```

**svg 예시**
```html=
<svg id="pieChart" width="600px" height="600px">
      <circle class="piePart pie1" data-percent="48" fill="transparent" cx="300" cy="300" r="100" 
      stroke-width="200" style="stroke-dasharray: 301.593, 326.726; stroke: rgb(255, 101, 101); stroke-dashoffset: 157.08;"></circle>
</svg>
```

### history API

```jsx=
// state: model data

putHistoryAndDispatch = state => {
  history.pushState(state, "", state);
};

_historyEvent() {
    window.addEventListener("popstate", e => {
    const { state } = e;
  });
}
```


## 회고

### J045 김영근
- router, history 관리가 인상 깊었습니다.
- Model과 View는 Controller를 통해서만 접근하도록 잘 구조화 시킨 것 같습니다.
- 이벤트는 생성자 필드에 변수에 연결해서 사라지지 않게 유지한 것이 신기했습니다.

### J138 이민환
- 바쁜 일정 가운데서도 레이아웃을 깔끔하게 잘 잡으신 것 같습니다.
- 짧은 시간안에 비교적 많은 부분을 구현하신 것 같습니다.


### J174 장규영
- 파이 차트 svg로 구현한 것이 인상 깊었습니다. 태그(?) 연결하는 선까지..detail 👍🏻
- 파이 차트 선 그려지는 애니메이션이 신기했어요


### J192 조정혜
- 카카오 인증 부분을 잘 설명해주셨습니다.
- select에 기본 선택 문구를 주신 것이 인상 깊었습니다.
- auth 인증하신 부분이 인상 깊었습니다.