티스토리

WISDOM
검색하기

블로그 홈

WISDOM

doqtqu.tistory.com/m

이것저것 IT 개발 관련 정리

구독자
31
방명록 방문하기

주요 글 목록

  • [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로 앱을 열어보면, 네트워크.. 공감수 0 댓글수 0 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: [.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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(.. 공감수 0 댓글수 0 2023. 1. 28.
  • [css] 모바일 환경(터치 스크린)에서의 hover 이슈 스마트폰과 태블릿과 같은 터치 디바이스에서는 PC와 다르게 hover가 적용되지 않는다. 따라서, 반응형 작업을 하다보면 등록되어 있는 hover css로 인해 여러가지 사이드 이펙트가 일어날 수 있다. 예를 들어, 태블릿의 가로모드는 PC뷰 세로모드는 모바일뷰를 가지는 서비스가 있다고 할 때 가로모드에서 hover 이벤트를 발생 시키고 세로모드에서 동작 후 가로모드로 돌아오면 hover 이벤트가 살아있다거나.. 터치 시에 동작하는 이벤트 순서는 아래와 같다. touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click 마우스가 존재하지는 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 함께 발생한다. 터치 인터페이.. 공감수 2 댓글수 0 2022. 9. 20.
  • [JavaScript] Proxy 객체란? Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다. Proxy는 다양한 라이브러리와 몇몇 브라우저 프레임워크에서 사용되고 있다. Syntax new Proxy(target, handler); target : 기본 동작을 가로챌, 즉 감싸게 될 객체로 함수를 포함해서 모든 객체가 가능하다. handler :동작을 가로채는 메서드인 'trap'을 가지고 있는 객체로, 여기에서 프록시를 설정한다. proxy에 작업이 가해지고, handler에 작업과 상응하는 트랩이 있으면 트랩이 실행되어 proxy가 이 작업을 처리할 기회를 얻게 된다. 트랩이 없으면 .. 공감수 1 댓글수 0 2022. 5. 6.
  • [JavaScript] 한글 키보드 입력 시 이벤트가 두 번 호출되는 경우 문제상황 Ant Design의 Input에 onPressEnter를 사용하는 중 위와 같은 문제가 발생했다. 텍스트를 입력하고 엔터를 누르면 Select의 옵션 값으로 추가가 되도록 구현했는데, 함수가 두 번씩 호출되어 텍스트의 마지막 글자가 옵션값에 추가가 되어버렸다. 해결 방법 onKeyDown/onKeyUP 그리고 onKeyPress onKeyDown, onKeyUp 키를 누르고 떼는 동작 자체에 반응 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter를 인식하고 한/영, Print Screen은 인식하지 못함 onKeyPress 위와 달리 문자가 실제로 입력됐을 때 반응 따라서 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Sc.. 공감수 5 댓글수 2 2022. 5. 2.
  • HTTP/1.1과 HTTP/2 HTTP/1.1 HTTP/1.1의 동작방식 - 기본적으로 Connection당 하나의 요청을 처리하도록 설계 - 동시전송이 불가능하고 요청과 응답이 순차적으로 진행 - HTTP 문서 안에 포함된 다수의 리소스(Images, CSS, Script)를 처리하려면 요청할 리소스 개수에 비례해서 Latency(대기 시간) 증가 HTTP1.1의 단점 HOL(Head Of Line) Blocking : 특정 응답의 지연 HTTP/1.1의 connection당 하나의 요청처리를 개선할 수 있는 기법 중 pipelining이 존재한다. 이것은 하나의 connection을 통해 다수 개의 파일을 요청/응답 받을 수 있는 기법을 말하는데 이 기법을 통해서 어느 정도의 성능 향상이 가능하나 큰 문제점이 하나 있다. 하나의 .. 공감수 2 댓글수 0 2022. 4. 4.
  • [JavaScript] Function의 call과 invoke 차이 일부 문맥에서는 call과 invoke를 동일한 것으로 취급한다. 하지만 의미를 의도적으로 구분하는 경우, invoke는 간접적인 함수의 호출을 의미한다. fn(); // I'm calling it fn.call(); // I'm calling it fn.apply(); // I'm calling it JavaScript 함수는 fn()과 같이 직접 호출(call) 될 수 있고, fn.call(), fn.apply()와 같이 간접 호출(invoke)될 수도 있다. 두 경우 모두 함수 호출이지만, 직접 호출(call)은 말 그대로 함수를 직접 호출 하는 것이나 간접 호출(invoke)은 어딘가에 레퍼런스를 유지한 다음 간접 호출된다. 그래서 간접 호출(invole)는 보통 익명함수, 클로저, 델리게이트 등.. 공감수 2 댓글수 0 2022. 1. 24.
  • [TypeScript] Type Alias vs Interface Type Alias 똑같은 타입을 한 번 이상 재사용하거나 또 다른 이름으로 부르고 싶은 경우 사용하며, Type에 대한 Alias(이름, 별칭)을 제공한다. Type Alias의 구문은 아래와 같다. type Point = { x: number; y: number; }; function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } printCoord({ x: 100, y: 100 }); Type Alias를 사용하면 객체 타입뿐만이 아니라 모든 타입에 대해서 새로운 이름을 부여할 수 있다. 예를 들어, 아래와 같이 유.. 공감수 1 댓글수 0 2022. 1. 21.
  • [JavaScript] 프로토타입 상속(inheritance) 상속이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미한다. 상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있으며, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있다. 따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 된다. 하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어이다. 프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다르다. 자바스크립트에서는 현재 존재하고 있는 .. 공감수 0 댓글수 0 2022. 1. 19.
  • [JavaScript] .map(), .filter(), .reduce() API 비교 JavaScript의 함수형 프로그래밍은 코드 가독성, 유지 관리 및 테스트에 이점이 있다. 함수형 프로그래밍 사고 방식에 도움이 되는 것 중 하나는 배열 처리 스타일 프로그래밍이다. 배열 처리 스타일 프로그래밍은 배열을 기본 데이터 구조로 사용하며, 배열의 요소에 대한 일련의 작업이 가능하다. forEach : 배열의 항목에 접근 for 루프는 배열의 모든 항목을 접근, 반복하는데 사용된다. forEach 역시 같은 역할을 하지만, for문 보다 더 간단하게 접근이 가능하다. const strings = ['arielle', 'are', 'you', 'there']; const capitalizedStrings = []; for (let i = 0; i < strings.length; i += 1) {.. 공감수 1 댓글수 0 2022. 1. 18.
  • 웹 접근성과 시맨틱 마크업 시맨틱 마크업 시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 작성 방법 시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다. 헤더/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일.. 공감수 0 댓글수 0 2022. 1. 17.
  • [JavaScript] 자바스크립트 비동기 처리 비동기 프로그래밍의 개념 비동기적 일반적으로 주어진 프로그램의 코드는 한 번에 한 가지만 발생하면서 곧바로 실행된다. 함수가 다른 함수의 결과에 의존하는 경우 다른 함수가 완료되고 반환될 때까지 기다려야하므로, 전체 프로그램이 중지된다. (동기적) Blocking Code 비동기 기술은 특히 웹 프로그래밍에서 매우 유용하다. 웹 앱이 브라우저에서 실행되고 브라우저에서 제어를 반환하지 않고 큰 크기의 코드를 실행하면 브라우저가 정지된 것처럼 보일 수 있다. 이것을 Blocking이라고 한다. 브라우저는 웹 앱이 프로세서의 제어를 반환할 때까지 계속해서 사용자 입력을 처리하고 다른 작업을 수행하지 못하도록 차단된다. 스레드 스레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 하나의 과정으로, 각.. 공감수 0 댓글수 0 2022. 1. 5.
  • [JavaScript] 이벤트 버블링과 캡처링, 그리고 이벤트 위임 버블링(Bubbling) 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. FORM DIV P 가장 안쪽의 를 클릭하면 p -> div -> form 순서로 alert창이 뜬다. 이런 흐름을 "이벤트 버블링"이라고 부른다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문이다. 거의 모든 이벤트는 버블링된다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있다. 버블링 되지 않는 이벤트의 종류에 대해서는 아래에서 설명한다. 몇몇 이벤트를 제외하곤 대부분의 이벤.. 공감수 0 댓글수 0 2022. 1. 4.
  • [JavaScript] 4가지의 바인딩과 화살표 함수 JavaScript에서의 this JavaScript에서 this는 자기 자신을 가리키지 않는다. JavaScript에서 함수는 모두 객체이기 때문에 내장된 프로퍼티, 메서드를 가질 수 있다. 따라서 특정 상태값을 유지/접근하기 위해 함수 내부에서 this를 사용할 것이다. 이러한 방법도 가능하지만, this를 이해하지 못하고 사용하면 잘못된 결과를 얻을 수 있다. 아래 예시를 참고하자. function foo(num) { console.log("foo: " + num); this.count++; } foo.count = 0; for(let i = 0; i < 10; i++) { if(i < 5) { foo(i); } } console.log(foo.count); console.log(count); //.. 공감수 0 댓글수 0 2022. 1. 4.
  • 쿠키 vs 세션 vs 웹 스토리지(로컬 스토리지, 세션 스토리지) HTTP 프로토콜의 한계를 보안하기 위해 쿠키 또는 세션을 사용한다. 기본적으로 HTTP 프로토콜 환경은 비연결지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로 서버는 클라이언트를 구별할 수 없다. 비연결성지향(connectionless) HTTP는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다. HTTP 1.1에서는 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용한다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 쿠키(Cookie) 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일이다. 클.. 공감수 3 댓글수 2 2022. 1. 2.
  • [jQuery] 반응형 슬라이드 배너 만들기 슬라이드 배너를 구현하던 중 반응형 UI를 적용하기 위해 여러가지 방법을 시도했지만, 창의 크기 변화에 즉각적으로 반응하도록 구현하는 것이 쉽지 않았다. 해결을 위해 서치를 하던 중 좋은 방법을 찾았는데, 바로 css animation keyframe을 이용하는 방법이다. @keyframes을 이용해 진행율 별 animation을 다르게 지정한다. 전체를 10초 동안 진행하되 무한반복 옵션에서(10s infinite) 배너로 추가할 이미지가 4개인 경우, 이미지를 2초동안 보여주며, 다음 이미지로 넘어가는 시간은 0.5초로 잡을 수 있다. 이 경우, 0%~20% margin-left:0 [이미지 1을 2초간 보여준다.] 20%~25% margin-left:-100% [이미지 1에서 2로 넘어간다(0.5초.. 공감수 0 댓글수 0 2021. 10. 8.
  • [JavaScript] 함수의 스코프와 클로저 스코프(Scope, 유효범위) 스코프란? 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)을 찾아내기 위한 규칙이다. 자바 스크립트는 이 규칙대로 식별자를 찾는다. 프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있다. 변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있다. 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 갖는다. 만약 스코프가 없다면 어떻게 될까? 스코프가 없다면 같은 식별자 이름은 충돌.. 공감수 0 댓글수 0 2021. 9. 28.
  • [JavaScript] 가격 표시하기(천 단위 콤마 포맷) JavaScript로 RegExq를 사용해 1,110,000과 같은 천 단위마다 콤마(,) 표시를 해주는 문자열을 만들어본다. 1. 소수점 없는 정수에 천 단위 콤마 표시 // 1,234,567,890 var original = "1234567890"; var fomatting = original.replace(/\B(?=(\d{3})+(?!\d))/g, ","); 정규식 패턴은 / / 안에 작성한다. \B(?=(\d{3})+(?!\d)) 가 정규식 구문이며, 아래와 같은 조건을 가진다. 1. \B(): 뒷 부분이 괄호 안의 조건을 만족하는 문자열 단어 경계 불일치, \b(단어 경계 일치)의 반대개념 \B가 앞에 붙는 경우 (ex. \Bpo , [=po\b]) pop kpo po \B가 뒤에 붙는 경우 .. 공감수 1 댓글수 0 2021. 7. 13.
  • [HTML5] canvas를 이용한 Image Crop HTML5의 canvas를 이용해서 이미지의 특정 부분을 Crop 한다. 이미지에 crop할 범위를 그리는 방법은 이전 게시물을 참고한다. 이미지를 Crop 알고리즘은 다음과 같다. 1. 이미지에서 x(이미지의 LeftTop을 기준으로 Crop 범위의 LeftTop x 좌표), y(이미지의 LeftTop을 기준으로 Crop 범위의 LeftTop y 좌표), width(Crop 범위 사각형의 width), height(Crop 범위 사각형의 Height)를 구한다. 2. Crop한 이미지를 그릴 after div에 canvas Element를 새로 만들어준다. 3. 1번의 정보를 이용해 after div canvas에 image를 그려준다. ※참고 canvas.getContext('2d').drawImag.. 공감수 5 댓글수 2 2021. 2. 27.
  • [HTML5] canvas에 마우스로 사각형 그리기 마우스로 사각형을 그리기 위해서, HTML5 canvas를 이용해본다. mousedown시에는 마우스 클릭상태를 on으로 변경하며, 사각형의 시작 x, y 좌표를 얻고, mousemove시 클릭 상태라면, 시작 x, y와 현재 마우스 point를 사용해 사각형을 그리고, mouseup시에는 마우스 클릭상태를 off로 변경한다. 공감수 1 댓글수 0 2021. 2. 26.
  • [HTML5] track 태그 속성 사용하여 Video 자막 추출하기 HTML5 태그에서 속성을 이용해서 현재 재생중인 자막의 텍스트를 불러올 수 있다. 우선 자막 텍스트를 추출하기 위해 알아야할 함수는 다음과 같다. HTMLMediaElement.textTracks Media 내부에 선언된 객체의 순서를 지켜 순서대로 TextTrack을 반환하는 함수이다. 자막 읽기 위와 같은 코드에서 .textTracks의 반환 결과는 [track(Korean1), track(Korean2), track(Korean3)]이 된다. .textTracks의 반환 결과 : HTMLMediaElement.pause(), HTMLMediaElement.pause .pause()는 의 재생상태를 일시정지로 변경하는 메소드로 .play()와 반대되는 함수이다.(.play()는 를 재생시키는 함수).. 공감수 1 댓글수 0 2020. 2. 12.
  • [HTML5] Video Track 태그 사용하기(자막 파일 사용하기) HTML5 태그에서 태그를 이용하여 자막 파일을 영상에 사용할 수 있다. HTML5 태그 태그는 media 요소 ( 및 )의 자막, 캡션 파일과 같은 시간별 텍스트가 포함된 파일을 지정하는데 사용된다. 트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 TTML(Timed Text Markup Language) 형식을 사용해야 한다. WebVTT WEBVTT FILE 000:00:01.000 --> 00:00:02.500Hello. This is frist Subtitle. 100:00:02.500 --> 00:00:03.000It is very easy to use. 0 : 헤더, 필수 요소는 아니다.00:00:01.000 --> 00:00:02.500 : 시간으로 -->.. 공감수 3 댓글수 0 2020. 1. 31.
  • [HTML5] Video 태그 기본 속성 HTML5 이전에는 플러그인이 있는 브라우저에서만 비디오를 재생할 수 있었으나,HTML5에서는 태그를 사용하여 웹페이지에 영상을 첨부할 수 있다. Browser 지원 버전 브라우저 별 태그 지원 버전은 다음과 같다. HTML5 Video Format HTML5에서 지원하는 Video Format : MP4, WebM, OggVideo Format 역시 브라우저 별로 다르다. HTML5 Video Attributeautopaly : 자동 재생 (true, false)- true : 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작된다.- false : 사용자가 재생 버튼을 누를 때까지 재생하지 않는다. buffered : 버퍼링 범위 얻기- 미디어의 어느 시간대가 버퍼에 들어 있는지.. 공감수 2 댓글수 0 2020. 1. 30.
  • [CSS] 반응형 웹페이지 메뉴바 Mobile에서와 Desktop에서 UI가 달라지는 반응형 웹페이지 메뉴바 공감수 1 댓글수 0 2018. 7. 29.
  • [CSS] hover시 게시물을 미리 볼 수 있는 사진 효과 마우스를 올렸을 때 게시물의 제목과 세부 내용, 게시물에 달린 나머지 사진을 미리 볼 수 있는 Hover 효과 공감수 0 댓글수 0 2018. 7. 25.
  • [CSS] Hover시 객체 rotate&scale 애니메이션 공감수 0 댓글수 0 2018. 7. 24.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.