React 로그인 화면 프로그램 테스트

1. 프로젝트 생성 방법 테스트 (구조가 같은지 확인) => 결론은 어떻게 만들던지 같다.

 

npm으로 프로젝트 생성

npm init react-app login-auth

create-react-app 사용방법

create-react-app <project-directory>

create-react-app login-auth2

Output 프로젝트 구조

my-app

├── README.md

├── node_modules

├── package.json

├── .gitignore

├── public

│ ├── favicon.ico

│ ├── index.html

│ └── manifest.json

└── src

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

└── serviceWorker.js

그럼 이제 프로젝트에서 로그인 관련 예제를 시작

 

잠시 에러 메시지 발생 [처리함]

To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.

npm install node-sass   // 이렇게 실행을 해서 문제를 처리함.

 

참고 사이트 

순수 React.js로 로그인 구현하기

순수 React.js로 로그인 구현하기

위에 로그인 부분에 오류가 나서 잘 안됨....  그래서 아래부분의 ReactBlogApp-SignIn 소스를 받아서 다시 구현 처리함.

 

https://github.com/royagasthyan/ReactBlogApp-SignIn

royagasthyan/ReactBlogApp-SignIn

다운받아서 실행 한 화면의 모습