[코드스쿼드] 5주차 회고록

5주차

설계 먼저

이번에는 코드 먼저가 아니라 설계부터 먼저 작성을 해보기로 하였다. 그 전 프로젝트에서는 무지성으로 코드를 짜다보니깐, 변수명과 class name들이 뒤죽박죽이었다. 이름보고 어떤 기능인지 알아야하는데 나중에는 이름을 봐도 내가 모르는 사태가 발생하였다. 앞으로 이름이 방대해질텐데… 그럼 더 큰 문제가 발생하기 때문에 이 점은 짚고 넘어가야겠다.

그래서 피그마로 뉴스스탠드 화면을 박스를 치면서 구성을 짜보았다. 이렇게 하다보니, 어떤 식으로 나누고 어떤 식으로 묶으면 좋겠는 점이 시각적으로 보여서 좋았다. 박스친 화면 구성도를 보고 아래처럼 설계도를 작성하였다.

그러다 보니, html 구조를 어떤 식으로 작성하면 좋을지 한 눈에 보여서 좋았고, BEM을 고려하면서 나만의 규칙을 적용해서 className을 구성해 볼 수 있었다. 그 전에 피드백으로 구체적인 건 좋으나, className이 너무 길다. 라는 피드백을 받았었는데 이 점을 개선하면서 구체적이고 간략화를 할 수 있어서 좋았다.

사용자 입장에서 기능 작성

feature list

common

1. 모든 콘텐츠는 정중앙에 배치되어야한다.

header

view

feature

1-1. 뉴스 스탠드 로고를 클릭하면 화면이 새로고침된다.

1-2. 현재 시스템 날짜는 새로고침하지 않아도 실시간으로 반영된다.(추가)

article(최신 뉴스 자동 롤링 영역)

view

2-1. 두개의 바가 같은 크기로 정렬되어야 한다.

2-2. 바내 오른 쪽에는 뉴스 이름이 나오고, 왼쪽에는 뉴스의 헤드라인이 나온다.

2-3. 각 영역에 마우스를 호버하면 헤드라인에 밑줄이 표시되어야 한다.

feature

2-1. 오른쪽 바와 왼쪽 바의 뉴스는 서로 각각 달라야한다.

2-2. 각 뉴스는 헤드라인이 5개가 있으며 5초마다 변경된다.

2-3. 오른쪽 바가 먼저 헤드라인이 변경되며 1초 뒤 왼쪽 바 헤드라인이 변경된다.

2-4. 롤링시, 바 영역 안에서 제목이 위로 넘어가는 애니메이션이 적용되어야 한다.

2-5. 각 영역에 마우스를 호버하면 무한롤링이 일시 정지 되어야한다.

2-6. 오른쪽 바와 왼쪽 바 헤드라인이 서로 중복되면 안된다. (추가)

• 뉴스의 헤드라인, 동시 롤링이 되지 않는다.

2-7. 한 쪽 영역이 호버되어도, 반대 쪽 영역은 롤링이 되고 있어야 한다. (추가)

2-8. 뉴스의 헤드라인은 데이터가 랜덤으로 받아오지만, 중복은 되면 안된다. (추가)

section(전체 언론사 보기 영역)

view

3-1. 첫 화면에서는 전체 언론사가 나오게 한다.

3-2. 첫 화면에서는 전체 언론사 표시 형식은 그리드 형식으로 한다.

3-3. 그리드 형식은 가로 930px, 세로 388px의 영역에 6*4의 테이블이 들어가도록 한다.

3-4. 각 테이블의 셀에는 언론사 브랜드 마크가 중앙에 배치되도록 한다.

3-5. 그리드의 좌우에는 화살표를 배치한다.

feature

3-1. 언론사 브랜드 마크의 순서는 페이지가 새로고침 될 때마다 랜덤으로 배치되도록 한다.

3-2. 화살표를 클릭하면 페이지를 넘길 수 있도록 한다.

3-3. 가장 첫페이지에서는 왼쪽 화살표가 표시되지 않아야한다.

3-4. 가장 마지막 페이지에서는 오른쪽 화살표가 표시되지 않아야한다.

3-5. 언론사는 4페이지까지만 표시되게 한다. (추가)

이런 식으로 feature list를 작성해보았는데, 맨 처음은 기획서를 보면서 어떤 기능이 있는지를 작성해보았고, 좀 더 사용자 입장에서 어떤 기능이 있으면 좋을지 생각해보고 좀 더 디테일하면 좋겠다는 기능들을 추가적으로 작성해보았다. 그리고 다 작성해보고, view랑 feature로 나눠보았다. 이런 식으로 작성해보니, 좀 더 디테일하게 기능들을 개발 할 수 있어서 좋았다.

파일 구성은 어떤 식으로 하면 좋을까

📦 fe-news
├─ src
│ ├─ component
│ │ ├─ newsHeader
│ │ │ └─ newsHeader.js
│ │ ├─ newRollingBar
│ │ │ ├─ newsRollingBar.js
│ │ │ ├─ roIIingBarLeft.js
│ │ │ └─ rollingBarRight.js
│ │ └─ newsCompany
│ │ └─ newsCompanyGride
│ │ ├─ grideSet.js
│ │ └─ girdBtn.js
│ ├─ style
│ │ ├─ css
│ │ └─ scss
│ │ ├─ news_header.scss
│ │ ├─ news_rolling_bar.scss
│ │ └─ news_commpany.scss
│ └─ store
│ ├─ newsCompanyLogo
│ └─ newsRollingData
├─ assets
└─ index.html

저렇게 설계도와 기능을 작성해보니, 어떻게 파일을 구성하면 좋을지에 대해서도 한 눈에 보여서 좋았다. 지금 파일 구성도에서 많은 부분을 수정하기는 햇지만, 처음에 이런 식으로 러프하게 파일 구성을 하니깐 어떤 기능을 넣으면 좋겠다는게 머릿 속으로 그려져서 좋다. 앞으로 프로젝트를 진행할때 설계부터 제대로 하고 코드를 짜야겠다.