[신혜윤] 풀스택-FE-mission2

[hyeyoonS]

요구사항

기본 요구사항

공통

• README.md 파일을 작성합니다.
• 본인 브랜치에 스프린트 미션을 업로드 합니다.
• 적절한 코멘트를 남겨 주세요.
• 스프린트 미션 레포지토리를 fork 합니다.
• GitHub에 PR(Pull Request)을 만들어서 upstream의 본인 브랜치에 미션을 제출합니다.
• 유닉스 커맨드를 활용해 주세요.
• HTML, CSS 파일을 Netlify로 배포합니다. (참고: https://www.codeit.kr/learn/5309)

로그인 페이지, 회원가입 페이지 공통

• “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
• 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
• SNS 아이콘들은 클릭시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다.
• input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다.
• input 요소에 focus out 일 때, 테두리는 없습니다.

로그인 페이지

• “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.

회원가입 페이지

• “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다

심화 요구사항

공통

• palette에 있는 color값들을 css 변수로 등록해서 사용합니다.
• 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해주세요.
• 구글 애널리틱스로 방문자 수 확인하기할 수 있도록 설정합니다.

로그인 페이지, 회원가입 페이지 공통

• 비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다.

---

구현 스크린샷

QA종합 의견

난이도

• 1주차 보다 체감 난이도가 낮았어요. 분량도 적었습니다.

---

분량

• signup, signin 거의 동일한 형태라서 오히려 분량이 적다고 느껴졌어요.
  • 심화요구사항을 1주차에 모두 구현해서 분량이 적게 느껴진 것 같습니다.

---

Mission2 구현 설명

• 코딩 분량은 적다고 느껴졌고, 크게 어려운 부분도 없었어요.
• form태그에 들어가는 양식을 정석대로 공부할 수 있어서 도움이 되었어요.

---

의견

• 코딩 분량은 적지만, readme 작성이나 PR올리는 데 좀 헤매는 시간이 있을 것 같아요! (깃 사용이 처음이라면,,,)
• readme는 어떤 걸 작성해야 하는지, 어떤 의도의 요구사항인지 잘 모르겠어요! 가이드가 있으면 좋을 것 같아요.
  • 플꾸(프로젝트 꾸미기)인가요….?
  • 저 같은 경우는 노션을 복붙해서 웹에서 수정하는 편인데… 그것보단 마크업을 최대한 많이 사용해보라는 의도인가요…?

---

문의사항 (궁금궁금)

• Q. Mission1 요구사항 ↔ Mission2 요구사항 불일치 문제

  • “로그인”버튼 클릭 시 로그인 페이지(‘/signin’)로 이동합니다
  • 회원가입 페이지 “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.

  ⇒ 경로가 통일되어야 할 것 같아요~!

• Q. ReadMe에 어떤 걸 작성해야 하는지 구체적인 가이드가 있을까요? 제가 쓰고 싶은 내용을 쓰면 되나요….?

• Q. 적절한 코멘트를 남겨달라는 요구사항이, 셀프 코드리뷰를 의미하는 것이 맞을까요....?

[hyeyoonS]

a태그에서 target_blank를 사용하면 보안에 취약할 수 있다고 해요!
참고 자료

그래서

     <a
            href="https://www.facebook.com/?locale=ko_KR"
            target="_blank"
            rel="noopener noreferrer"
...

이렇게 써주었습니당

[hyeyoonS]

앗 셀프 코드리뷰 하다가 발견,,, 오타 + 다른 alt들과 규칙도 다르네요 ,,, 수정하겠습니다

[hyeyoonS]

웹폰트를 불러오는 방법을 선택했는데 성능상 이 방식은 지양하는게 좋다고 하네요! 🥲

[hyeyoonS]

signin과 signup의 CSS속성이 거의 같아서 하나의 파일로 관리하기로 했어요!