[28기 강희원][Add] 추가 기능 구현중

[KH2Wone]

:: 최근 작업 주제 (하나 이상의 주제를 선택해주세요.)

• 기능 추가
• 리뷰 반영
• 리팩토링
• 버그 수정
• 컨벤션 수정

:: 구현 목표 (해당 브랜치에서 구현하고자 하는 하나의 목표를 설정합니다.)

• 로그인, 메인 페이지 구현 (완료)
• main 페이지에서 댓글 기능 구현 (완료)
• 추가 기능 구현
• Mission 5 | ID, PW validation
• Mission 6 | 댓글 좋아요 / 삭제 기능
• Mission 7 | 아이디 검색 기능
• Mission 8 | nav 프로필 사진 클릭 시 메뉴 박스 생성
• Mission 9 | 반응형 구현

:: 구현 사항 설명 (작업한 내용을 상세하게 기록합니다.)

1. 로그인 페이지 작업

• 로그인 페이지 레이아웃
• 로그인 버튼 활성화 및 비활성화
• 유효성 검사
• 비밀번호 5글자 이상, 아이디 '@' 문자 포함이자 문자열 10개 이상 (휴대폰 번호나 아이디일 수 있으므로)

2. main 페이지 구현

• main 페이지 레이아웃
• 댓글 게시 기능
• 추가 기능 구현중

:: 성장 포인트 (해당 기능을 구현하며 고민했던 사항이나 새로 알게된 부분, 어려웠던 점 등을 작성합니다.)

• addEventListener를 통해 로그인 버튼을 사용자의 입력값에 따라 keyup 등의 이벤트를 줄 수 있다는 것을 새로 알게되었습니다.
• display: flex를 다양하게 적용해볼 수 있는 기회가 되었으나 아직 익숙하지 않습니다.
• CSS 속성의 우선순위에 따라 리팩토링 해볼 수 있었습니다.
• position: fixed는 부모에게 영향을 받지 않고 브라우저에서 독단적인 위치를 사용합니다.
  그러나 위스타그램의 경우 aside의 위치가 고정되면서 특정 위치에 PC 사이즈가 늘었다 줄어도 항상 그 자리에 있어야 하기에 transform: translate(643px)을 적용하여 위치를 고정시켜줄 수 있었습니다.
  인스타그램의 경우 JS로 브라우저의 크기에 따라 left의 위치가 유동적으로 변하게 했으나 저는 transform 속성으로 고정시켜두어 보았습니다. left가 유동적으로 변하게 하는 로직을 구현해봐야겠습니다.
• flex 속성, flex-grow 속성을 더 공부해봐야합니다.
• object-fit을 사용할 때 해당 속성은 적용이 되지만 object-position을 사용하려면 width, height의 값이 지정되어 있어야 합니다.
• block 요소에게는 width나 display: block을 주는 것은 불필요하므로 생략해야 합니다.
• 인스타그램의 경우 댓글 영역을 textarea로 만들고 댓글의 길이(양)에 따라 스크롤이나 overflow: hidden이 아닌 유동적으로 height가 늘어나 모든 내용이 보이도록 했습니다.
  해당 내용을 구현해볼 필요가 있겠습니다.
• max-width를 잘 활용해서 쉽게 반응형을 구현할 수 있습니다. 전에는 잘 사용하지 않았지만 이제는 자주 적용해볼 수 있겠습니다.
• 핸드폰에서 사용하는 어플인 만큼 사용자의 손가락이 크더라도 원하는 곳을 터치할 수 있어야 합니다. 그래서 인스타그램의 경우 padding을 줘서 영역을 차지해 클릭할 수 있는 범위를 넓히고 그로 인해 부모 레이아웃을 벗어날 경우 margin으로 마이너스 값을 주어 위치하게 했습니다.
• flex를 더 많이 써봐야겠습니다.

:: 기타 질문 및 특이 사항

• querySelector보다 getElementById의 효율이 더 좋다고 해서 사용하려고 지향하는데 login.html에서 class 및 id가 너무 남발된건 아닌지 가급적 class와 id의 사용을 자제하는게 좋은지 궁금합니다.