💖 프로젝트 시작 전 마음가짐

• 팀 프로젝트의 최종발표날을 상상해보자. 결과물이 눈 앞에 구현되는 그 모습 정말 짜릿하다.
• 현재 나의 작고 소중한 능력과 코드에 자신감을 갖다. 나도 할 수 있다.

🪧 프로젝트 소개

1. 일정: 11월 1일 ~ 11월 12일

2. 프로젝트 사이트 : 집꾸미기

3. 프론트엔드 : 3명
   백엔드 : 2명

4. 프론트엔드 역할 분담

• Product List page
• Navigation Bar, Main, Cart
• Product Detail page
• Login, Signup

5. 사용된 기술

• JavaScript
• React
• git

6. 나의 역할
   Login, Signup

📚 Login

👉 START LOGIN

• 팀 회의 후 결정에 따라 로고와 버튼 색상 변경.
• 위코드에서의 프로젝트를 의미담아 소셜로그인 버튼에 '위코드 계정으로 로그인' 추가.
  -> 소셜 로그인 버튼 구현하고 싶다는 목표가 생겼다.
  

• 구조분해 할당과 계산된 속성명 사용

• 위스타그램에서 부터 반복하여 사용된 구조분해 할당이 익숙해 질때쯤 계산된 속성에 대한 리뷰를 받았다. 계산된 속성명을 사용하여 inputHandler 합쳐보자.

• input 태그에 있는 name이라는 속성으로 여러 개의 input handler를 하나로 합칠 수 있다. input에 특정한 이름를 지어주는 것이다.
• 반복되는 코드를 가만히 두지 말자. 길거나 반복되는 코드를 간결하게 줄일 수 있는 방법이 무엇이 있는지 생각해야한다.

• 백엔드에서 넘어오는 result.message를 놓치지 말자.

• result.message는 항상 똑같을 것이라는 생각을 했다. 왜 그랬을까? alert이 작동하지 않아여 개발자 도구를 살펴보니 지정된 message가 다른 것을 볼 수 있었다. 이것또한 백엔드와의 소중한 소통의 중요성임을 느낄 수 있었다.

id, className, 변수, 함수의 이름은 명확하고 직관적으로 이해가 되도록 짓자.

• 처음에 지었던 이름은 viewBtn1,viewBtn2였다. 지금 생각해보면 저렇게 지은 이름은 사람1, 사람2와 다름이 없는 것이였다. 어떤 사람인지 그 사람이 무엇을 하는지 알 수 가 없다. 명확하고 직관적인 이름을 작성하여 가독성이 좋은 코드를 만들 수 있도록 노력해야한다.

img에서 alt를 잊지 않는다.

• 간단하지만 잊기 쉬운 alt 작성 놓치지 않았다. 그런데 alt 작성 시에도 주의할 점이 있을지 고민을 하게 된다. 내가 만약 사용자라면?

🤔 Login 구현 후 Think

• 레이아웃 구현은 내가 예상한 속도로 진행이 되었고, 함수 로직작성이 생각보다 시간이 더 필요로 했다.
• 위스타그램에서 로그인 구현 시에는 함수를 작성하는 flow를 이해하는 것부터 시간이 많이 소모되었는데 이번 프로젝트에서는 flow와 내가 필요한 것이 무엇인지는 표현할 수 있었지만 직접 코드로 작성하는 것이 어려운 부분이었다. 코드를 치고 생각을 하는 연습 정말 부지런히 더 부지런히 해야한다.

---

                                        .... 이어서 계속됩니다