Redux3 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) 프론트앤드 만들기(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 다음
