로맨테크

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

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

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

노션을 쓰다 보면 여러 개의 데이터베이스(Database) 내용을 병합해야 될 일이 생긴다. 보통 A 데이터베이스 내용을 복사하여 B 데이터베이스에 붙여 넣기 하는데, 이렇게 붙여 넣은 Name 속성 이름 앞엔 Copy of... 가 자동으로 따라붙는다. 이럴 경우 Name 속성 이름을 일일이 수정해야 하고 A, B 데이터베이스를 오가며 복사-붙여 넣기 하기도 번거롭다. 오늘은 여러 개의 데이터베이스 항목을 간단하게 병합하는 미립자 팁을 소개하고자 한다. 🔎 가정 [⏰공부], [🏙생활] 2개의 데이터베이스가 있고, [공부] 데이터베이스의 내용을 [생활] 데이터베이스로 병합(옮기기)한다고 가정해보자. 예시 템플릿은 아래 링크에서 Duplicate 하여 자유롭게 사용할 수 있다. 📌 데이터베이스 병합하기 템..

홍보 포스터, SNS 이미지 등을 제작할 때 어떤 폰트를 사용하냐에 따라 분위기가 확 달라진다. 전달하려는 메시지와 톤앤매너에 잘 맞는 폰트를 선정하는 건 그만큼 중요하다. 한글 폰트는 조금만 검색해보면 다양한 정보를 얻을 수 있지만 의외로 중국어 폰트 관련 정보는 별로 없다. 오늘은 중국 마케팅 등에 유용하게 쓸 수 있는 유료/무료 중국어 폰트를 소개하고자 한다. 1. 무게감 있는 중국어 폰트 📺 优设标题黑 (UISDC - 표제흑체) 폰트 이름: 优设标题黑 폰트 제작사: UISDC 폰트 키워드: 속도감, 무게감 라이선스: 무료, 상업적으로 사용 가능 글리프 개수: 7194 다운로드 : 링크 优设标题黑는 에너지를 발산하는 듯한 스타일의 폰트다. 중문 Simhei(黑体) 서체를 바탕으로 획에 굵기를 주고 ..

노션의 숫자(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 함수를..

자식 요소의 콘텐츠가 부모 요소보다 크다면, 부모 요소에 스크롤이 생기고, 마우스 휠로 스크롤할 수 있다. 마우스 휠 외에도 click / move 이벤트를 이용해 마우스 드래그로 스크롤하도록 만들 수 있다.  TL;DR❶ 마우스를 클릭했을 때`clientX`, `clientY` (뷰포트 기준)좌표와, 요소의 스크롤 위치 `scrollLeft`, `scrollTop` 저장클릭 상태 `true`로 변경(CSS) `cursor: grabbing user-select: none` ❷ 클릭한 상태에서 마우스를 이동(드래그)했을 때①이동을 멈춘 지점(clientX/Y)과 ②마우스를 클릭한 지점**(clientX/Y)**을 뺀 값 계산 — 스크롤한 범위(요소의 현재 스크롤 위치)와 (스..

URL 객체 현재 페이지의 URL이 아래와 같다고 가정했을 때... 참고로 %20 은 빈칸(space) 1개https://example.com/?name=Jonathan%20Smith&age=18 url 객체의 search 속성을 이용해 모든 쿼리 스트링 내용을 가져올 수 있다const url = new URL(window.location.href); // 현재 urlurl.search; // '?name=Jonathan%20Smith&age=18' name age 같은 특정 쿼리 스트링만 가져오고 싶다면 URLSearchParams 메서드를 이용하면 된다. get으로 값을 조회하고 append(기존 값에 이어붙이기) 혹은 set(기존값 교체)으로 새로운 값을 추가할 수도 있다.ur..

MapMap은 항상 `map` 전용 메서드(`set`, `get` 등)를 사용한다. `map[key] = 2` 형태로 사용하면 `map`을 일반 객체로 취급하므로 많은 제약이 생긴다. TL;DR❶ key-value로 이루어진 순서가 있는 컬렉션(집합) ⭐️ ❷ 삽입 순서 기억 ❸ 중복 key 불가 — 이미 존재하는 key에 대한 value를 추가하면 해당 key의 value를 덮어씀let map = new Map([['one', 1]]);map.get('one'); // 1map.set('one', 111);map.get('one'); // 111 ❹ Map 내장 메서드 forEach 지원(배열 forEach 메서드와 유사) / for of 순회 가능map.forEach((v..

TL;DR💡 Authentication은 인증(서버의 유저인지), Authorization은 권한부여(특정한 행동 허용) 쿠키 : HTTP 프로토콜의 무상태성(Stateless)을 보완해주는 도구다. 쿠키 자체는 인증수단이 아니다.세션 : 서버가(세션 DB) 인증정보를 가진다. 클라이언트는 서버가 쿠키에 담아 보내주는 세션 ID만 가진다.토큰 : 클라이언트가 인증정보를 가진다. 서버는 토큰이 유효한지만 확인한다.Authentication과 Authorization 차이점Authentication(인증 / 신원확인) : 현재 사용자가 누구인지 확인하는 과정. 회사 건물을 예로들면 1층 안내 데스크에서 방문자가 해당 건물에 출입할 수 있는지 여부를 확인하는 과정.Authorization..

navigator.userAgent브라우저 API에서 제공하는 userAgent 문자열을 확인하는 방법. userAgent는 유저 디바이스의 정보를 담고 있다. 자바스크립트에선 navigator.userAgent 속성으로 접근할 수 있다.  userAgent 문자열이 mobi, android iphone 등 키워드를 담고 있다면 모바일 기기로 접속했다고 볼 수 있다. 가장 간단한 방법이지만 사용자가 직접 userAgent 값을 수정할 수 있기 때문에 100% 신뢰할 순 없다.// 방법 1// 정규식은 기본적으로 대소문자를 구분한다. i 플래그로 대소문자를 구분하지 않도록 할 수 있다if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { //..

Intro1개 파일에 모든 코드가 들어간 것 보다 코드들이 잘개 쪼개져 있는게 더 좋다.모듈은 변수와 함수를 구성하는 더 좋은 방법을 제공한다.모듈을 잘 알아두면 코드를 깔끔하게 정리할 수 있다.모듈 덕분에 코드들을 작은 파일로 나눌 수 있고, import / export 할 수 있다.모듈은 함수와 변수를 모듈 스코프에 넣고, 모듈 스코프를 통해 모듈 함수 사이에서 변수를 공유할 수 있다.다이나믹 모듈을 이용하면 어플리케이션 로딩을 더 빠르게 할 수 있다. Named Exportimport { name } from "file"; 파일 혹은 모듈이 원하는 만큼의 named exports를 가질 수 있다import 하려는 이름은 export 했던 함수(변수) 이름과 같아야 ..