TIL) 스파르타 개발일지 22-12-22

프로젝트 SaveDuck에서 내가 우선적으로 담당한 부분은 로그인과 회원가입 부분이다.

 

이전 프로젝트에서 JS & Firebase 구현당시에는

 

DB에 저장된 정보를 가져와 보여주는 상세페이지를 맡았었다.

 

같은 개념이라 생각이 들었다.

 

1. 회원가입을 통해서 User의 정보를 DB에 삽입해주고,

 

2. 로그인 시에 DB 정보와 사용자가 입력한 정보를 대조하여

 

3. 입력값 = DB정보 일시 로그인이 완료되어 메인페이지로 이동시켜주면 된다 생각했다.

 

글로 작성을 했을 시 되게 간단해보이고 만만해 보였는데...

 

첫 react로 구현하는 프로젝트다 보니 상당히 애를먹었다.. 문법 및 구조 ㅠㅠ

 

서론은 이만하고 구현한 부분을 리마인드하며, 적어보겠습니다.

(과정을 담지못해 조금 아쉽습니다 ㅠㅠ 진짜 고생했는데)

 

styled component 를 이 때까지만 해도 알지 못해서 SignUp.jsx 와 Sign.css를 만들어 작성했다.

 

Html, Css는 구현이 어느정도 되었고, 이후 정규식과 같은 본격적인 JSX를 접하기전에 

 

styled component를 우선적으로 팀원의 도움을 받아서 정리했다.

(막상 해보니 별거 없던건... 왜 쫄아있었을까?)

 

직접 해보기 전 부터 겁먹는건 좋은 습관이 아닌 듯 했다.

 

import styled from "styled-components";



export const LoginWrap = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100;
  justify-content: center;
  align-items: center;
  display: flex;
`;

export const H2 = styled.h2`
  margin-bottom: 100px;
`;
export const LoginContaier = styled.section`
  text-align: center;
  width: 800px;
`;
export const InputTitle = styled.div`
  font-size: 20px;
  text-align: left;
  /* background-color: aqua; */
  margin-left: 170px;
  margin-top: 30px;
`;
export const Input = styled.input`
  width: 100%;
  outline: none;
  border: none;
  border-bottom: 1px solid #e2e0e0;
  font-size: 18px;
  ::placeholder {
    color: #dadada;
    font-size: 15px;
  }
`;

.
.
.
export const ErrorpasswordWrap = styled.div``;

일부를 가져와보았다. 백틱을 통해서 진행하는 것이 조금 낯설었다.

 

styled를 직접 component화 하면서 느낀게 굳이 이걸 왜 번거롭게 하는걸까.. 가독성은 알겠다만 너무 수고스럽지않은가 싶었다.

 

Trouble Shooting

 

기존 작업당 시 input에 placeholder를 넣어놓았었는데

 

막상 리액트에서 하려니 감이 안잡혀서 30분정도 찾아본 것 같다. 

export const Input = styled.input`
  width: 100%;
  outline: none;
  border: none;
  border-bottom: 1px solid #e2e0e0;
  font-size: 18px;
  ::placeholder {
    color: #dadada;
    font-size: 15px;
  }
`;

알고나서 너무 허무했다ㅋㅋ.. 그럴수도 있지

 

오늘은 여기서 마치고,

 

다음 포스팅에서는 

정규 표현식에 대해서 다뤄볼까 한다.