728x90 반응형 WEB49 WEB 만들기 19 - React Router Dom 페이지를 이동 할때 React Router Dom 이란것을 사용합니다. 이것이 무엇인지 알아보기 위해서 이 사이트를 참고하면 됩니다. reactrouter.com/web/example/basic React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com 이런식으로 데모 페이지가 잘되어 있습니다. 저기에 있는것을 토대로 페이지 전환하는것을 구현을 할것입니다. 그전에 React Router Dom을 설치를 해야합니다. cd client 부분으로 와서 npm install react-router-dom --save 이명령어로 설치를 해주시고 App.js 부분에 아까 사이트에 있는 코드를 복사해서 import { B.. 2021. 1. 20. WEB 만들기 18 -CRA to Boilerplate 앞으로 만든 페이지를 만들기에 앞서서 폴더를 수정할것입니다. 지금은 이런 상태라고 하면 이런식으로 바꿀 예정입니다. 여기서 보시면 src 폴더안에 LandingPage 부분은 처음에 나오는 페이지를 작성할것입니다. App.js 부분은 라우팅 관련일 처리를 할것인데 이부분은 무엇이냐면 내가 로그인 관련 페이지에 가고 싶다고 하면 로그인 페이지로 갈수있게 그렇게 분류를 시켜줄 수 있는 것 HOC 는 컴포넌트 안에 이것은 펑션인데 다른 컴포넌트를 갖는 펑션이라고 생각하면되는데 Auth라는게 있는데 이게 어떤사람이 자격이 되는지 체크를 하는 곳인데 어떤 컴포넌트가있는데 그곳은 관리자만 들어갈 수 있다고 하자. 이 Auth에서 어떤사람이 들어오려고 할때 이곳에서 들어올 수 있는 사람인지 아닌지 체크해서 들어올수 .. 2021. 1. 20. WEB 만들기 - 17 구조 설명 Create React App구조(Structure) Client 안에 있는 것이 create-react-app 하면서 생성된것 인데 client폴더에 가서 npm run start를 하면 되는 이유는 package.json 부분에 스크립트 부분에 "start"라고 되어있어서 명령을 npm run start라고 하는것이다. 우리가 이것을 "init"라고 바꾸면 npm run init 로 시작할 수 있는것입니다. 이렇게 시작을 하게 되면 화면에 이렇게 나옵니다. 이부분이 나오는 부분이 App.js 부분인데 이것에 써놓은것들이 화면에 표시가 되는 것 입니다. 그리고 index.js 부분을 보게되면 여기서 App.js가 컴포넌트로 들어간게 보이는데 여기서 ReactDOM.render( , document.ge.. 2021. 1. 20. WEB 만들기 - 16 NPM? NPX? NPM(Node Package Management)은 레지스트리 저장소 역활을한다. 지금까지 우리가 dependencies 쪽에 저장되는 라이브러리가 저장되어있는곳을 말한다. 애플리케이션을 켤때 npm run start나 배포를 할때 빌드를 해서 배포를 해야하는데 이때 npm run build 할때쓴다. 이처럼 이런 이름이 뭐고 스크립트는 뭐고 어떤게 다운되어있는지 나와있다. 그리고 우리가 npm install ``` 하면서 설치를 할때는 로컬로 다운이되는 Locally로 . 로컬에 다운하면 이곳에 다운이되는것이고 npm install ``` -g 를 하면 Grobally 글로벌로 되는데 프로젝트가 아닌 bin/directort인 윈도우는 %AppData%/npm에 저장이 된다고 생각하면되고 맥의 경우는.. 2021. 1. 19. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음 728x90 반응형
