리액트의 기본 개념을 모두 익혀도 실제 웹개발을 하기는 어렵습니다. 왜냐하면 웹개발을 하기 위해서 알아야 할 다른부분으 훨씬 더 많기 때문입니다. 컴포넌트 기반 SPA 웹사이트를 만들기 전에 먼저 고려해야 할 사항은 다음과 같습니다.

웹사이트를 만들기 위해서 제일 먼저 고려해야 할 사항은 CSS 프레임웍을 결정하는 것입니다. 가장 인기있는 CSS 프레임은 순서대로 다음과 같습니다.

  • 1위: Material Design: https://material-ui.com/
  • 2위: Ant Design: https://ant.design/
  • Bootstrap: https://react-bootstrap.github.io/ or https://reactstrap.github.io/

이런 CSS 프레임웍이 공통적으로 지원해주는 역할은 다음과 같습니다.

  • 브라우저 호환성 지원
  • 다국어 사용 (i18n)
  • 필수 UI 컴포넌트 – 모달창, Toast or Snackbar, Input Form, Form Validation
  • 모바일 반응형 페이지 지원
  • RTL (Right to Left)

여기서는 부트스트랩 프레임웍을 사용하겠습니다.

그 다음에 고려해야 할 사항은 라우팅입니다.

만일 사용자가 접속하는 프런트엔드 페이지라면 검색, SEO가 중요하므로 Next를 적용하는게 바람직하고 만일 회사 내부에서 사용하는 인트라넷이나 관리자 페이지라면 react-router-dom 을 사용하는게 바람직합니다.

  • Next : SEO 지원, 쇼핑몰같은 프런트엔드 개발에 적합
  • react-router-dom: 관리자사이트, 내부 인트라넷 개발에 적합

여기서는 reat-router-dom을 사용하겠습니다.

최종적으로 요약하자면 Bootstrap + react-router-dom 을 사용한 웹 페이지 개발입니다.

여기서는 heroes 라는 웹페이지를 만들며, 필요한 REST api는 백엔드에서 만들어져서 제공되고 있으며 아래에서 다운로드 받을수 있습니다.

+ Git: https://github.com/eastflag/react-hero

+ 데모 사이트 : https://scoreboard.eastflag.co.kr

라우팅 페이지 설정

프로젝트 생성 먼저 새로운 프로젝트를 생성합니다. [crayon-65f923a46922c191560386/] router 개요 먼저

Read more ...

heroes 리스트 가져오기

요약 + async/await, promise 이해 + REST api GET 사용하기...

Read more ...

반응형으로 만들기

요약 + Media Query 이해 + bootstrap break point 이해...

Read more ...

목록 페이징 하기

reactstrap 홈페이지에서 페이지네이션 컴포넌트를 찾아보면 단순히 UI적인 요소만 존재하고 기능적인

Read more ...

hero 상세보기 – 동적라우팅

요약 + 동적 라우팅 + 네스티드 라우팅 + 동적 라우팅

Read more ...

hero 등록

- prerequite short hand property, computed property sub menu -...

Read more ...

hero 등록 – 서버 연동

REST api 규격 hero를 등록하는 REST api 는 다음과 같다....

Read more ...

hero 수정

hero 리팩토링 수정페이지는 등록페이지와 보기페이지를 합한 역할이다. 최초에 hero 정보를

Read more ...

hero 삭제

서버연동 삭제 삭제하는 REST api는 다음과 같다. protocol: /api/admin/heromethod: deletequery...

Read more ...