[리액트react] 로그인 페이지 만들기

업데이트:

리액트(react) 로그인 페이지 만들기

참고링크

운영체제 프론트엔드 백엔드 데이터베이스 인프라
리눅스구조 js필터 아파치에러로그 행삭제 아파치스쿱
프로세스 헬로월드 웹서버개념 ES기초 로그분석
네임스페이스 프로젝트생성 아파치설치 MySQL기초 beeline
디렉토리 헤더생성 flask연동 큐브리드 하둡기초
리다이렉션 async-get 장고MsSQL연결 null공백 나이파이
쓰레드 async-post 장고MySQL연결 MySQL설치(win) 백본
라즈베리파이설치 로그인페이지 장고inpectdb MySQL테이블생성 제플린
OSI7계층소개   장고read   SSL인증
OSI1계층   장고insert   커버로스
OSI2계층   장고put   도커개념
OSI3계층   장고del   도커설치
OSI4계층   flask한글요청   도커기초
OSI5,6,7계층       도커이미지
DNS서버       컨테이너네트워크
DHCP       도커API
bashrc       도커컴포즈
bash       도커볼륨
ifconfig       장고이미지
소켓프로그래밍       도커postgre
리눅스유저생성       도커이미지삭제
netstat포트열기       도커Redis
컴파일러       k8s구조
운영체제vs커널       k8s설치
작업스케쥴링       k8s서비스배포
디스크추가       POD네트워크
aws유저추가       퍼시스턴트볼륨
기초명령어       k8s에러
포트번호        

참고 링크

DB

백엔드

프론트엔드

1. 사전 준비 사항

지금부터 만들 앱은 파이썬 장고(django)에 연동할 프론트를 리액트로 만드는 실습입니다. 본 포스팅은 이전 포스팅에서 이어지는 포스팅 입니다.

이번 실습에서는 react에서 로그인 화면을 개발해 보겠습니다.

2. 로그인 페이지 간단하기 생성하기

2.1. src/pages/Login.js 파일 생성

로그인 페이지를 만들기 위해 src/pages/Login.js 파일을 간단하게 생성해줍니다.

const Login = () => {
  return (
    <div>
      <p>로그인 페이지 입니다.</p>
    </div>
  );
};

export default Login;

이는 다음 화면과 같습니다.

2.2. src/App.js 파일 수정

그리고 App.js 파일에 라우팅을 설정해줍니다.

import {Route, Routes} from 'react-router-dom';
import Home from './pages/Home.js';
import Find from './pages/Find.js';
import Search from './pages/Search.js';
import Login from './pages/Login.js';
import Categories from './components/Categories.js';

const App = () => {
  return(
    <Routes>
      <Route element={<Categories />}>
        <Route path="/" element={<Home />} />
        <Route path="/find" element={<Find />} />
        <Route path="/search" element={<Search />} />
        <Route path="/login" element={<Login />} />
      </Route>
    </Routes>
  );
};

export default App;

전체 화면은 이렇습니다.

2.3. src/components/Categories.js 파일 수정

그리고 이제 화면에서도 보일 수 있게 카테로기 컴포넌트를 수정해줍니다.

const categories = [
  {
    name: 'home',
    text: ''
  },
  {
    name: 'find',
    text: '친구찾기'
  },
  {
    name: 'search',
    text: '친구탐색'
  },
  {
    name: 'login',
    text: '로그인'
  }
];

전체 그림은 다음과 같습니다.

2.4. 서버 가동 및 테스트

이제 서버를 가동해서 실제로 화면에 보이고 클릭이 되는지 보겠습니다.

 $ npm start
 
 You can now view myapp01 in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.16.90.27:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

위 코드로 서버를 가동시키고 브라우저를 보면 다음과 같이 잘됩니다.

잘 되는 것을 볼 수 있습니다.