[TIL] 스파르타) Project3 시작 (TMDB 팀 과제), Github Issues

 

 > 팀 프로젝트 발제에 따라 CS강의 수강을 미루고 Github 세팅과 wireframe 설계, issue 및 스크립트 작성에 집중했다.

 

학습 키워드: javascript, js, TMDB API, Github Issues, css, grid

 

1. Github Issue

1) What is it?:

 - 존재는 알고 있었으나 README용 이미지 업로드 외에는 한 번도 제대로 사용해본 적이 없는 Github의 기능이다. 프로젝트의 여러 issue 들을 게시하는 공간인데, 새로운 기능 개발을 제의하거나 발생한 버그의 리포트 및 수정 요청으로도 사용된다.

 

2) How does it work?:

 - Github 프로젝트의 repository로 진입하면 상단의 Code 탭 바로 옆에 Issue 탭이 위치해 있다. 이 탭에 진입해서 New Issue 버튼을 누르고 이슈를 작성하면 된다.

Configuring issue templates for your repository - GitHub Docs

 - md파일을 미리 제조하여 템플릿처럼 사용이 가능하다. 현재 팀 프로젝트 repo에 .github 라는 이름의 템플릿 폴더가 생성되어 있으므로 위 링크와 함께 해당 파일을 참고하자.

 - Issue를 생성하고 들어가보면 우측 사이드바에 여러가지 항목이 존재하는데, Assignee가 해당 이슈를 담당할 사람이 된다. 다음으로 아래의 Labels를 누르면 여러 종류의 기본 label이 제공되는데, 아래의 edit labels 를 눌러서 label을 더 추가하거나 기존 라벨을 다른 이름이나 색상 등을 나타내도록 수정할 수도 있다. Feature 추가에 관한 issue라면 FEATURE 태그를 넣고, documentation 수정에 관한 issue면 DOCS를 넣는 식으로 사용한다.

 - 그 외 항목들 또한 Issue를 좀 더 체계적으로 관리하도록 도와주는 기능이다. 프로젝트를 진행하면서 점차 알아가도록 해야겠다.

 

3) Why use it?:

 - 협업 중에 사소한 문제가 발생할 때 마다 통화를 하거나 모여서 회의를 할 수는 없다. 그래서 자잘한 문제들이나 기능 제의 및 토의를 Github의 Issue란에 게시하고 peer review를 통해 의견 조율 및 제의 승낙/ 거부까지 Github에서 모두 처리할 수 있도록 하는 공간을 마련한 것이 바로 Issues 기능이다. 또한, 어떠한 개발 과제를 정했을때 해당 과제의 진행상황과 개발 완료 여부를 모두가 알 수 있도록 기록하는 용도로도 사용될 수 있다.

 

2. CSS Grid

1) What is it?:

 - 저번 프로젝트 때 사용하지 않았던 CSS 기능인데, Grid가 적용된 클래스를 가진 element의 하위 항목들을 격자 형태로 나누어 배치해주는 기능이다.

 

2) How does it work?:

Grids - Learn web development | MDN

.info-container {
    display: grid;
    grid-template-columns: 40% 1fr;
    column-gap: 10px;
    padding: 10px 10px 10px 10px;
    background-color: white;
}

.info-left {
    position: relative;
    float: left;
    background-color: red;
    align-content: center;
}

.info-right {
    position: relative;
    display: grid;
    float: right;
    background-color: blue;
    align-content: left;
}

<div class="info-container">
    <div class="info-left"></div>
    <div class="info-right"></div>
</div>

 - 현재 프로젝트에서 grid를 사용중인 부분의 구조를 일부 가져와봤다. 보면 info-container 클래스가 info-left와 info-right을 담고있는 container 클래스인데, grid-template-column 이라는 property에 40% 1fr 값을 지정해 줌으로써 하위 element인 left와 right가 각각 40%와 나머지의 공간을 차지하도록 손쉽게 설계할 수 있었다. 이 grid-template-column 프로퍼티의 value 값의 개수를 늘리면 grid column의 개수가 늘어난다. MDN을 참고하여 여러가지 설정을 해보면서 자세한 방법을 배워봐야겠다.

 

 

3) Why use it?:

 - div의 위치를 float 과 position만으로 정리하기가 복잡해지는 경우가 있다. 오늘도 열심히 만들어둔 css 클래스들의 위치나 크기가 제대로 안잡혀서 얼마동안 고민하다가 지난번에 안쓰고 넘어간 Grid를 사용해보자고 생각했다. 몇 가지 css property의 사용만으로도 손쉽게 element 배치 구조의 전체적인 모양을 잡을 수 있어서 굉장히 편리한 기능이다.

 

--

 

REFERENCES:

 

JavaScript 팀 과제 | Notion

 > 스파르타) JS Project 3 팀 과제 개요

GitHub - donkim1212/nbc_ch2_tmdb: 내배캠) Chapter2 개인 과제

 > 팀 과제 Github repository (지난 번 개인 과제 repo를 기반으로 팀원들과 협업하여 기능을 추가)