분류 전체보기

자바스크립트 엔진인 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..

이제야 쓰는 22년 회고회고회고

22년의 시작 21년 10월에 마드라스체크에 입사하면서 플로우 SaaS 개발자가 되었습니다. 플로우를 개발하면서 플로우에 대해 많이 배워가고 22년이 되면서 수습을 마무리했습니다. 이제 플로우 찐가족! 일을 하면서 모르는 것이 많았지만, 그중 저에게 가장 필요한 게 뭘까 고민했습니다. 그러니 가장 먼저 나온 생각이 하나 있었습니다. 나는 자바스크립트를 잘 모르는구나! 공부해야겠다. 당시 플로우에서 gulp.js를 도입하여 자바스크립트 ES5를 지양하고 ES6를 사용하고 있던 중이었습니다. 저는 이전 회사에서 ES6를 조금이나마 썼지만, 도대체 어디까지가 ES5이고 어디까지 ES6인지도 몰랐죠. "플로우 개발자는 어차피 풀스택인 거, 제대로 알고 써야겠다!" 그래서 공부하기 시작했습니다. 처음은 뭐부터 시..

[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.