# [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 인증하신 부분이 인상 깊었습니다.
Sign in with Wallet
Connect another wallet