개발 아카이브
자바스크립트 엔진인 V8에 대해 알아보자
V8 엔진은 구글이 개발한 고성능 자바스크립트 엔진으로, Google Chrome과 Node.js에서 사용됩니다. V8은 ECMAScript 및 Web Assembly를 표준에 맞게 구현하였으며, JavaScript 코드를 컴파일하여 매우 빠른 실행 속도를 보장합니다. Just-In-Time(JIT)이라는 컴파일링 기술을 사용하여, JavaScript 코드를 실행할 때 실시간으로 컴파일합니다. 그리고 안정적이고 안전한 구조를 가지고 있어, 코드가 비정상적으로 동작하거나 메모리 누수가 발생하는 경우를 막습니다. 이렇게 가볍고, 빠르고, 강력한 자바스크립트 엔진이기 때문에, 현재도 여러 응용 프로그램에서 사용되고 있죠. V8엔진의 구조 V8은 다양한 구성 모듈을 포함하고 있습니다. Ignition: 자바스크..
[자바스크립트] String에 대해 알아보자.
js string 이번 글또를 위한 포스팅을 위해 자바스크립트에 대한 지식을 공부 겸 포스팅해보려고 합니다. 이번에 알아볼 내용은 자바스크립트 String에 대한 내용입니다. 자바스크립트에서는 리터럴인 문자열을 다룰 때 사용하는 String이라는 객체가 있습니다. 이 String 객체는 문자열을 생성하거나, 검색, 치환, 추출, 분할 등의 작업을 수행할 수 있는 다양한 메소드를 제공합니다. 이번 포스트에서는 전체적으로 어떤 메소드가 있는지 간략하게 설명하고, 차후 몇몇 메소드에 대한 디테일한 내용을 다뤄볼까 합니다. javascript Property length length : 문자열의 길이를 반환합니다. 'hello world'.length // 11 javascript Method at at(ind..
[CSS] 틀에 맞추는 스크롤 스냅 만들기 - Scroll Snap
위의 애니메이션처럼 스크롤 하면 틀에 맞게 스크롤 되는 것을 스크롤 스냅 (Scroll Snap) 이라고 합니다. 이 스크롤 스냅도 자바스크립트 없이 오직 CSS로 만들 수 있습니다. 코드 .scroll-box.horizon { flex-direction: row; overflow: auto hidden; scroll-snap-type: x mandatory; } .scroll-box.vertical { flex-direction: column; overflow: hidden auto; scroll-snap-type: y mandatory; } .item { scroll-snap-align: start; min-width: 100%; } 위의 코드중 .scroll-box가 부모 element이며 .ite..
[CSS] 문장 맨 앞 글자 크게 만들기 - Drop Cap 만들기
위와 같이 문단 가장 앞의 글자를 크게 써 두는 것을 Drop Cap 이라고 합니다. CSS에서 위와 같은 Drop Cap을 만드는 방법은 아주 쉽습니다. .drop-cap-text::first-letter { margin-right: 10px; font-size: xx-large; font-weight: bold; float: left; } 클래스명 뒤에 ::first-letter를 넣는 것이 핵심입니다. 그러면 맨 앞의 글자 하나만 CSS 속성의 대상이 됩니다. See the Pen drop cap by wooncloud (@wooncloud) on CodePen.
[CSS] 흑백 효과 만들기 - GrayScale
사진을 일부러 흑백사진으로 만들지 않아도 CSS를 이용하여 흑백사진으로 만들 수 있는 방법이 있습니다. CSS 속성 중 filter 속성이 있고, 이 속성에 grayscale을 조절할 수 있습니다. grayscale을 100%로 하면 완전한 흑백사진으로 만들 수 있습니다. 예시는 다음과 같습니다. .gray-scale { filter: grayscale(100%); } 간단하죠? See the Pen Grayscale by wooncloud (@wooncloud) on CodePen.
[CSS] 잘라낸 텍스트 만들기 / Cut out Text
위의 사진과 같은 텍스트를 컷아웃(Cut out) 텍스트라고 합니다. CSS로 위와 같은 효과를 만드는 방법을 알아보겠습니다. .cut-out-text { mix-blend-mode: screen; } 가장 중요한건 mix-blend-mode: screen; 입니다. 텍스트에 배경을 믹스할 때 이러한 속성을 사용합니다. screen은 이미지 합성 방식입니다. 포토샵을 잘 다루고 익숙하신 분들은 아시겠지만, 속성이 많습니다. 이 부분은 차후 다루겠습니다. 그라디언트 배경 See the Pen Cut Out Text by wooncloud (@wooncloud) on CodePen. 사진 배경 See the Pen Cut Out Text2 by wooncloud (@wooncloud) on CodePen.
[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, ..