23-01-29 TIL

오늘 진행한 것들 🤔

• 토이 프로젝트 진행
  • 뷰 템플릿 수정
    • 해시태그 기능 수정
      • Tagify 를 이용한 태그 분리
      • 현재 존재하는 태그를 검색해 추천해주는 로직 구현
  •  

존재하는 태그 추천 (맘같아선 옆에 몇건의 게시글이 등록되었는지도 표시하고싶지만, 아직 프론트 지식이 부족해서.. 포기했다 @_@)

전보다 훨씬 깔끔하게 해시태그를 등록할 수 있게 되었다.

캐릭터를 등록했을때 모습... 아직 css가 익숙치 않아서 최대한 노력해봤지만, 그래도 이미지를 크롭해서 캐릭터 얼굴만 표시하도록 구현했다. 추후에 더 업그레이드 해서 캐릭터를 3개까지 등록이 가능할때 해당 레이아웃이 그나마 제일 나을거같다고 생각해서 밑에 붙였다. (오른쪽에 붙이면 풀스크린일때 너무 떨어져있기때문에)

오늘 겪었던 문제 🤔

• 문제라기보단 성능관련 문제가 있었다.
  • Tagify의 옵션중 input이 자바스크립트의 keyup과 기능이 거의 똑같았는데, keyup 관련 기능을 구현할때, 매번 고민한던게 있었다.
    • 글자마다 ajax 통신을 해버리면 안녕 이라는 결과를 검색할때 6번의 통신을 하게된다.
    • 프론트에서 해결할 수 있을거같아서 스쳐지나가듯이 찾아봤던 기억중에 setTimeOut 이라는 메소드가 있었던거 같아서 엄청 검색을 했었다.
    • 한글로 검색하기엔 적절한 태그를 찾지 못했고, 영어로 검색했을때 다행히 나같이 생각을 한 외국 개발자가 있었다.
    • 전역변수로 timeout 변수를 만들어주고, 마지막 입력을 하기 직전까지 매 입력마다 변수에 메소드를 저장하고, 마지막 입력 직전까지는 실행되야하는 메소드를 모두 null처리 시켜서 없애주고, 마지막 메소드만 실행할 수 있도록 변경했다.
    • 해당 로직은 나중에 검색어 로그 조회라던가, 비슷한 로직으로 캐릭터 검색등등 여러 부분에 쓰일 수 있을거같아서 기록을 해야겠다 다짐했었다.

오늘 해결한 오류 🤔

 

오늘의 배운점🤔

• setTimeout 과 clearTimeout
  • 좀더 효율적으로 이벤트를 다루기 위해서 알고있어야 할 것 같았다.
  • 닉네임 중복조회 같은 로직에 keyup에 사용하면 좋을거같다.
• 노드 모듈을 스프링부트에서 사용하는법
  • 기존에 꾸준히 제이쿼리 플러그인을 로드해서 사용중이었는데, npm을 스프링부트에 적용시키는 법도 있더라.
  • 단순히 resources 폴더에 진입 후 npm init -> install 패키지 를 하고 핵심 js파일을 로드해오면 됐었다.
  • 생성자가 클래스를 읽어오지 못해도 프론트에서 정상적으로 로드가 되더라... 앞으로는 npm으로 더 사용하기 쉽게 설치해야겠다.