본문 바로가기

FrontEnd/HTML5 & CSS & JavaScript28

[JavaScript] Axio GET에서 파라미터로 배열을 전송하는 방법 문제상황 Axios에서 GET 메소드로 아래와 같은 배열을 전달하면, request URL은 어떻게 될까? import axios from 'axios'; const arrayToSend = [1, 2, 3, 4, 5]; axios .get("https://example.com/api/data", { params: { test: arrayToSend } }) .then((response) => { console.log(response.data); }) .catch((error) => { console.error(error); }); https://example.com/api/data?test=[1,2,3,4,5]? HTML 삽입 미리보기할 수 없는 소스 위 CodeSandbox로 앱을 열어보면, 네트워크.. 2023. 7. 24.
[HTML/CSS] 쉐도우 돔(Shadow DOM) 내부에서 @font-face가 동작하지 않는 이슈 Shadow DOM이란? 이전 글 참고 [HTML/CSS] 쉐도우 돔(Shadow DOM)으로 스타일 충돌 해결하기 코드로 알아보는 CSS 충돌 다음과 같이 header 컴포넌트(header.vue)와 header 컴포넌트를 사용하는 content(index.vue)영역이 있다. index.vue content의 tittle ... index.css body { width: 100%; height: 100%; } header.vue header ti doqtqu.tistory.com @font-face란? 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있는 CSS at role이다. 간단하게 아래와 같이 사용이 가능하다. @font-face { font-family: ; src: [.. 2023. 6. 30.
[HTML/CSS] 쉐도우 돔(Shadow DOM)으로 스타일 충돌 해결하기 코드로 알아보는 CSS 충돌 다음과 같이 header 컴포넌트(header.vue)와 header 컴포넌트를 사용하는 content(index.vue)영역이 있다. index.vue content의 tittle ... index.css body { width: 100%; height: 100%; } header.vue header tittle header에 글자 색상을 회색으로 바꾸고 싶어서 아래와 같이 header.css를 코드를 수정하면 어떻게 될까? header.css h3 { margin: 0 10px; color: gray; } #header { margin: 0; width: 1000px; height: 50px; background-color: black; display: flex; flex.. 2023. 5. 6.
[JavaScript] reduce를 사용하여 순차적으로 프로미스 실행시키기 Promise.all() Promise.all()은 여러 개의 비동기 작업을 병렬(순서를 보장하지 않음)로 실행시키는 경우 사용된다. 여러 개를 동시에 실행하고 가장 마지막 작업이 완료될 때 완료 상태의 프로미스를 반환한다. const myPromises = [ new Promise((resolve) => setTimeout(() => {resolve('A (slow)'); console.log('A (slow)')}, 1000)), new Promise((resolve) => setTimeout(() => {resolve('B (slower)'); console.log('B (slower)')}, 2000)), new Promise((resolve) => setTimeout(() => {resolve(.. 2023. 1. 28.
[css] 모바일 환경(터치 스크린)에서의 hover 이슈 스마트폰과 태블릿과 같은 터치 디바이스에서는 PC와 다르게 hover가 적용되지 않는다. 따라서, 반응형 작업을 하다보면 등록되어 있는 hover css로 인해 여러가지 사이드 이펙트가 일어날 수 있다. 예를 들어, 태블릿의 가로모드는 PC뷰 세로모드는 모바일뷰를 가지는 서비스가 있다고 할 때 가로모드에서 hover 이벤트를 발생 시키고 세로모드에서 동작 후 가로모드로 돌아오면 hover 이벤트가 살아있다거나.. 터치 시에 동작하는 이벤트 순서는 아래와 같다. touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click 마우스가 존재하지는 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 함께 발생한다. 터치 인터페이.. 2022. 9. 20.
[JavaScript] Proxy 객체란? Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다. Proxy는 다양한 라이브러리와 몇몇 브라우저 프레임워크에서 사용되고 있다. Syntax new Proxy(target, handler); target : 기본 동작을 가로챌, 즉 감싸게 될 객체로 함수를 포함해서 모든 객체가 가능하다. handler :동작을 가로채는 메서드인 'trap'을 가지고 있는 객체로, 여기에서 프록시를 설정한다. proxy에 작업이 가해지고, handler에 작업과 상응하는 트랩이 있으면 트랩이 실행되어 proxy가 이 작업을 처리할 기회를 얻게 된다. 트랩이 없으면 .. 2022. 5. 6.
반응형

티스토리툴바