본문 바로가기

전체 글85

Slick Slider 깜빡임 문제 Slick Slider를 사용하여 슬라이더 구현 시 처음 이미지로 돌아갈 때마다 간헐적으로 이미지가 깜빡이는 현상이 발생했다. 아래 css 코드를 프로젝트의 GlobalStyels.js에 추가하여 해결하였다. .slick-slider .slick-track, .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition-delay: 10ms; } 2023. 6. 14.
axios request, response # request Axios를 사용하여 HTTP 요청을 보내고 원하는 데이터를 서버에 전달하는 방법은 다음과 같다. 1. axios.post() 메소드를 사용하여 HTTP POST 요청을 보낸다. 이때, 첫 번째 매개변수로 요청을 보낼 URL을 전달하고, 두 번째 매개변수로는 보낼 데이터를 전달한다. axios.post('/api/data', { key1: 'value1', key2: 'value2' }) 2. HTTP POST 요청의 본문에 포함될 데이터는 두 번째 매개변수로 전달한다. 데이터는 객체 형태로 전달하며, 객체의 프로퍼티 이름이 데이터의 키(key)가 되고, 프로퍼티 값이 데이터의 값(value)이 된다. 3. 만약, 데이터를 JSON 형식으로 보내고 싶다면, Content-Type 헤더를.. 2023. 5. 8.
인증/인가(쿠키, 세션, 토큰, JWT) # 인증&인가 (1) 인증(Authentication) vs. 인가(Authorization) 인증(Authentication)이란 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다. 인가(Authorization)이란 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다. Quiz: 유저가 마이페이지에서 서버에 API 요청으로 개인정보를 받아오는 요청을 할 때, 서버는 클라이언트에게 인증을 해줄까? 아니면 인가를 해줄까? (A. 인가) (2) http 프로토콜 통신의 특징 2가지 1. 무상태 (Stateless) : 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다. 상태값은 매 요청마다 클라이언트가 가지고 오기.. 2023. 5. 1.
throttling & debouncing # Throttling & Debouncing이란? 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법인 쓰로틀링과 디바운싱에 대해 알아보자. Timer Web API 중 setTimeout 메소드를 사용하여 쓰로틀링과 디바운싱을 각각 구현해보고 원리를 이해하고 적용하는 것이 목표이다. # Throttling 이란? 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것 주로 사용되는 예: 무한스크롤 # Debouncing 이란? 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도.. 2023. 5. 1.