화면 구현 1

앞에서 스프링과 노드로 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/