본문 바로가기

react3

React.js를 사용한 웹 애플리케이션(SPA) 프론트앤드 만들기(3) - Redux 구조, 페이지 내 컴포넌트 변경 2018-12-22-SPA-react-app-3 2편 : https://wdprogrammer.tistory.com/18 2편에서 semantic-ui를 통해 간단히 로그인 화면을 구성하고 회원가입 버튼을 누르면 회원가입 페이지로 이동하는 라우팅까지 구현하였습니다. 이제 반응형 회원가입 페이지를 만들기 위해 페이지 내 컴포넌트 변경을 구현하고 Redux 구조를 설정하도록 하겠습니다! 5. 회원가입 페이지 이동 구현회원가입 페이지를 구현할 때 사용될 component들을 먼저 생성해주겠습니다.xxxxxxxxxxsrc/components/Register├── PersonalInput│ ├── PersonalInput.js│ ├── PersonalInput.css│ └── index.js├── DevelopI.. 2018. 12. 23.
React.js를 사용한 웹 애플리케이션(SPA) 프론트앤드 만들기(2) - 라우팅(Routing) 2018-12-07-SPA-react-app-2 1편 : https://wdprogrammer.tistory.com/16 1편에서 사용할 패키지 설치와 기본적인 폴더 구조를 완성했습니다. 이제 만들어진 구조에 코드를 작성하여 메인 페이지를 만들겠습니다! 3. Page RoutingSPA(Single Page Application)는 다른 페이지로 이동하는 것이 다른 html 문서로 이동하는 것이 아닙니다. 마치 다른 페이지로 이동한 것처럼 보이지만, 사실 한 html 내에서 다른 객체를 그려주는 것에 불과합니다. 이를 라우팅이라 하고 React Router 패키지를 사용하여 구현할 것입니다. 먼저, 표시해줄 기본 페이지를 만들겠습니다.pages/Home.jsimport React from 'react';.. 2018. 12. 9.
React.js를 사용한 웹 애플리케이션(SPA) 프론트앤드 만들기(1) - 구조 설정 2018-12-05-SPA-react-app-1 약간 복잡한 회원가입 페이지를 구현해보겠습니다. 일반적인 가입 양식뿐만 아니라 다음과 같은 반응형 커스텀 컨포넌트도 만들게 됩니다. yarn 패키지 설치yarn은 조금 개선된 버전의 npm이라고 생각하면 됩니다.npm install -g yarn 초기 앱 생성 도구 설치이 프로젝트에서는 create-react-app이라는 도구를 사용해서 초기 react앱을 생성합니다.npm install -g create-react-app만약 yarn을 이용하여 설치하고 싶다면 다음과 같이 입력하면 됩니다.yarn global add create-react-app 필요 패키지 설치nodemon은 개발 서버 실행 중 코드를 수정하면 즉각적으로 페이지가 변화되도록 해줍니다.y.. 2018. 12. 7.