HOME
[Git] RSS 글 발행 시(티스토리 등) GitHub 자동 커밋 방법
[Git] RSS 글 발행 시(티스토리 등) GitHub 자동 커밋 방법
2024.07.03GitHub에서 사용자 이름(username)과 동일한 이름으로 public 레포지토리를 생성하고 RRADME.md 파일을 추가하면 프로필 페이지 상단에 README 내용이 표시된다. 프로필 페이지엔 주로 자신이 소개하고 싶은 프로젝트, 기술 스택 등을 기재한다. 카테고리별로 주목할만한 프로필 페이지를 모아둔 사이트도 있다. 대부분의 개발자들이 블로그를 운영하고 있어서 그런지 Latest Blog Posts 헤더에 최근 글 목록을 보여주는 프로필이 많다. 이 기능은 rss-parser 같은 라이브러리를 통해 RSS 피드 목록을 불러오고 README.md에 반영하는 방식으로 구현되는데, 이 작업을 GitHub Actions를 통해 정기적으로 수행하도록 만들 수 있다. RSS 설정먼저 자신의 블로그 혹은 ..
[DevTools] ESLint 9 Flat Config + Prettier 설정 (TypeScript, React)
[DevTools] ESLint 9 Flat Config + Prettier 설정 (TypeScript, React)
2024.06.30Flat 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..
[DevTools] nvm보다 40배 빠른 노드 버전 관리 도구 — fnm
[DevTools] nvm보다 40배 빠른 노드 버전 관리 도구 — fnm
2024.06.18Node 버전 관리 도구로 줄곧 nvm을 사용하다가 Rust로 작성된 fnm이 nvm에 비해 40배 이상 빠르다는 글을 보고 바꿔야겠다고 마음먹었다. volta, fnm 둘 중 고민하다가 결국 fnm을 선택했다. nvm 인터페이스와 거의 동일하고 .nvmrc 파일을 지원하는 점이 마음에 들었다. nvm은 bash 스크립트로 작성됐기 때문에 기본적으로 Unix 계열에서만 작동하는 반면, fnm은 Windows도 지원하는 장점이 있다. fnm으로 바꾸고 나서부터 터미널 로드 속도가 훨씬 빨라진 게 체감된다. 참고로 fnm은 Fast Node Manager의 약자다. 설치 방법더보기❶ nvm 관련 파일 삭제 : rm -rf ~/.nvm❷ ~/.bashrc, ~/.bash_profile, ~/.zshrc, ~..
[DevTools] Prettier 주요 포맷팅 옵션과 추천 설정
[DevTools] Prettier 주요 포맷팅 옵션과 추천 설정
2024.06.15들어가며자바스크립트를 사용하는 개발은 코드 포맷팅 도구로 Prettier를 많이 사용한다. Prettier는 .prettierrc (혹은 .prettierrc.js) 구성 파일에 원하는 코드 스타일을 커스터마이징 할 수 있는데, 한국어로 구글링 하면 많이 나오는 국룰 커스텀(?)을 별생각 없이 사용하고 있었다.// .prettierrc{ "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80} 사용하는데 큰 문제는 없었지만 언제 한 번 선호하는 코드 스타일에 따라 설정을 손봐야겠다는 생각을 하던 참에 우연히 My Code Formatting Guidelin..
기술 봉건주의 Techno Feudalis
기술 봉건주의 Techno Feudalis
2024.06.11최근 해외에서 큰 인기를 끌고 있는 책 (Techno Feudalism)는 인터넷과 첨단 기술 시대에 접어들었다고 여기는 일반적인 생각에 도전장을 내민다. 저자 야니스 바루파키스(Yanis Varoufakis)는 그리스의 경제학자로, 세계 최대 게임 플랫폼인 밸브(Valve)에서 근무한 후 그리스 재무장관을 역임한 인물이다. 그는 이 책을 통해 인류가 오히려 고도로 발달한 기술을 바탕으로 새로운 형태의 봉건 시대로 돌아가고 있다고 주장한다. 봉건주의는 중세 유럽에서 널리 퍼졌던 제도로, 대지주가 넓은 땅을 소유하고 그 땅 위의 모든 것을 통제하며 농민들은 영주의 자산인 농노가 되는 체제였다. 현재의 인터넷 환경도 이와 비슷한 점이 많다. 인터넷이라는 광대한 공간을 몇몇 거대 기업들인 구글, 애플, 마이크..
[시놀로지 나스] 포트 개방 없이 원격에서 SMB 접속하기 - Tailscale
[시놀로지 나스] 포트 개방 없이 원격에서 SMB 접속하기 - Tailscale
2024.06.10원격(외부) 네트워크에서 SMB에 접속하려면 139, 445(맥북 연결 시) 등의 포트를 개방해야 된다. 하지만 이러한 포트들은 보안에 취약하기 때문에 기본적으로 SMB 프로토콜은 로컬 네트워크에서만 사용하는 것을 권장한다. 보안 취약성을 최소화하면서 원격에서 접근하려면 로컬 네트워크에 VPN을 구축하는 것이 좋다. OpenVPN, WireGuard 등 사설 VPN을 구축하는 여러 가지 방법이 있는데 Tailscale을 사용하는 게 가장 편리하다. Tailscale은 WireGuard를 이용한 사설 Mesh Network 서비스다. Tailscale에 연결된 장치는 같은 네트워크에 있는 것처럼 작동한다. Tailscale은 설정이 거의 필요 없고 SSO 로그인을 사용하므로 보안 문제가 발생할 일도 적다...
[미립자팁] 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()이 있지만 삽입 위치를 지정할 수 없고, 기존 요소를 덮어쓰기 때문에 전체 요소를 다시 파싱해야 하는 단점이 있..