로맨테크

노션에선 @(골뱅이)이나 /Link 단축키를 입력하여 기존에 작성했던 노션 페이지를 바로 링크할 수 있다. 예전에 작성해둔 노션 페이지의 제목이 정확히 기억나지 않아도 키워드만 입력하면 연관 페이지들이 뜨기 때문에 편리하다. 노션을 사용하면서 가장 마음에 드는 기능 중 하나다. 오늘은 노션의 링크 삽입과 관련한 소소한 팁 3가지를 소개하고자 한다. 💡 팁 1. @ 단축키로 노션 페이지 링크 걸기 일반적인 서비스에서 @(골뱅이, at)는 보통 특정 사람을 호출할 때 사용한다. 하지만 노션에선 사람은 물론 날짜(Date), 노션 페이지(Page)까지 링크할 수 있다. ❶@ 입력 후 ❷링크하고 싶은 페이지 제목/키워드를 입력하면 연관 페이지들이 나타난다. ❸위/아래 방향키로 원하는 페이지를 선택한 뒤 ❹엔터(..

시중엔 PC에서 안드로이드 스마트폰을 제어할 수 있는 수많은 툴이 있다. Scrcpy 같은 오픈소스 프로그램을 이용해 윈도우나 맥에서 안드로이드 기기를 제어할 수도 있다. 이렇게 안드로이드를 원격 제어할 수 있는 다양한 방법이 있지만 아쉽게도 아이폰(iOS)을 제어할 수 있는 툴은 딱히 없었다. 있다고 해도 아이폰을 탈옥해야 하는 조건이 붙는다. 하지만 최근 우연히 발견한 Wormhole이라는 프로그램을 이용하면 윈도우 PC나 Mac에서 아이폰을 제어할 수 있다. 아마 탈옥하지 않고 아이폰을 원격 제어할 수 있는 유일무이한 툴이 아닐까 싶다. 아래는 Wormhole 개발사 공식 홈페이지에 올라온 구동 영상이다. 영상 중간중간 중국어가 보이는 걸 보니 중국 개발사가 만든 것으로 보인다. Windows/Ma..

2진법을 사용하는 이유2진법은 0~1로 숫자를 표현하는 방법이다. 전기 신호로 작동하는 기계인 컴퓨터는 2진법을 기반으로 설계됐다. 전기적 신호로 의미를 전달할 수 있는 최소 단위는 ON, OFF이다. 전기 신호가 있는 상태를 1, 없는 상태를 0으로 설정한다. 이렇게 단 2가지 상태만 2진수로 표현하는 것이 가장 간단하고 정확하기 때문이다. 2진수를 사용하면 0과 1로 단순하게 처리할 수 있어 속도가 빠르지만 작은 숫자도 매우 길어지는 단점이 있다. 더 많은 신호를 사용할 수도 있지만, 2개 이상의 신호를 사용하면 정확한 신호를 측정하는데 비용이 많이 들기 때문에 현재까지도 2진수를 사용하는 것. 각 진법의 특징2진수 : Binary Number | 二进制 (0~1로 숫자를 표현하는 방법)3진수 : T..

노션에서 작성한 모든 페이지는 공개 링크를 만들어 다른 사람에게 공유하거나 검색 엔진에 노출시킬 수 있다. 노션에 가입하지 않아도 누구나 방문할 수 있다는 말이다. 언제가 될진 모르겠지만 노션도 '커스텀 도메인' 기능을 지원할 예정이라고 했었다. 그럼 자신이 보유한 도메인을 노션 공개 페이지에 연동할 수 있기 때문에 콘텐츠 배포 공간으로 활용하기 더 좋아진다. 아쉽게도 도메인 연동 기능을 언제 지원할지는 아직 미지수다. 현재로선 모바일 앱 사용성 개선이 가장 시급해 보인다. 오늘은 자신이 보유하고 있는 도메인을 노션 페이지에 연동하는 방법을 소개하고자 한다. Cloudflare의 Web Worker를 활용하여 HTTP 요청을 수동으로 변경해주면 자신의 도메인으로도 Notion의 공개 페이지에 접속할 수 ..

얼마전 아이튠즈 라디오 관련 팁을 소개하면서 국내 유수 음악 서비스 제공 업체인 벅스뮤직도 언급했었는데요. 대부분의 사람들이 iTunes, Amazon MP3, Goole Play Music 또는 국내 서비스인 벅스, 멜론 등 대형 음원 유통 사이트를 이용해 음악을 듣거나 다운로드합니다. 오늘은 조금 색다르게 사람들이 잘 모르는 음악 서비스 몇 곳을 소개해볼까 합니다. 이곳에선 소규모 밴드나 독립 뮤지션 등 저평가 되거나 셀프 프로모션을 하고 있는 아티스트들을 만나볼 수 있는데요, 대형 음악 유통 서비스에서 찾지 못했던 흥미로운 가수들을 아래 소개해드리는 사이트에서 만나볼 수 있을 거라 기대합니다. 1. BandCamp 해외 인디음악을 듣고자 하는 분들이 좋아할 만한 매우 멋진 서비스입니다. 특히 밴드캠..

노션의 숫자(Number) 속성 2개의 값을 Formula를 이용해 나누면 무한 순환하는 소수점으로 표시된다. 만약 숫자 1의 값이 11, 숫자 2의 값이 6이라 가정하고 Formula 속성에서 숫자 1/숫자 2로 나누면 1.833333333333으로 표시된다. Notion은 소수점을 반환할 수 있는 방법이 없기 때문에 원하는 소수점을 표시하려면 별도의 꼼수를 활용해야 한다. 엑셀과 비슷하게 노션에서도 Floor()라는 함수를 제공한다. 소수점을 모두 버리고 정수로 표시해주는 기능이다. 만약 Floor(2.8)을 입력하면 2로 표시된다. 이 Floor 함수를 활용하면 원하는 소수점으로 표시할 수 있다. 1.833333333333에 100을 곱하면 183.333333333이 된다. 여기에 Floor 함수를..

웹페이지에서 성능에 영향을 가장 많이 주는 부분이 이미지 / 비디오 같은 미디어 요소다. 특히 이미지는 배너, 제품 사진, 로고 등 페이지 구석구석에서 사용한다. HTTP Archive Data에 따르면 전체 웹페이지 용량의 45%를 이미지가 차지한다고 한다. 이미지를 사용하지 않는건 불가능하지만, 화면에 노출될 때만 이미지를 불러오는 방식으로 페이지 로딩 시간을 단축시킬 수 있다. 이런 방식을 Lazy Loading이라고 한다. Lazy Loading 구현 방법💡 Lazy Loading이 적용된 이미지가 뷰포트에 근접해서 이미지를 로드하면 콘텐츠가 밀려나는 현상이 발생한다. 이를 방지하려면 이미지를 감싸는 컨테이너 요소에 높이 / 너비를 지정하면 된다. Lazy Loading은 크게 Chrome Na..

1) 스크롤 이벤트를 사용한 방법무한 스크롤은 현재 페이지에서 스크롤바가 마지막 콘텐츠 지점에 있을 때 다음 콘텐츠를 자동으로 불러오는 구현 방식을 말한다. ➊스크롤해서 가려진 영역의 높이와 ➋현재 화면(뷰포트)의 높이를 더한 값이 ➌전체 문서의 높이와 같다면 현재 스크롤이 가장 하단 끝에 도달했다는 걸 알 수 있다. 알아야 할 기하 프로퍼티 ❶ 스크롤해서 가려진 콘텐츠 영역의 높이 : document.documentElement.scrollTop ❷ 현재 화면(뷰포트)의 높이window.innerHeight : 스크롤바 포함document.documentElement.clientHeight : 스크롤바 제외 ❸ 전체 문서의 높이// 문서의 정확한 전체 높이를 구하기 위한 코드const scrollHei..

표현식의 평가 순서let foo = { n: 1 };let bar = foo; // foo 객체의 참조 주소가 bar 변수에 할당됨foo.x = foo = { n: 2 }; // 값을 반환하는 할당 연산자console.log(foo.x); // ? 위 문제를 얼핏보면 foo.x의 결과는 { n: 2 }일 것 같지만 아니다. foo.x는 undefined를 출력한다. 위 코드의 연산 과정을 하나하나 풀어보면 아래와 같다. 왼쪽 표현식 평가우측 표현식이 평가한 값이 할당될 곳을 결정하기 위해 foo.x가 현재 참조하는 객체 { n: 1 } 확인오른쪽 표현식 평가할당될 곳을 결정하기 위해 foo 변수가 현재 참조하는 객체 { n: 1 } 확인새로운 객체 { n: 2 }가 foo 변수에 할당되고 해당 객체 반환..

제너레이터는 ES6에 도입된 특수한 함수다. 함수 호출자가 함수 실행을 제어할 수 있고, 함수 호출자와 함수 상태를 주고받을 수도 있다. 이런 특징 때문에 제너레이터 함수에선 코드 블록의 실행을 잠시 멈췄다가 필요한 시점에 재개할 수 있다. 일반 함수는 0~1개 값만 반환할 수 있지만, 제너레이터 함수는 여러개의 값을 필요에 따라 하나씩 반환할 수 있다. 제너레이터 함수의 특징함수 호출자에게 함수 실행의 제어권을 양도(yield)할 수 있다일반 함수 : 함수 호출자(caller)는 함수를 호출한 이후 함수 실행을 제어할 수 없다.제너레이터 함수 : 함수 호출자가 함수 실행을 제어할 수 있다(함수 실행 일시 정지 / 재개)함수 호출자와 함수 상태를 주고받을 수 있다일반 함수 : 매개변수를 통해 값을 전달받..

TL;DR ⭐️Symbol.iterator 메서드가 구현되어 있는 객체를 이터러블(iterable)이라고 한다. 간단히 말하면 이터러블은 반복 가능한 객체다. 배열, 문자열은 Symbol.iterator 메서드가 이미 구현되어 있는 대표적인 내장 이터러블이다. 이터러블을 사용하면 어떤 객체든 ➊for of 반복문 ➋전개 문법 ➌배열 구조분해 할당의 대상으로 사용할 수도 있다. ❶ for of 문을 사용할 수 있는 객체를 이터러블이라고 한다 ❷ 이터러블엔 Symbol.iterator 메서드(혹은 프로토타입 체인에 의해 상속)가 구현되어 있어야 한다.Symbol.iterator는 for of에 의해 자동으로 호출되며, 명시적으로 호출하는 것도 가능하다Symbol.iterator 메서드가 반환하는 객체는 “이..

기본 로직타자기로 한 글자씩 입력하는 효과(Typewriter Effect)는 이미 수 많은 라이브러리가 있지만, setInterval 타이머 API를 이용해서 직접 구현할 수 있다. 원래 문장(텍스트)을 한 글자씩 자른 후 가장 앞에 글자부터 하나씩 이어 붙이는 방식이다. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i  깜빡이는 커서 효과는 | 콘텐츠를 갖는 ..