JavaScript

브라우저 탭간 통신하는 3가지 방법

챗 지피티로 작성해봤다. 나보다 더 잘 쓰는 것 같다.웹 애플리케이션 개발에서 여러 브라우저 탭 간의 통신은 매우 중요한 요소입니다. 사용자 경험을 향상시키고 실시간 데이터를 동기화하는 데 필수적입니다. 오늘은 브라우저 탭 간 통신을 위한 세 가지 방법인 broadcastMessage, window.postMessage, 그리고 storage 이벤트에 대해 살펴보겠습니다.1. broadcastMessage의 이해1.1. broadcastMessage란?broadcastMessage는 여러 탭 또는 윈도우 간에 메시지를 전송할 수 있는 API입니다. 이 방법은 동일한 출처의 모든 탭에 메시지를 전달할 수 있어 실시간 업데이트가 필요한 애플리케이션에서 유용하게 사용됩니다.1.2. 사용 예시사용자가 한 탭에서..

동시 여러 개의 토큰 리프레시 요청 관리하기

현재 프로젝트에서 JWT 인증 방식을 사용 중이다.api는 공통 클라이언트를 둬서 관리하고, api 응답코드가 401일 경우 토큰 재발급 요청을 보낸다.한 페이지에서 여러 개의 api 요청을 날리는 경우에, 토큰 재발급 요청이 여러개 날아가면서 토큰이 꼬이게 되는 문제가 있었다.이 문제를 api 공통 클라이언트가 1개의 토큰 재발급 요청 프로미스를 공유하도록 해서 해결했다.기존 코드동시에 여러번 재발급 요청...// api 공통 클라이언트if ([401].includes(response.status)) { const accessToken = await reissueToken() // 후처리}// 토큰 재발급asnyc function reissueToken() { // 생략 return fe..

디바운스와 쓰로틀

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

Vanila Js로 사진첩 사이트 만들기

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

Vanila Js로 SPA 만들기 - 리팩토링

링크 : 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 함수를 따로 만들어서 분리했다...

Vanila Js로 SPA 만들기

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