안녕하세요. 엔지엠소프트웨어입니다. 이전 시간에 리액트와 타입스크립트로 웹프로젝트를 만들기 위한 작업까지 완료 했습니다. 추가적인 작업이 더 필요하지만, 이런것들은 건너뛰고 바로 로그인 페이지를 만들어 보도록 할께요. 아래 그림을 참고해서 components 폴더에 Login.tsx 파일을 추가 하세요.

 

 

로그인 컴포넌트의 전체 내용입니다. 처음 웹 환경을 접하신 분들은 도대체 이게 뭐지라고 생각할 수 있습니다. 일단 넘어가죠^^;

import * as React from 'react';

// 자동 로그인에 필요한 사용자 정보입니다.
interface User {
    id: string,
    pw: string,
}

/**
 * 로그인 폼
 * @param user User information
 * @returns Render to login
 */
export function Login(user: User){
    return(
        <div>
            <h2>Login</h2>
            <div>
                <b>아이디 : <input type='text' value={ user.id } /></b>
            </div>
            <div>
                <b>패스워드 : <input type='text' value={ user.pw } /></b>
            </div>
            <div>
                <input type='button' value='로그인'/>&nbsp;
                <input type='button' value='회원가입'/>&nbsp;
                <input type='button' value='취소'/>
            </div>
        </div>
    )
}

export default Login;

 

위 코드를 보면 HTML과 타입스크립트가 섞여 있습니다. 제일 윗줄에 선언된 import는 모듈을 가져오기 위한 키워드입니다. C나 C++은 include를 사용하고 자바나 파이썬은 타입스크립트와 동일하게 import를 사용합니다. C#은 using이죠^^; 언어마다 약간씩 다르긴한데요. 의미는 같습니다. 다른 패키지나 모듈, 라이브러리에 있는 함수를 가져올 때 미리 선언해줘야 합니다. 타입스크립트도 다른 컴포넌트나 모듈을 공유하기 위해 선언 합니다. 다만, 앞서 말한 언어들과 다르게 해당 컴포넌트나 모듈에서 export를 명시적으로 작성해야 합니다. export 선언이 없는 함수나 클래스는 import 할 수 없습니다.

 

App.tsx는 아래와 같이 코드를 수정해줍니다. import로 로그인 컴포넌트를 가져옵니다. 인터페이스를 넘기는 방법입니다.

import React from 'react';
import logo from './logo.svg';
import Login from './components/Login';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Login id='아이디를 입력하세요.' pw='비밀번호를 입력하세요.' />
      </header>
    </div>
  );
}

export default App;

 

아래 명령을 실행하고 결과를 확인 해보세요. 디자인이 많이 안좋지만~ 어차피 앤트 디자인을 적용할거라서 일단 넘어갑시다.

npm start

 

 

사용자 아이디와 패스워드를 받아서 로그인하거나 회원 가입을 진행할 수 있습니다. 취소를 누르면... 음~ 이건 나중에 어떻게 처리할지 고민 해보도록 합시다. 디자인 보다는 기능 위주로 알아보는거라서 App.css를 수정하지 않았습니다. CSS 관련 내용을 설명 하려면 또~ 몇시간이 흐를테고 개발자가 알면 좋지만, 몰라도 개발 업무를 진행 하는데 문제가 되지는 않습니다. 어차피 현업에 가면 UI/UX팀에서 기본 폼은 다 잡아주거든요. 그리고, 다이나믹하게 작동해야 하는 에니메이션들은 자바스크립트(JavaScript)를 조금만 수정 해주면 될겁니다. 언젠가~ 코딩에 익숙해지면 그리 어렵지 않게 수정할 수 있거든요^^;

 

아마도~ 앵귤라를 테스트 했을때와 같이 리액트도 앤트 디자인을 이용해서 처리할 수 있도록 변경할 예정입니다. 혼자서 프로젝트를 진행한다면 이미 검증된 UI 프레임워크를 사용하는게 좋습니다. 대부분 현업에서도 앤트 디자인을 사용하고 있고, 완성도 높은 UI와 좋은 UX(사용자 경험)를 제공하려면 별다른 대안이 없습니다.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

다음 시간에는 앤트 디자인을 적용시키고, 데이타베이스를 구성해야 합니다. 그리고, 데이타베이스에 관리자가 사용할 계정을 하나 넣어둘겁니다. 이 계정으로 로그인 테스트를 진행하면서 CRUD(Create, Read, Update, Delete)에 대한 개념을 익힐 수 있도록 해야 합니다. 어떤 개발을 할지 알수는 없지만, 현업 개발 업무에서 가장 기본이 되는 필수 기능이기 때문입니다. 사실 CRUD만 제대로 해도~ 대부분의 개발은 가능합니다. 업무 로직 분석 및 설계와 같은 것들은 제외하고 말이죠^^; 

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0