---
# System prepended metadata

title: '0주차 2팀 - 박자은, 김희원, 정재명'

---

# 2조 회의록

## 아이디어 

- 맛집
- github 랭킹 사이트
    - solved.ac 
    - https://docs.github.com/ko/rest?apiVersion=2022-11-28
- 강의
    - 자리 배치
    - 청소 예약 -> 이미 선배님들이 하심

- 공부 시간 가져오기
    - https://hyj.oopy.io/df3714e1-b464-4639-bdd7-3cfa4a41b148


# 기술 서칭
- 깃허브 oauth2 로그인 
    - https://park-algorithm.tistory.com/entry/Github-OAuth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
- 구글 시트 api 
- 깃허브 사용자 정보 가져오기 
    - commit, push, put 등 그 날 기여한 내역
    - 필요한 정보는 무엇인지? 
        - 사용자 토큰? 
    - api로는 각각 가져와야 하는데 graphql 사용하면 contribution 자체를 가져올 수도 있음


- 추가로 필요한 기술 스택 
    - css 관련 라이브러리 
    - 3d js ?? - 암튼 3d로 구현하는거
        - 3차원 관련 참고 https://yeonghyeonko.github.io/Github-1.-Contributions/


- 사용자 정보 업데이트 
    - 배치 방식으로 구현 필요 
        - 파이썬 배치 방법 고민
            - aws lambda 
            - 플라스크 스케줄링 지원 여부
            - 시스템 크론잡


- 잔디 기준
    - Commits
    - Issues
    - Code Review
    - Pull requests


# 서비스 기획

## 깃허브 랭킹
- 사용자 정보 사용가능 여부 체크 
- 정글 전체 유저들의 잔디 상태 합 
- 전체 커밋 기여도 높은 사람 퍼센트로 표시
- 댓글 기능 -
- 전체 공지 기능? 

### -> 사용자 정보
- 기수
- 이름 
- 등등 개인 정보들



## 정글러 공부 시간 
- 마찬가지로 데이터 가져와서 랭킹? 


---


- readme에 프로토타입 이미지 추가해서 발표




# 프로젝트 readme

## 서비스 소개
- 정글러들의 헌신 시각화 
- 기여도에 따른 랭킹 부여

## 기술적 목표
- github oauth2.0
- jwt
- 회원관리
- 3d로 잔디 표시

## 팀 목표
- 팀원 모두가 같이
- 누군가 아는것을 다른 사람이 모르지 않도록

## 트러블 슈팅
- github oauth2.0
- total commit 가져오기
    - github oauth 토큰 받을 때, scope에 user를 포함했어야 함!
        ```
        <body>

            <button onclick="buttonTap()">테스트</button>

            <script>
                var clientId = 'Ov23liZlkw7PsbIFD8B7'
                var clientKey = '29e7a78a5aa8231feebadaa61e0774f1660cddb8'
                var scope = 'repo%20user'

                const githubLoginUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&scope=${scope}`

                function buttonTap() {
                    window.location.assign(githubLoginUrl)
                    alert("헬로")
                }

            </script>
        </body>
        </html>
        ```

## 남은 이슈


## 학습 
- session vs 쿠키 vs jwt 
    - https://jhbljs92.tistory.com/entry/1-JWT-%ED%86%A0%ED%81%B0-%EC%9D%B8%EC%A6%9D%EA%B3%BC-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%ED%86%A0%ED%81%B0
- oauth2란 
- 서버사이드렌더링 vs 클라이턴트사이드렌더링


# 추가 제안
- commit 한개만으로 X, 여러개 해야 지워지도록 
    - alph값으로 계산
        - alpha를 (현재commit수)/(달성해야하는commit수)


# 질문 
- n 루트
- refresh fallback 구현 필요
    - https://docs.github.com/en/apps/creating-github-apps/authenticating-with-a-github-app/refreshing-user-access-tokens#about-user-access-tokens-that-expire


# 기술적 챌린지
- 35명이 아닌 n명일 때 퍼즐 처리
- jwt 토큰 처리 방식 고민
- github oauth2.0 - 만료시 - refresh token - fall back 처리 고민
- 애니메이션을 통한 퍼즐 구현
    - 3d 
- 데이터 가져오는 배치 처리
    - 타이밍
    - limit
- 보안적 문제
    - code, jwt 주고 받을 때 보안 이슈

- refresh token 무효화하고 다시 받아올 수 있는지 expired test 한거 스크린샷 ㄱ


---
# 제안 발표
# 우리 피드백 
- 로그인 기능같은 경우는 유저의 정보를 직접 디비로 관리하고 이를 활용하는 것에 의의를 둔 것. 유저 테이블을 활용할 수 있으면 좋을 것 같음
- 서비스 설명 재구성
- gitHub OAuth를 활용하는 것은 좋으나 jwt를 사용하지 않아도 되는 방식임. 추가적으로 생각해 볼 것.

# 전체 피드백
- 도전정신!! - 더해라!
- 추상적으로() 보여주기 보다는 구체적인 사례로 보여주면 금방 인지 가능 
    - 짧은 시간 안에 나의 노력을 보여주기 위해 

# 마지막 피드백 
- 꼭 돌아가는 프로그램을 만들어야 한다. 
    - 멋있는 것 보다 기능이 돌아가야 함.

 

---

# 최종 발표
- 서비스 소개 
    - 기획 의도
    - 서비스 기대 효과
- 역할 분담 
    - 여기부터 도전 필요
    - 나중에는 많이 희석
        - 계속해서 추가되는 도전..!!!!
- 도전
    - 애니메이션 - 3d?
    - oauth2.0
- 트러블슈팅
    - 고민했던 내용들 2~3정도
- 팀 활동 
    - 밥 
    - 학습


정글러들의 깃허브 트래킹을 통한 트래킹?


- 누적 커밋 수 표시 - 숫자 애니메이면


- 유저 정보 
    - 프로필
        - 사진 
        - 아이디
        - 회사

- n명에 대한 박스 알고리즘 
    - canvas api 사용하기 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
    - canvas animation api
        - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
- 깃허브 id - commit count 
- 누적 커밋 수 - text animation 
    - https://wpdean.com/javascript-text-animation/


백엔드 역할 
- 프런트가 ui 로직에 집중할 수 있도록 하는 것도 있다고 생각


# 역할 분담 
- 기술적 역할 분담 X
- 기능별 역할 분담을 하엿음
    - 프런트와 백엔드를 모두 경험해보고자 

# 핵심 아이디어 
- 채굴!! 


- 블락 전체 사이즈를 결정하고 
    - 모든 로직이 그 widht, height 안에서 돌아가면 됨!!!! 
    - 블락 전체 사이즈는 전체 화면 width - 좌우 마진 하면 됨.


- 타일 올림 처리 
    - 1개 이상 날아가도록 구현
    - 마지막에만 1개 남도록


- 1인당 1개 타일 말구 
    - "회원수 * N" 을 전체 개수로 하고 
        - 왜? - 참여 안하는 사람이 많을 걸로 예상
    - 누군가 열일하면 지워져서 볼 수 있게


- fall back
    - access token 만료시, 빼고 다시 요청하도록 함. 


# 9월 3일 오후 9시 20분 중간 점검

### todolist 
- oauth2.0 연동
    - 
- 회원가입 
    - /sign-up
    - batch 작업 추가
    - id, password 등 값이 입력되지 않을 때 회원가입 버튼 비활성화
    - input tag -> type에 password 해줘야 가려짐
- 로그인
    - /login
    - api or jinja
- 유저 프로필
    - 디비연동만 하면 끝
- 배치 로직
    - 10분 마다
    - github에 요청해서
    - total commit을 전체 유저 스캔해서 가져옴
- 

### api list
#### client
- /main/total-count
    - total_count
    - total_count: Int 
- /main/block-list
    - block_list
    - delete_idx_list: [Int]
- /main/commit/list
    - commit_name_list


#### github
- access token 받는 api
    - redirect된 url에서 code 값 받아서
    - requests로 access_token 값 가져오기


#### 후순위
- /main/photo/index
    - 1~31 중에 
    

# 발표시 강조할 점
- 우리의 성장
    - 이슈+학습 트래킹
        - 우리가 새롭게 배운 것들의 키워드
    - 매번 한계에 도전
        ```
        while (true) {
            if (이게_돼? == false) {
                break
            }
            그럼_이것도..?()
        }
        ```
        
---

### total count

- 걍 읽어서 뿌림
- /commit/total-count

```json
{
	"commitTotalCount": 222
}
```

### user list

- _id
- name
- 아니면 그냥 프로필 데이터 전체 다줘도 됨ㅋㅋ
- /commit/user/list

```json
{
    "userList" : [
        {
                "user_id": "해시", // 이걸로 프로필 요청
                "name": "이름",
                // 유저 정보 모두 담아 주기
        }
    ]
}
```

- /commit/user
    - header

```json
	{
			"user_id": "해시", // 이걸로 프로필 요청
			"name": "이름",
			// 유저 정보 모두 담아 주기
	}
```

### day_board

```json
_id = 
```

- 좌표 저장 - 날짜 저장
- 날짜 별로 관리 - table update 해줘야 함.
    - 유저 배치 해서, 이전 카운트랑 달라지면 여기서 계산해서 값 바꿔줘야 함
- /commit/board/block/list -
    - 총 N개 이거를 어케 관리하누? - “일단 35개 - 비율로 계산” 해서 랜덤하게 idx 고르기

```json
{
	"indices": [1,5,34] // 지워지는것 0~34
}
```