Javascript

• history API로 SPA 구현

  history API브라우저는 페이지 로딩 시 세션 히스토리를 갖는다.세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지를 이동할 수 있다.`history.back()`: 브라우저의 '뒤로' 버튼과 같은 역할. 세션 기록에서 한 단계 이전 페이지로 이동`history.forward()`: 브라우저의 '앞으로' 버튼과 같은 역할. 세션 기록에서 한 단계 다음 페이지로 이동`history.go(n)`: 현재 위치에서 상대적으로 n페이지 만큼 앞이나 뒤로 이동. n이 음수일 경우 n 페이지..

  2024.06.24 19:40

  

• Debounce & Throttle

  Debounce & Throttle이벤트 오버클럭(overclock - 과도한 이벤트 발생)은 리소스 사용량을 증가시키기 때문에 성능문제를 야기하고 사용자 경험을 떨어트립니다.과도한 이벤트나 함수들의 빈도수를 줄여서 성능을 향상시키는 프로그래밍 기법 중, 자주 언급되는 두 가지를 알아봅니다. Debounce와 Throttle은 둘 다 함수의 연속적인 실행을 제한하는 목적을 가지고 설계되었습니다.그 중 `Debounce`는 특정 기간 동안 함수의 실행을 모두 취소하고, 마지막 실행만 수행합니다.반대로 `Throttle`은 함수 실행 후 특정 기간 동안 추가적인 함수의 재실행을 모두 취소합니다.이 둘은 매우 비슷해 보이지만 서로 다른 특성을 갖고 있는, 정해진 시간 동안 얼마나 많은 함수의 실행을 허가할 것..

  2024.05.23 15:09

  

• 단축평가 논리연산자 && ||, null병합 ??, 옵셔널체이닝 ?

  단축평가논리합 `||`, 논리곱 `&&` 연산자는 왼쪽부터 오른쪽으로 평가를 진행하는데,중간에 평가 결과가 나오면 오른쪽 끝까지 가지 않고 평가 결과를 반환해버린다.논리합, 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한 쪽으로 평가된다. 이를 단축평가(Short Circuit Evaluation)라고 하며, 피연산자의 타입을 고려하지 않고 그대로 반환한다. 단축 평가를 활용하면 아래와 같은 코드가 가능해진다."apple" || "banana"; // "apple""apple" && "banana"; // "banana"  논리합 ( || , A or B)A가 `true`면 A를 반환한다.논리합 연산자는 두 피연산자 중 하나만 `true`여도 `true`를 반환한다.따라서 앞의 항 A의 값..

  2024.05.14 17:03

  

• Element: insertAdjacentHTML()

  insertAdjacentHTML()인터페이스의 insertAdjacentHTML() 메서드는 지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입합니다. SyntaxinsertAdjacentHTML(position, text) position요소와 상대적인 위치를 나타내는 문자열입니다. 다음 문자열 중 하나여야 합니다.beforebegin요소 이전에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다.afterbegin요소 바로 안에서 처음 자식 이전에 위치합니다.beforeend요소 바로 안에서 마지막 자식 이후에 위치합니다.afterend요소 이후에 위치합니다. 오직 요소가 DOM..

  2024.04.15 10:50

  

Publishing

• 

  SCSS

  SCSSSASS (Synthetically Awesome StyleSheets)SCSS는 Sass로부터 등장했습니다. Sass는 CSS 전처리기로서 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공합니다.전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행시킬 수 있습니다. SCSS는 Sass3 버전부터 새롭게 등장했습니다. SCSS는 Sass의 모든 기능을 지원하는 Superset 입니다.게다가 SCSS는 CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있습니다. Sass와 SCSS의 차이점Sass: 중괄호가 아닌 들여쓰기 사용SCSS: CSS처럼 `{}`와 `;` 을 사용 1. DataTypesSCSS는 다양한 데이터 타입을 정의하고 있어 이를 변수처럼 활용할 수 있습니다.type  ..

• 

  CSS | backdrop-filter

  backdrop-filter해당 요소에 블러 처리되는 `filter: blur()`와 달리 요소의 배경 영역에 블러 처리가 된다.`backdrop-filter` CSS 속성을 사용 하면 요소 뒤 배경 영역에 흐림이나 색상 변경과 같은 그래픽 효과를 적용할 수 있다. 이는 요소 뒤에 있는 모든 것에 적용되므로 효과를 보려면 요소나 배경이 투명하거나 부분적으로 투명해야 한다. 사파리 에서는 vender prefix와 함께 사용해야 한다. `-webkit-backdrop-filter`    See the Pen [css]backdrop-filter3 by miok song (@miok-song) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 Syntax..

• 

  Media Queries Breakpoints For Responsive Design In 2023

  Using min-width // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } Using max-width @media (max-width: 575.98px) { ... } // ..

• 

  iPhone overscroll, user-scale 제어

  css *, *:before, *:after{-webkit-box-sizing: border-box; box-sizing: border-box; outline:none; -webkit-tap-highlight-color:transparent !important; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; overscroll-behavior-y:none; touch-action: pan-x pan-y;}

Popular

• 맥북 (Mac OS) M2 톰캣 설치하기

  1. 톰캣 설치아파치 톰캣 사이트에 접속합니다.https://tomcat.apache.org/ 페이지 왼쪽의 `Download` 카테고리에서 다운로드 할 톰캣 버전을 클릭합니다.내게 맞는 톰캣 버전을 찾는 방법 참고: https://itworldyo.tistory.com/88  `Binary Distributions` 항목에서 `tar.gz` 파일을 클릭 해 다운로드 합니다.  저장 경로를 설정하고 `저장` 버튼을 클릭합니다.다운로드가 시작됩니다.   설치 된 `tar.gz` 파일을 더블 클릭하여 압축을 해제 합니다.  2. 톰캣 실행  `Finder`에서 톰캣이 설치된 경로로 접속합니다.키보드에서 `command` + `option` + `c` 를 동시에 눌러 경로를 복사합니다.  터미널을 실행합니다...

  more
  

• history API로 SPA 구현

  history API브라우저는 페이지 로딩 시 세션 히스토리를 갖는다.세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지를 이동할 수 있다.`history.back()`: 브라우저의 '뒤로' 버튼과 같은 역할. 세션 기록에서 한 단계 이전 페이지로 이동`history.forward()`: 브라우저의 '앞으로' 버튼과 같은 역할. 세션 기록에서 한 단계 다음 페이지로 이동`history.go(n)`: 현재 위치에서 상대적으로 n페이지 만큼 앞이나 뒤로 이동. n이 음수일 경우 n 페이지..

  more
  

Latest List

• 

  맥북 (Mac OS) M2 톰캣 설치하기

  1. 톰캣 설치아파치 톰캣 사이트에 접속합니다.https://tomcat.apache.org/ 페이지 왼쪽의 `Download` 카테고리에서 다운로드 할 톰캣 버전을 클릭합니다.내게 맞는 톰캣 버전을 찾는 방법 참고: https://itworldyo.tistory.com/88  `Binary Distributions` 항목에서 `tar.gz` 파일을 클릭 해 다운로드 합니다.  저장 경로를 설정하고 `저장` 버튼을 클릭합니다.다운로드가 시작됩니다.   설치 된 `tar.gz` 파일을 더블 클릭하여 압축을 해제 합니다.  2. 톰캣 실행  `Finder`에서 톰캣이 설치된 경로로 접속합니다.키보드에서 `command` + `option` + `c` 를 동시에 눌러 경로를 복사합니다.  터미널을 실행합니다...

  2024.09.03 15:02

• 

  history API로 SPA 구현

  history API브라우저는 페이지 로딩 시 세션 히스토리를 갖는다.세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지를 이동할 수 있다.`history.back()`: 브라우저의 '뒤로' 버튼과 같은 역할. 세션 기록에서 한 단계 이전 페이지로 이동`history.forward()`: 브라우저의 '앞으로' 버튼과 같은 역할. 세션 기록에서 한 단계 다음 페이지로 이동`history.go(n)`: 현재 위치에서 상대적으로 n페이지 만큼 앞이나 뒤로 이동. n이 음수일 경우 n 페이지..

  2024.06.24 19:40

• 

  iOS input focus, buffer

  한글은 자음, 모음으로 구성된다. iOS에서 input 에 있는 value를 'X' 버튼 등으로 한번에 삭제하고 다시 input에 focus를 주려고 할 때,input에 입력되어 있던 문자가 한글이고, 마지막 문자가 받침이 없는 문자였다면,문자를 재입력 했을 때 남아있던 버퍼가 함께 보여지게 된다.'오늘날씨' 입력 후X 버튼 클릭응로 value 삭제input에 focus가 옮겨지고 '내일날씨'를 입력이런 경우에 input value에는 '내일날씨'가 입력되어 있는게 아니라, 남아있던 buffer로 인해 '씨내일날씨'가 입력되게 된다. 이 문제는, input에 focus를 주기 전, 다른 input을 생성해 그곳에 먼저 focus를 줬다가, 검색 input에 다시 focus를 줘서 buffer를 삭제해줘야..

  2024.06.12 21:02

• 

  images Loaded

  imagesLoadedimagesLoaded Plugin을 사용하면 이미지의 로딩 여부를 체크하여 이벤트를 발생시킬 수 있습니다.  CDNNPM$ npm install imagesloaded$ yarn add imagesloaded Syntaximageconst init = () => { // image loading이 끝나면 실행 할 함수};const imgs = [...document.querySelectorAll("img")]; // Array like ==> Arrayconst loader = document.querySelector(".loader--text");const updateProgress = (instance) => { const per = Math.round((instance.p..

  2024.05.29 14:44

• 

  callback, eventCallback

  callback, eventCallback`onComplete`, `onUpdate`, `onStart`, `onRepeat` 의 이벤트 콜백을 가져오거나 설정한다.eventCallback(type:String, callback:Function, params:Array)  ParametersParameters type: String이벤트 콜백 유형은 `"onComplete"`, `"onUpdate"`, `"onStart"`, `"onRepeat"` 이며, 대소문자를 구분한다.callback: Functiondefault: `null`이벤트가 발생했을 때 호출되는 함수params: Arraydefault: `null`콜백 함수에 전달하기 위한 매개변수 배열  Returns: [Function | self]..

  2024.05.28 15:00