[TIL] 엘리스 SW 엔지니어 트랙 Day 043

📖 오늘 배운 내용 - 2021.12.22

• 프론트엔드 오피스아워
• 반려 이야기 검색 기능 구현, 수정/삭제 버튼 생성

 

📝 셀렉트 박스 옵션 가져오기

selected.options[selected.selectedIndex].value;

<div class="main__search">
  <form action="" class="main__search-form">
    <select name="pet-search" id="pet-search" class="main__select">
      <option value="title">제목</option>
      <option value="content">내용</option>
      <option value="author">작성자</option>
    </select>
    <input type="text" placeholder="검색" class="search__input">
    <button type="button" class="search__button">검색</button>
  </form>
</div>

const selected = document.querySelector(".main__select");
selected.options[selected.selectedIndex].value;
console.log(selected.options[selected.selectedIndex].value);

 

💡 오늘 깨달은 것

• 게시글/댓글 작성자만 수정 및 삭제 버튼을 보여주는 부분을 어떻게 처리할지 고민하고 있다가 백엔드 분에게 고민사항을 공유했다. 그리고 짧은 대화 속에 해결 방법을 찾았다.
• 고민사항은 header를 포함한 부분만 ejs로 서버에서 렌더링해 주고 있고, 게시글 상세 내용과 댓글은 동적으로 생성해 주고 있다. 페이지 전체를 ejs로 처리하면 비교적 쉽게 해결할 수 있는데 세부 내용을 동적으로 처리하다 보니 생겼던 고민이었다.
• 그리고 대화는 유저 정보를 어떻게 가져오느냐에서 출발했다. 게시글과 댓글 태그에 작성자의 id값을 넣어주고 백엔드에서 로그인 객체를 넘겨주면 해당 id값들을 비교하여 일치하는 부분에만 수정/삭제 버튼을 보여주는 식으로 결정했다.
• 혼자 고민할 때는 방법이 떠오르지 않았는데 백엔드 분과 대화하니까 짧은 시간에 해결 방법을 찾았다. 상대방의 의견을 듣고 떠오른 아이디어를 말하고 그 아이디어에 대한 문제점을 지적받고 또 그 문제의 해결 방법을 찾는 순으로 반복하다 보니 해결 방법을 도출하였다. 때론 구글링보다 효과적인 방법이라고 생각한다.
• 오늘 개발하면서 느낀 점은 이전에 해보지 않았던 기능을 구현하고, 새로운 문제를 마주했을 때 처음으로 개발이 즐겁다는 느낌이 들었다. 문제를 해결함으로써 경험이 쌓이고 성장하고 있다는 것을 느낄 수 있는 순간이니까!