[MernStack] Blog 만들기 18. [React] 로그인Modal 만들기.

한 5~6개월만에 다시 블로그 포스팅을 시작한다. ㅜㅜ
이직이라는 변명으로 포스팅을 못했다.. 
이직은 성공했고 연봉폭은 높아졌지만 ... 정신과 마음은 더 힘들어졌다.
연봉은 만족스럽지만 그 외 만족스럽지 못해 스트레스다
개발보단.. 사무업무와 운영업무가 더 많은 업이다... 

SM회사다 보니...그렇다...
개발회사로 이직을 준비하련다...

(이번편 포스팅 작성완료 시간 : 2022.01.24 00:16)

---

먼저, 로그인 기능을 만들기전 로그인Modal창 먼저 구현해보겠다.

1. componets/auth/LoginModal.js  생성

const LoginModal = () => {
  return (
    <div>
      <NavLink onClick={''} href="#">
        Login
      </NavLink>
      <Modal isOpen={'modal'} toggle={''}>
        <ModalHeader toggle={''}>Login</ModalHeader>
        <ModalBody>
          <Form onSubmit={''}>
            <FormGroup>
              <Label>Email</Label>
              <Input />
              <Label>Password</Label>
              <Input />
              <Button color="dark">Login</Button>
            </FormGroup>
          </Form>
        </ModalBody>
      </Modal>
    </div>
  );
};

LoginModal창 구성도는 이렇다.

<Modal>
     <ModalHeader></ModalHeader>
     <ModalBody>
     	<FormGroup>
        	<Input/>  //Email
            <Input/> //Password
        </FormGroup>
     </ModalBody>
<Modal>

Modal이라는 큰 틀안에 Header와 Body가 있다.
Body안에 Email과 Password를 적는 Input이 있는데 이 Input들을 FormGroup으로 감싼다.

import {
  FormGroup,
  Modal,
  ModalBody,
  ModalHeader,
  NavLink,
  Label,
  Button,
  Form,
  Input,
} from 'reactstrap';

Modal창 작성할때  Import할 reactstrap 모듈들이다.
굳이 먼저 Import할 필요는 없고 태그를 작성하다보면 자동으로 작성되는데
나는 Button, Label들 몇개는 자동으로 import가 안되어 수동으로 적어줬다.
(에러코드에 다 알려주니 그때그때 불러주면 된다.)

마지막으로 export해주어 모듈화 시킨다.

export default LoginModal;

 

 

2. Components/AppNabar.js
먼저 페이지가 열리면 자동으로 LoginModal창 나오게끔 테스트를 할 것이다.
기존 코드를 수정한다.

const AppNavbar = () => {
  return (
    <Fragment>
      <Navbar color="dark" dark expand="lg" className="sticky-top">
        <Container>
          <Link to="/" className="text-white text-decoration-none">
            Side Project's Blog(Wuny)
          </Link>
          <NavbarToggler />
          <Collapse isOpen={true} navbar>
            <Nav className="ml-auto d-flex justify-content-around" navbar>
              {false ? (
                <h1 className="text-white">authLink</h1>
              ) : (
                <LoginModal />   <- 수정한 코드
              )}
            </Nav>
          </Collapse>
        </Container>
      </Navbar>
    </Fragment>
  );
};

기존 <h1 className="text-white">authLink</h1> 를 삭제하고 
1번에서 작성한 <LoginModal/>을 넣어준다.

3. React Server 실행

 React 서버 실행한 모습이다. 기능은 구현 안했기에 로그인 버튼을 눌러도 아무 반응이 없다.이 전 포스팅까진 Linux에서  개발했지만 이번 포스터부턴 Windows10기반이다.

다음 포스팅에선 이제 기능을 구현해보겠다.

 

---

Linux에서 VScode 사용시 한글 받침 안써지는 이슈 해결법.

File -> Preferences -> Settings -> Text Editor -> Font -> Font Family 에서 'Droid Sans Fallback' 을 제거한다

---