1차 프로젝트 기간이다. 내가 담당한 부분은 로그인과 회원가입이다.
오늘은 로그인 구현하면서 고민 했던 부분 정리 함
- 로그인 입력창에 id와 비밀번호가 입력되는 함수를 적용하는 부분에서
id와 비밀번호 적용하는 부분에서 코드를 조금 더 간략하게 줄일 방법을 찾음
- input 속성에서 name을 적용
- 대괄호 표기 법 (square bracket notation)
- 이번 로그인 레이아웃에서 버튼은 2개이다.
그림처럼 로그인 버튼과 회원가입 버튼 2개라서
예전에 로그인 버튼 하나였던 위스타그램을 그대로 적용 할 수가 없다.
그래도 적용 할 시에는 삼항연산자 부분 때문에
scss에서 두가지 버튼은 적용하는 속성이 다르기 때문에
클래스 네임을 선택자로 사용해서 따로 속성을 줘야 했다.
두가지 버튼을 따로 선택자를 둘 수가 없었다.
즉 버튼 className 살리고 삼항연산자 조건식 부분도 살려야 된다는 말이다.
그러다 알게 된 방법은 Template literals
back-tick : 백틱 ( ` ) , 문자열을 여러 줄에 걸쳐 작성 할수 있다.
달러 ($) 식별자 : 식별자는 코드 내의 변수 함수 속성을 식별하는 문자열이다.
출처 :https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
<결과>
2가지 버튼 className도 살리고 삼항연산자도 넣을수 있음
그리다 보면 ~ ♪