프론트엔드/JavaScript, TypeScript

단시간에 많은 양의 이벤트가 발생하면 해당 이벤트핸들러가 너무 많이 실행되서 성능상의 문제가 발생할 수 있다. 디바운스와 쓰로틀을 활용해 이러한 문제를 해결할 수 있다. 디바운스 단기간에 많은 양의 이벤트가 발생할 때 마지막 이벤트에서만 (사용자 조작이 끝났을 때) 콜백 함수를 실행시킨다. let timer document.addEventListener('scroll', () => { if(timer) clearTimeout(timer) timer = setTimeout(() => { console.log('마지막에만 실행!) },400) }) 활용 사용자가 회원가입 할 때 아이디 중복체크를 자동적으로 해주는 경우가 있다. 사용자가 입력할 때 input에 change 콜백을 줘서 서버에 중복체크 요청을 ..

링크: https://programmers.co.kr/skill_check_assignments/100 개요 사진첩 사이트를 구현했다. 앱 기동시 root 디렉토리의 폴더,파일들이 렌더링되고 breadcrumb에 경로가 표시된다. 폴더를 클릭해서 해당 폴더를 볼 수 있고, 파일을 클릭시 이미지를 볼 수 있다. 이미지창은 ESC 혹은 이미지 밖 클릭 시 닫을 수 있다. breadcrumb의 경로를 클릭 시 해당 경로로 이동한다. 데이터 로딩 시에 로딩 UI가 보여지고 로딩이 끝나면 없어진다. 추가 요구사항 UI 요소는 컴포넌트화, 각 컴포넌트가 의존성을 지니지 말 것 API 호출 중 에러가 발생했을 때의 처리 , 사용자에게 인지시킬 것 ES6 모듈 형태로 작성 API 호출은 fetch로 , async aw..

링크 : https://hyunwoo12.tistory.com/3 기존 코드는 위에서 볼 수 있다. 위 링크의 리뷰한 사항을 바탕으로 리팩토링을 진행했다. 1,2) 라우팅 담당하는 부분을 기존 index.js 에서 router.js로 분리하기 router.js function Router() { this.route = () => { // 기존과 동일 } this.setUrl = (url) => { history.pushState(null, null, url); this.route(); } window.addEventListener('popstate', this.route) } const router = new Router(); export { router }; Router 함수를 따로 만들어서 분리했다...

링크: https://programmers.co.kr/skill_check_assignments/199 개요 Vanila JS를 사용해서 쇼핑몰 사이트를 구현했다. 상품 목록페이지에서 상품 목록을 조회할 수 있고, 상품을 클릭 시 해당 상품의 상세 페이지로 이동한다. 상품 상세페이지에서 상품의 상세 정보를 조회할 수 있고, 상품의 옵션을 선택한 후 주문하기를 클릭하여 장바구니에 담을 수 있다. 장바구니 페이지에서 장바구니 에 담은 상품들을 조회할 수 있고, 주문하기 버튼을 클릭하여 해당 상품들을 주문할 수 있다. 라우팅 기본 - 주소에 따라 다른 화면 보이기 먼저, 주소에 따른 앱 내부를 해당 페이지로 변경하는 render 함수를 만들었다. 그 다음에 location의 pathname을 활용해서 주소가 ..