1주차 피어세션 (2020.10.30)

1. 팀원

• 24조 : 강민수, 박기호, 송진현, 정지찬
• 25조 : 박승환, 이수경, 양예진, 최창희

2. 공유했던 내용

01. GitHub OAuth 토론

• OAuth 같은 경우는 로그아웃 기능이 구현되어 있지 않아서 사용자에게 공개된 장소에서 로그인한 경우에는 로그아웃을 하라는 알림을 띄워서 사용자가 처리할 수 있도록 구현되어 있다.
• 아마 쿠키가 생겼을 거 같은데 그 쿠키를 삭제를 한다면 원하는 것을 구현할 수 있지 않을까?? 정확하지는 않은데 쿠키가 생길 것 같다. (쿠키에 접근이 가능한지는 아직 불분명함)
• GitHub OAuth 같은 경우는 대부분이 개인 환경에서 로그인 하는 경우가 많으니까 아마 그런 기능이 애초에 없었던 것 같다. 그러나 GitHub 사이트에서 로그아웃은 안되더라고 그 GitHub를 통해서 로그인한 그 사이트에서는 로그아웃이 되어야 한다고 생각한다.
• 정책을 잘 설정하면 되지 않을까?? 만약 쿠키를 삭제하는 방식으로도 로그아웃 기능이 구현이 안된다면 우리만의 정책을 잘 세워서 구현을 한다면 될 것 같다.

02. Ngnix, docker 관련 배포 토론

• 프론트 배포시 웹팩으로 빌드를 해서 도커 이미지 안에서 번들링된 파일을 내부에 넣고, 도커 내부에 있는 nginx를 이용해서 호스팅 하고 있는데
• 도커 이미지로 빌드한 후, 번들링된 HTML에 환경변수를 넣어줄 수 없는 문제에 직면했다.
• 빌드를 할 때 환경 변수가 고정이 되어서 docker를 사용하는 이점이 없어졌다.
• 지금 당장 고려해야할 사항은 아닌데 만약에 서버가 망가져서 다른 서버를 쓸 때 환경변수만 바꿔주고 싶어서 이런 고민이 생겼다.

03. 프론트엔드 폴더 구조

• 25조
  • apis : axios, api 관련 로직 구현
  • components : 재사용 가능한 컴포넌트 별로 각각 분리를 해서 구현했다.
  • routes : 화면 별로 컴포넌트를 분리했다.
  • libs : 라이브러리 관련 기능을 구현했다.

04. Styled-Components

• 스타일을 적용하기 위한 태그와 컴포넌트 태그를 구분하기 위해 스타일을 적용하는 태그 이름은 기존 태그를 그대로 활용하기로 했다. <Header>와 같은 semantic tag는 의미를 알 수 있었지만, <Div>와 같은 태그는 의미가 명확하지 않았다.
• 태그 안에 className을 넣어서 구분하는 방법으로 해결할 수 있겠다.

  <div className="test-component">

05. 페어 프로그래밍

• 24조는 live share를 통해서 1명이 코딩을 하고 3명이 설명과, 얘기를 하는 방식으로 진행했는데 1명이 많이 고생했지만 서로에 대해서 알 수 있는 시간을 가질 수 있었다.
• 25조는 live share를 사용했는데 버그로 인해서 코드가 1000줄까지 증식하는 상황이 생겨서 곤란함을 겪었었다.

06. 소통

• 25조의 경우는 코딩을 하다가 공통 이슈가 생길 경우 slack을 이용해서 호출을 하고 zoom에서 해결과 소통을 하는 방식으로 진행을 했다.
• 24조는 기본적으로 zoom을 base로 해서 서로 대화를 계속 진행하면서 코딩을 진행했다. 그리고 공통 이슈가 발생하면 zoom에서 바로 호출을 하는 방식으로 진행하였다.

07. PM

• 25조는 한 명이 PM 역할을 하면서 각 상황들을 조율하고, PM이 각자의 할 일에 대해서 체크를 하는 방식으로 진행하였다.
• 24조는 따로 PM을 정하지 않고, 수평적으로 진행을 하였다.

08. yarn

• 24조는 package.json 파일 즉, 프로젝트 빌드 내용을 front, back으로 분리해서 구현을 했는데
• 25조는 yarn을 사용하고, workspace를 설정을 해서 root 폴더에서 공통적으로 사용하는 빌드 내용을 분리했다.
  • root 디렉토리에 node_modules를 두고, server와 front 폴더에서 루트 패키지를 심볼릭 링크로 걸어둔다. (workspace)
  • 서버와 클라이언트에서 동일하게 사용되는 패키지는 중복 설치를 피할 수 있다.

09. axios (instance를 생성해서 사용하는 방법)

• instance를 생성해서 사용하면 base URL을 설정할 수 있고, 공통적으로 사용 가능한 header를 초기화 할 수 있다.
• Interceptor 설정으로 헤더에 토큰을 설정하는 반복적인 작업을 처리할 수 있다.

10. createGlobalStyled

• front의 모든 js에서 공통적으로 스타일을 적용할 수 있다.