개발 아카이브

Shadow DOM - DOM을 캡슐화 하자!

Shadow DOM이란? 웹 페이지의 DOM 트리 안에 또 다른 독립되는 DOM 트리를 생성하는 방식입니다. Shadow DOM을 이용하면 웹 페이지 내의 요소들을 잘 캡슐화하여 외부에서의 접근 제한하고, 컴포넌트 간의 의존성을 관리할 수 있습니다. 우리가 많이 사용하는 input, button, video.. 등등 html 요소들이 shadow DOM으로 만들어진 요소들입니다. 이런 요소는 이미 기능, 동작, 모양, 스타일 등등 이미 만들어져 있는 템플릿이라고 볼 수 있습니다. 많은 div, span 등 그리고 내부 스크립트와 스타일 등을 결합하여 캡슐화하면 이렇게 shadow DOM을 만들 수 있습니다. 기본으로 제공하는 이런 html 요소 뿐만 아니라, 우리도 shadow DOM을 만들 수 있습니다..

V8 Liftoff와 웹 어셈블리: 웹 성능을 향상시키는 강력한 조합

웹 성능은 현대 소프트웨어 개발에서 매우 중요한 측면입니다. 웹 애플리케이션이 점점 더 복잡해지면, 웹 성능을 최적화하여 부드럽고 반응성 있는 사용자 경험을 보장하는 것이 더욱 중요해집니다. 이를 위해 V8 Liftoff와 웹 어셈블리라는 두 가지 기술이 큰 영향을 미치고 있습니다. 웹 어셈블리 (WebAssembly) 란? 웹 어셈블리(WebAssembly) 라는 것은 무엇일까요? 웹을 개발할 때 주로 사용하는 언어는 무엇인가요? 바로 자바스크립트입니다. 우리는 웹을 개발할 때, 자바스크립트 없이는 개발할 수 없습니다. 그러나 만약 자바스크립트가 아닌 다른 언어로 웹 개발을 하는 방법이 있다는 사실 알고 계셨나요? C언어와 C++로 웹 개발을 할 수 있습니다. 이것은 웹 어셈블리가 있음으로써 가능합니다..

[노션 API] 노션 API 연동으로 데이터베이스 사용하기

개요 다들 한 번씩 노션을 사용해 보셨을 겁니다. 노션 안에는 표나 갤러리, 리스트 등 노션 데이터베이스 기능이 있습니다. 이 기능을 잘 쓰면 사용자나 팀원에 좋은 데이터베이스가 되죠. 만약 노션에 있는 데이터가 정말 유용한 데이터라면, 이 데이터를 이용해 서비스를 구축할 수 있습니다. 노션의 데이터베이스를 그대로 사용하면 되기 때문에 따로 데이터베이스를 만들 필요 없습니다. 물론 서비스가 커진다면 DB를 구축해야겠지만, 프로토타입을 위해 빠른 개발이 필요하다면, 노션 데이터베이스를 사용하는 것이 좋은 선택이 될 수 있습니다. 가벼운 사이드 프로젝트를 만드는데도 좋은 선택이 될 수 있습니다. 따로 DB를 구축하지 않고 그 과정에서 생기는 과금도 생길 일이 없습니다. 저도 노션 데이터베이스로 몇몇 사이드 ..

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