개발 아카이브
rel 속성 - noopener, noreferrer, nofollow
HTML의 a tag에 rel이라는 속성을 보신적이 있으실 겁니다. a tag는 보통 href에 target=”_blank” 같은 속성만 사용해보고 rel 속성에 대해 잘 모르는 경우가 대부분입니다. 저도 이번에 HTML을 작성하면서 “이 rel 속성의 역할은 뭘까?” 라는 생각이 들어 찾아봤습니다. rel 속성 rel 속성은 현재 HTML 문서와 링크된 두 문서 사이의 관계를 명시하는 데 사용됩니다. 이 속성은 href 속성과 함께 사용되며, 검색 엔진은 이를 통해 링크에 대한 추가 정보를 파악할 수 있습니다. rel 속성은 주로 (하이퍼링크), (외부 스타일시트 연결), (이미지 맵 영역), (폼 제출) 태그와 함께 사용됩니다. : 링크를 표현하는 태그입니다. 예시 링크 : 외부 스타일시트를 연결하는..
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.