고양이 사진 검색기 만들기 요구사항 검색 키워드를 입력하면 추천 검색어 API를 이용해 추천 검색어를 보여줌 검색어 입력 후 엔터키 등의 추가 액션 없이도 검색어 목록을 보여줌 키보드 혹은 마우스로 추천 검색어 선택 가능 esc를 누르면 검색창 닫힘 키보드의 위, 아래를 누르면 추천 검색어 하이라이트가 옮겨지고 엔터를 누르면 하이라이트 처리된 검색어가 반영됨 마우스로는 클릭한 검색어가 반영됨 검색된 결과에 따라 고양이 사진이 화면에 렌더링 더보기 더보기 import App from "./App.js"; const $target = document.querySelector(".App"); new App({ $target }); 더보기 const END_POINT = "..."; export const re..

고양이 사진첩 만들기 요구사항 고양이 사진 API를 통해 사진과 폴더를 렌더링 폴더를 클릭하면 내부 폴더의 사진과 폴더를 보여줌 현재 경로가 어디인지도 렌더링 루트 경로가 아닌 경우, 파일 목록 맨 앞에 뒤로가기를 넣음 사진을 클릭하면 고양이 사진을 모달창으로 보여줌 esc를 누르거나 사진 밖을 클릭하면 모달을 닫음 API를 불러오는 중인 경우 로딩 중임을 알리는 처리 더보기 더보기 import App from "./App.js"; const $target = document.querySelector(".App"); new App({ $target }); 더보기 const API_END_POINT = "..."; export const request = async (url) => { try { const..

무한 스크롤 컨텐츠를 페이징하는 기법 중 하나로, 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식이다. 구현 방식 두 가지 window의 scroll 이벤트를 통해 스크롤이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠의 끝에 도달했는지 체크해서 처리하는 방식 intersection observer 방식 (지정한 DOM 객체가 보고 있는 시야에 닿았는지 체크) 실습 컴포넌트 구조 App - 데이터 불러오고 PhotoList 컴포넌트 생성, 불러온 데이터를 pothoList라는 이름으로 내려줌 PhotoList - 스크롤이 끝에 도달하면 onScrollEnded 콜백을 호출하는 식으로 App 컴포넌트 쪽에 제어권을 넘김 Scroll Event -..

Project Deploy 프론트엔드 프로젝트를 배포해서 서비스를 해주는 곳은 많다. 기본적으로 history API 기반의 SPA를 배포하려면 해당 서비스에서 404에러에 대해 처리할 수 있는 옵션이 필요하다. 🔎 SPA에서 뒤로가기, 새로고침 시 404 Not Found 404에러는 SPA(Single Page Application)를 사용하면 발생하는 문제이다. SPA는 일반적으로 웹 브라우저에서 액세스 할 수 있는 하나의 색인 파일(index.html)만 사용하는데 사용자가 새로고침 버튼을 누르거나 하면 url에 해당하는 html 파일을 찾으려고 한다. 예를 들어서 https://.../posts/18에서 새로고침을 하면 https://.../posts/18/index.html을 찾으려고 하는 것..

디바운싱 (debouncing) 이벤트 발생을 지연시키다가 마지막으로 이벤트가 발생하고 일정 시간이 지나면 지연했던 이벤트를 실행시키는 것이다. 이벤트 발생횟수를 줄임으로써 서버 부하를 줄여 성능 최적화에 도움이 된다. 이벤트는 setTimeout()과 clearTimeout()으로 지연시킬 수 있다. setTimeout()은 실행을 하면 양의 정수값을 반환하는데 이를 이용하여 clearTimeout()으로 초기화하는 것이 가능하다. let timer = null; new Editor({ $target, initialState: post, onEditing: (post) => { if (timer !== null) { clearTimeout(timer); } timer = setTimeout(() => ..