자바스크립트 (52) 썸네일형 리스트형 SwiperSlide에 이미지나 영상을 넣었을 때 여백이 발생하는 문제 해결 방법 Swiper 라이브러리를 이용하면 슬라이더를 쉽게 구현할 수 있다. 여기에서 어떤 게 되는지 확인해보자. Swiper라는 컴포넌트를 부모로 하고 SwiperSlide를 여럿 자식으로 넣어 슬라이드 되게 한다. 그러나 SwiperSlide에 이미지나 동영상을 넣었을 경우 ios 모바일에서 오른쪽 패딩이 생기는 문제가 발생했다. 화면당 하나가 오도록 설정했고 (slidePerView = 1) 이대로라면 하나의 SwiperSlide가 뷰포트의 width를 꽉 채워야만 하는데 말이다. 문제는 SwiperSlide의 width를 계산하는 로직에 있었다. 실험해보니 브라우저의 viewport가 resize될 때 SwiperSlide width의 CSS 값을 변경하는 것을 확인했다. 이미지나 영상을 다 다운 받기 전.. 리로딩하지 않으면서 브라우저의 url을 바꾸는 방법 replaceState를 쓰면 된다. 3번째 인자에 원하는 url을 넣는다. 동일한 origin에서만 가능하다고 한다. const replaceUrl = (url: string) => { window.history.replaceState(null, '', url); } 자세한 내용은 다음을 참고하자. https://developer.mozilla.org/ko/docs/Web/API/History/replaceState Axios를 이용해서 Access 토큰과 Refresh 토큰을 갱신하는 방법 로그인한 사용자를 식별하기 위해 서버는 클라이언트에게 access 토큰을 발급하고 클라이언트는 인증이 필요한 요청을 할 때마다 header에 access 토큰을 포함시켜서 보낸다. 그런데 보안의 이유로 access 토큰에는 만료 시간이 필요하고 만료된 access 토큰을 이용해서 요청을 보내면 인증이 유효하지 않다는 401 에러를 서버에서 받는다. 이 때 클라이언트는 refresh 토큰을 이용해서 access 토큰과 refresh 토큰을 갱신하고 이렇게 사용자는 지속적으로 access 토큰을 이용하여 로그인 한 상태로 서버와 통신할 수 있게 된다. 그러나 access 토큰이 언제 만료될지는 클라이언트에서 알 수 없기 때문에 요청을 보내다가 갑자기 401 에러가 떨어질 수 있고 원하는 데이터를 받을 수 없.. Moment.js 기본 설치 npm install moment 한글로 바꾸는 방법 import 'moment/locale/ko'; 사용 예제 moment('2021-12-25 10:20:30').format('YYYY년 MMMM Do a h시 mm분 ss초'); // 2021년 12월 25일 오전 10시 20분 30초 moment().format('dddd') // 오늘 날짜 // 수요일 moment 객체의 년, 월, 일, 시간, 분, 초를 number로 가져오는 방법 import moment from 'moment'; const time = moment('2021-12-25 12:00:01', 'YYYY-MM-DD hh:mm:ss'); time.year(); // 2021 (년) time.month(); // 11 (mont.. Moment.js를 이용하여 시간 차이를 구하는 방법 moment에 특정 시간을 설정하려면 아래와 같이 시간을 나타내는 규격화된 형태의 문자를 인자로 넣어야 한다. const time = moment('2021-12-24 12:00:01'); // 경우에 따라서 두 번째 인자를 추가해 첫 번째 인자의 format을 명시해주기도 해야 한다. // moment('2021-12-24 12:00:01', 'YYYY-MM-DD hh:mm:ss') 24일 12시 1초와 25일 12시 1초의 시간 차이를 구해야 한다고 해보자. 먼저 앞의 시간과 뒤의 시간을 moment로 정의해야 한다. import moment from 'moment'; const time1 = moment('2021-12-24 12:00:01'); // 24일 12시 1초 const time2 = m.. 버튼 클릭시 클립보드에 복사하는 방법 버튼을 클릭 했을 때 특정 글자를 클립보드로 복사하기 위해서는 먼저 복사하려는 글자가 담긴 엘리먼트를 불러와 엘리먼트의 textContent에 담긴 글자를 변수에 넣고 const text = document.getElementById('text').textContent; 류에서만 작동하는 select 메서드를 사용하기 위해 임시로 엘리먼트를 만들어 textarea의 textContent에 글자를 넣는다. const textarea = document.createElement('textarea'); textarea.textContent = text; 브라우저에 생성해야 select 메서드를 쓸 수 있으니 body에 append(추가)하고 document.body.append(textarea); 생성한 te.. 다른 곳을 클릭 했을 때 드롭다운 메뉴를 사라지게 하는 방법 버튼을 클릭 했을 때 드롭다운 메뉴가 나타나게 하는 것까지는 했다고 치자. 여기서 메뉴를 클릭하지 않고 다른 곳을 클릭 했을 때 드롭다운 메뉴가 사라지는 방법에 대해 다루겠다. 알고 보면 별 것 아닌데 모르면 어렵게 구현해야 한다. 1. HTML 클릭 서울 대전 대구 부산 반드시 button 엘리먼트를 써서 이벤트를 구현해야 한다. input류의 엘리먼트만 blur 이벤트가 적용되기 때문이다. (일반 엘리먼트에 blur 이벤트를 넣고 싶다면 tabindex 속성을 활용하자.) https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex blur 이벤트는 선택이 해제됐을 때 발생하는 이벤트다. 버튼을 클릭했을 때 버튼을 선택한 상태가 .. 객체 지향 프로그래밍의 4가지 특징 객체 지향의 개념을 설명할 때는 보통 아래의 4가지 특징을 설명한다. Encapsulation 객체 지향 프로그래밍을 하면 비슷한 변수와 함수를 한 곳에 모아 놓는다. 예를 들어 버튼을 만드는 객체를 정의할 때 버튼의 글자를 표시해주기 위한 변수와 버튼을 클릭했을 때 어떤 이벤트가 발생하게 하는 함수 등이 필요하다. 이 둘을 하나의 객체에 넣어준다. 객체 안에 변수와 메소드를 넣고 외부에서 접근을 못하게 막을 수도 있다. 이 두 가지 특성을 두고 객체 지향 프로그래밍은 Encapsulation(캡슐화)이라는 특징을 갖는다고 한다. Abstraction 리모콘 안의 장치는 복잡하지만 사용하는 버튼은 얼마 되지 않는다. 전원 버튼, 채널이나 볼륨을 조절하는 버튼 등이 있을 뿐이다. 리모콘 사용자는 밖에 나와.. 이전 1 2 3 4 ··· 7 다음
