boostcamp-2020 / issuetracker-20 Goto Github PK

이름

GitHub oAuth 로그인

요약 설명

• WHO: 로그인하지 않은 사용자가
• WHY: 자신의 GitHub 아이디로 간편하게 로그인하기 위해
• WHAT: GitHub oAuth 로그인 버튼을 클릭한다.

테스트 요구사항

기능성

• 로그인하지 않은 사용자는 로그인 페이지로 리다이렉트된다.
• GitHub 인증이 완료된 후, 사용자는 메인 페이지로 리다이렉트되야 한다.
• 로그인된 사용자는 이 과정을 생략하고 메인 페이지로 리다이렉트되야 한다.

신뢰성

예) 입력된 이메일은 이메일 형식에 준수돼야 한다.

사용성

• 로그인 페이지에서 GitHub oAuth 로그인 버튼이 한 눈에 보인다.
• GitHub oAuth 로그인 버튼은 키보드, 마우스로 액세스 가능해야 한다.

효율성

예) 로그인 화면 로딩 시간은 1분 이내여야 한다.

사용자 그룹

사용자

예상화면

마일스톤 목록 컴포넌트

Labels, Milestones 선택 컴포넌트

New Milestone 선택 컴포넌트

Open, Closed 표시 컴포넌트

목표

마일스톤 목록을 보여준다.
Labels, Milestones 선택 컴포넌트 구현
New Milestone 버튼 구현
Open, Closed 표시 컴포넌트 구현

필요한 컴포넌트

마일스톤 컴포넌트

Lucas 요구사항

현재 화면이 마일스톤 목록 화면이라는 걸 알 수 있도록 표시한다. 레이블 버튼을 누르면 레이블 목록 화면으로 이동한다.

전체 마일스톤 목록이 표시된다.

• 마일스톤 이름과 완료일이 표시된다. 완료일이 없다면 “No due date”와 같이 표시한다.
• 마일스톤에 대한 설명이 한 줄로 표시된다. 설명이 없다면 표시하지 않는다.

마일스톤 목록 우측에 진행률과 해당 마일스톤과 관련된 오픈/클로즈 이슈의 개수가 표시된다.

마일스톤 진행률 아래에 Edit, Close, Delete 버튼이 위치한다. [Edit] 버튼을 누르면 마일스톤 편집 화면으로 이동한다.

마일스톤 목록 화면 상단 우측에 [New milestone] 버튼이 위치한다. 해당 버튼을 누르면 새로운 마일스톤을 생성하는 화면으로 이동한다.

예상화면

목표

Lucas 요구사항

template render같은 엔진을 추가로 이용해서

server에서 render한 페이지에서 token을 localStorage에 저장 -> 프론트페이지에 리다이렉트 시키면

localStorage에 담는 형태로 가능하지않을까? 싶습니다 ~~~

eslint-plugin-react에서 prop-types를 이용할 것을 권장하고 있음.

prop-types

React component의 상태를 담당하는 prop에 type을 지정해, prop에 잘못된 type이 들어오면 error가 나오도록 설정하는 것.
TS처럼 type checking이 가능해져 디버깅이 편해진다.
TS와 다른 점은, build가 아닌 runtime에 type checking이 발생하게 된다.

• eslint-plugin-react: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
• react 공식문서: https://reactjs.org/docs/typechecking-with-proptypes.html

사용할 경우

패키지 설치

npm i prop-types

각 React component에

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

사용하지 않을 경우

frontend의 .eslintrc.json에 예외 처리

{
  "rules": {
    "react/prop-types": "off"
  }
}

#63 해결 시 경로를 지정해서 이동할 수 있는데 /login 경로에 접근할 경우 곧바로 로그인 페이지로 접근하게 되는데요.
로그인 페이지에서 세션을 점검하지 않아서 그런지, 정확한 원인은 파악하지 않았지만 메인 페이지로 이동되지 않고 로그인 페이지에 머물게 됩니다.
버그라고 생각되네요.

사용하는 곳

이슈 컴포넌트

설명

현재 시간과 이슈 생성시간 차를

위 사진과 같이 yesterday, 9 hours left와 같은 적절한 string 을 리턴하는 함수를 구현해야함

예상화면

Setting이라 이슈없습니다.
ㅇ

목표

반복적으로 사용하는 css값들(Main Color, padding)값을 변수로 선언해 사용하고자 합니다.

Lucas 요구사항

css-in-js의 styledcomponent관련.

예상화면

목표

[New label] 버튼 클릭 시, 다음과 같은 새로운 레이블을 추가할 수 있는 영역이 나타난다. 한 번 더 클릭하면 해당 영역이 다시 사라진다.

Lucas 요구사항

• 레이블 이름과 색깔 입력 시 바로 이곳에 반영되어, 만들어질 레이블의 모양을 미리 확인할 수 있다.
• 레이블 이름을 입력할 수 있다. 이름을 입력하면 ➊번의 텍스트가 변경된다.
• 레이블 설명을 입력할 수 있다. 레이블 설명은 옵션값이다. 반드시 입력하지 않아도 레이블을 생성할 수 있다.
• 색상 코드는 초기값이 입력되어 있고, 해당 색깔이 색상 코드 왼쪽 리프레시 버튼에 표현된다.
  • 사용자가 다른 색상 코드를 입력해서 변경할 수 있다.
  • 리프레시 버튼을 누르면 랜덤하게 색상 코드를 생성해서 변경해준다.
  • 색상 코드가 변경되면 리프레시 버튼 배경색과 함께 ➊번의 색깔도 같이 변경된다.
• Cancel 버튼을 누르면 아무런 반영 없이 새로운 레이블 추가 영역이 사라지고 이전 슬라이드와 같이 레이블 목록만 보여진다.
• 레이블 이름을 입력하면 Create label 버튼이 활성화된다.
• Create label 버튼을 누르면 입력한 내용대로 새로운 레이블이 추가되고, 레이블 추가 영역이 사라진다.

참고 사이트

https://time2hack.com/why-are-you-not-using-aliases-in-webpack-config/

예상화면

구현할 기능

• 아이콘, 버튼 이름, 해당 요소 개수, 버튼 클릭시 이동할 링크를 상태로 가지는 컴포넌트를 구현한다.
• 속성만 바꿔 재사용할 수 있도록 구현 후 Labels, Milestones 컴포넌트를 구현한다.

Lucas 요구사항

Labels 버튼을 누르면 레이블 목록 화면으로 이동한다.

• Labels 버튼 옆에 현재 사용하는 레이블 개수를 같이 표시해준다.

Milestones 버튼을 누르면 마일스톤 목록 화면으로 이동한다.

• Milestones 버튼 옆에 현재 진행 중인(오픈 상태인) 마일스톤 개수를 같이 표시해준다.

예상화면

목표

이슈 목록 화면 컴포넌트를 구현한다.
하위 컴포넌트를 배치하고 New issue 버튼을 구현한다.

하위 컴포넌트

• 필터
• Labels
• Milestones
• 이슈 목록

Lucas 요구사항

New issue 버튼을 누르면 새로운 이슈를 생성하는 화면으로 이동한다.

예상화면

목표

레이블 목록 마크업 구현하기

Lucas 요구사항

전체 레이블 목록이 표시된다.

• 레이블 목록 상단에 전체 레이블 개수가 표시된다.
• 레이블 이름과 배경색이 표시된다.
• 레이블 설명이 한 줄로 표시된다.
• 모든 레이블 목록은 우측에 Edit과 Delete 버튼을 함께 가진다.
• 레이블 목록 화면 상단 우측에 [New label] 버튼이 위치한다.

express generator을 사용해서 express 만들기

문제

async await 문법을 사용하면 에러남.
이유는 babel 문제...........

이거때문에 promise로 바꾼 함수가 있었는데 결국 에러 해결 ㅠㅠ

bable 문제로 polyfil 설치해서 webpack, babel 설정파일 수정

적용되는 프론트엔드 화면

목표

DB에 있는 Labels 정보를 리턴하는 API를 구현한다.

기능

Label의 name, description, color를 리턴하는 API를 구현한다.

Lucas 요구사항

전체 레이블 목록이 표시된다.

• 레이블 목록 상단에 전체 레이블 개수가 표시된다.
• 레이블 이름과 배경색이 표시된다.
• 레이블 설명이 한 줄로 표시된다.

적용되는 프론트엔드 화면

목표

FE 이슈 목록보기에서 DB에 있는 이슈를 보여줄 수 있도록 이슈 목록을 리턴하는 API를 구현한다.

기능

titie, content, isOpened, author, milestone, createDate, assignee 정보가 있는 이슈 목록 데이터를 리턴한다.

Lucas 요구사항

이슈 목록을 보여준다.

• 제목, 마일스톤, 레이블, 이슈 번호, 이슈 작성 시간, 작성자, 담당자를 표시한다.

목적

fetch에 사용하는 헤더 등의 공통 부분을 모듈로 작성하고 import하여 사용하고자 함

열받죠?

기능

프론트엔드에서 Sign in with GitHub을 클릭시 사용자 인증 후 로그인 할 수 있도록 한다.

Lucas 요구사항

로그인은 GitHub OAuth를 지원해야 한다. (필수)

• 인증되고 나면 이슈 목록 화면으로 넘어간다.
• 앱이 시작할 때 이미 발행한 OAuth 토큰이 있는 경우 이 화면은 생략하고 바로 이슈 목록 화면을 표시한다.

적용되는 프론트엔드 화면

목표

DB에 있는 Milestones 정보를 리턴하는 API를 구현한다.

기능

GET
PATCH

Lucas 요구사항

전체 마일스톤 목록이 표시된다.

• 마일스톤 이름과 완료일이 표시된다. 완료일이 없다면 “No due date”와 같이 표시한다.
• 마일스톤에 대한 설명이 한 줄로 표시된다. 설명이 없다면 표시하지 않는다.

목표

Issue, comment 기능에서 이미지 추가를 해야한다.
이때 Imgur API를 사용하기 위해 API를 학습하고 팀원들과 공유한다.

참고 자료

https://apidocs.imgur.com/

목표

utils/auth의 isAuthenticated를 구현

• 로그인 인증이 필요한 컴포넌트는 AccessToken을 서버에 보낸다.
• 403에러일 경우 isAuthenticate의 return 을 false로 해서 로그인 컴포넌트로 이동
• 인증 성공하면 isAuthenticate의 return을 true로 해서 인증

DB에서 불러오는 createDate값이 date객체가 아닌 string객체로 인식되서 time.getTime메서드가 작동을 안함.
그 부분 해결하겠습니다.

이 모달창 안에 들어가는 재사용가능한 레이블 컴포넌트 구현

적용되는 프론트엔드 화면

목표

1. 이슈 생성 api가 동작하도록 한다.
2. 이슈 수정 api가 동작하도록 한다.
3. 이슈 open/close api가 동작하도록 한다.

기능

Lucas 요구사항

목표

난잡한 컴포넌트 이름을 명확하게 수정한다.

예상화면

목표

버튼 css가 비슷하기 때문에 재사용 컴포넌트로 제작하기.

Lucas 요구사항

웹 프론트 화면

목표

react-hooks-fetch-data 읽어보고 이슈목록에서 이슈 fetch해서 db에 있는 것 보여주기

비정상

정상

예상화면

목표

• 외부 클릭시 레이어 사라지는 기능
• X 또는 버튼을 클릭시 레이어 사라지는 기능

Lucas 요구사항

Sequelize 모델에 Title 추가
ERD 수정

언젠가 쓸지도 모르는 테스트 프레임워크 Jest를 프로젝트에 포함

Filter 검색 창에 IssuePage의 filter State 값이 들어가게 해서
여러 Filter(Author, Label등 모달창에서 클릭되었을 때 적용됨)가 클릭되거나 직접 입력되었을 때 검색창에 적용될 수 있도록 하기

사용하는 곳

• 이슈목록의 필터를 위한 라벨선택 위해서
• 이슈 작성 에서 라벨 등록을 위한 곳에서

상위 컴포넌트에서 setState를 받아 그 곳에 title등 정보를 넘겨주는 방식?

ㅎㅎㅎㅎ

onchange 이벤트 활용해서 값 입력 가능하게 하기
입력 값으로 state값 바꿀 수 있게 하기 (enter가 눌렸을 때?)

예상화면

목표

레이블 추가 컴포넌트를 응용해서 수정 기능 만들기

Lucas 요구사항

• 레이블 목록에서 [Edit] 버튼 클릭 시, 다음과 같이 해당 레이블 목록 바로 아래에 레이블을 편집할 수 있는 영역이 나타난다.
• 레이블 이름과 색깔 변경 시 바로 이곳에 반영되어, 만들어질 레이블의 모양을 미리 확인할 수 있다.
• 레이블 이름을 수정할 수 있다. 이름을 수정하면 ➊번의 텍스트가 변경된다.
• 레이블 설명을 수정할 수 있다. 레이블 설명은 옵션값이다. 따라서 빈칸으로도 수정할 수 있다.
• 레이블 추가 영역과 동일하게 동작한다. 색상 코드가 변경되면 리프레시 버튼 배경색과 함께 ➊번의 색깔도 같이 변경된다.
• Cancel 버튼을 누르면 아무런 반영 없이 레이블 편집 영역이 사라지고 이전 슬라이드와 같이 레이블 목록만 보여진다.
• Save changes 버튼을 누르면 입력한 내용대로 레이블이 수정되고, 레이블 편집 영역이 사라진다.

expected:
redirect 없이 frontend html file을 serve해야함.

actual:
'/'으로 redirect되므로 새로고침 등의 상황에서 반드시 main page가 render되버림.

hello

예상화면

목표

읽어오기 추가 수정 삭제 기능 API와 연결

Lucas 요구사항

목표

깃허브는 제목을 눌렀을때만 이동이 되는데,
지금은 이슈 컴포넌트 전체에 링크를 걸어놔서 레이블을 클릭했을때의 이벤트 등을 등록할 수 없다.
추후 제목으로 링크기능을 이동시킨다.

예상화면

구현할 기능

• 필터에 해당하는(default : Opened) 이슈 목록을 보여준다.

하위 컴포넌트

• 이슈

Lucas 요구사항

이슈 목록을 보여준다.

• 오픈 상태의 이슈만 보여주는 게 기본 상태이다.
• 제목, 마일스톤, 레이블, 이슈 번호, 이슈 작성 시간, 작성자, 담당자를 표시한다. 해당 값이 없으면 보여주지 않아도 된다.
• 이슈 제목을 선택하면 선택한 이슈에 대한 상세 화면 페이지로 이동한다.

이슈 트래커 첫 화면은 다음과 같다.

1. 아이디는 최소 6자리에서 16자리까지 입력할 수 있다.
2. 비밀번호는 최소 6자리에서 12자리까지 입력할 수 있다.
3. 로그인은 GitHub OAuth를 지원해야 한다. (필수)

• 인증되고 나면 이슈 목록 화면으로 넘어간다.
• 앱이 시작할 때 이미 발행한 OAuth 토큰이 있는 경우 이 화면은 생략하고 바로 이슈 목록 화면을 표시한다.

4. 로그인과 회원가입 기능은 선택 사항이다. 3의 GitHub OAuth 방식을 우선 구현한다.

repo 초기화

npm init -y

webpack, babel 설치

npm i -D @babel/core @babel/preset-env @babel/register core-js@3 
npm i -D webpack webpack-cli babel-loader webpack-node-externals clean-webpack-plugin

backend express 설치

npm i express

frontend react 설치

npm i react react-dom
npm i -D @babel/preset-react html-webpack-plugin

eslint 적용

npx install-peerdeps --dev eslint-config-airbnb-base
npm i -D eslint-plugin-react

backend 설정 .eslintrc.json

{
  "env": {
    "node": true
  },
  "extends": "airbnb-base"
}

frontend react 설정: .eslintrc.json

https://github.com/yannickcr/eslint-plugin-react

버그화면

목표

• 프로필 사진이 레이어 아래로 내려가서, 보이지 않도록 수정

예상화면

목표

이슈관련 기능을 수행하는 컴포넌트를 구현한다.

기능

1. titie, content, isOpened, author, milestone, createDate, assignee 정보를 예상화면과 같이 표시한다.
2. title을 클릭 시 이슈에 대한 상세화면 페이지로 이동한다.

Lucas 요구사항

이슈 목록을 보여준다.

• 제목, 마일스톤, 레이블, 이슈 번호, 이슈 작성 시간, 작성자, 담당자를 표시한다. 해당 값이 없으면 보여주지 않아도 된다.
• 이슈 제목을 선택하면 선택한 이슈에 대한 상세 화면 페이지로 이동한다.

UTF-9으로 잘 받아오면 수정할 필요 없음
UTF이거나 설정 차이가 있으면 조정 필요

예상화면

목표

마일스톤 관련 정보를 보여주는 컴포넌트를 만든다.

Lucas 요구사항

• 마일스톤 이름과 완료일이 표시된다. 완료일이 없다면 “No due date”와 같이 표시한다.
• 마일스톤에 대한 설명이 한 줄로 표시된다. 설명이 없다면 표시하지 않는다.