개발 아카이브

[CSS] background에 fade color 넣기

개요 이번 CSS 코드는 이렇게 카드에 배경화면을 넣고 linear-gradient를 넣어 페이드 효과를 주는 방법입니다. background shortcut을 사용하여 1. 그라디언트 2. 이미지 url 순서로 넣어서 효과를 완성할 수 있습니다. .card-fade-bg-right { background: linear-gradient(to right, #000F, #0000), url('image url'); } .card-fade-bg-left { background: linear-gradient(to left, #000F, #0000), url('image url'); } .card-fade-bg-top { background: linear-gradient(to top, #000F, #0000), ..

[CSS] 긴 글자를 Fade Out으로 숨기는 CSS

See the Pen long text fade out by wooncloud (@wooncloud) on CodePen.

정규식을 이용한 공격 - ReDos

정규식을 이용한 공격 ReDos ReDOS는 정규표현식을 사용자로부터 입력받았을 때 발생할 수 있는 보안 문제입니다. 특정 정규식 패턴은 입력값을 평가하는데 오래 걸립니다. ReDos는 이를 이용해 정규식 평가에 오랜 시간이 걸리게 하는 알고리즘 복잡성 공격입니다. 타깃이 되는 정규식 로직은 자체적으로 반복되는 그룹이 주원인이며, 이 정규식에 어느 정도 만족하는 대량의 문자 등을 입력하여 가용성이 떨어지게 만듭니다. ReDos 원인은 정규식을 평가하는 엔진이 Backtracking을 사용하는 엔진이라면 발생합니다. 주로 NFA (Nondeterministic Finite Automaton) 엔진이 그 원인입니다. NFA 방식은 JAVA, javascript, .NET, PHP, Perl, Python, ..

웹사이트에 눈 내리게 하기

정말로 간단하고 예쁘게 자신이 만든 웹에 크리스마스를 맞이하여 눈을 내리게 해봅시다. https://embed.im/snow/ 위의 링크에 들어가면 확인할 수 있습니다. 방법은 정말 간단합니다. 위의 스크린샷에서 보시다시피 아래와 script를 추가하면 됩니다. See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen.

Postman 대신 사용하는 VS Code API Test Extention - Thunder Client

https://www.thunderclient.com/ Thunder Client - Rest API Client Extension for VS Code Thunder Client is a hand-crafted lightweight Rest API Client extension for Visual Studio Code www.thunderclient.com 비주얼 스튜디오 코드를 사용한다면 Postman을 또 설치할 필요 없이 Rest API를 테스트할 수 있습니다. 사용 화면 Thunder Client의 전반적인 모습입니다. 만든 테스트를 저장하고 불러올 수 있고, 테스트에 필요한 여러 가지 필수 기능들이 있습니다. UI와 디자인이 심플하고 VS Code에 맞춤이라 어려워 보이지 않고 거부감이 없습니..

배워보자 정규표현식! (Regular Expression)

정규표현식이란? 특정한 규칙을 가진 문자열의 집합을 표현할 때 사용하는 형식 언어입니다. 주로 문자열의 특정 부분을 찾거나, 다른 문자열로 대체하거나, 특정 문자열을 추출할 때 사용합니다. 정규표현식은 다른 말로 정규식, Regexp, Regex라고 불리기도 합니다. /^[\w.%+\-]+@[\w.\-]+\.[A-Za-z]{2,3}$/ig 이것이 정규식의 모습입니다. 이메일 패턴을 간단하게 표현한 정규식인데, 처음보면 정말 무슨 소리인지 파악하기 힘들 겁니다. 하지만 개발자는 많은 자연어 속에서 특정 문자를 추출하고 가공하고 수정할 수 있어야 합니다. 불규칙한 자연어 속에서 특정 패턴을 찾아 처리하려면, 일반적으로 if문을 사용합니다. 하지만 if문을 그렇게 사용하다간 if 속에 if, 그 속에 if, ..

브라우저 이미지 회전 현상 해결하기 (IE) - EXIF

이 문제는 회사에서 이미지 회전 현상이 일어난다는 QA를 받아서 수정하던 중 알게 되었습니다. 가끔 브라우저에서 사진을 업로드하거나 조회할 때 이미지가 본의 아니게 돌아가 있는 상태를 보실 수 있습니다. 요즘은 그런 현상이 거의 없지만, 2020년도에는 그런 현상이 있었습니다. 2022년 6월 15일부로 돌아가신 인터넷 익스플로러에도 아직까지 이러한 현상이 있습니다. 이 현상은 브라우저가 파일에 저장되어 있는 메타데이터를 읽고 대응해야 하는데, 그러지 못해서 생기는 일입니다. 일단 이미지 메타데이터는 어떤 것이 있는지 살펴보겠습니다. 메타데이터를 저장하게 해주는, 이미지 파일 포맷 : EXIF 디지털카메라, 스마트폰 카메라로 이미지를 찍으면 EXIF라는 이미지 파일 포맷입니다. EXIF는 JPEG, TI..

자바스크립트 객체 관리와 V8엔진 히든클래스

이 글은 모던 자바스크립트 Deep Dive를 보고 공부한 내용입니다. 자바스크립트에서 객체는 복합적인 자료구조입니다. 객체 내부에 있는 property의 수는 개수가 정해지지 않아, 객체의 크기도 정해지지 않고 동적으로 property가 추가, 삭제가 될 수 있습니다. 그래서 객체는 리터럴처럼 메모리 공간에 크기를 사전에 정의할 수 없습니다. 객체의 구현 방식은 브라우저 제조사마다 다를 수 있습니다. 그리고 객체를 생성하고 프로퍼티에 접근하는 것도 리터럴을 이용하는 것보다 비용이 많이 들기 때문에, 괜히 깔끔하게 코딩하겠다고 적은 데이터를 객체를 이용하여 선언하고 사용하면 오히려 쓸데없이 비용을 많이 쓸 수 있습니다. (엄청 크게 차이나진 않지만..) 자바스크립트의 객체 특징 자바스크립트에서 객체는 프..

자바스크립트 맵 객체 (Javascript Map Object)

Map이란? Map객체는 Key와 Value로 이루어진 자료구조입니다. Key는 고유한 값을 가져야 하는 특징을 가지고 있습니다. 자바스크립트에서의 Map객체는 Key와 Value을 서로 매핑시켜 저장하고, 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 해줍니다. ES6부터 도입된 문법이며 ES5에서는 사용할 수 없습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections 키기반의 컬렉션 - JavaScript | MDN 이번 장에서는 입력된 키값을 기준으로 정렬되는 데이터의 집합(자료 구조)에 대해 소개 할 것이다. Map과 Set은 입력된 순서대로 반복적으로 접근 가능한 요소들을 포함하고 있다. deve..