자바스크립트/library (4) 썸네일형 리스트형 SwiperSlide에 이미지나 영상을 넣었을 때 여백이 발생하는 문제 해결 방법 Swiper 라이브러리를 이용하면 슬라이더를 쉽게 구현할 수 있다. 여기에서 어떤 게 되는지 확인해보자. Swiper라는 컴포넌트를 부모로 하고 SwiperSlide를 여럿 자식으로 넣어 슬라이드 되게 한다. 그러나 SwiperSlide에 이미지나 동영상을 넣었을 경우 ios 모바일에서 오른쪽 패딩이 생기는 문제가 발생했다. 화면당 하나가 오도록 설정했고 (slidePerView = 1) 이대로라면 하나의 SwiperSlide가 뷰포트의 width를 꽉 채워야만 하는데 말이다. 문제는 SwiperSlide의 width를 계산하는 로직에 있었다. 실험해보니 브라우저의 viewport가 resize될 때 SwiperSlide width의 CSS 값을 변경하는 것을 확인했다. 이미지나 영상을 다 다운 받기 전.. 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.. 이전 1 다음
