App 만들기 01 - Login page

joker·2020년 4월 9일
1

fullstack

목록 보기
2/2
post-thumbnail

이번시간목표-CRA, login page front작업

이번시간에 완성할 화면입니다.
이곳을 클릭하면 모든 소스를 확인 할 수 있습니다.

이전 게시글에 안내드린바와 같이 시간날때마다 짬짬히 fullstack 관련 작업을 진행해보려고 합니다.

/*
먼저 뭐가 좋을지 고민을 해봤는데 쿠팡이나 11번가나 저희가 연동하는 사이트들은 다 판매자 ID가 있는 상태에서 API를 발급받아 통신하기 때문에 따라하기가 어려울것 같습니다.

그래서 일단 React를 이용하여 회원가입,로그인 부터 진행하도록 하겠습니다.
*/

(react-native에 webpack을 이용해 android,ios app으로도 출시 가능)

에디터는 vscode를 사용하겠습니다. https://code.visualstudio.com/
또한, ESLint와 Prettier를 사용하겠습니다. (visualstudio code market에서 다운가능)

무엇을 배울건지?
front -> react.js (aws s3,CF) ui-> material-ui
back -> node.js / express.js (aws ecs,ecr,ec2,CF)
docker,circleci

먼저, 제 벨로그에 react 게시글을 다 참고하고 난 이후에 강의를 진행해주시기 바랍니다.
(CRA, git, 기초, router 등등)

npm install -g create-react-app
CRA 이용해 react 폴더를 생성 합니다. (폴더 이름은 자유입니다)
create react app 하는 방법은 이곳을 클릭

이번시간에 완성할 화면의 폴더구조 입니다. 해당 구조부터 잡고 진행해주시기 바랍니다.

또한 package.json 안에 의존성에 아래 코드를 복사하여 붙여주시기 바랍니다

  "dependencies": {
    "@material-ui/core": "4.9.9",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-router-dom": "5.1.2",
    "react-scripts": "3.0.1"
  },

src/App/App.js

import React from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
import NotFound from "./NotFound/NotFound";
import Login from "./Login/Login";

const App = () => {
	return (
		<BrowserRouter>
			<Switch>
				<Route exact path="/" component={Login} />
				<Route component={NotFound} />
			</Switch>
		</BrowserRouter>
	);
};

export default App;

라우터로 localhost:3000 접속시에는 Login 페이지를 보여주고 그외의 경로로 접속시에는
(ex:localhost:3000/123) NotFound 페이지를 보여주게 설정하였습니다.

router를 모르시는분은 이곳을 클릭

src/App/NotFound/NotFound.js

import React from "react";

const NotFound = () => {
  return <div>잘못된 접근입니다 404 에러</div>;
};

export default NotFound;

설명할게 특별히 없는 페이지입니다. 자유롭게 에러 페이지에 대해 만들어보세요

src/App/index.css

body {
  margin: 0;
}

body의 마진을 0값으로 강제 설정하였습니다. chrome에서 기본 마진을 8로 설정 해놓기 때문에 여백이 보이는걸 방지하기 위함 입니다.

src/App/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App/App";
import "./index.css";
const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

App.js를 랜더링 하는 페이지 입니다.

src/App/_assets/normal.jpg
src/App/_assets/7.jpg



아무 jpg 파일이나 추가하시면 됩니다. 예제로 제 파일을 올려놓았고 본인의 애완동물(ex:귀요미강아지,쪼꼬만 고양이 등등)사진이든 자유롭게 추가해주세요

src/App/Login/Login.js

import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Container from "@material-ui/core/Container";
import logo from "../../_assets/normal.jpg";
import logo2 from "../../_assets/7.jpg";
import Typography from "@material-ui/core/Typography";

/*React의 ui framwork인 material-ui를 사용했다.
쓰다보면 은근히 재미있음..
https://material-ui.com/

Margin은 Object와 화면과의 여백(외부여백)을 말하며
Padding은 Object내의 내부여백을 의미합니다.

theme.spacing(number) 숫자1당 8px를 의미합니다. 
일반숫자로 대중없이 적기보다는 규칙이 있는편이 
더 유지보수성은 물론 가독성 또한 편리합니다.
*/

const useStyles = makeStyles(theme => ({
  root: {
    textAlign: "center"
  },
  logo: {
    marginTop: theme.spacing(16)
  },
  logoTitle: {
    marginTop: theme.spacing(1),
    fontSize: theme.spacing(2),
    marginBottom: theme.spacing(10)
  },
  textField1: {
    backgroundColor: "white"
  },
  textField2: {
    backgroundColor: "white",
    marginBottom: theme.spacing(6)
  },
  bottom: {
    marginBottom: theme.spacing(1)
  },
  background: {
    backgroundImage: `url("${logo2}")`, //이미지 사용하기
    backgroundSize: "cover", //전체화면
    height: "100vh" //화면 100% 꽉차게
  }
}));

const Login = () => {
  const classes = useStyles(); //상수에 넣고 쓰는게 깔끔할듯
  return (
    <div className={classes.background}>
      <Container className={classes.root}>
        <img alt="logo" src={logo} className={classes.logo} />
        <Typography align="center" className={classes.logoTitle}>
          Joker 로그인
        </Typography>
      </Container>
      <Container>
        <TextField
          className={classes.textField1} //만들어논 스타일을 적용
          label="아이디" //양식 입력창을 설명함
          variant="filled" //Box 테두리
          fullWidth //container의 전체 넓이를 차지
          required //필수값체크
        />
        <TextField
          className={classes.textField2}
          margin="normal" //아이디와 비밀번호 사이의 간격을 줌
          label="비밀번호"
          variant="filled"
          fullWidth
          required
        />
        <Button
          className={classes.bottom}
          fullWidth
          variant="contained"
          color="primary" //primary
          size="large"
        >
          로그인
        </Button>
        <Button fullWidth variant="contained" color="secondary" size="large">
          회원가입
        </Button>
      </Container>
    </div>
  );
};

export default Login;

이 페이지를 처음 봤을때는 이게 뭔소리야..? 라고 할 수도 있겠지만 특별한 것은 없습니다.
주석에 기재해 놨듯이 https://material-ui.com/ 이곳에서 보고 필요한 것들을 가져다 쓰는것 뿐입니다.

styled-component나 css 나 scss가 좋으신 분들은 편하실대로 하시면 됩니다.

첫번째 container 안에 있는것이 jpg사진과 Joker 로그인이라는 문구입니다.

두번째 container 안에 있는것이 아이디,비밀번호 입력창과 로그인 버튼입니다.

button1은 로그인, button2는 회원가입을 의미합니다.

이제 npm start를 통해 정상적으로 해당 화면이 출력되는지 확인해주세요

출력이 안될시 package.json의 dependencies에 필요한 것들이 다 있는지 확인해주세요
npm install을 진행후 npm start를 해주시기 바랍니다

여기까지 하셨다면 git에 커밋해주시면 되겠습니다.
다음 시간에는 회원가입,로그인 기능구현에 대해 알아보겠습니다.

profile
개발자입니다.

0개의 댓글