[1人 프로젝트] 트위터 클론코딩 1회차

All Courses – 노마드 코더 Nomad Coders

👩‍💻 이 프로젝트로 정한 이유

React를 학습하면서 React에 대한 실력을 향상하고자 시작하게 되었다.

 

 

---

 

 

🎉 성과

완성한 부분

firebase의 Sign-in method 설정 완료

이메일로 회원가입, 구글 및 깃허브 연동가능

 

인증 웹페이지 골격 개발

input태그와 form태그, button태그로 기본 골격을 만들었고, copyright와 현재 년도는 밑의 코드로 작성하였다.

<footer>
	&copy; {new Date().getFullYear()} twitter
</footer>

 

 

---

 

 

✨ 느낀점

👍 알게 된 점

코드 단축하기 -1-

input 태그에 사용되는 value값을 단축코드로 완성했다. 단축코드를 사용하지 않으면 input의 사용 개수가 많아지면 코드가 길어진다. 다음은 단축코드를 사용하기 전의 코드이다. 

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

input의 개수가 많으면 단축코드를 사용하는 것이 더 보기 편하고, 코드 양이 줄어든다.

 

코드 단축하기 -2-

입력되고 있는 input을 event.target으로 찾아낸다음 그 input의 name과 value값을 받는다. 그리고 setForm함수를 이용해 기존에 저장된 form을 복사하고, input에서 얻은 name에 해당되는 변수에 value값으로 바꿔준다. 즉, 만약 email input에 입력을 했을 경우 name은 email이고, form에 있는 email의 값을 value값으로 바꿔준다는 의미이다.

[name]: value

name에 email이 들어가면 email: value가 된다. 그리고 setForm(...form, email:value)로 인해 email은 value값으로 바뀐다.