Clone - Westagram login page

Instagram 클론 코딩을 진행했다.
실제 페이지와는 조금 다르지만 기초 구현 연습과 간단한 기능 구현까지 진행한 로그인 페이지 화면이다.

사용한 기술 스택

1. React
2. Scss
3. React-rouder-dom

기능 구현 사항

1.로그인 Validation( 이메일 @ 포함, Password 는 5글자 이상!)
2.Validation이 확인되면 로그인버튼 컬러가 토글되며, 메인 화면으로 넘어간다

로그인 페이지 클론하며 배운 것.

1. 우선 같은 기능을 가진 페이지라도 각자의 코드는 다르다는 것. 간단해 보이는 로그인 버튼 컬러 색상 변경의 방법도 각기 다른 방법이 있고, 그 중 최적의 방법의 사용법을 지향해야 한다. 처음에 구현한 버튼 컬러색을 변경하는 방법은 State값에 버튼색을 정의하고 함수를 만들어서 적용 했다. 너무나도 미련한 짓 아닌가? 우선 인라인 스타일로 css속성을 변경 할 뿐만 아니라 State에 버튼 컬러 색상을 담을 필요는 없다. 솔루션은 불리언 값을 이용하여 className을 삼항연산자로 바꿔주는 방법이다. 이 방법은 인라인 스타일로 css속성을 변경하지 않을 뿐더러, State에 값을 담지도 않는다.(인라인 속성으로 css를 변경하게 되면 유지보수 측면에서 엄청 힘들어 진다. 예상치 못한 곳에서 css값을 변경하고 있기 때문. 내 코드는 남이 볼 일이 더 많다는 멘토님들의 조언)

2. Input관리하기. Input에 name을 부여하여 한번에 관리 할 수 있다.(유지 보수가 좋아진다.)

3. 주소를 바꿔주는 방법에서 window.location.href 방법으로 접근하여 href를 직접 수정해주는 방법은 안티패턴이다. React 에서 window 객체를 사용하는것은 옳지 않은 방법인데, 지금 사용한 방법은 Single Page Application 의 원칙에 어긋난다. 왜냐하면 페이지가 reload / refresh 되기 때문이다.

이어서 Main Page 구현