%08Front end %ED%9A%8C%EC%9D%98%EB%A1%9D - 42-Tomodachi/ft_transcendence GitHub Wiki

2022-06-04(토) 1차 회의록

open/close

1. 회의 주제

  • 제작에 필요한 필수 지식.
  • 제작 흐름 간단 정리.

2. 회의 내용

현재 각자의 프론트 숙련도

  • 자유자재로 구현 가능 : dhyeon
  • 기본적인 문법 이해만 : mosong(상태관리 X), sgang
  • JS부터 시작 : junselee

학습관련

빠른 시일내에 기본적인 실력보유는 필수. 질문 바로바로 진행

  • 학습 자료 : 벨로퍼트 모던 리액트(react, TS), 제로초의 JS강의(JS)
  • (by. dhyeon) To Do List 제작은 기본
  • useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정까지. (필수지식 학습)
  • javascript 기초 학습 && 복습(recap)
  • styled-components 라이브러리 이해
  • 기능별로 디렉토리 구조 분류(예정)
  • Context API를 통한 전역관리(리덕스는 학습량이 방대하고 실제 프로젝트 적용이 일정에 비해 부족해 제외)

3. 참고

2022-06-07(화) 2차 회의록

open/close

1. 회의 주제

  • 현황공유.
  • 단기목표.

2. 회의 내용

현황공유

  • junselee
    • 리액트 crud기초 & 스타일컴포넌츠 1회 실습 (반복숙달 필요)
    • 콘솔로그로 자바스크립트 기초문법이나 동작 확인 (반복숙달 필요)
    • exam05 리트라이
  • mosong
    • 벨로퍼트는 커스텀 훅 직전까지 학습.
    • 웹서브 프로젝트 이번주완성을 목표로 병행.
  • sgang
    • 벨로퍼트 16강까지 반복 숙달.
    • 리액트 최적화에 대한 고민 (리렌더링 등)
  • dhyeon
    • UI디자인 색변경 고려.
    • 기본적인 세팅과 템플릿 구성하는것까지 진행예정.

단기 목표

  • 기본적인 세팅과 템플릿 구성
  • 42OAuth로 인가코드 받아와서 라우팅.

📣 리액트 기본환경세팅은 yarn을 사용합니다. 이모션, 라우터 돔은 기본적으로 설치하고, 브라우저마다 기본 마진값등이 들어가 있을 수 있어서 리셋css 꼭 적용해줍시다!(각자환경에 반영이 안될 수있으니 확인해보세요) 저장시 자동포맷팅 설정 vscode에있습니다. mvc패턴으로 구성합니다.


3. 참고

3. 책추천

2022-06-08(수) 3차 회의록

open/close

1. 회의 주제

  • 상황공유
  • 업무분담

2. 회의 내용

상황공유

  • dhyeon
    • 로그인화면 제작 & jason-server 오픈
  • mosong
    • 벨로퍼트 todo-list파트 완료 & webserv 프로젝트 병행
  • sgang
    • react 개념 반복 & irc 프로젝트 병행
  • junselee
    • todo-list 관련 crud동작 이해

업무분담

  • 공통
    • OAuth
  • 개인
    • dhyeon : context API 구현
    • mosong : 최초 로그인페이지 구현
    • sgang : 프로필상태창 구현
    • junselee : 2차인증활성화창 구현.

📣 피그마로 디자인된 UI를 팀원이 하나씩 분담하여 구현합니다. 목표기간은 6월12일까지이고 jason-server를 활용하여 예상동작을 테스트합니다. 깃허브 프로젝트페이지에 각자의 진행과정을 공유합니다.

2022-06-09(목) 4차 회의록

open/close

1. 회의 주제

  • 상황공유 및 코드리뷰
  • 업무분담

2. 회의 내용

상황공유 및 코드리뷰

  • dhyeon
    • ContextAPI 끝나는대로 피그마 UI 제작예정.
  • mosong
    • 코드리뷰 : 간격조정할때 CSS속성 position값이 absolute로 되어있는것들 수정 후 간격 재조정 필요.
    • 최초로그인페이지 스타일적용 끝나는대로 기능구현.
  • sgang
    • 허리부상으로 프로필상태창 미제작.
    • 상태호전되면 제작참여.
  • junselee
    • 코드리뷰 : CSS속성 hover사용은 재고. text에 대해서는 p태그로 수정. 태그간 간격조정은 마진값으로 수정. 저장시 자동포맷팅 vscode 설정(prrettier).
    • 피드백 내용 수정끝나는대로 기능구현.

업무분담

  • 공통
    • OAuth
  • 개인
    • dhyeon : context API 구현 완료 후 UI제작
    • mosong : 최초 로그인페이지 스타일적용 & 기능구현
    • sgang : 프로필상태창 구현
    • junselee : 피드백받은 내용들 수정 & 기능구현

📣 금요일은 회의가 없습니다. 목표기간 6월12일까지 jason-server를 활용하여 기능구현 테스트까지 완료하는것을 최선으로 OAuth 작업과 병행합니다.

2022-06-11(토) 5차 회의록

open/close

1. 회의 주제

  • 상황공유 및 코드리뷰
  • 업무분담

2. 회의 내용

상황공유 및 코드리뷰

  • dhyeon
    • ContextAPI 구현 딜레이, 주말에 완료계획중.
  • mosong
    • 개인일정으로인한 회의 미참여.
  • sgang
    • 허리부상 회복중, 내일부터 참여계획중.
  • junselee
    • axios 활용해서 jason-server와 데이터 주고받기 테스트 1차완료.
    • 코드리뷰 : useState데이터로 관리중인 SubText태그관련 처리를, 입력이 발생할때 갱신되도록 수정.

업무분담

  • 공통
    • OAuth
  • 개인
    • dhyeon : context API 구현 완료 & 템플릿 구성 완료
    • mosong : 최초 로그인페이지 스타일적용 & 기능구현
    • sgang : 프로필상태창 구현
    • junselee : 피드백내용 수정 후 공통업무실습(리액트앱 새로 생성) & 토큰관리(세션, 쿠키) 자료조사

📣 일요일은 회의가 없습니다. 다음회의인 6월13일 월요일까지 개인&공통업무 완수를 우선으로 진행합니다. 2차인증활성창에서 인증코드 입력 후 확인버튼을 어떻게 처리할것인지로 토의가 있었습니다. 확인버튼의 경우 submit타입으로 처리하지않고 button타입으로 처리합니다. 버튼의 border 적용이슈나 width, height반영이슈는 현재 dhyeon님 로컬에 수정되어있고 곧 반영될 예정입니다.

2022-06-13(월) 6차 회의록

open/close

1. 회의 주제

  • 상황공유 & 계획

2. 회의 내용

상황공유 & 계획

  • 개인
    • dhyeon : context API관련 작업완료(풀리퀘스트).
    • mosong : 최초 로그인페이지 기능구현 집중.
    • sgang : 프로필상태 기능구현 집중.
    • junselee : 브랜치 작업내용 정리 후 풀 리퀘스트(의미없는 주석 및 불필요한 실험코드 삭제 중). 유저리스트 제작 목표.

📣 팀전체회의에서 결정된 온&오프라인 협업에대한 임시조치로 내일(6월14일)은 3시에 게더타운에서 모입니다. 별도로 우리팀은 css적용관련 스터디를 위해 한시간 일찍 모일 예정입니다. 금일 팀회의결과, 개별업무 진행도가 당초 계획보다 느리다고 판단됩니다. 개별 분담업무는 기능구현을 중심으로 수요일까지 완성합니다. 로그인토큰에 대한 관리방식은 조금 더 기간을 두고 자료조사 후 결정하는것으로 합니다. 감사합니다.

2022-06-14(화) 7차 회의록

open/close

1. 회의 주제

  • 상황공유 & 계획

2. 회의 내용

상황공유 & 계획

  • 공통
    • 6월 19일까지 인게임을 제외한 모든 UI작성.
  • 개인
    • dhyeon : 로그인 후 페이지들의 전반적인 템플릿 제작, 기본적인 인터랙션 설정.
    • mosong : 최초 프로필 설정 페이지 구조설계 완료, UI적용과 기능구현중.
    • sgang : 유저프로필 페이지에 가상DB를 이용하여 유저 정보 불러온 후 출력하는 기능 구현중.
    • junselee : 유저리스트 페이지에 대한 스타일 적용중.

📣 금일회의부터 풀리퀘스트 발생시 리뷰어는 각각 항목(코멘트, 어프로브, 리퀘스트체인지)에 맞게 리뷰합니다. 내일(6월15일)은 3시부터 게더타운에서 프로젝트 관련 협업이 있습니다. 오늘 전체회의에서 로그인토큰관리에 대한 토의가있었습니다. 벡엔드팀 kankim님 의견에 따라 기존 세션방식에서 JWT방식으로 계획을 수정합니다. 토큰관리에대해 읽어볼만한자료가 깃허브 디스커션에 공유되어있습니다. 회의 진행시 사전에 각 팀 회의록을 최대한 참고해 불필요한 소통으로인한 회의시간 지연을 최소화합니다.

2022-06-15(수) 8차 회의록

open/close

1. 회의 주제

  • 상황공유 & 계획

2. 회의 내용

상황공유 & 계획

  • 공통
    • 6월 19일까지 인게임을 제외한 모든 UI작성.
  • 개인
    • dhyeon : 체제유지 관련 이슈로 모달작업 딜레이(15일 ~). 모달제작 가속화 할 예정.
    • mosong : 파일리더관련동작 구현 중, 폼데이터 처리방식하고 다를 경우에 이슈발생시 딜레이 가능성있음.
    • sgang : 유저프로필페이지 풀리퀘스트 완료, 피드백 반영 후 모달페이지(프로필보기) 제작 예정.
    • junselee : 게더타운 협업에 잘 적응하지 못해 개인작업 딜레이. 유저리스트 UI 제작 및, 탭기능 실험 중(14일 ~). 2차인증페이지 풀리퀘스트 피드백 모두 수정 후 반영할 예정.

📣 전체회의에서 8인체제 유지관련 토의가 있었고, 토의결과로 현행유지합니다. 백엔드팀 도커라이징관련 이슈가 디스커션에 공유되어있습니다. 프론트엔드팀 풀리퀘스트 피드백관련 수정사항반영시에는 코멘트 필수입니다. 'dhyeon'님이 작성하신 프론트엔드 코드컨벤션 확인합시다. 백엔드 클래식프로젝트 업로드되었습니다. 현 진행사항 확인시 참고바랍니다.

2022-06-16(목) 9차 회의록

open/close

1. 회의 주제

  • 상황공유 & 계획

2. 회의 내용

상황공유 & 계획

  • 공통
    • 6월 19일까지 인게임을 제외한 모든 UI작성.
  • 개인
    • dhyeon
      • 회의 미참여
    • mosong
      • dhyeon님 풀리퀘스트 피드백.
      • 파일리더관련동작 구현 중(15일 ~).
      • 웹서브 오류 수정중.
    • sgang
      • 유저프로필페이지 피드백 반영 중(유저프로필, 15일 ~).
      • 모달페이지(프로필보기) 제작(15일 ~).
    • junselee
      • dhyeon님, mosong님 풀리퀘스트 피드백
      • map메서드 이용해서 서버로부터 받아온데이터 표시하는 부분 구현중(유저리스트, 14일 ~).
      • 2차인증페이지 풀리퀘스트 피드백 모두 수정 후 반영예정.

📣 전체회의에서 깃허브 풀 리퀘스트에 대한 mosong님 소개가 있었습니다. 팀간협업을 위한 준비를 이번주내(6월19일)로 완료할 수 있도록 합니다. 내일(6월17일)은 회의가 없습니다.

2022-06-20(월) 10차 회의록

open/close

1. 회의 주제

  • 상황공유 & 계획

2. 회의 내용

상황공유 & 계획

  • 공통

    • 뒤로가기 버튼에 대한 동작처리 필수사항을 위해 useHistory hook 관련동작 자료조사
    • Canvas로 웹페이지 그래픽작업하기 전 선행할 개인과제 공튀기기.

  • 개인

    • dhyeon

      • 채팅룸 페이지제작 완료 (merge, [FE] ChatRoom 페이지 제작 #43)
      • 간단한 수정사항 반영중
        • 이슈페이지에있는 "자잘하게 수정해야될것들." 참고

    • mosong

      • 웹서브 프로젝트 통과.
      • 닉네임 페이지제작 요청사항 반영 및 완료대기중 (pull requests, [FE] make nickname page #25)
      • 프론트팀 작업진행을 위한 자료조사 예정.

    • sgang

      • '프로필보기'를 포함한 기본 모달제작 완료 (merge, [FE] ShowProfile(Modal) UI 제작 #44)
      • irc 병행 예정

    • junselee

      • 2차인증창 풀리퀘스트 후 리뷰요청사항 반영중 (2차)
      • 유저리스트창 풀리퀘스트 후 리뷰요청사항 반영중 (1차)
      • 요청사항 반영 후 containers 병행 예정

📣 프론트엔드 주요알림

  • 인터페이스 관련 컨벤션이 수정되었습니다.
...

Interface
PascalCase
props 의 Interface 를 선언할때 : [컴포넌트명]Props ( ex : ChatProps )
props 의 Interface 의 경우 해당 컴포넌트 파일 상단에 Interface 정의 (export 하지 않음)
기본 Interface 의 경우 : I[이름] ( ex: IUser )

...
  • 수요일부터 오프라인으로 협업이 진행됩니다. 구체적인 일정은 미정이나 백엔드팀과 명세 및 작업을 동시에 진행할 계획입니다.
  • 소켓통신에대해서는 인게임한정으로, 유저간 소통(채팅, 디엠)에 대해서는 디비에 데이터를 저장하는 형태로 최초 합의합니다.
  • 팀회의에서 구현 필수사항인 프로필기본이미지를 인트라사진을 받아올것인지에 대해 토의가 있었고 추후 백엔드팀과 합의가 필요합니다.
  • 디자인 구현할때 크로스브라우징 체크 부탁드립니다.

2022-06-21(화) 11차 회의록

open/close

1. 회의 주제

  • 상황공유 & 계획

2. 회의 내용

상황공유 & 계획

  • 공통

    • 뒤로가기 버튼에 대한 동작처리 필수사항을 위해 useHistory hook 관련동작조사
    • Canvas로 웹페이지 그래픽작업하기 전 선행할 개인과제 공튀기기.

  • 개인

    • dhyeon

      • 간단한 수정사항 적용완료, 리뷰받는중 (pull requests, FE-chore)

    • mosong

      • 닉네임 페이지제작 완료 (merge, [FE] make nickname page #25)
      • 프론트팀 작업진행을 위한 자료조사 예정.

    • sgang

      • 추가 모달제작 새벽중 풀리퀘스트 예정 (FE-#45-Make-MakeRoom-Modal)
      • irc 병행중 (21일 ~)

    • junselee

      • 2차인증창 & 유저리스트창완료 (merge, [FE] TEST: 2차인증창 & 유저리스트창 #13)
      • containers 병행중 (21일 ~)

📣 6월22일 오프라인 협업 있습니다.(백엔드 & 프론트엔드) 6월22일 수요일 서초클러스터 7클러스터 회의실(14:00 ~ 18:00). 백엔드팀과는 api관련 합의가 있을 예정이고, 합의진행정도에따라 프론트팀은 별도로 canvas 관련 스터디 함께 진행합니다. 기초적인동작 확인 후 트렌센던스 프로젝트에 맞게 응용 및 적용합니다.

2022-06-23(목) 12차 회의록

open/close

1. 회의 주제

  • 상황공유
  • 제작회의

2. 회의 내용

상황공유

  • 채팅룸과 채팅페이지,버튼폰트사이즈등 간단한 수정사항 풀리퀘스트중([FE] 디자인 및 파일명 수정 #69).
  • 도커컨테이너(도커컴포즈)빌드까지 풀리퀘스트중([FE] add dockerfile, docker compose #68).
  • 백엔드작업지연 해결시 토요일부터 팀간 협업예정.
  • dhyeon 28일 첫출근, junselee 28일 블랙홀(컨테이너 병행중), sgang 29일 블랙홀(irc 병행중).

제작회의

  • 키워드1, 히스토리 구현
    • 버전차이로 발생한 에러해결 중. 내일까지 해결목표.
    • 계속 지연 될 경우에, 보다 가시적인 결과를 볼 수 있는 주제부터 분업과 소통이 필요.
    • 구현된 히스토리를 리스트관련 버튼까지 적용할지에 대해서는 최우선 고려요소에 두고 차후 결정.

  • 키워드2, 비공개대화방 url접근가능
    • 논의된 대안
      • 대안1 : 해시값으로 url수정
      • 대안2 : 접근하지 못하고 튕기도록 처리.
      • 대안3 : 로그인상태에따른 특정동작수행.
    • 논의 결과
      • 로그인되어있지않는 사용자는 루트페이지로, 로그인되어있는 사용자는 잘못된접근 + 홈버튼 제공으로 결정.
    • 현재 잘못된접근페이지 UI제작 완료.

  • 키워드3, 엔직엑스
    • 서버와 클라이언트 사이에 직접적인 소통을 대신할 엔진엑스가 필요한지에 대해 토의.
    • 구축시, 없는url로 접근할때의 리다이렉션이나 리버스프록시로의 기능동작이 가능해질것으로 보임.
    • 백엔드와 협의할 문제이기 때문에 최종결정은 보류.

📣 내일은 게더협업이 없습니다. 구현된 api상태는 swagger에서 완료된것만 확인해주세요. 감사합니다.

⚠️ **GitHub.com Fallback** ⚠️