React

//Login.js

import React from "react";
import "./Login.scss";
import { Link,useNavigate } from "react-router-dom"; 
const Login = () => {
     const navigate = useNavigate(); 

     const loginButton = () => {
      navigate('/main');
     } 
     
  return ( 
   
    <div className="login">
      <div className="imgBox">
       <div>
         <div><img className="imgLogoFrist" src="/wecodeLogo.png" /></div>
         <div><img className="imgLogoTwo" src="/wecodeLogo2.png" /></div>
        </div>
      </div>
      
       <div className="loginBox">
         
          <input type="text" placeholder="이메일" className="email"></input>
          <input type="text" placeholder="비밀번호" className="pass"></input>
          <input onClick={loginButton} type="button" className="buttonlogin"value="로그인"></input>
         
         <div className="smallBox">
          <div>
           <Link className="join" to='/main'>회원가입</Link>
          </div>
          <div>
           <input type="button" className="passFind"value="비밀번호 찾기"></input>
          </div>
          
         </div>

        </div>
    </div>
  );
};
export default Login; 

아래파일~!!

//Login.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login {
  width: 100%;
  height: 100vh;
}
.imgBox{
  width: 100%;
  height: 555px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.imgLogoFrist{
  width: 118px;
  
}
.imgLogoTwo{
  width: 144px;
}
.loginBox{
  width: 100%;
  height: 225px;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.buttonlogin{
  width: 90%;
  padding: 16px;
  margin-left: 5%;
  background-color: #2D71F7;
  color: white;
  margin-top: 16px;
  margin-bottom: 16px;
  border-radius: 6px;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  border: none;
}
.pass{
  width: 90%;
  padding: 16px;
  margin-left: 5%;
  margin-top: 8px;
  border-radius: 6px;
  border: 1px solid gray; 
}
.email{
  width: 90%;
  padding: 16px;
  margin-left: 5%;
  border-radius: 6px;
  border: 1px solid gray; 
}
.smallBox{
  display: flex;
  justify-content: center;
}

.smallBox > div {
  position: relative;
  width: 96px;
}

.smallBox > div:first-child {
  padding-right: 24px;
  text-align: right;
}
.smallBox > div:last-child {
  padding-left: 24px;
}

.smallBox > div:first-child::after {
  content: '';
  display: block;
  width: 1px;
  height: 16px;
  background-color: gray;
  position: absolute;
  
  right: 0;
  
  top: 50%;
  transform: translateY(-50%);

.join{
  font-size: 14px;
  border: 1px solid white; 
  background-color: white;
  color: black;
  text-decoration-line:none;
}
.passFind{
  font-size: 14px;
  border: 1px solid white; 
  background-color: white
}

위 코드로 작성을하였고 https://velog.io/@leecwee/Html-Css
첫번째 올렸던 블로그에서 구현하였던것을
React , Router , SCSS , JSX 문법을 적용하여 재구성하였고!
위결과

위에 화면 처럼 구성하였고!!

위 화면 처럼 Router를 적용 하였고!
Link 컴포넌트 useNavigate 둘다 적용해보았다.
그결과 로그인과 회원가입을 클릭하면 메인 페이지로 넘어가는결과를 얻었고! 각자의 컴포넌트가 연결 되었다는것을 확인하였다.

느낀점

공부하는것을 그대로 적용해 보고있고
https://velog.io/@leecwee/Html-Css
처음작업했던 모습 위 링크 참조

React,Router,JSX문법 사용하면서 하나의 SPA 로 작업이 가능하게되었고 Html 과 JS 를 동시에 작업이 가능해져서! 굉장히 성능이 좋다고 느꼇다. 그리고 앞으로 컴포넌트를 좀더 세분화 하여서 관리와 유지보수를 더 효율적으로 할수있다는 생각이 들었다. 아직 아는게 많이 없어서 기술적인설을 글로 표현하는 능력이 조금부족하지만 발전하는 모습을 보이도록해야겠다.

Mein 파일 레이아웃 작업을 하고 Router를 통해 Mein 페이지에서 Login페이지로 돌아오는것도 적용 할것이다.