로맨테크

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

얼마 전 Windows 11 부팅 USB를 사용할 일이 생겼다. 윈도우를 사용한다면 공식적으로 제공되는 설치 미디어 만들기(Windows Media Creation Tool) 도구를 사용하면 쉽게 만들 수 있지만, 아쉽게도 맥(macOS) 사용자를 위한 도구는 따로 제공하지 않는다. 패러렐즈(Parallels)로 윈도우 설치 미디어 만들기 도구를 실행해 봤지만 USB를 인식하지 못하는 문제가 있었다. 그러던 중 WinDiskWriter라는 유용한 도구를 발견해서 소개해볼까 한다.  가장 눈에 띄는 기능은 TPM 우회와 설치 이미지 자동 분할이다. 맥에 내장된 디스크 유틸리티는 기본적으로 HFS+, FAT32, ExFAT만 지원하며, 윈도우에서 사용하는 NTFS 형식의 포맷은 읽을 수는 있지만 쓰기를 지원..

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

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

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

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..

얼마 전 6년간 사용했던 Western Digital 하드디스크가 사망했다. 처음엔 볼륨 충돌 관련 메시지가 뜨더니, 결국 인식조차 안 되는 상태에 이르렀다. 다행히 메인 하드디스크(1번 드라이브 베이)가 아니라서 DSM은 문제없이 사용할 수 있었다. 메인 하드디스크 용량은 4TB 밖에 안 돼서 항상 부족하다고 느꼈었는데, 이 참에 훨씬 큰 용량의 하드디스크로 바꿔줬다.  DSM 설정, 파일 등 기존 데이터는 그대로 유지하면서 하드디스크를 교체하려면 하드디스크 복사기(HDD 도킹스테이션)를 이용한 방법이 가장 깔끔하다. 하드디스크 복사기는 2~3만원이면 구매할 수 있고 복사 과정도 버튼 한 번만 누르면 되는 정도로 쉽다. 오늘은 DSM 메인 하드디스크 교체 과정을 소개해보려고 한다.   하드디스크 복사?..

슬라이딩 윈도우 알고리즘 개념슬라이딩 윈도우 알고리즘(Sliding Window Algorithm)은 배열과 같은 선형 자료구조에서 연속된 구간 내의 데이터를 효율적으로 처리하기 위해 사용하는 기법이다. 특히 배열 내 연속된 요소의 합, 최댓값, 최솟값 등을 계산할 때 유용하다. 슬라이딩 윈도우는 이름 그대로 고정/가변 크기의 범위(윈도우)를 이동(슬라이드) 시키면서 필요한 계산을 반복하는 방식이다. 이때 전체 배열을 한 번만 순회하면 되기 때문에 중복 연산을 피하고 시간 복잡도를 개선할 수 있다. 일반적으로 슬라이딩 윈도우 기법을 사용하면 O(n)의 시간 복잡도로 문제를 해결할 수 있다.// 주어진 배열에서 연속된 k개 요소의 최대 합을 찾는 함수function maxSumSubarray(arr, k)..

TLDR이벤트 핸들러에 커링 활용컴포넌트 책임 분리조건문 대신 객체 map 사용React 라이프사이클 외부에 독립적인 변수 배치  4 React Tips1. 커링 활용user 상태는 name, surname, address 3개 속성을 가지며, 이에 대응하는 3개의 input 필드가 필요하다. 아래 코드에선 각 필드를 처리하기 위해 별도의 핸들러를 각각 만들어서 사용하고 있지만, 이 핸들러들은 value가 할달될 속성 이름만 다를 뿐 나머지 로직이 동일하기 때문에 코드 중복이 발생하고 있다.export default function App() { const [user, setUser] = useState({ name: "", surname: "", address: "", }); co..

💡 아래는 Part 1에서 이어지는 내용 Data Fetching객체지향 언어인 Dart는 거의 대부분이 클래스 기반으로 구성된다. API 호출, 응답 데이터 타입 정의, 데이터 처리 역시 모두 클래스 내부에서 이루어진다. 먼저 응답 데이터를 나타내는 모델 클래스를 정의한다. 일반적으로 fromJson 이라는 이름 있는 생성자를 사용하여 JSON 데이터를 인스턴스화 시킨다. 아래 예시에선 JSON 객체를 인자로 받기 때문에 초기화 리스트를 사용하여 클래스 필드에 할당하고 있다.// lib/models/webtoon_model.dartclass WebtoonModel { final String id, title, thumb; WebtoonModel.fromJson(Map json) : tit..

배경 지식Flutter 구조💡 Dart는 Just-In-Time(JIT) 컴파일과 Ahead-Of-Time(AOT) 컴파일을 모두 지원한다. JIT 컴파일은 개발 모드에 사용돼서 Hot Reload 같은 빠른 피드백 루프를 제공한다. AOT 컴파일은 배포 모드에 사용돼서 컴파일된 코드가 기기에 더 최적화된 상태로 실행할 수 있게 만든다. 네이티브 개발에선 운영체제(OS)와 직접 상호작용하여 버튼, 텍스트 같은 UI 요소를 생성한다.Flutter는 네이티브 플랫폼의 위젯을 사용하지 않고 자체적으로 UI를 렌더링 한다. 이는 비디오 게임 엔진의 작동 방식과 유사하다.Dart로 작성된 코드는 Flutter 프레임워크를 사용하여 UI를 정의하고, 실제 화면에 렌더링 하는 작업은 C++로 작성된 Flutter ..

Branded Type타입스크립트를 사용하다 보면 서로 다른 두 객체의 특정 속성이 동일한 타입을 가질 때가 많다. 이로 인해 타입 시스템에서 오류가 발생하지 않더라도 논리적 오류나 타입 안전성 문제를 야기할 수 있다.type User = { id: string; name: string;};type Post = { id: string; ownerId: string; comments: Comments[];};type Comments = { id: string; timestamp: string; body: string; authorId: string;}; 위 예시에서 User.id, Post.id, Comments.id는 모두 string 타입이다. 첫 번째 인자 postId, 두 번째 인자..