[현장실습_log] WEB_Project : 빠른 검색 기능 구현_멀티창

선·2021년 12월 18일

현장실습

목록 보기

3/12

📌프로젝트를 진행하면서 구현했던 기능들을 정리

처음 경험해 본 것이거나

구현하는데 있어서 많은 어려움이 있었거나

계속 고민했던 부분들

🥑이런 기능 좀 넣어줘!

🙋‍♂️소장님 : 창 안에 창을 띄워서 큰 창에서 메뉴얼 보면서 작은 창에서 빠르게 검색을 하고 빠르게 결과를 볼 수 있도록 하는 기능이 있으면 좋겠다!

지피지면 백전백승 - 채널 톡 분석해보기

인프런 강의를 들으면서 프론트엔드 공부를 하고 있었는데 여기의 채널톡처럼 만들면 되지 않을까 싶었다.

그렇다면 채널톡을 커스텀해서 사용할 수 있지 않을까?

그래서 제일 먼저 채널톡에 대해 알아보기 시작했다.

채널톡은

라이브챗 플러그인
고객 관리, 사내 톡 위주의 기능을 제공

개발자 문서를 살펴봐도 채널톡을 설치하는 방법, SDK document, launcher 커스텀 방법 등등에 대해서만 설명하고 그 외의 내부 기능들을 커스텀하는 방법은 제공하지 않았다.

결론 : 안의 기능들을 커스텀해서 사용하는 것은 무리가 있기 때문에 직접 구현해야 한다

🥑빠른 검색 기획

UI 디자인

기능 정리

빠른 검색 버튼

버튼 클릭 시 멀티창 등장
멀티창 등장하면 버튼은 사라짐
멀티창 안에 요소 불러오기

멀티창

x 아이콘 클릭 시 멀티창 닫힘, 버튼 등장
회사 이름을 표시할 수 있도록 설정
검색창이 멀티창에서 기본으로 보임

검색

검색했을 때, 멀티창 안에서 검색 결과가 표시 되도록
검색 결과를 테이블 형식으로 보여주기
다시 검색창으로 돌아가기 버튼

🥑기능 구현

빠른 검색 버튼

스크롤에 관계 없이 버튼 위치 고정
버튼의 위치는 스크롤에 관계없이 항상 오른쪽 하단 모서리에 고정 되어 있을 수 있도록 설정

position:fixed 속성 사용

멀티창 등장

<div id="frame" class="shadow-lg"
style="position: fixed; right: 30px; bottom: 30px; width: 350px; height: 650px; display: none; border-radius: 5%;"></div>

멀티창을 띄울 <div> 태그를 display:none 으로 설정

버튼 클릭시 display 을 바꿔 보이게 설정

멀티창 안의 요소 불러오기

ajax로 라우팅해서 멀티창 안에 보여줄 요소를 생성한 파일(multiWindow.ejs) 불러오기
multiWindow.ejs에서 자바스크립트로 html 요소 생성

멀티창

멀티창 닫기

x 아이콘에 click 이벤트 생성
클릭시 멀티창의 display:none, 버튼의 display:block 으로 설정

자바스크립트로 html 생성

📌WHY 자바스크립트로 생성?
멀티창에서 검색을 하면서 계속해서 새로운 데이터로 테이블을 생성해야 하기 때문에

생성하는 요소들

헤더 부분 생성 : 회사 이름, x 아이콘 생성
검색창 생성 : 검색 input, submit 버튼(search)
테이블 생성 : thead, tbody(no tr)
테이블 row 생성 : 검색 결과를 row로 만들어서 tbody에 추가
검색창 돌아가기 버튼 생성

검색창

1. 검색이 될 때 form의 전송을 막기

function createSearch() {
   ...

    const form = document.createElement('form');
    form.classList.add('pb-3');
    form.action = '/search/multi';
    form.method = 'GET';
    form.onsubmit = search;
    form.id = 'multiSearchForm';
    containerDiv.appendChild(form);
  ...
  
  function search() {      
    sendAjax();
    return false;
    
}
  
  ....

onsubmit 속성 사용

return false 사용시 form 제출 X

📌WHY form 제출을 막지?
멀티창은 <div>로 구현되었기 때문에 form이 제출되면 페이지 전체가 새로고침 되는 문제가 발생한다

멀티창의 검색은 멀티창 외부에 영향을 주지 않고 동작해야 하기 때문에 form 제출이 아닌 ajax로 서버에 검색 정보를 전달해야 한다

멀티창에서 검색하면 전체 페이지가 새로고침 되버려서 어떻게 막을까를 엄청 고민하면서 과장님께 여쭤봤었다. 과장님께서 기본적인 예제로 설명해 주셨고 그 예제를 바탕으로 실제 개발을 하면서 적용했다!
이걸 여쭤봤던 덕분에 멀티창 내부 요소들을 자바스크립트로 생성해야 한다는 것도 알 수 있었다!!

2. 서버로 form 정보 전달

function serializeFormData() {
    const allInput = document.querySelectorAll('#multiSearchForm input');
    let data = '';

    for(let i = 0; i <allInput.length; i++) {
        data += `${allInput[i].name}=${allInput[i].value}`
    }
    console.log(data);    
    return data;
}

function sendAjax() {
    const data = serializeFormData();

    return fetch(`/search/multi?${data}`)
    .then(res => res.json())
    .then(result => {
        console.log('fetch test', result);
        document.getElementById('search').remove();
        container.appendChild(createTable(result));
        container.appendChild(createMoveTopButton());
    })
    .catch(err => {
        alert('검색에 실패했습니다');
        console.log('error ', err);
    })
}

form에서 전달되는 데이터 형식이 변경이 되도 코드를 수정하지 않도록 하기 위해 serializeFormData() 사용

key : value 형식의 object 타입으로 만들어 form 데이터를 서버로 전달

추가 기능

스크롤 생성
검색 결과가 너무 많아지면 테이블이 멀티창 밖으로 나가게 됨

overflow-y:auto overflow-x :hidden 속성 사용
스크롤바 css 적용(참고)

TOP버튼 생성
검색창으로 다시 돌아갈 때 검색 결과가 너무 많으면 밑에서 위로 올라가는데 시간이 오래 걸림
불편함을 해소하기 위해 바로 위로 올라갈 수 있는 버튼 생성

function createMoveTopButton() {
    const a = document.createElement('a');
    a.classList.add('btn', 'bg-primary', 'text-white', 'm-3', 'ms-auto');
    a.id = 'btnMoveTop';
    a.href = '#btnClose';
    a.innerText = 'TOP';
    a.style.width = '30%';

    const i = document.createElement('i');
    i.classList.add('fas', 'fa-sort-up', 'pe-2', 'fa-lg');
    i.style.position = 'relative';
    i.style.top = '5px';
    a.prepend(i);


    return a;
}

<a>로 생성 후 href 속성을 x 아이콘에 연결

🥑느낀점

처음에는 정말 이걸 내가 만들 수 있을까?? 도대체 채널톡은 어떻게 만들어진 거야??
하면서 계속 계속 계속 고민하고 구글링 하면서 해보고 과장님께 여쭤도 봤다. 지금까지 html 태그로만 요소들을 만들었었는데, 자바스크립트로 만들 수 있다는 게 나에게는 신세계✨였다.

지금 정리하면서 돌아보니까 나는 지금 상황에서 어떤 문제가 있는지는 알았지만 그 문제를 해결 할만한 지식이 없는 상황이었다. 정확히는 문제의 원인이 뭔지 정확하게 알 수 없었다. 이 문제를 혼자 가지고 계속 구글링만 했다면 어어어어어엄청 오랜 시간이 걸려서 알아냈을 것 같다. 지금은 실습 중이기 때문에 굉장히 시간을 넉넉하게 주셔서 프로젝트에 지장이 없었을 수도 있겠지만 실제 업무였다면 프로젝트에 엄청난 영향을 끼쳤을 수도 있을 것 같다는 생각이 든다.

그 때 과장님께 여쭤볼 때도 '물어봐도 되나? 바쁘신 것 같은데.. 괜찮을까?'를 속으로 백만번쯤 되뇌이다가 도저히 혼자서는 답이 안 나올 것 같아서 '그냥 한 번 물어보자!!'하고 찾아갔던 건데 너무 친절하게 알려주셔서 감사했다. 아무리 갓구글이더라도 내가 문제의 원인을 정확하게 모르는 상태에서는 해결이 어렵다는 걸 알 수 있었고 이럴 때는 혼자 해결하려는 집념은 조금 내려놓고 여쭤보는 방법을 사용하는 게 현명한 거지 않을까 하는 생각이 들었다-