게시판 프론트 엔드 구현하기[20221030-TIL]

게시판 프론트 엔드 구현하는 순서

오늘은 이전 했던 과제를 참고하며 짰던 코드를 트레이너님께 피드백을 받았는데 

(참고) 자바스크립트 리액트라이브러리 사용했고 스터디(공부모임)의 게시글을 열람하는 게시판을 구현하려고 했습니다.

 

코드를 짜고 리팩토링을 한 것이 아니라 이미 마음속에 전부 틀을 다 짜두고 코드를 짜서 리팩토링을 어디서 부터 할 지 어렵다.

 

 

라는 피드백을 받았다.

그리고 코드 짜는 순서를 보여주셨는데 

일단 사전 준비로는 완벽한 기획서가 먼저다.(기획서에 무엇을 구현할지 어떻게 할 지를 정말 명확히 한 후 그것을 보면서 코드를 짜고 한쪽에는 쉘을 띄워 테스트를 본다.

 

 

1. 테스트 코드를 먼저 짠다.

import { render, screen } from '@testing-library/react';

import StudiesPage from './StudiesPage';

const navigate = jest.fn();

jest.mock('react-router-dom', () => ({
  useNavigate() {
    return navigate;
  },
}));

describe('StudiesPage', () => {
  it('redners title', () => {
    render(<StudiesPage />);

    screen.getByText(/스터디 게시판/);
  });

  it('renders write button', () => {
    render(<StudiesPage />);

    screen.getByText(/작성하기/);
  });

  it('renders study list', () => {
    render(<StudiesPage />);

    screen.getByText(/로지/);
    screen.getByText(/사이드 프로젝트하실 프론트 한 분 구합니다/);
  });
});​

일단 큰 틀을 먼저 짠 후 나중에 추가되는 부분은 조금씩 수정한다.

 

2. 기획 UI를 보며 시맨틱 태그를 짠다.

위와 같이 구성할 것이라서 ( 글 쓰여진 날짜를 빼먹었다.)

 

보면서 일단 태그 맞추어서 짰다.

아래 숫자는 페이지네이션 구현용

3. 어떤 기준으로 분류할지 생각해서 코드를 빼낸다.

하나의 큰 페이지 에서 페이지네이션과 제목,작성하기 등의 부분은 Page 라는 컴포넌트에 두었고 그 내부는 게시물들의집합인 Studies 라는 컴포넌트로 두고 맵핑으로 뿌려주었다.

그리고 다시 그 맵 안에 Study라는 개별 컴포넌트를 만들어 id 별 링크를 만들었다.

 

데이터는 기존 만들었던 백엔드에서 추가된 부분이 많아 일단 직접 입력해주었다. -> 차후 백엔드 서버 만든후 Store 에서 관리해줄 예정

 

-> 이렇게 트레이너님이 보여준데로 짜니 명확하고 좀 더 결과물이 가시적이다. 

이 구조를 기억해서 프론트를 짜보자.

 

이제 백엔드를 만들면 되는데 ... 해시태그를 어떻게 데이터베이스에서 관리해줄지를 고민하다 시간만 갔다...

 

생각해보자...