WEB: Frontend

  위와 같은 경우처럼 한글로 된 특정 단어 뒤에 들어갈 조사를 덧붙힐 때 사용할 수 있는 예제입니다. 맨 마지막 단어의 종성을 알아낸 뒤, 특정 공식에 대입해 0이라면 받침이 없는 것이고. 그 외의 경우는 받침이 존재합니다. // 맨 마지막 글자에 받침이 있는지 찾아서 있다면 true, 없다면 false 를 반환 function isEndWithConsonant(korStr) 더보기…

React나 Vue 등의 SPA에서 볼 수 있는 SPA 라우팅을 흉내내는 예제입니다. 참고로 window.location.pathname을 이용한 URL 입력 기능을 실행하려면 SPA 라우팅을 지원하는 HTTP 서버가 필요합니다. 간단하게 설정할 수 있는 서버로 크롬 브라우저 플러그인인 Web Server for Chrome 을 소개합니다.   해당 앱을 실행하면 설정 창이 나옵니다. 여기서 index.html 파일이 있는 디렉토리를 더보기…

참고: 자바스크립트: Fetch (외부 라이브러리 없이 AJAX 사용)   자바스크립트 Fetch APi에서 보냈던 요청을 취소하는 방법은 다음과 같습니다. 새로운 const abortController = new AbortController()를 생성 fetch 옵션에 signal: abortController.signal 추가 요청 취소를 원하는 타이밍에 abortController.abort() 실행   // <pre class=”result”></pre> // <button class=”btn-cancel”>로딩 취소</button> const init = () => { const 더보기…

출처: javascript #디자인패턴 – 메모이제이션 패턴 (memoization pattern) API 호출을 사용하여 검색 기능을 구현할 때 이미 입력한 적이 있는 검색어는 추가 요청을 하지 않고 캐시에 있는 결과를 가져다 써서 불필요한 네트워크 요청을 줄일 수 있습니다.   객체를 이용하는 방법 (async () => { let inputItemId = document.getElementById(“itemId”) // input[type=text] 요소 더보기…

모달 창이란 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말합니다. 아래 그림에서 가운데 하얀색 부분이 그 예라고 할 수 있습니다. 이 모달창은 팝업과 비슷하게 정보를 전달하나 팝업과 다르게 별도의 창이나 탭을 생성하지 않고 페이지 내에서 레이어를 이용해 정보를 보여준다는 점이 차이점이라고 할 수 더보기…

기본적인 원리는 자바스크립트: 무한 스크롤 (스크롤 이벤트 이용, 라이브러리 없이) 이 글에 나온 것과 동일합니다. 스크롤 인디케이터(스크롤 상태 표시기)란 스크롤을 할 때 현재 스크롤된 영역이 전체 컨텐츠 영역의 몇 % 진행되었는가를 나타내는 표식입니다. 아래 그림에서 파란색 선이 스크롤 인디케이터입니다. 스크롤 인디케이터는 스크롤 정보를 얻어와 구현합니다. 스크롤 이벤트를 하면 이벤트 타겟에 scrollingElement라는 프로퍼티가 더보기…

참고: 자바스크립트: IntersectionObserver (2) 무한 스크롤(Infinite Scroll) 구현 (라이브러리 없이) 스크롤 이벤트를 하면 이벤트 타겟에 scrollingElement라는 프로퍼티가 있는데 이것을 통해 현재 스크롤 상태와 관련된 정보를 얻을 수 있습니다. 또는 document,documentElement || document.body 에서도 가져올 수 있습니다.   clientHeight : 웹 브라우저 창(내용이 보여지는 영역)의 높이입니다. scrollTop : 현재 스크롤된 부분의 맨 더보기…

요구사항 키보드와 마우스를 이용해서 추천 검색어를 선택할 수 있도록 합니다. esc를 누르면 추천 검색어 창이 닫여야 합니다. 키보드의 위, 아래 키를 누르면 추천 검색어 하이라이트가 옮겨지고 엔터를 누르면 하이라이트가 위치한 검색어가 입력창에 반영되어야 합니다. 마우스로 다른 곳을 클릭하여 input이 focus를 잃어버리는 경우 추천 검색어 창이 닫여야 합니다. 마우스로 추천 검색어를 더보기…

참고 글: 자바스크립트 lodash: debounce와 throttle을 이용하여 함수의 실행 횟수 제한   debounce: 동일 이벤트가 반복적으로 시행되는 경우 마지막 이벤트가 실행되고 나서 일정 시간(밀리세컨드)동안 해당 이벤트가 다시 실행되지 않으면 해당 이벤트의 콜백 함수를 실행합니다. throttle: 동일 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격(밀리세컨드)으로 콜백 더보기…