HOME
[미립자팁] Notion 노션 데이터베이스에서 열(컬럼) 너비 최소화하기
[미립자팁] Notion 노션 데이터베이스에서 열(컬럼) 너비 최소화하기
2024.06.10노션 데이터베이스에서 열(컬럼) 제목의 오른쪽 경계선을 클릭하고 좌우로 드래그하면 해당 열의 너비를 조정할 수 있다. 일반적인 열 너비는 마우스 드래그를 통해 조정할 수 있지만, 일정 너비 이하로는 줄일 수 없다(데이터베이스 속성 유형에 따라 최소 너비가 조금씩 다르다). 그러나 Option(또는 Alt) 키를 누른 상태에서 드래그하면 열 너비를 약 30픽셀 정도로 최소화할 수 있다. 30픽셀은 체크박스 정도의 크기로, 특정 열의 첫 글자만 표시하거나 모든 정보를 표시할 필요가 없을 때 유용하다.
[Notion] 노션에서 직선 인용 부호 입력하기 (따옴표/대시 등 스마트 인용 부호 자동 변환 취소)
[Notion] 노션에서 직선 인용 부호 입력하기 (따옴표/대시 등 스마트 인용 부호 자동 변환 취소)
2024.06.10macOS는 입력 소스 설정 화면에서 "스마트 인용 부호 및 대시 사용"이라는 옵션을 제공한다. 입력 소스 설정은 시스템 설정 - 키보드 - 입력 소스 항목에서 편집 버튼을 클릭하면 확인할 수 있다. 이 설정 화면에서 큰따옴표, 작은따옴표의 표시 방식을 직접 지정할 수도 있다. 스마트 인용 부호 옵션을 활성화하면 직선 인용 부호를 곡선 인용 부호로 자동 변환한다. 또한 일반 하이픈(-)을 연속으로 두 번 입력했을 때 알파벳 M과 동일한 너비를 가지는 em 대시(—)로 변환된다. 곡선형 부호는 인용의 시작과 끝 지점을 명확히 구분할 수 있는 장점이 있지만 일부 프로그램에서 제대로 표시되지 않는 문제가 발생할 수 있다. 특히 VSCode 같은 코드 편집기는 문자열을 입력할 때 직선 인용 부호를 사용하는데..
[시놀로지 나스] 로컬 HTTPS 접속을 위한 사설(자체 서명) 인증서 적용 방법
[시놀로지 나스] 로컬 HTTPS 접속을 위한 사설(자체 서명) 인증서 적용 방법
2024.06.09시놀로지 나스 사용자는 일반적으로 도메인이나 DDNS에 Let's Encrypt 인증서를 발급받아서 적용한다. 필자 역시 비슷한 구성으로 사용하다가, 보안을 위해 80, 443 같은 포트 개방을 모두 해제하고 Tailscale(VPN 터널링 서비스)을 설정했다. 그럼 내부(로컬)/외부(원격) 네트워크에 상관없이 나스는 항상 Tailscale을 통해서만 접속할 수 있다. 만약 로컬 네트워크에 있을 때 Tailscale이 꺼진 상태에서 나스에 접속하려면 192.168.1.4 같은 사설 IP를 입력해서 접속해야 한다. DSM 제어판에서 HTTP 연결은 HTTPS로 리디렉션 되도록 설정했기 때문에 자동으로 HTTPS로 연결된다. 하지만 아래 이미지처럼 "연결이 비공개로 설정되어 있지 않습니다" 경고 메시지가 ..
[Algorithm] 이진 탐색 및 변형 알고리즘 Binary Search Algorithm
[Algorithm] 이진 탐색 및 변형 알고리즘 Binary Search Algorithm
2024.06.02이진 탐색 알고리즘은 정렬된 배열에서 특정 값을 효율적으로 찾기 위한 알고리즘이다. 이진 탐색은 값의 크기에 따라 탐색 범위를 절반으로 줄여가며 원하는 값을 찾아내는 방식으로 작동하기 때문에 시간 복잡도는 $O(\log n)$으로 효율적이다. 예를 들어 1024개 요소를 가진 배열에서 원하는 값을 찾을 때 최대 10번의 비교만 필요하다. 하지만 데이터가 자주 변경된다면 매번 정렬을 해줘야 하기 때문에 효율성이 떨어질 수 있다. 데이터 삽입/삭제가 빈번한 경우엔 해시 테이블 같은 자료구조를 사용하는게 더 나을 수 있다. 💡 이진 탐색은 이분 탐색이라고도 불린다. 이진 탐색 기본중앙값 계산배열의 중간 인덱스를 계산한다 mid = Math.floor((left + right) / 2)중앙값과 찾고자 하는 ..
[Network] 엣지 플랫폼 아키텍처 Edge Platform Architecture
[Network] 엣지 플랫폼 아키텍처 Edge Platform Architecture
2024.06.02서버-클라이언트 구조서버-클라이언트 구조는 가장 전통적인 아키텍처 중 하나로, 중앙 서버가 모든 클라이언트의 요청을 처리하는 개념이다. 즉, 모든 클라이언트 요청은 중앙 서버로 전송된다. 서버 - 클라이언트 구조는 간단하고 구현하기 쉬운 장점이 있지만, 중앙 서버가 단일 의존 지점이라는 단점이 있다. 접속량이 많을 경우 성능 문제가 발생할 수 있으며, 서비스가 중단될 수도 있다. 또한, 중앙 서버의 물리적 위치가 고정되어 있어 사용자의 액세스 속도가 지리적 위치에 직접적인 영향을 받는다. 동일 조건에서 서버에 가까울수록 액세스 속도가 빨라지고, 서버에서 멀어질수록 액세스 속도가 느려진다. CDN의 출현중앙 서버의 부담을 줄이고, 사용자와의 지리적 거리를 단축하기 위해 CDN 아키텍처가 등장했다. CDN..
[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML
[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML
2024.06.02insertAdjacentHTML vs innerHTMLelement.insertAdjacentHTML(position, htmlString) element.insertAdjacentHTML() 메서드는 인자로 전달한 문자열(htmlString)을 HTML로 파싱해서 지정된 위치(position)에 삽입하는 메서드다. 사용자 입력을 받지 않는 곳에 사용하면 createElement() 메서드를 사용하는 것 보다 간편하게 요소를 삽입할 수 있다. 사용자 입력을 받아서 처리할 때는 XSS 공격을 방지하기 위해 별도의 sanitizing이 필요하다. 비슷한 메서드로 element.innerHTML()이 있지만 삽입 위치를 지정할 수 없고, 기존 요소를 덮어쓰기 때문에 전체 요소를 다시 파싱해야 하는 단점이 있..
[Next.js] App Router / 서버 컴포넌트 주요 내용 정리
[Next.js] App Router / 서버 컴포넌트 주요 내용 정리
2024.06.01App Router vs Page Router기능앱 라우터페이지 라우터라우팅 타입서버 중심클라이언트 사이드서버 컴포넌트 지원OX복잡도더 복잡함더 간단함성능더 좋음더 나쁨유연성더 유연함덜 유연함파일 기반 라우팅중첩 폴더를 사용해 라우트 정의파일이 직접 라우트를 나타냄컴포넌트 기본적으로 서버 컴포넌트기본적으로 클라이언트 컴포넌트데이터 페칭fetch 함수 사용getServerSideProps, getStaticProps, getInitialProps 사용레이아웃레이아웃 중첩 / 동적 레이아웃정적 레이아웃동적 라우트지원하지만 문법 다름Link 컴포넌트로 지원우선순위페이지 라우터보다 우선앱 라우트가 없을 경우 대체 서버 컴포넌트Next.js 버전 13~부터 제공하는 App Router를 사용하면 서버 컴포넌트가 ..
[Algorithm] 미니맥스 / 알파-베타 가지치기 알고리즘 톺아보기
[Algorithm] 미니맥스 / 알파-베타 가지치기 알고리즘 톺아보기
2024.06.01미니맥스 알고리즘개념💡 제로섬 게임은 한 플레이어가 이득을 얻으면 다른 플레이어는 그만큼 손해를 보는 게임을 가리킨다. 미니맥스 알고리즘은 틱택토, 체스처럼 2명이 참여하는 제로섬 게임에서 가장 널리 사용하는 알고리즘으로, 모든 플레이어가 최선의 수를 둔다고 가정하고 가능한 모든 수를 고려하여 승리할 수 있는 전략을 도출할 때 사용한다. X 플레이어는 승리하기 위해 최대 점수를 얻으려 하고, O 플레이어는 패배하지 않기 위해 최소 점수를 얻으려 하는 상황에서 최적의 해를 찾는 방법이다. 현재 X 플레이어 차례이고, X 플레이어가 선택할 수 있는 곳은 1, 4, 5번 인덱스(Zero-Based)라고 가정해 본다. X가 이기면 +100점, O가 이기면 -100점을 획득한다. 보드의 모든 수를 뒀지만 무승..
[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기
[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기
2024.05.30틱택토 소개틱택토는 2명의 플레이어가 자신의 기호(X, O) 3개를 가로, 세로, 대각선으로 연속해서 놓이도록 하는 보드 게임이다. 게임은 주로 3x3 격자 보드에서 진행된다. 플레이어는 번갈아가면서 자신의 기호를 놓고, 한 칸엔 한 개의 기호만 놓을 수 있다. 모든 칸에 기호를 놓았지만 어느 한쪽도 연속적인 세 개의 기호를 배열하지 못하면 게임은 무승부로 끝난다(무승부가 많은 게임). 승리 조건 체크틱택토는 행렬로 이뤄진 2차원 보드에서 진행하지만, 1차원 배열로 관리하면 각 칸을 단일 인덱스로 접근할 수 있기 때문에 데이터를 더 수월하게 관리할 수 있다. 게임 로직을 구현할 때도 인덱스 계산을 단순화시켜 코드의 복잡성을 줄이는 데 도움이 된다. 또한, 1차원 배열은 그리드 스타일을 이용해 2차원 보..
포르노그래피(음란물)가 미국 기업과 가정에 미치는 영향
포르노그래피(음란물)가 미국 기업과 가정에 미치는 영향
2024.05.30포르노그래피로 인한 업무 손실2010년 2월 닐슨(Nielsen) 연구에 따르면, 업무용 컴퓨터로 포르노 사이트에 접속한 비율 28%업무용 컴퓨터로 포르노 사이트를 방문한 평균 시간 약 13분매월 평균 직원 1명이 이러한 사이트에서 보내는 시간 약 1시간 38분닐슨이 인용한 평균 시간만큼 3,700만 명의 직원이 포르노를 시청한다면, 기업의 연간 생산성 손실액은 169억 달러 미국의 인터넷 포르노그래피 통계매 초 (Every Second)28,258명의 사용자가 인터넷에서 포르노 콘텐츠 시청3,075.64 달러를 포르노 콘텐츠에 지출372명이 검색 엔진에 '성인' 단어 입력 매 일 (Every Day)37개의 포르노 영상 제작25억 통의 포르노 콘텐츠가 포함된 이메일 송수신6,800만 건의 포르노 검색..
[JS] Array.fill() 메서드 사용 시 주의할 점
[JS] Array.fill() 메서드 사용 시 주의할 점
2024.05.30Array.fill() 메서드는 이름 그대로 첫 번째 인자에 주어진 값으로 배열의 모든 요소를 채우는 메서드다. 주로 Array() 생성자와 함께 사용하여, 초기값이 할당된 배열을 생성할 때 유용하게 쓰인다.Array.fill(value, start?, end?)// length가 2인 빈 배열 생성 후 null로 채움const filledArray = Array(2).fill(null);console.log(filledArray); // [null, null]const numbers = [1, 2, 3, 4];// 2~3번 인덱스를 null로 채움 (start 포함, end 미포함)numbers.fill(null, 2, 4);console.log(numbers); // [1, 2, null, null]..
[JS] Bitwise 비트 연산자 톺아보기 (feat. 비트마스크)
[JS] Bitwise 비트 연산자 톺아보기 (feat. 비트마스크)
2024.05.29비트 연산자는 정수의 이진 표현, 즉 비트(0과 1) 단위로 계산하는 연산자다. 주로 성능 최적화, 메모리 절약, 알고리즘 구현 등에서 사용한다. 자바스크립트는 64비트 부동소수점 형식으로 숫자를 저장하지만, 비트 연산을 수행할 땐 내부적으로 피연산자를 32비트 정수로 변환한다. 이는 비트 연산이 정수에만 적용되기 때문. 변환 과정에서 소수부는 버려지고 32비트 정수만 연산에 사용된다. 2의 보수 표현법2의 보수 표현법은 비트를 이용해 음수를 나타내는 표준 방식으로, 정수의 이진 표현에서 모든 비트를 반전시킨 후(1의 보수) 1을 더하는 방식으로 계산한다. 즉, 1의 보수에 1을 더하면 2의 보수가 된다. 이때 최상위 비트(Most Significant Bit; 부호 비트; 가장 왼쪽에 있는 비트)가 ..