멤버십_8주차_주간계획

뉴스 스탠드 웹

개인적 목표

• 타입스크립트를 리액트에 적용하면서 보다 타입스크립트에 적응하는 과정을 거치기
• babel, vite 등의 번들링 툴에 익숙해지기
• tailwindcss를 써보면서 익숙해지기

기술 스택

Folder Structure: FSD Architecture

Bundling: Vite & babel

Vite를 이용한 이유는 개발 과정에서 결과를 확인하기 위해 빌드하는 작업 자체가 시간이 조금 걸렸기 때문에 보다 원할한 DX(개발자 경험)을 위해서는 Vite가 낫다고 판단하였다.

vite는 애플리케이션에서 사용하는 모듈에 대해 dependencies와 source code 두 가지의 범주로 나누어 개발 시작 시간을 개선한다.

dependencies의 경우 개발시 내용이 바뀌지 않을 사용하는 라이브러리의 의존성 번들링 과정을 수행한다. Vite는 Esbuild의 빌드 툴을 사용하여 번들링을 수행하는데, Esbuild의 경우 기존 webpack이나 parcel보다 100배 이상 빠른 속도를 보장한다.

Source code의 경우 우리가 대표적으로 사용하는 프레임워크의 확장자를 사용하면서 만드는 컴포넌트, 즉 Non-plain Js들의 소스코드를 의미한다. 해당 코드들의 경우에는 실행하기 위해서는 컴파일을 수행할 필요성이 있다. 하지만 기존의 번들링된 코드 기반 개발 서버는 개발하는 과정에서 소스 코드의 수정이 일어났을 때마다 통채로 다시 번들링하는 과정이 필요했기 때문에 불필요한 시간 소요가 발생했다.

이러한 문제를 느낀 Vite는 Native ESM 방식을 이용해서 개발 서버(Hot Reloading)를 구동한다. ESM 방식을 사용하는 방식의 장점은, import를 통해 동적으로 그때그때 필요한 파일들만을 가져온다는 점이다. 번들링을 하지 않고 개별 파일에 대해 트랜스파일링만 한 다음 이를 import하는 구조들을 통해 하나의 페이지를 완성할 수 있도록 만들었다.

따라서 나는 빠른 개발을 위해 vite를 선택했다

CSS: TailwindCSS

개발해야 하는 기능

기본화면

• 콘텐츠는 웹 화면의 정중앙 배치
• 기본 상단 영역
  • 왼쪽에 뉴스 스탠드 로고
    • 클릭시 새로고침
  • 오른쪽에는 시스템 날짜
• 최신 뉴스 자동 롤링
• 언론사별 기사들을 확인하는 영역
  • 전체 언론사 탭의 그리드 보기를 디폴트로
  • 내가 구독한 언론사 탭의 타이틀 옆에는 badge 컴포넌트로 내가 구독한 언론사의 숫자를 표시

최신 뉴스 자동 롤링 영역

• 왼쪽 바와 오른쪽 바는 각각 다른 최신 뉴스의 헤드라인 5개가 5초마다 자동으로 무한 롤링됨
• 좌우 영역의 시간차를 1초로 하여 두 영역의 뉴스가 동시에 롤링되지 않도록 함
• 롤링 시, 바 영역 안에서 제목이 위로 넘어가는 애니메이션을 적용
• 각 영역에 마우스를 hover하면 무한 롤링을 일시정지하고, 헤드라인에 밑줄을 표시
• 마우스가 해당 영역에서 벗어나면 다시 1초의 간격을 두고 두 영역의 뉴스가 롤링되도록 함

전체 언론사: 그리드 보기

• 가로 930px, 세로 388px 영역에 6*4의 테이블이 들어가도록 한다
• 각 테이블의 셀에는 언론사 브랜드 마크가 중앙에 배치
• 언론사 브랜드 마크의 순서는 페이지가 새로고침 될 때마다 랜덤으로 배치
• 그리드의 과주에는 화살표를 배치하여 페이지를 넘김
• 가장 첫 페이지와 가장 끝 페이지에서 disabled 되는 화살표는 아예 표시 X

• 각 언론사 브랜드마크가 있는 셀에 마우스를 올리면, 구독하기 버튼이 뜸
• 이미 구독하고 있는 언론사의 경우, 해지하기 버튼

전체 언론사 : 리스트 보기

• 각 분야 카테고리에서 언론사의 기사 확인
  • 종합/경제
  • 방송/통신
  • IT
  • 영자지
  • 스포츠/연애
  • 매거진/전문지
  • 지역
• 선택된 카테고리의 이름 옆에는 해당 카테고리에 속해있는 언론사의 개수와 현재 언론사의 순서를 표시
• 언론사의 순서는 화면이 새로고침 될 때마다 랜덤으로 정하기
• 현재 순서의 언론사 내용 표시
• 한 언론사당 20초간 화면이 보이지 않음
• 카테고리명 배경이 프로그레스 바가 되어 초마다 색이 차오르도록 애니메이션 적용
• 20초가 되면 다음 언론사의 내용이 나타남
• 카테고리의 마지막 언론사가 20초간 보여진 후에는 다음 카테고리로 넘어감
• 가장 마지막 카테고리의 마지막 언론사가 보여진 후에는, 처음 카테고리의 첫 언론사로 돌아옴
• 좌우의 화살표를 통해서도 즉시 이전/다음 언론사로 이동
• 선택된 카테고리 외의 다른 카테고리에는 마우스를 올리면 밑줄이 생김
• 각 카테고리를 누르면 해당 카테고리로 바로 이동
• 언론사 기사 영역에는 아래의 요소들이 들어감
  • 언론사 브랜드 마크
  • 최종 편집 일시
  • 구독하기 버튼
  • 썸네일이 있는 메인 뉴스 1건
  • 타이틀만 있는 서브 뉴스 6건
  • 편집권에 대한 안내 문구
• 메인 뉴스에 마우스를 올리면 썸네일은 5% 확대되고 뉴스 타이틀에 밑줄 생김
• 구독하기 버튼을 누르면 서버에서 처리되는 시간동안 버튼에 loading indicator가 보이도록 하고, 완료되는 즉시 내가 구독한 언론사 탭의 리스트 보기 화면으로 이동

내가 구독한 언론사: 리스트 보기

• 내가 구독한 언론사의 리스트 보기 → 전체 언론사의 리스트 보기 화면과 동일하되, 카테고리들이 나열되어있던 가로 탭에 언론사의 이름과 > 화살표 아이콘이 보이도록
• 언론사는 구독한 순서대로 배치
• 전체 언론사 탭 상태에서는 그리드 보기가 기본인 것처럼, 내가 구독한 언론사 탭 상태에서는 리스트 보기가 기본
• 구독 해지 버튼을 누르면 커스텀 알럿 뜨기
  • 예, 해지합니다
  • 아니오
• 각 버튼에도 마우스를 올리면 텍스트에 밑줄이 생기도록
• ‘예, 해지합니다’를 선택하면 즉시 구독이 해지되고, 목록의 다음 순서 언론사가 바로 나타나도록 함

내가 구독한 언론사: 그리드 보기

• 내가 구독한 언론사의 그리드 보기 화면은 전체 언론사의 그리드 보기 화면과 동일
• 다만, 사용자가 구독을 누른 언론사의 브랜드마크만 보이고, 나머지 칸은 비어있도록
• 구독중인 언론사의 브랜드 마크 셀에 마우스를 올리면 구독 해지 버튼이 나타남
  • 리스트 보기 상태에서 구독 해지를 하는 것과 동일하게 알럿이 뜨도록 함
  • 구독이 해지되는 즉시 그리드에서 해당 언론사의 브랜드마크가 사라짐

추가 미션: 다크모드

• Foundation의 컬러 팔레트 저옵를 활용해 다크모드 테마 만들기
• 다크모드로 전환 시, 로고들도 다크모드 버전으로 일괄 전환

Week7 목표

⚙️ 환경 설정

• Vite 설정
• tailwind 설정
• eslint 설정
• prettier 설정

✍️ 설계

• 컴포넌트 설계
  • 각 컴포넌트 별로 나눠야 할 부분 설계
  • data fetching이 필요한 부분 설계
  • 폴더 구조 설계
  • 폴더 구조에 맞도록 컴포넌트와 데이터 등 설계
• mock 데이터 설계

💻 구현

기본적인 뉴스 스탠드의 레이아웃

• 콘텐츠는 웹 화면의 정중앙 배치
• 기본 상단 영역
  • 왼쪽에 뉴스 스탠드 로고
    • 클릭시 새로고침
  • 오른쪽에는 시스템 날짜
• 최신 뉴스 자동 롤링
• 언론사별 기사들을 확인하는 영역
  • 전체 언론사 탭의 그리드 보기를 디폴트로
  • 내가 구독한 언론사 탭의 타이틀 옆에는 badge 컴포넌트로 내가 구독한 언론사의 숫자를 표시

기본적인 그리드형 레이아웃 및 간단 애니메이션

• 가로 930px, 세로 388px 영역에 6*4의 테이블이 들어가도록 한다
• 각 테이블의 셀에는 언론사 브랜드 마크가 중앙에 배치
• 언론사 브랜드 마크의 순서는 페이지가 새로고침 될 때마다 랜덤으로 배치
• 그리드의 과주에는 화살표를 배치하여 페이지를 넘김
• 가장 첫 페이지와 가장 끝 페이지에서 disabled 되는 화살표는 아예 표시 X
• 각 언론사 브랜드마크가 있는 셀에 마우스를 올리면, 구독하기 버튼이 뜸
• 이미 구독하고 있는 언론사의 경우, 해지하기 버튼

기본적인 리스트형 레이아웃 및 간단 애니메이션

• 각 분야 카테고리에서 언론사의 기사 확인
  • 종합/경제
  • 방송/통신
  • IT
  • 영자지
  • 스포츠/연애
  • 매거진/전문지
  • 지역
• 선택된 카테고리의 이름 옆에는 해당 카테고리에 속해있는 언론사의 개수와 현재 언론사의 순서를 표시
• 언론사의 순서는 화면이 새로고침 될 때마다 랜덤으로 정하기
• 현재 순서의 언론사 내용 표시
• 카테고리명 배경이 프로그레스 바가 되어 초마다 색이 차오르도록 애니메이션 적용
• 20초가 되면 다음 언론사의 내용이 나타남
• 카테고리의 마지막 언론사가 20초간 보여진 후에는 다음 카테고리로 넘어감
• 가장 마지막 카테고리의 마지막 언론사가 보여진 후에는, 처음 카테고리의 첫 언론사로 돌아옴
• 좌우의 화살표를 통해서도 즉시 이전/다음 언론사로 이동
• 선택된 카테고리 외의 다른 카테고리에는 마우스를 올리면 밑줄이 생김
• 각 카테고리를 누르면 해당 카테고리로 바로 이동
• 언론사 기사 영역에는 아래의 요소들이 들어감
  • 언론사 브랜드 마크
  • 최종 편집 일시
  • 구독하기 버튼
  • 썸네일이 있는 메인 뉴스 1건
  • 타이틀만 있는 서브 뉴스 6건
  • 편집권에 대한 안내 문구
• 메인 뉴스에 마우스를 올리면 썸네일은 5% 확대되고 뉴스 타이틀에 밑줄 생김
• 구독하기 버튼을 누르면 서버에서 처리되는 시간동안 버튼에 loading indicator가 보이도록 하고, 완료되는 즉시 내가 구독한 언론사 탭의 리스트 보기 화면으로 이동
• 내가 구독한 언론사의 리스트 보기 → 전체 언론사의 리스트 보기 화면과 동일하되, 카테고리들이 나열되어있던 가로 탭에 언론사의 이름과 > 화살표 아이콘이 보이도록
• 언론사는 구독한 순서대로 배치
• 전체 언론사 탭 상태에서는 그리드 보기가 기본인 것처럼, 내가 구독한 언론사 탭 상태에서는 리스트 보기가 기본

Week8 목표

📚 학습

• flux 아키텍처의 철학과 활용 방법
• React Router를 활용하는 방법
• NOSQL에서의 문서 구조

✍️ 설계

• 서버에 맞는(firebase functions) 데이터 설계하기
  • 서버리스 환경에서의 구조에 대해서 설계

💻 구현

클라이언트

• 기존의 컴포넌트에서 useReducer로 리팩토링 하기 좋은 것들을 찾고 리팩토링
• useContext를 이용하여 props drilling으로 문제가 될만한 것들을 찾고 리팩토링
• 서버와의 연동

서버

• firestore 더미 데이터 삽입
• CRUD 설계
  • 기사 관련
    • 모든 기사 조회(Get)
    • 롤링 뉴스용 짧은 기사 조회(Get)
  • 구독 관련
    • 구독한 언론사 조회(Get)
    • 구독한 언론사의 기사 조회(Get)