로맨테크

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

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

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

원격(외부) 네트워크에서 SMB에 접속하려면 139, 445(맥북 연결 시) 등의 포트를 개방해야 된다. 하지만 이러한 포트들은 보안에 취약하기 때문에 기본적으로 SMB 프로토콜은 로컬 네트워크에서만 사용하는 것을 권장한다. 보안 취약성을 최소화하면서 원격에서 접근하려면 로컬 네트워크에 VPN을 구축하는 것이 좋다. OpenVPN, WireGuard 등 사설 VPN을 구축하는 여러 가지 방법이 있는데 Tailscale을 사용하는 게 가장 편리하다. Tailscale은 WireGuard를 이용한 사설 Mesh Network 서비스다. Tailscale에 연결된 장치는 같은 네트워크에 있는 것처럼 작동한다. Tailscale은 설정이 거의 필요 없고 SSO 로그인을 사용하므로 보안 문제가 발생할 일도 적다...

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

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

코드 품질을 보장하고, 기능이 의도한 대로 동작하는지 확인하기 위해 테스트 코드를 작성한다. 특히 기능 추가나 리팩토링을 할 때 테스트 코드가 있으면 기존 기능이 올바르게 작동하는지 쉽게 확인할 수 있고, 심리적인 안정감을 주는 장점도 있다. 프론트엔드 테스트 종류는 크게 단위 테스트, 통합 테스트, E2E 테스트, 정적 테스트로 나뉜다. 테스트 종류설명예시주요 도구단위 테스트(Unit Test)개별 함수, 컴포넌트, 모듈의 동작 검증버튼 클릭 시 특정 함수 호출 여부Jest, Vitest, Mocha, Jasmine 등통합 테스트(Integration Test)여러 모듈이 함께 잘 작동하는지 확인상품 구매 시 잔액 업데이트, 재고 변경Jest, Vitest, React Testing Library 등E..

큰 숫자를 읽기 쉽게 만들기 위해 일반적으로 천 단위마다 콤마(,)같은 구분자를 추가한다. 천 단위 구분은 한국을 포함한 많은 국가에서 표준으로 사용하는 숫자 표기법이다. 자바스크립트에선 Number.toLocaleString() 혹은 Intl.NumberFormat 메서드를 이용하면 구분자를 추가할 수 있다. 참고로 이 메서드들은 기본적으로 실행 환경의 로케일 설정을 따르기 때문에 로케일에 따라 결과가 달라질 수도 있다. 예를 들어 독일 로케일(de-DE)은 천 단위 구분자로 온점(.)을 사용하고, 소수점 구분자로 콤마(,)를 사용한다. — 참고 포스팅const number = 123456.789;// 로케일을 지정하지 않으면 기본 로케일(navigator.language)을 따른다Intl.Number..

Array.reduce() 메서드는 배열에 있는 각 요소에 콜백 함수를 실행하여 누적된 계산 결과를 하나의 값으로 반환한다. 자바스크립트에서 제공하는 filter(), map() 등의 배열 메서드는 모두 reduce()로 구현할 수 있고, 이 외에도 다양한 활용 방법이 있기 때문에 개인적으로 가장 자주 사용하는 배열 메서드다. reduce() 메서드의 구문은 아래와 같다.reduce(callbackFn, initialValue?) callbackFn 콜백 파라미터accumulator : 이전 callbackFn 반환값초기값 지정 시 콜백을 처음 호출했을 때 값 : initialValue초기값 미지정시 콜백을 처음 호출했을 때 값 : array[0]currentValue : 현재 순회하고 있는 값초기값 지..

TL;DR💡 ES6에 도입된 Set 객체는 중복을 허용하지 않는 고유한 값들을 저장하는 데이터 구조다. Set은 동일한 값을 두 번 저장할 수 없기 때문에 중복된 값을 추가하면 자동으로 무시한다. 또한 삽입 순서를 기억하고, 원시형과 참조형 값을 모두 지원한다 — 참고 포스팅 Firefox 127 버전부터 별도의 폴리필 없이 크롬(Chrome)을 포함한 대부분의 주요 브라우저 엔진에서 교집합, 합집합, 차집합 등 집합 연산을 수행하는 새로운 Set 메서드를 지원한다. 크로스 브라우저에서 지원하는 메서드는 다음과 같다. A.intersection(B) : 두 Set이 공통으로 가지는 요소를 포함한 새로운 Set 반환 — 교집합A.union(B) : 두 Set이 가진 모든 요소를 포함한 새로운 Set 반환..

GitHub에서 사용자 이름(username)과 동일한 이름으로 public 레포지토리를 생성하고 RRADME.md 파일을 추가하면 프로필 페이지 상단에 README 내용이 표시된다. 프로필 페이지엔 주로 자신이 소개하고 싶은 프로젝트, 기술 스택 등을 기재한다. 카테고리별로 주목할만한 프로필 페이지를 모아둔 사이트도 있다. 대부분의 개발자들이 블로그를 운영하고 있어서 그런지 Latest Blog Posts 헤더에 최근 글 목록을 보여주는 프로필이 많다. 이 기능은 rss-parser 같은 라이브러리를 통해 RSS 피드 목록을 불러오고 README.md에 반영하는 방식으로 구현되는데, 이 작업을 GitHub Actions를 통해 정기적으로 수행하도록 만들 수 있다.  RSS 설정먼저 자신의 블로그 혹은 ..

Flat ConfigESLint 8.21.0 버전부터 구성 파일에 큰 변화가 생겼다. 기존 .eslintrc 파일 대신 플랫 구성(Flat Config)을 사용하는 eslint.config.js 형식이 새로 도입된 것. 플랫 구성은 extends나 overrides 같은 계층 구조없이 각 구성을 이루는 객체들을 포함한 1차원 배열로 표현한다. 이를 통해 규칙을 세분화해야 하는 상황에서 더 유연하게 대응할 수 있게 됐다. e.g., 구성 객체 1-자바스크립트 규칙, 구성 객체 2-타입스크립트 규칙 필요한 플러그인은 직접 import 한 후 사용하는 방식으로 변경돼서 종속성을 더 명확하게 관리할 수 있다.// eslint.config.js 파일 예시import eslint from '@eslint/js';i..