# 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 } ```