본문 바로가기

분류 전체보기79

[web] authorization(인가), authentication(인증), 401, 403 error code 인증 및 권한 부여는 컴퓨터 보안, 특히 웹 응용 프로그램 및 서비스의 두 가지 필수 개념입니다. 사용자 데이터를 보호하고 리소스에 대한 액세스를 보호하며 개인 정보를 유지하는 데 도움이 됩니다. 두 개념은 서로 관련되어 있지만 서로 다른 용도로 사용됩니다. 인증: 이 프로세스는 시스템이나 리소스에 액세스하려는 사용자 또는 클라이언트의 신원을 확인합니다. 일반적으로 사용자 또는 클라이언트가 주장하는 사람인지 확인하기 위해 사용자 이름 및 암호 또는 API 토큰과 같은 자격 증명을 확인하는 작업이 포함됩니다. 권한 부여: 사용자 또는 클라이언트가 인증되면 권한 부여가 시작됩니다. 권한 부여는 사용자 또는 클라이언트의 ID, 역할 또는 권한을 기반으로 특정 리소스에 대한 액세스 권한을 부여하거나 거부하는 프.. 2023. 4. 7.
[event] window.matchMedia - mobile detecting: 모바일 확인 하기 + React Hook 1. javascript window.innerWidth and window.innerHeight: to get size of mobile device navigator.userAgent : To check if a device is a mobile device function isMobileDevice() { const userAgent = navigator.userAgent; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); } function getScreenSize() { const width = window.innerWidth || document.documentElement.client.. 2023. 4. 6.
[sort] Quick sort, 퀵 소트- 1 pivot function quickSort(arr) { quickSortRecursivley(arr, 0, arr.length - 1); return arr; } function quickSortRecursivley(arr, s, e) { if (s >= e) return; const pivotIndex = partition(arr, s, e); quickSortRecursivley(arr, pivotIndex + 1, e); quickSortRecursivley(arr, s, pivotIndex - 1); } function partition(arr, s, e) { let pivot = e; let left = s; let right = e; let pointer = left; let pivotNumber = .. 2023. 4. 5.
[Quill] 툴바에 호버 시 tooltip 보여주기 import Quill from "quill"; interface TooltipOptions { tooltips?: { [key: string]: string }; } class TooltipModule { private quill: Quill; private options: TooltipOptions; constructor(quill: Quill, options: TooltipOptions = {}) { this.quill = quill; this.options = options; // Set default tooltips if not provided if (!this.options.tooltips) { this.options.tooltips = { bold: 'Bold', italic:.. 2023. 4. 5.
[Quill] link에 https protocol Sanitization (http/https 붙이기) Search:: quill editor I try to edit embed link, but edit button does not work Modify Link.sanitize const Link = Quill.import('formats/link'); const originalSanitize = Link.sanitize; Link.sanitize = function customSanitizeLinkInput(linkValueInput: any) { let val = linkValueInput; if (!/^(https|http?:\/\/)/.test(val)) val = `https://${val}`; return originalSanitize.call(this, val); // reta.. 2023. 4. 5.
[javascript] iterable, iterator 뜻 정의 간단한 정의 iterable한 객체 객체[symbol.iterator] = 함수 이 구현된 객체 iterator 객체 iterable한 객체symbol.iterator 실행했을 때 얻는 객체 내부에 있는 데이터를 lazy하게 (원하는 시점에 ) next를 호출해 순차적으로 꺼낼 수 있는 객체 아까 설명에 추가 합니다 ㅎㅎ 추가 정리 반복 가능한 객체는 특정 프로토콜을 사용하여 반복하거나 반복할 수 있는 JavaScript의 객체입니다. 이는 개체에 Symbol.iterator 메서드를 구현하여 달성됩니다. Symbol.iterator는 객체의 기본 반복자를 나타내는 JavaScript의 내장 기호입니다. 반복 가능한 객체의 [Symbol.iterator] 함수는 반복자 객체를 반환해야 합니다. 반복자 객.. 2023. 4. 5.
RxJS 한 없이 좋다 좋은데 가끔 디버깅이 어렵다 전역 상태를 가져와서 Observable로 만들고 이를 특정 함수가 구독하고 있는 경우 때때로 어떤 곳에서 이 전역 상태를 Observing 하고 있는지 찾기 어려울 때가 있다. 특정 컴포넌트에서 외부 전역 상태를 변경하거나 구독하는 걸 어떻게 하지 흠... 어떻게 해결하면 될까? 특정한 곳에서만 구독한다 지역 상태들만 구독하고 조작한다? 전역 상태는 2023. 3. 31.
[media] window screen orientation 감지해서 Landscape 보여주기 모바일 디바이스에서 portrait일 경우 가로로 웹사이트 렌더링 시키기 function updateOrientation() { const container = document.getElementById('orientation-container'); const isPortrait = window.matchMedia('(orientation: portrait)').matches; const isSmallScreen = window.matchMedia('(max-width: 798px)').matches; if (isPortrait && isSmallScreen) { container.classList.add('force-landscape'); } e.. 2023. 3. 31.
[Regex] g flag 사용 시 regex test can not use twice? JavaScript RegExp cant use twice? [duplicate] JavaScript RegExp cant use twice? I have a very strage problem: var cat = [ { slug: "test/foo", id: 1}, { slug: "test/bar", id: 1}]; var searchreg = new RegExp("test","g"); cat.forEach(function(item){ if(searchreg.test(item.slu... stackoverflow.com 글로벌 g 플래그 사용 시 첫 번째 매치를 찾은 곳을 기억 후 다음 test 실행 시 그 위치부터 찾기 시작한다. 한 문장에서 같은 단어를 여러번 찾는게 아니라면 g 플래그를 사용하지 .. 2023. 3. 31.
앱은 상태 머신 그리고 함수형 프로그래밍과 RxJS는 상태를 어떻게 관리해 개발을 할 수 있을까? 앱은 상태 머신이다 데이터를 입력 받고 데이터를 상태로 저장하고 저장된 상태를 가공해서 원하는 결과를 출력 상태 머신 내 변수, 반복문, 분기문은 오류를 생산하는 주요 원인들 오류를 줄이기 위해선 이 변수, 반복문, 분기문을 상태머신에서 제거해야 한다. 어떻게 제거할 수 있을까? RxJS를 사용해 오류를 줄일 수 있다. 입력데이터 오류 rxjs는 동기, 비동기 데이터 입력을 시간축을 가진 하나의 Observable 단일 방식으로 입력 데이터 처리 한다. -> 입력되는 데이터를 시간 순으로 관리한다 상태 전파 오류 상태 전파를 기존 옵저버 패턴을 개선해 오류를 줄인다 RxJS Observer는 next, error, complete 세 가지 패턴을 가진다 RxJS Observable은 읽기 전용이며 단 방.. 2023. 3. 31.

티스토리툴바