[29기 박겸영] 필수 항목 구현 / 댓글 좋아요, 삭제 기능

[seoltang]

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

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

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

1. 로그인 페이지 레이아웃
2. id, pw 입력 시 로그인 버튼 활성화 기능
3. 메인 페이지 레이아웃
4. 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능

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

1. login page

• id, pw 입력 시 로그인 버튼 활성화 기능

  • id와 pw 둘 중 하나라도 값이 입력되지 않으면 로그인 버튼 비활성화(disabled = true)
  • id, pw 둘 다 값이 입력되면 로그인 버튼 활성화(disabled = false)
  • css에서 :disabled 선택자에 배경색과 커서 모양이 변경되도록 속성을 부여함

• 로그인 시 id 저장 및 메인 페이지로 이동 기능

  • 로그인 버튼 클릭 또는 Enter press 시, id로 입력받은 값을 session storage에 저장하고 메인 페이지로 이동
  • 자동로그인이 아니기 때문에 id 값을 local storage가 아닌 session storage에 저장함

2. 메인 페이지

• 레이아웃

  • 스크롤 시 내비게이션 바와 우측 메뉴는 고정(position: fixed)되고 피드만 스크롤되도록 함

• 검색창에 입력 중일 때 돋보기 아이콘 숨기는 기능

  • 검색창에 position: relative 속성, 돋보기 아이콘에 position: absolute 속성을 부여하여 위치를 조정함
  • 검색창이 포커스(focus event)되면 돋보기 아이콘에 display: none인 클래스를 추가하고, 포커스되지 않으면(blur event) 클래스를 삭제함

• 좋아요 버튼 토글 기능

  • 좋아요 버튼 클릭 시 채워진 하트/빈 하트로 변경

• 사용자 id 표시 기능

  • 로그인 페이지에서 저장했던 id 값을 불러와서 우측 메뉴 상단 프로필에 표시

• 댓글 게시 기능

  • 댓글 내용이 입력되지 않았을 때는 게시 버튼이 비활성화되고, 내용이 입력되면 게시 버튼 활성화됨. (로그인 페이지와 동일한 방식)
  • 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글이 들어갈 elements를 동적으로 생성하여 댓글 추가. 이때, login page에서 session storage에 저장했던 id 값을 불러와서 댓글 작성자로 표시함.
  • 새로고침 시 댓글이 사라지는 것을 방지하기 위해, 댓글을 게시할 때 댓글 내용과 id를 local storage에 배열로 저장함.
  • 페이지를 새로 불러올 때, 만약 local storage에 저장된 댓글 값이 있다면 반복문을 통해 댓글을 작성한 id와 댓글 내용을 순차적으로 모두 불러와 동적으로 elements를 생성하고 댓글이 추가되도록 함.
  • 코드의 중복을 피하기 위해, 댓글이 들어갈 요소를 동적으로 생성하는 코드를 함수로 만들고, 댓글 작성자 id와 댓글 내용을 함수의 파라미터로 설정함. 페이지 로드 시 기존 댓글을 불러올 때와 새 댓글을 추가할 때 각각 함수의 인자를 다르게 넣어줌으로써 같은 함수를 통해 댓글 요소를 생성할 수 있도록 함.

• 댓글 좋아요, 삭제 기능

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

• 이전에 배웠던 변수의 스코프를 어디까지 적용하는 것이 좋을지 고민하고 전역변수와 지역변수를 나누게 되었습니다.
• 댓글 게시 기능에서 createElement와 appendChild를 연습해볼 수 있었습니다.
• 검색창 돋보기 아이콘 숨기기/보이기를 구현하며 input에서 포커스를 감지하는 focus, blur 이벤트(버블링되지 않음)를 알게 되었습니다.
• 레이아웃을 만들 때 div 안의 div가 많아지고 각각에 css 클래스를 부여하다 보니 클래스가 많아져서 이름 짓기가 까다로웠습니다.
• css 속성을 일정 순서에 따라 리팩토링했습니다.
• javascript에서 구현한 기능을 주석 대신 함수명으로 설명할 수 있게 되었습니다.
• form 요소를 javascript에서 불러올 때, document.forms.name 또는 document.forms[i]와 같이 form의 이름이나 순서로 불러올 수 있고, elements 메서드로 form 태그 안의 하위 요소-input, button 등-에 접근할 수 있음을 알게 되었습니다.
• session storage와 local storage에는 문자열만 저장할 수 있지만, JSON을 통해 배열을 문자열로 변환하여 저장하고 문자열을 배열로 변환하여 불러올 수 있음을 알게 되었습니다.

:: 기타 질문 및 특이 사항

• bug: 댓글 input textarea 입력 시 줄바꿈이 되지 않는 현상이 있습니다. width 또는 word-break로 해결이 되지 않습니다.
• error: 댓글 삭제 기능 보완 필요. 댓글 삭제 시 삭제한 댓글의 id와 댓글 내용 데이터도 삭제해야 하는데, 인덱스를 불러오지 못함.