react.js4 React.js를 사용한 웹 애플리케이션(SPA) 프론트앤드 만들기(5) - 리덕스 상태 관리, 상태에 따라 요소 나타내기 글 시작 전...블로그의 글 종류를 보시면 알겠지만, 프론트엔드 쪽은 안 한지 오래고 대학원에서 인공지능을 연구하고 있습니다. 저는 제가 공부한 지식이 시간이 흘러 사라지는 것이 싫어 흔적으로 남기고자 시작하게 되었습니다. 그래서 제가 보통 시리즈 글을 쓰다가 마는 경향이 많은데 그 이유가 이 블로그의 방향은 제 공부 방향에 따라 바뀌기 때문입니다. 4편을 쓴지 꽤 되었는데 최근에 다음 편에 대한 문의가 계속되기도 하고 조회수가 지속적으로 있는 걸 보니 따라하시다가 다음 편이 없어서 허탈해하시는 분들도 계실 것 같습니다. 그래서 다시 공부해서 작성합니다만 기본 프로젝트이더라도 최신 경향과는 다소 차이가 있을 수 있음을 감안해주셨으면 합니다. 혹시 기다리셨던 분들께는 죄송하다는 말씀드립니다.1편에서 마지막.. 2020. 11. 23. 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. 이전 1 다음
