화면구현 1의 내용 가져오기

화면구현1에 사용된 라이브러리를 모두 추가한다.

package.json에 proxy를 설정한다.

화면구현1에서 구현한 모든 소스들을 가져온다.

  • components 폴더: CommentList.scss, CommentList.tsx
  • dto 폴더: Board.ts, Comment.ts
  • pages/board-edit: BoardEdit.tsx
  • pages/board-list: BoardList.scss, BoardList.tsx
  • pages/board-register: BoardRegister.tsx
  • pages/board-view: BoardView.tsx

컴포넌트에서 리턴하는 jsx 부분은 bootstrap에서 ant 로 대체될 것이므로 비워둔다. 그리고 bootstrap을 import 하는 부분도 삭제한다. 모든 컴포넌트에 공통으로 적용한다.

아래 BoardList.tsx를 보면 return 부분이 비워져 있고 상단 bootstrap 부분이 삭제되었다. 모든 컴포넌트에 적용이 되었다면 에러가 없어야 한다.

라우팅 적용

App.tsx에 라우팅을 적용한다.

게시판 목록 보기

ant 디자인의 그리드 컴포넌트Button 컴포넌트를 참고한다.

ant에는 bootstrap에 있는 마진과 패딩의 유틸리티 클래스가 존재하지 않는다. 필요하면 scss 문법으로 만들어 사용할수도 있다. bootstrap에서 만들어진 유틸리티 클래스를 import해서 사용하겠다. 여기서 bootstrap-4-utilities.css 화일을 다운로드 받아서 css 폴더를 만들고 그 안에 카피한다. 그리고 App.less 상단에서 import 한다.

BoardList.scss화일은 화면구현1과 변경사항이 없다.

BoardList.tsx의 화면은 ant 디자인으로 구성한다. ant에서 Row는 24칸으로 구성되어있다. Row 컴포넌트에는 다양한 속성이 있으므로 홈페이지를 참고한다.

게시판 등록 화면

화면을 개발할 때 가장 많이 다루는 부분이 Form과 관련된 부분이다. UI 뿐만 아니라 validation 체크까지해야 하므로 시간이 많이 걸리는 부분이기도 하다. bootstrap은 form을 유연하게 처리하기 위해서 별도의 라이브러리가 필요했지만 ant에서는 대부분의 라이브러리가 갖추어져 있다. 따라서 bootstrap에서 했던 많은 코드들이 간략히 처리될 수 있다.

useForm이라는 훅을 사용하여 Form 안의 객체들에 값을 가져올 수도 있고 값을 설정할 수도 있다.

게시판 상세보기 및 삭제

bootstrap에는 없는 다양한 UI 컴포넌트들이 존재한다. 모달의 경우 동적으로 생성해서 띄울수 잇고 토스트형태의 컴포넌트인 messag라는 컴포넌트가 존재해서 처리 결과를 message 컴포넌트로 알려줄 수 있다.

게시판 수정

form에 값을 설정하기 위해서 bootstrap에서는 DOM으로 접근했지만 useForm 훅으로 만든 form 변수에 setFieldValue 메서드로 form의 값을 설정할 수 있다.

댓글 보기 및 등록

앞에서 댓글 컴포넌트를 직접 작성하였는데, ant에 Comment라는 컴포넌트가 존재한다. 그 컴포넌트를 사용하여 작성해보자. 좋아요, 싫어요 와 댓글에 답변 달기는 서버설계가 반영되어야 하는데 여기서는 UI만 구현되어있다.