앞에서 스프링과 노드로 REST API를 만들어보았아. 만들어진 REST api를 가지고 이제 화면을 만들어보자.

프로그램 완성도를 높이기 위한 에러처리라든가 예외처리 테스트 등은 생략되었고 전체 구조와 개념을 이해하는데 중점을 둔다.

프런트엔드 개발환경으로는 ui 라이브러리로 react를 사용하고 디자인 프레임웍으로 bootstrap을 사용하고 간단하게 router를 적용해서 SSR과 CSR의 차이점과 SEO 해결방법 등을 살펴보겠다.

또한 typescript를 적용하겠다. typescript 를 적용하는 범위는 부모 컴포넌트가 자식컴포넌트한테 데이터를 넘길때의 타입 정의와 서버로 부터 데이터를 받을때 받는 데이터의 정의 등에 사용할 것이다.

리액트를 한번도 다루어보지 않았더라도 상관없다. 처음부터 끝까지 클론코딩해보고 최신 프런트엔드 개발환경을 어떻게 구성하고 만드는지 정도만 이해하면 충분할거 같다. 중간중간 어떤 부분을 어떻게 공부해야하는지는 명시할 것이므로 앞으로 리액트를 어떻게 공부할 것인지 체크하면 될것이다. 즉, 이 클론 코딩은 리액트를 전체적으로 한번 리뷰하는 정도로 생각하면 될것이고 상세한 공부는 책이나 동영상 강좌 혹은 상단 react 메뉴를 참고하자.

git 소스는 다음을 참고하자.

+ https://github.com/eastflag/react-board-typescript

demo site

+ http://board.eastflag.co.kr/

프로젝트 구성

백엔드 서버 구동 먼저 앞에서 개발한 스프링 혹은 노드 둘

Read more ...

게시판 목록 보기

bootstrap 으로 화면 구성 화면을 구성해야 하므로 화면 구성을 도와줄

Read more ...

게시판 등록 화면

라우팅의 필요성 이해 게시판 등록 화면을 구현하기 위해서 App.tsx에 BoardList

Read more ...

게시판 상세보기

동적 라우팅 추가 pages 폴더 아래 board-view 폴더에 BoardView.tsx 컴포넌트를

Read more ...

게시판 수정하기

화면 추가 수정하는 화면은 상세보기화면과 등록화면을 합친것과 유사하다. 먼저 데이터를

Read more ...

게시판 삭제

삭제 모달창 띄우기 삭제를 하는 별도의 UI는 필요하지 않다. 하지만

Read more ...

댓글 구현

댓글 목록 보기 댓글은 라우팅에 따른 페이지 역할이 아니고 게시판

Read more ...

기본구현 마무리 – 보완점

axios 에러 처리 및 인증 처리 http 호출후 에러가 발생할

Read more ...

인증 처리

private route 구현 jwt token의 유효성을 검증하는 유틸리티 클래스를추가한다. src/utils/JwtUtils.ts...

Read more ...