[etc] 🌰🐿️ 각종 개발 도구, 유틸리티 사이트, 언어, 라이브러리 모음

Published: 2015-06-08 by 놀이터흙이제맛

• Categories:
• etc 1

• Tags:
• acorns 1
• devtool 8
• link 1
• note 4

• 개요
• 1. 문서, 메뉴얼, 참고 자료
  • 일반 문서
  • 특화 가이드
  • HTTP 표준
  • 보안
• 2. 유닉스/리눅스 Unix/Linux
• 3. 개발 도구
  • 코드 에디터, IDE
  • 온라인 코드 에디터, 스니펫
  • 정규식 Regular Expressions
  • 의존성 관리(라이브러리 설치/조회/삭제)
  • SDK Manager
  • JSON 도구
• 4. 프레임워크, 라이브러리
  • 프론트엔드 프레임워크
  • 백엔드 프레임워크
  • CSS 프레임워크, UI 컴포넌트 라이브러리
  • JavaScript 라이브러리
  • React 전용 라이브러리
  • Vue 전용 라이브러리
  • 번들러
  • UI 컴포넌트 라이브러리
• 5. 인프라, 배포
  • Web server/WAS
  • PaaS (Platform as a Service)
  • IaaS (Infrastructure as a Service)
  • BaaS (Backend as a Service)
  • CDN
  • 호스팅, 터널링
  • 프로세스 매니저
  • 메시지 브로커(메시지 큐 시스템)
• 6. 데이터베이스
  • DBMS
  • DBMS Tool
  • ERD
• 7. 테스트, 품질 관리
  • 유닛 테스트 프레임워크
  • 테스트 도구
• 8. 인프라 모니터링, 성능 분석
  • APM(Application Performance Management), 프로파일링
  • 데이터 시각화
• 9. 보안, 인증
• 10. 프로그래밍 언어 Programming Language
  • 언어 변환 및 분석
• 11. 런타임 환경 Runtime Environments
• 12. 크로스 플랫폼 개발
• 13. 디자인, 다이어그램
  • 다이어그램, UML
  • 마인드맵
  • 와이어프레임, 기획
  • 디자인 리소스
• 14. 네트워크, 보안
  • SSH/텔넷/FTP 클라이언트
  • VPN
  • 트래픽 캡처
  • IP 확인
• 15. 버전 관리
• 16. 코드 하이라이팅
• 17. 생산성, 관리
  • 일정, TODO
  • 메일 서비스
  • 결제
• 18. AI, 머신러닝
• 19. 모바일 개발
• 20. 기타 유틸리티
  • 개발 관련
  • 시스템 유틸리티
  • 매크로, 키 매핑
  • 미디어 플레이어
  • 미디어 편집
  • 원격 연결
• 21. 브라우저, 플러그인
  • 브라우저
  • Firefox 플러그인
  • Chrome 플러그인
• 22. 기타 서비스
• 23. 통계, 분석
• 24. 문서 작성 도구
  • Presentation

개요

쓰니는 다람쥐같은 습성이 있어서 일단 모으는 것을 좋아한다고 한다.

자주 사용하거나 중요한 것은 ⭐표시함.

1. 문서, 메뉴얼, 참고 자료

일반 문서

• MDN Web Docs: Mozilla Developer Network의 개발자를 위한 기술 문서.
• ⭐DevDocs: 개발자용 API 문서 모음 사이트. 깃허브 링크
• WikiDocs: 온라인 책 제작 공유, 프로그래밍 언어별 튜토리얼이 있음.
• The Concise TypeScript Book: TypeScript의 모든 것을 정리한 문서.
• ECMA International: ecma-262: 비영리 국제 표준화 기구인 ECMA Internation의 사이트. 이 문서에서는 ECMAScript의 버전별 명세와 현재 유효한 표준을 볼 수 있다.
• You might not need jQuery: jQuery API 대신 쓸 수 있는 자바스크립트 + CSS 코드를 알려주는 사이트. 예를 들어 $(el).show()를 찾으면, el.style.display = ''를 알려주는 식이다.
• standard-readme: 누군가 만들어놓은 README 작성 표준

특화 가이드

• ⭐Can I use: 웹 API, HTML, CSS 등을 어떤 브라우저에서 지원하는지를 알려주는 사이트.
• 0.30000000000000004.com: 부동 소수점에 대해 설명하는 문서
• link anatomy: location 해부학(?)
• JS Is Weird: 자바스크립트의 혼돈의 카오스 같은 여러 현상들을 퀴즈 형식으로 설명하는 사이트

HTTP 표준

• rfc9110 | HTTP Semantics)
• rfc6648 | Deprecating the "X-" Prefix and Similar Constructs in Application Protocols
• The W3C Markup Validation Service: W3C에서 운영하는 걸로 보이는 마크업 검사기. 소스 입력 방법으로 URL, 파일, 직접 입력 세 가지를 제공한다. 그런데 이 검사기는 순수 HTML을 대상으로 작성된 검사기라서 리액트 같은 프론트엔드용 프레임워크 소스를 검사하면 죄 틀렸다고 나온다. 자매품으로 CSS Validator도 있다.

보안

• MITRE | CVE: 공통 취약점 아카이빙 사이트
• CVE.report
• DevHub Advisory: mitre 보다 읽기 좋은 형식으로 설명해주는 사이트인데, 이런식으로 https://devhub.checkmarx.com/cve-details/CVE-2016-1000027 맨 뒤 path만 바꿔서 조회하면 편하다.

2. 유닉스/리눅스 Unix/Linux

• Crontab.guru: Cron(리눅스/유닉스의 스케줄러) 표현식을 테스트하거나 랜덤으로 만들어주는 사이트. Cron Job의 모니터링 소프트웨어를 파는 Cronitor에서 운영한다.

3. 개발 도구

코드 에디터, IDE

• ⭐Sublime Text: 윈도우 기본 노트패드를 완벽히 대체 가능한 앱. 빠르고 가볍고 멀티 캐럿을 지원한다. 무료 버전은 가끔 저장할 때 팝업이 뜬다.
• Notepad++: 좀 오래됐지만 가볍게 쓰기 좋음. 서브라임으로 열었을 때 앱이 멈춰버릴 정도로 큰 파일도 노트패드++ 에선 잘 열린다.
• ⭐Visual Studio Code
• Obsidian: 신개념 텍스트 에디터. 마크다운과 다이어그램을 기본으로 지원하고, 노트끼리 링크로 연결할 수 있다. 작성된 노트 기반으로 자동 생성되는 마인드맵 기능이 있다. 작성한 파일의 클라우드 동기화 기능(Obsidian Sync)은 유료다.
• Cursor: AI 기반 코드 에디터. 일렉트론 + 모나코 에디터 기반이라 VSCode와 인터페이스가 매우 유사하다.
• Zed: 윈도우는 아직 지원 예정(2025-02-05)이라 기대만 하고 있는 텍스트 에디터. 특징은 고성능, 경량, 실시간 협업 기능이다.
• Eclipse
• IntelliJ
• jEdit
• NetBeans
• Cloud9
• WebStorm
• Aptana

온라인 코드 에디터, 스니펫

• CodePen: 온라인 코드 편집기 #1. 웹으로 코드를 작성하고 테스트하거나 남들과 공유할 수 있는 서비스.
• JSFiddle: 온라인 코드 편집기 #2
• CodeSandbox: 온라인 코드 편집기 #3. 웹으로 직접 작성 말고도 CLI 업로드를 지원한다.
• StackBlitz: 온라인 코드 편집기 #4. 프로트엔드에 특화되어 있다. 깃허브 저장소와 연동할 수 있고, Node.js 같은 런타임 환경을 제공한다. public 프로젝트에 한해 무료로 사용 가능.
• GitHub Gist: 코드 스니펫 공유용 앱 #1. 사용하려면 깃허브 아이디 필요
• Pastebin: 코드 스니펫 공유용 앱 #2. 로그인 필요함

• [Hastebin

  Toptal](https://www.toptal.com/developers/hastebin): 코드 스니펫 공유용 앱 #3. 로그인 필요 없음

• Snippet.host: 코드 스니펫 공유용 앱 #4. 로그인 필요 없음
• Carbon: 코드 스니펫 공유용 앱 #5. 이쪽은 코드를 이미지로 만들어주는 사이트다.

정규식 Regular Expressions

• regular expressions 101: 정규식 테스트 겸 코드 공유 사이트. (근데 왜 101일까)
• RegExr: 정규식 테스트 사이트
• REGEXPER: 정규식을 (나름)이쁘게 설명해줌. 요딴식으로 https://regexper.com/#^M[^iI]*%3F[iI][^iI]*%3F%24 URL에 정규식을 때려넣는게 특징
• [^grex$](https://pemistahl.github.io/grex-js/): 테스트 케이스를 작성하면 정규식을 만들어줌

의존성 관리(라이브러리 설치/조회/삭제)

• Chocolatey: Windows OS용 패키지 관리 도구. NuGet 기반으로 만들어졌다 한다. 비슷한 것으로 MS 공식 도구인 Winget이 있다.
• Scoop: Chocolatey보다 규모와 사용자는 적지만, 개발자 커뮤니티가 매우 활성화되어 있다고 함.
• uv: pip, virtualenv, pip-tools를 대체하는 파이썬의 패키지 매니저. 의존성 관리와 가상 환경 관리 등을 지원한다.

SDK Manager

• Node Version Manager: Node.js의 설치/버전 관리 도구. 여러 버전의 Node.js를 설치하고 지금 사용하려는 버전으로 손쉽게 전환할 수 있게 해준다. 통칭 nvm
• SDKMAN: nvm처럼 여러 버전의 SDK를 설치하고 특정 버전으로 전환하는 기능을 제공하는 SDK 관리 도구다. 지원하는 SDK로 Java, Scala, Groovy, Kotlin, Ceylon, Gradle, Maven 등이 있다. 단점으로, SDKMAN을 실행하려면 bash 환경이 필요하기 때문에 WSL이 아니면 윈도우에서는 쓸 수 없음.

JSON 도구

• ⭐JSON Placeholder: JSON 응답을 받아야하는데 백엔드를 만들기 귀찮으면 쓰는 Free Fake JSON API 서버
• jsoneditoronline.org: JSON 편집 및 뷰어
• jsonviewer.codeplex.com: JSON 뷰어

4. 프레임워크, 라이브러리

프론트엔드 프레임워크

• Vue: 프론트엔드 라이브러리 #1.
• ⭐React: 프론트엔드 라이브러리 #2.
• React Native: 리액트 기반의 크로스 플랫폼 개발 프레임워크. 자바스크립트 코드 하나로 안드로이드와 iOS에서 작동하는 앱을 빌드할 수 있다.
• Svelte: 프론트엔드 프레임워크. 가볍고 단순한 게 특징. 일반적인 프레임워크와 다르게 런타임 대신 컴파일러로 작동한다. 이 말은 빌드 후에 별도로 불러오는 라이브러리가 없어 성능과 로딩 속도에서 이점이 있다는 뜻이다.
• Flutter: 구글이 만든 UI 툴킷(SDK) 겸 크로스 플랫폼 개발 프레임워크. 지원되는 플랫폼은 Windows, macOS, 웹이다. 사용언어는 Dart
• Vite: 모던 프론트엔드 프로젝트를 위한 빌드 도구. 리액트, 뷰, 스벨트와 순수 자바스크립트를 모두 지원한다. 빠른 콜드 스타트, 핫 모듈 교체, 빌드 최적화, 플러그인 시스템 등이 특징이다.
• Gatsby: 리액트 기반의 정적 사이트 생성(SSG, Static Site Generation) 프레임워크. 오픈 소스다.
• ⭐Next.js: 리액트 기반 풀스택 프레임워크. SSR, SSG, CSR을 모두 지원한다. 주로 프론트엔드 개발에 사용된다.
• ⭐React Router: 리액트 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위해 사용되는 라이브러리. 7.x 버전부터는 Remix 3와 통합된 프레임워크 모드를 지원한다.
• ⭐Remix: 리액트 기반 풀스택 웹 프레임워크. Next.js보다 가볍고 배우기 쉽다. Remix는 표준 웹 API를 활용해 만들어졌기 때문에 브라우저, Node.js, 서버리스 플랫폼, 클라우드 엣지 등의 다양한 환경에 동일한 코드 베이스로 배포할 수 있다(Next.js는 Node.js 환경에서만 배포가 가능하다). 최신 버전인 Remix 3은 React Router 7의 프레임워크 모드로 통합되었으니, 도움말이 필요하면 React Router의 문서를 볼 것.
• Quasar Framework: 뷰 전용인듯?
• Vuetify: 뷰용 컴포넌트 프레임워크

백엔드 프레임워크

• ⭐Netty: 자바 네트워크 앱 개발용 NIO(비동기 입출력) 클라이언트-서버 프레임워크
• Spring: 자바 백엔드의 대명사 격인 자바 서버 애플리케이션 개발 프레임워크
• NestJS: 타입스크립트 기반의 백엔드 애플리케이션(=API 서버) 구축을 위한 Node.js 프레임워크. 의존성 관리, 모듈화, 서버 사이드 렌더링, 웹소켓 등을 지원한다.
• Tiles: 자바에서 사용하는 템플릿 프레임워크. 지금은 retired 상태라서 업데이트는 없다.
• SiteMesh: 타일즈와 같은 JSP 템플릿 프레임워크. 오래되긴 마찬가지긴 하지만 가장 최근에 썼었…던가?

CSS 프레임워크, UI 컴포넌트 라이브러리

• Bootstrap: 범용 프레임워크로 분류됨
• Bulma: Flexbox 기반
• Foundation Framework
• ⭐Tailwind CSS: 미리 작성된 스타일링 클래스를 제공하는 방식. 유틸리티 기반 프레임워크로 분류됨
• daisyUI: Tailwind CSS의 플러그인으로, 자주 쓰는 클래스를 조합해 만든 컴포넌트 세트를 제공한다. 테일윈드조차 귀찮게 느껴질 때 유용하지만, 복잡한 커스터마이징이 필요한 경우엔 다소 불편할 수 있다.
• StyleX: 메타(페북)에서 만듦. 테일윈드 경쟁자라 함. 자바스크립트 객체 기반으로 사용한다. 조건부 스타일 설정, 컴파일, 타입 안정성(type safe)이 특징이다. 리액트 없이도 쓸 수 있는 것으로 보임.
• Open Props
• Basscss
• Water.css
• MVP.css
• Materialize CSS
• System.css: 레트로 갬성. 애플 시스템 OS와 똑같다고 한다.
• NES.css: 닌텐도 스타일
• PSone.css: 플스 1 스타일
• 98.css: 이건 윈도우 98
• XP.css: 윈도우 XP
• 7.css: 이건 윈도우 7
• Bojier: 메일용
• Chota
• Pico.css
• ChakraUI: React 애플리케이션을 위한 간결한 모듈식
• Mantine: 리액트용 UI 컴포넌트 라이브러리
• Ant Design: 리액트용 UI 컴포넌트 라이브러리
• NextUI: 리액트용 UI 컴포넌트 라이브러리
• Reach UI: 리액트와 뷰용 UI 컴포넌트
• Headless UI: 리액트와 뷰용 UI 컴포넌트
• ⭐shadcn/ui: 리액트용 UI 컴포넌트 컬렉션. 소스 코드를 복사해 커스터마이징하는 방식으로, 전통적인 라이브러리와 차이가 있다. Tailwindd CSS와 Radix UI 기반으로 만들어졌다. 사실 CSS 프레임워크라기보단 UI 컴포넌트 라이브러리에 가깝다.
• Storybook: 프론트엔드 워크샵이라고 한다(그게뭐야). UI 컴포넌트나 페이지를 만들 때 쓴다는데 아직 몲. 근데 가급적 빨리 써보는 게 좋을 것 같은 느낌적인 느낌
• component.gallery: CSS 프레임워크와 디자인 시스템 같은 것을 모아놓은 사이트
• Material UI: 리액트용 UI 컴포넌트 모음
• @mdi/svg: MDI(Material Design Icons) 프로젝트의 SVG 아이콘을 제공하는 라이브러리. 단독 기능은 필요한 아이콘을 svg로 만들어주는 게 있다. (아마도?)
• Vitebook

JavaScript 라이브러리

• Moment.js: 날짜와 시간을 다루는 자바스크립트 라이브러리 #1. 포매터가 필요하면 이걸 쓰자
• ⭐Day.js: 날짜와 시간을 다루는 자바스크립트 라이브러리 #2. 포매터 지원함. MUI의 Date picker에 적용된 라이브러리다.
• Lodash: 모듈 시스템을 지원하는 모던 자바스크립트 유틸리티 라이브러리. 성능 향상을 위해 쓰인다. 대표적으로 lodash.debounce가 있음.
• babel: 일종의 컴파일러(?). 작성한 자바스크립트 코드의 최신 문법과 기능을 구버전의 브라우저나 환경에서 실행될 수 있도록 변환해 준다.
• Immer: 불변성을 유지하면서 객체를 쉽게 수정할 수 있게 해주는 라이브러리. 리액트에서 상태값이 객체일 때 활용하기 좋다. 제공된 draft를 직접 변경하는 방식으로 사용하는데, 변경된 부분만 복제하도록 최적화되어 있기 때문에 객체 전체의 깊은 복제용으로는 적합하지 않다.
• sharp: 고성능의 이미지 처리 Node.js 패키지. 이미지 최적화에 주로 사용된다. 제공되는 기능은 이미지 크기 조정, 포맷 변환, 자르기, 회전, 반전, 필터 적용 등.
• Execa: Node.js 환경에서 외부 명령어를 실행할 수 있게 도와주는 프로세스 실행 패키지. child_process 모듈의 개선된 대안으로, 더 나은 API를 제공하며 명령어 실행 결과를 쉽게 다루고, 비동기 작업과 오류 처리 등을 효율적으로 처리할 수 있다.
• Puppeteer: Google에서 개발한 헤드리스 브라우저 제어 Node.js 패키지, Chrome 또는 Chromium 브라우저를 프로그래밍 방식으로 제어할 수 있게 해준다. 브라우저를 자동화하거나 웹 스크래핑, UI 테스트, PDF 생성, 스크린샷 찍기, 성능 측정 등의 작업을 수행할 수 있다. 기본적으로 헤드리스 모드(브라우저 UI 없이 실행)로 작동하지만, 헤드 모드로 실제 브라우저 창을 띄워 작업을 실행할 수도 있다.
• fullPage.js: 어떤 게임의 이벤트 페이지에서 줏어온 거. 전체 화면 스크롤 웹 사이트(단일 페이지 웹 사이트 또는 단일 페이지 사이트라고도 함)를 만들고 사이트 섹션 내에 가로 방향 슬라이더를 추가하는 간단하고 사용하기 쉽다…는데 사실 뭔지 잘 몲.
• Dexie.js: 브라우저의 IndexedDB를 다루는 서드 파티 중 가장 인기 있는 라이브러리. Promise 기반 API를 제공한다.
• pug: Node.js 기반 템플릿 엔진. HTML을 서버 사이드 렌더링할 때 사용한다. 예전 이름은 Jade
• json-server: JSON 파일만으로 API 서버를 제공하고 싶을 때 사용하는 fake API server 라이브러리.
• ⭐live-server: 로컬 전용 웹 서버가 필요할 때 설치하는 패키지. 페이지 새로고침을 자동으로 해주는 live reload 기능을 제공하며 index 파일이 필요 없어서 편하다.
• ⭐serve: 빠르고 가벼운 정적 파일 제공용 웹 서버. Live reload 기능은 없으며, 프로덕션 환경을 미리 보고 싶을 때 사용한다.

React 전용 라이브러리

• Million: 리액트를 빠르게 만들어준다고 함. (무려 70%)
• Redux: 리덕스. 리액트용 상태(reactive state) 관리 라이브러리 #1. 모든 상태 변화가 중앙에서 관리되기 때문에 예측과 디버깅 등 유지보수에 도움이 된다고 한다. 리액트에서는 복잡한 계층 구조를 가진 컴포넌트들 사이에서 state의 변화를 전달할 때 props drilling이라 불리는 번거로운 작업이 필요한데, 리덕스는 이러한 작업을 간소화할 수 있는 라이브러리다. 그런데 문법이 너무 복잡한 탓인지 인기가 점점 시들해진다고…
• ⭐zustand: 리액트용 상태 관리 라이브러리 #2. 리덕스와 마찬가지로 props drilling 문제를 방지하고 상태를 전역으로 관리할 수 있게 해준다. 리덕스보다 코드 작성이 간결하다.
• recoiljs: 리액트용 상태 관리 라이브러리 #3
• Jotai: 리액트용 상태 관리 라이브러리 #4
• React Hook Form: 입력 폼을 쉽게 다루게 해주는 라이브러리. 쓰기 좀 복잡하긴 한데 챗피티가 자꾸 좋다고 들이댐.
• useHooks: 리액트 훅 모음 #1. 리액트 개발에서 자주 반복되는 기본적인 로직(클립보드 복사, 디바운스, 로컬 스토리지 관리 등)을 커스텀 훅 형태로 모아놓은 라이브러리다. 아래의 react-use에 비해 비교적 간단하고 필수적인 훅 위주로 모아져있다. usehooks.com는 원래 리액트의 커스텀 훅을 직접 만들어보며 학습할 수 있도록 예시와 개념을 설명하는 튜토리얼 사이트였음.
• react-use: 리액트 훅 모음 #2. 이 패키지도 리액트 개발에서 자주 반복되는 로직(브라우저 API 연동, 상태 관리, UI 상호작용 등)을 훅 형태로 모아놓은 라이브러리다. useHooks 보다 방대하고 폭 넓은 훅들을 제공한다.
• ⭐TanStack Query: 데이터 페칭, 캐싱, 상태 업데이트를 간단하고 효율적으로 관리할 수 있게 해주는 라이브러리다. 네트워크 요청과 그 결과를 체계적으로 관리해 주는 '데이터 상태 관리' 솔루션이라 설명하도 함. 예전 이름은 React Query였다.
• ⭐SWR: 데이터 페칭과 캐싱을 간편히 처리해주는 라이브러리. Vercel에 만듦.

Vue 전용 라이브러리

• Pinia: 뷰에서 공식으로 지원하는 전역 상태 관리 라이브러리다.

번들러

• webpack
• Browserify
• rollup.jshttps://rollupjs.org/
• Parcel

UI 컴포넌트 라이브러리

• Air Datepicker: 프론트엔드용 달력 컴포넌트. 순수 자바스크립트 기반이며, 언어 기본값이 러시아어인 걸 보니 러시아산인 모양
• Tom Select: 셀렉트박스. 순수 자바스크립트 기반이다.
• AG Grid: 주변 사람이 추천한 유료 그리드
• jqxgrid
• Toast UI Grid: 줄여서 TUI Grid. NHN에서 만들었고 MIT 라이선스의 오픈 소스 그리드. 가볍게 쓰기 좋지만 깃허브 대응이 좀 많이 느리다.
• Fontello: 아이콘을 폰트로 구현할 때 씀. 사이트에서 선택한 아이콘만 다운로드할 수 있음.
• Reveal.js: HTML로 만드는 PPT

5. 인프라, 배포

Web server/WAS

• Apache HTTP Server: 검색으론 다운로드 링크 찾기 힘듬.

PaaS (Platform as a Service)

PaaS 중에 유명한 것들은 대체로 웹 앱 소스를 올리면 대신 빌드와 배포를 해주는 클라우드 서비스들이다.

• Heroku: 애플리케이션 개발과 배포를 위한 PaaS 서비스. 초반에 있었다는 일부 무료 정책(앱 5개까지 무료)은 없어진 모양이다. 다음 목록은 추천 받은 대체제들: Koyeb, Fly.io, Northflank
• Kubernetes: 통칭 K8s, 컨테이너화된 애플리케이션을 관리하고 배포하기 위한 오픈 소스 플랫폼이다. 기존 PaaS 범주와 비슷하지만 다르다고 한다. 공식 문서 링크. "컨테이너화된 애플리케이션을 배포, 관리, 확장할 때 수반되는 다수의 수동 프로세스를 자동화하는 오픈 소스 컨테이너 오케스트레이션 플랫폼"이라 소개된다.
• cloudtype: 최스님이 알려줌. 안써봄
• smolsite: 스몰사이트, ZIP으로 압축해서 업로드하면 무료로 호스팅 해줌
• Vercel: 프론트엔드용 클라우드 플랫폼. Next.js의 개발사이기도 하다. 정적 사이트와 Jamstack 이키텍처에 최적화되어 있다고 한다.
• ⭐Netlify: 정적 웹사이트 및 프론트엔드 애플리케이션을 빠르고 쉽게 배포할 수 있는 클라우드 기반 플랫폼. 웹 앱 배포 및 관리를 위한 다양한 기능을 제공한다. 주요 특징으로 자동 빌드 및 배포, 서버리스, 글로벌 CDN, 커스텀 도메인, 무료 SSL 인증서 등이 있다. 뭔지 모르겠지만 JAMstack(?) 아키텍처와 잘 맞는다고 함. 무료 플랜에선 월 100GB의 트래픽 제한이 있다.

IaaS (Infrastructure as a Service)

인프라만 제공하는 클라우드 서비스.

• AWS: 아마존의 the AWS. 제한적인 무료 티어를 제공함
• Google Cloud Platform (GCP)
• Azure
• Oracle Cloud Infrastructure (OCI): 오라클 OCI. 얘네도 무료 티어가 있음
• Pulumi: 자바스크립트 코드로 클라우드 인프라를 관리하는 IaC 서비스. 개인 용도는 무료(2023-09-13)

ℹ️ IaC(Infrastructure as Code): 코드를 사용하여 수동 프로세스가 아닌 자동으로 인프라를 정의하고 관리하는 방법론의 일종

BaaS (Backend as a Service)

BaaS란 백엔드의 전반적인 기능을 제공하는 서비스를 의미함.

• Firebase: 파이어베이스
• Supabase: PostgreSQL 기반의 백엔드 기능을 제공하는 BaaS 플랫폼. 인증, 데이터베이스, 파일 저장소, 서버리스 기능 등을 제공한다.
• PocketBase: 오픈 소스 백엔드 서비스 #2. 실시간 데이터베이스, 인증, 파일 저장소, 어드민 대시보드를 파일 하나로 만들어준다. 다른 서비스와 다르게 클라우드가 아니라 서버를 직접 구축하는 방식이다.

CDN

• cdnjs: Cloudflare에 의해 호스팅되는 무료 오픈 소스 CDN
• JSDELIVR: 역시 무료 CDN. npm과 GitHub에 최적화되어 있다고 한다.
• UNPKG: npm으로 배포된 패키지를 불러올 수 있는 CDN. unpkg.com/react@16.7.0/umd/react.production.min.js 요런식으로 씀

호스팅, 터널링

• ngrok: 로컬 구동 서버(localhost)를 외부에서 접속할 수 있게 해주는 로컬 터널링 도구. HTTPS 프로토콜도 지원한다. 윈도우에선 chocolatey로 설치하고, 별도로 발급 받은 토큰을 ngrok config add-authtoken MY_TOKEN 명령으로 등록한 뒤 ngrok http http://localhost:8080 명령으로 로컬 서버와 연결하는 식으로 구동한다. expo는 터널링 옵션을 위해 ngrok을 내장하고 있기도 하다.

프로세스 매니저

• PM2: Node.js 앱을 운영하는데 자주 쓰이는 프로세스 매니저. 자동 재시작, 로드 밸런싱, 모니터링, 로그 관리, 무중다 배포(Zero downtime deployment) 등의 기능을 제공한다.

메시지 브로커(메시지 큐 시스템)

• Apache Kafka: 카프카. 아파치 소프트웨어 재단이 스칼라로 개발한 오픈 소스 분산 스트리밍 플랫폼. '메시지 브로커 프로젝트' 혹은 '분산 환경에서 사용되는 데이터 스트리밍 플랫폼'으로 소개된다. 여러 데이터베이스의 동기화 작업이나, 비동기로 메시지를 주고 받을 때 사용한다(데이터 입출력도 여기에 해당함). 에이전트를 설치하는 방식이라 카더라.
• RabbitMQ: MQTT, AMQP를 구현한 오픈 소스 메시지 브로커. Erlang으로 만들어졌다(얼랭?). 사용자 요청의 비동기 처리, 앱 간 메시지 교환, 분산 시스템에서의 메시지 브로커링 등에 활용된다.

6. 데이터베이스

DBMS

• ⭐SQLite: 오픈 소스 RDBMS #1. 매우 가벼워서 보통 서버가 아닌 소프트웨어에 내장시키는 임베디드용으로 쓰인다. ACID(Atomicity, Consistency, Isolation, Durability) 특성을 준수하는 기능과 트랜잭션을 지원한다. 시스템이 매우 안정적이라 프로시저 같은 추가 기능이 필요한 게 아니라면 서버용으로 써도 된다고 하는 사람도 있다. 에스큐엘라이트 혹은 시퀄라이트라고 읽는다. 경량 DB라서 SQL 표준 기능이 일부 빠져있거나 제한적으로 제공한다. 예를 들어 외래키는 기본적으로 비활성화되어 있고 사용 제한이 있다. 그리고 프로시저는 미지원, 트리거와 윈도우 함수 등은 부분적으로 지원한다. 동시성 제어와 격리 수준도 다른 DBMS만큼 세밀하지 않으며 여러 사용자의 동시 쓰기 시 충돌 가능성이 있다. 따라서 SQLite를 서버에서 사용한다면 읽기 전용으로만 설계하고, 쓰기는 다른 수단을 마련할 것. 그리고 기본적으로 체크섬을 수행하지 않기 때문에, 디스크 손상으로 인한 데이터 무결성을 보장하지 않는다는 점은 주의해야 한다.
• ⭐PostgreSQL: 오픈 소스 RDBMS #2. SQL 표준을 높은 수준으로 준수하며 ACID와 트랜잭션을 지원한다. JSON이나 XML 같은 데이터 타입을 그대로 저장할 수 있고, 플러그인과 확장 모듈을 통해 사용자 정의 함수나, 데이터 타입, 인덱스 방식 등을 추가할 수 있다는 점이 기존 RDBMS들과 다르다. 예를 들어 PGMQ 확장을 설치하면 데이터베이스와 메시지 큐를 복잡한 구성 없이 단일 트랜잭션으로 묶을 수 있다.
• ⭐Redis: 인메모리 데이터베이스 중 가장 인지도 높음. 메모리에 데이터를 저장해서 속도가 빠른게 특징이며 디스크 백업 기능도 제공함.
• SwayDB: 레디스같은 인메모리 데이터베이스. 레디스처럼 서버용은 아니고 임베디드로 쓰이는 모양?

DBMS Tool

• DBeaver: 벤더 안가리는 도구. 이클립스와 같은 프레임워크로 추정.
• QueryBox: 벤더 가리지 않고 접속할 수 있는 국산 앱. 기업용은 유료.
• Flyway: 데이터베이스의 버전 관리 도구. 마구잡이로 헤집어놓은 데이터도 원하는 시점으로 되돌리는 기능 등을 제공한다. 개발과 테스트를 위한 데이터베이스 구축에 매우 쓸만한 오픈 소스 도구.
• ⭐DataGrip: IntelliJ IDEA Ultimate 패키지에 포함된 제품. 성능은 돈 값 한다.

ERD

• dbdiagram.io: 데이터베이스 ERD 전용. 웹 버전만 있긴 하지만 쓸만함. 별도의 스키마 문법을 사용하는 건 안좋음.
• ⭐erd-editor: VSCode에서 사용하기 좋은 무료 ERD 에디터. IntelliJ와 웹 버전도 지원한다.

7. 테스트, 품질 관리

유닛 테스트 프레임워크

• JUnit: 자바 테스팅 프레임워크. JUnit Platform + JUnit Jupiter + JUnit Vintage 세 개를 합친 JUnit 5 버전이 나왔음. (2023-02-15)
• AssertJ Core: 테스트용 자바 라이브러리. Spring boot starter 라이브러리에 포함돼 있다. (사실 JUnit도 같이 있음) 들리는 말로는 요게 더 좋다고 함.
• Mocha: 오래된 자바스크립트 테스팅 프레임워크 #1. 이하 모카
• Chai: 자바스크립트용 Assertion 라이브러리. 가독성 좋고 유연한 문법을 제공한다. 보통 모카와 같이 쓴다.
• Jest: 리액트 프로젝트에서 많이 사용하는 테스팅 프레임워크. Facebook에서 개발했다. 지금은 OpenJS 재단에서 관리하는 모양.
• ⭐Vitest: Vite 생태계의 테스팅 프레임워크. Vite와의 쉬운 통합, 빠른 실행 속도가 특징. ESM을 지원한다.

테스트 도구

• postman: HTTP Request/Response 테스트
• Selenium: 동적 웹 앱(페이지 로딩 후 자바스크립트 등에 의해 동적으로 구성이 변경되는 사이트) 테스트 혹은 크롤링에 사용되는 도구다.

8. 인프라 모니터링, 성능 분석

APM(Application Performance Management), 프로파일링

통칭 모니터링 도구 모음. 얘네들은 웬만하면 상용이다.

• Datadog: 데이터독. 인프라 모니터링. APM 기능도 있지만 시스템 성능 지표 분석 기능이 주력이다. 설치형이 아니라 데이터는 저쪽에서 관리하며, 비싸다.
• 제니퍼: 자바앱 모니터링
• VisualVM: 프로파일링 도구#1. 자바 앱용. VM의 환경, CPU와 메모리의 사용량, 클래스와 스레드의 점유율, CPU/메모리/JDBC 프로파일링 등의 기능을 제공한다. 오픈 소스
• Eclipse Memory Analyzer: 프로파일링 도구 #2. 자바 앱용. VisualVM보다 기능이 조금 더 많고 도움말이 잘 되어 있어서 쓰기 편함. UI는 이클립스 기반임. 오픈 소스
• XRebel: 프로파일링 도구 #3. 자바 웹 앱 전용이다. 상용
• JProfiler: 프로파일링 도구 #4. 10일 무료. IDE와 연동할 수 있음. 상용
• YourKit Java Profiler: 프로파일링 도구#5. 이것도 IDE 연동 쌉가능. 단, Java 1.7 미만의 환경은 지원하지 않으며 상용이다.
• Jennifer: APM #2. 자바/PHP/닷넷 앱 모니터링. 상용
• WhaTap: APM #3. 앱/서버/DB/URL/컨테이너/인프라 모니터링. 상용이며 한국기업이라 한국어판을 제공한다.
• ⭐Pinpoint: 오픈 소스 APM. 네이버에서 만들었다 함
• Scouter: 오픈 소스 APM. LG CNS랑 관련이 있나 봄. 이거 만든 사람들이 WhaTap 만들었다고 하던디…?

데이터 시각화

• Grafana: 메트릭/로그 시각화 도구. 오픈 소스다. 메트릭이란 주기적으로 발생하는 타임스탬프를 포함한 수치 데이터라고 한다.
• Kibana: Elastic Stack의 일부인 데이터 시각화 및 분석 도구. 모니터링과 APM 기능도 제공됨.

9. 보안, 인증

• Let's Encrypt: 비영리 단체인 ISRG, Internet Security Research Group에서 제공하는 TLS(SSL) 인증서 무료 발급 사이트.
• certbot: Let's Encrypt에서 발급하는 TLS 인증서를 쉽게 관리하게 도와주는 오픈 소스 소프트웨어. EFF(Electronic Frontier Foundation)에서 만들었고 인증서 자동 갱신 같은 작업을 지원한다.
• HashiCorp Vault: 비밀번호 관리, 암호화 키 관리, 접근 제어 등을 통합 제공하는 오픈 소스. 암호화 키를 관리하는 용도로 쓴다. 클라우드, 온프레미스 모두 지원한다. 엔터프라이즈 버전은 전용 서버가 제공되지만 무료 버전은 직접 설치해야 한다.

10. 프로그래밍 언어 Programming Language

• ⭐Rust: 가비지 컬렉션(GC)을 사용하지 않으며 메모리 안전성(memory safe)을 추구하는 언어 #1. 마찬가지로 GC가 없지만 memory unsafe한 C와 C++의 대체제로 꼽힌다. 시스템 프로그래밍, 웹 어셈블리, 임베디드 시스템 등 다양한 분야에서 사용되는 범용 언어다. Mozilla Research에서 개발했다.
• Elixir: BEAM(Erlang의 가상머신) 위에서 실행되는 함수형 프로그래밍 언어. 동시성과 분산 처리에 강하며, 프로세스 간의 격리(한 프로세스의 실패가 시스템 전체에 영향을 주지 않음)를 통한 안정성이 특징이다. Erlang이 자바라면 Elixir는 코틀린에 비견된다. 디스코드는 실시간 메시징 처리를 Elixir로 구현했다고 함. 비결은 Erlang VM이 관리하는 Erlang 프로세스(OS의 프로세스나 스레드와 다른 개념)와 concurrency 지원 기능 덕분이라나…
• Erlang: 1980년대에 통신 시스템 구축을 위해 만들어진 언어(그래서 Erlang/OTP, Open Telecom Platform이라 함). 짧은 지연시간, 견고함, 내결함성, 분산 시스템 지원 등이 특징이다. 자바와 유사하게 다른 언어가 컴파일하는 가상머신(Erlang의 VM, BEAM이라 부른다)에서 작동한다.
• Ada: GC를 사용하지 않으며 메모리 안전성을 추구하는 언어 #2. 항공, 방위, 우주 산업처럼 높은 수준의 안전성과 정확성이 요구되는 시스템에서 쓰인다고 한다.
• Zig: GC를 사용하지 않으며 메모리 안전성을 추구하는 언어 #3. 셋 중 가장 최신 언어다(Ada의 표준화는 1983년, Rust의 최초 릴리즈가 2010년, Zig는 2015년에 개발 시작).
• Scala: 객체 지향 프로그래밍과 함수형 프로그래밍을 결합한 개발 언어. 왜인지 모르겠지만 개발자 설문조사 언어별 평균연봉 항목에서 늘 상위권을 차지한다. 자바 기반이며 JVM에서 실행된다.
• Kotlin: JVM에서 실행되는 자바와 상호 운용 가능한 언어. 안드로이드 개발에 주로 쓰인다. 네이티브, 자바스크립트(?)까지 지원한다고 하며 기존의 자바 코드를 호환해줘서 그대로 사용할 수 있다고 한다.
• Apache Groovy: JVM에서 작동하는 동적 타입 프로그래밍 언어(? 그게 뭔데). 자바, 파이썬, 루비 등의 언어에서 영향을 받았다 한다.
• Go: 한 때 세계에서 가장 돈을 많이 버는 프로그래밍 언어로 집계되기도 했으며 개발 속도와 실행 속도 둘 다 빠른 획기적인 언어라고 함. 언어 자체가 경량이라 늘 쓰던것만 쓴다는 소소한 단점이 있지만, 그만큼 빠르고 쉽게 익힐 수 있다고…
• Dart: 구글이 멀티 플랫폼 작동을 목적으로 만든 언어. 문법은 C와 비슷하다고 함. 자바처럼 DVM(Dart VM) 상에서 작동하거나 네이티브 컴파일을 따로 한다.
• ⭐TypeScript: 타입스크립트. 자바스크립트의 슈퍼셋(superset)으로, 이름처럼 정적 데이터 타입이 추가되어 컴파일 에러 검출이 가능한 게 대표적인 특징이다. 컴파일 타임이 존재하며 자바스크립트 코드로 변환된다.
• Mojo: 파이썬의 슈퍼셋. 파이썬의 느린 속도를 개선했으며 저수준의 제어가 가능한 것이 특징. Python 3.x를 완벽하게 호환한다.
• Jsonnet: 환경 설정용 언어(A configuration language). 오직 JSON 데이터를 만들기 위한 언어로, 기존 JSON에선 불가능하던 변수 참조, 조건 분기, 함수, import 등의 기능을 사용할 수 있다.

언어 변환 및 분석

• Figstack: 코드를 다른 언어로 번역, 영어로 해설, documentation comments 만들기, 시간 복잡도 계산, 작성한 코드 기반 자연어로 질문까지. 아직은 쪼끔 느린게 흠.
• OneLang.io: 개발 언어 병렬 번역기

11. 런타임 환경 Runtime Environments

• Node.js: 서버 사이드 자바스크립트 런타임
• Deno: Node.js 개발자가 만든 자바스크립트와 Rust기반의 자바스크립트/타입스크립트 용 런타임. Node.js 개선 버전이라고 보면 됨.
• Bun: Node.js보다 최적화된 성능, 더 나은 메모리 관리 등이 목표인 서버 사이드 자바스크립트 런타임. 다른 런타임보다 빠르다고 주장한다.

12. 크로스 플랫폼 개발

• Electron: 크로스 플랫폼 데스크탑 앱 개발 프레임워크. 오픈 소스고 자바스크립트 기반이다. VSCode, Atom, Notion desktop 등이 이걸로 만들어짐.
• Tauri: 크로스 플랫폼 앱 개발 프레임워크(안드로이드나 iOS도 되는 모양). 일렉트론의 경쟁 모델이다. OS의 네이티브 웹 런타임을 활용하며 백엔드는 러스트, 프론트엔드는 자바스크립트 기반이다. 리액트나 뷰 등의 대부분의 프론트엔드용 프레임워크를 지원한다. 일렉트론보다 가볍고 빠르며, 더 나은 보안을 장점으로 내세운다.

13. 디자인, 다이어그램

다이어그램, UML

• ⭐eraser: 마크다운 노트와 드로잉 앱을 합체시킨 신박한 물건. 엔지니어링 팀을 위한 화이트보드라 소개된다. 키보드로 플로우 차트 그리기 수월하다. Diagram as Code, 코멘트 기능 지원. 무료 플랜 제공
• Excalidraw: 웹 전용 드로잉 앱. 무료 사용 가능. eraser에 비해 가볍게 쓰기 좋다.
• Balsamiq: UML, 와이어프레임 등을 위한 드로잉 앱. 좋지만 무료 플랜이 없는 게 단점
• StarUML
• Draw.io
• Gliffy
• ⭐Mermaid: 간단한 텍스트 구문을 이용해 다이어그램을 생성해주는 자바스크립트 기반 라이브러리. 이런걸 Diagram as Code라고 한다. 플로우 차트, 간트 차트, 클래스 다이어그램, 깃 그래프, 시퀀스 다이어그램, 클래스 다이어그램, ERD 등을 지원한다. 더 자세한 내용은 여기서 확인.
• chart.xkcd: 자바스크립트로 만드는 차트. 결과물은 svg로 나옴. 발로 그린 것 같은 모양새가 특징
• ⭐tree.nathanfriend.com: 트리 구조의 텍스트 기반 다이어그램을 생성해주는 사이트. 입력한 값은 URL의 쿼리스트링에 포함되기 때문에 공유가 쉽다.

마인드맵

• XMind
• FreeMind

와이어프레임, 기획

• MockFlow
• Moqups
• Cacoo
• Wireframe.cc
• ⭐Axure: 기획안/와이어프레임 작성에 사용하는 앱. 무료 플랜은 없다. 가격은 월 25달러(2024-07-11)

디자인 리소스

• Figma: 요즘(2021-05-03) 뜬다는 UI 디자인 도구. 기본은 무료고, 대-충 비공개 프로젝트를 여러 명이 사용할 땐 유료인듯
• ThemeForest: 언어, 엔진, 프레임워크 별 테마(HTML과 CSS 묶음. 필요하면 JS까지) 파는 사이트
• loading.io: 로딩 이미지, 패턴, 텍스트 등을 받을 수 있는 사이트. 무료버전인 경우 색 정도밖에 못바꿈.
• 미리캔버스: 자칭 디자인 플랫폼. 템플릿 활용할 수 있는 간편한 디자인 도구를 제공하며 맞춤 디자인 의뢰도 가능함.
• Fluent Icons: 마소의 오픈 소스 아이콘 저장소. 마소가 만든건 아님. SVG 혹은 PNG로 받을 수 있다.
• Awesome list of free CSS Generator - DEV Community: CSS 코드 생성기 모음

14. 네트워크, 보안

SSH/텔넷/FTP 클라이언트

사실 윈도우 10부터는 Windows Terminal이 있어서 이런 거 필요 없지만… 🤭

• WinSCP
• PuTTY
• Xshell: 가장 좋으나 유료 라이선스.
• bitvise: 서버 딱 하나에 붙는 용도로는 아주 좋다. 여러 서버에 붙으려면 매번 프로필들을 불러와야 해서 불편.
• MobaXterm: 무료 앱 중에서 여러 서버 동시 접속 기능은 그나마…

VPN

• OpenVPN GUI: OpenVPN 커뮤니티 버전의 클라이언트 앱. 공식 앱의 이름은 OpenVPN Connect이며 OpenVPN GUI와는 다르다. VPN 설정과 같은 네트웤에서도 앱에 따라 차이가 있을 수 있다. 예를 들어 OpenVPN Connect로 특정 VPN에 붙었더니 인터넷 먹통 현상이 발생했는데, OpenVPN GUI에선 같은 문제가 발생하지 않음.
• Surfshark: 접속 국가 변조용 유료 VPN

트래픽 캡처

• Fiddler: 네트워크 디버깅 도구. 파폭은 SSL 인증서 때문에 빡칠 수 있다. 유료
• Wirehsark: 패킷 추적 도구.

IP 확인

• https://icanhazip.com: 내 공인 IP만 텍스트로 응답하는 사이트.
• https://whatismyipaddress.com: 접속한 PC의 IP 관련 정보를 보여주는 사이트 #1. 예전에 bot이 있었는데 사라짐.
• https://ipinfo.io: 접속한 PC의 IP 관련 정보를 보여주는 사이트 #2

15. 버전 관리

• ⭐Sublime Merge: Git GUI 클라이언트 #1. 기본적으로 무료 앱이며 다크 모드를 쓰고 싶을 때만 결제하면 된다. 속도가 CLI 수준으로 빠르고 키보드 단축키 지원이 훌륭한 편.
• Fork: Git GUI 클라이언트 #2. 가볍고 그래프가 보기 좋은게 특징. 무료지만 후원 방식으로 라이선스 구입이 가능하다.
• GitKraken: Git GUI 클라이언트 #3. 속도는 느리지만 편의성은 탑. 사설 서버 혹은 비공개 저장소는 유료버전이 아니면 사용할 수 없다. 😩
• gitui: Mdir(?) 스타일의 GUI 앱. 옛날 갬성이 좋으면 쓸만하다. 단점으로 커밋 그래프 기능이 없고, 셸에서 저장소 경로로 이동하여 실행하는 방식이라 여러 저장소를 관리하기 불편하다.
• GitHub Desktop: GitHub 공식 GUI 클라이언트. 단점으로 커밋 그래프 기능이 없다.

16. 코드 하이라이팅

• prismjs: 코드 하이라이팅 JS 라이브러리. HTML로 작성된 페이지는 어디든 적용할 수 있음. 깃허브
• Code Beautify: 인라인 코드 하이라이터 #1. 입력한 텍스트에 CSS를 적용해 HTML로 만들어주는 사이트. 코드 블록을 지원하지 않는 메일이나 게시판에서 사용하기 좋다.
• Color Scripter: 인라인 코드 하이라이터 #2.
• hilite.me: 인라인 코드 하이라이터 #3

17. 생산성, 관리

일정, TODO

• ⭐Workflowy: 온라인 할 일 관리 도구
• ⭐ClickUp: 온라인 프로젝트 관리 도구. 무료 플랜도 쓸만하고 간트 차트를 제공한다.
• Calendly: 메일로 일정 맞추기
• Linear
• Markwhen: Project planning example: 코드로 프로젝트 일정 표를 만드는 사이트

메일 서비스

• Guerrilla Mail: 일회용 메일 서버. 60분 동안만 유효한 메일 주소를 제공.
• sharklasers.com: 일회용 메일 서버 #2. 이건 꽤 오래감.
• Firefox Relay: 파폭 계정으로 사용한 메일에 별칭을 만들 수 있고, 해당 별칭으로 메일이 오면 파폭이 포워딩 해줌. fㅔ이크 메일을 진짜처럼 쓸 수 있게 해주는 것.
• Mailgun: 클라우드 기반 메일 인프라 서비스. 웹 API를 통해서 메일을 발송할 수 있다. 하루 100건은 무료
• stibee: 메일 마케팅 서비스. 읽기 쉬운 메일 작성 지원

결제

• stripe: 결제 대행 웹 앱. 해외판 PG사라고 생각하면 된다. 노션과 험블번들에서 쓰더라.
• PortOne: 30분이면 된다는 통합 결제 서비스. 이 서비스는 PG의 PG에 가깝다(?).
• i'mport: 아임포트. 결제/본인인증 중계 서비스. 예를 들면 쇼핑몰과 PG사(혹은 신용조회회사)의 중간에 위치한다고 보면 됨.

18. AI, 머신러닝

• ChatGPT: OpenAI 사의 GPT 기반 대형 언어 모델 #1
• GPTForge: GPT를 활용한 웹앱, 툴, 앱 등을 모아놓은 사이트. 누가 따로 모으는 게 아니라 만든 사람들이 껴달라고 신청하는 것 같다.
• FUTUREPEDIA: AI 관련 도구 모음 사이트
• Teachable Machine: 구글 티처블 머신. 초등학생도 사용할 수 있는 웹 기반 머신 러닝 도구다. 아직(2023-12-28)은 오디오나 이미지 정도만 지원함.
• Claude: Anthropic 사의 GPT 기반 대형 언어 모델 #2. 발음은 '클로드'. 스스로 주장하기를 ChatGPT보다 성능이 좋다고 함.
• Tabnine: 코파일럿 같은 코드 어시스턴트. 특징으로는 내 코드에서 모델을 학습한다는 것. 개인의 코딩 패턴, 팀 전체의 코딩 스타일 등을 학습하고 여기에 맞춰 코드를 추천해 준다고 한다. 로컬 기반 학습이라 데이터 유출 문제에서도 안심등심.
• Grok: xAI에서 개발한 대형 언어 모델 #3

19. 모바일 개발

• troy
• Adobe Edge Inspect
• browser-deeplink: 브라우저에서 앱 실행

20. 기타 유틸리티

개발 관련

• ⭐mockaroo: mock 데이터(더미 데이터, 가짜 데이터) 만들어주는 사이트
• ⭐Small Dev tools: 인코딩/디코딩, 포매터, 테스트 데이터 생성 등 개발에 필요한 웹 도구 모음.
• Itty bitty: 간단한 서식의 글을 작성하고 URL로 공유하는 사이트. 데이터베이스를 사용하지 않고 URL에 작성한 글 내용이 모두 담겨있는 게 특징. 설명서는 여기에.
• TypeForm: 설문 조사용 웹 사이트. 여태 봤던것 중 가장 깔끔. 유료일듯?
• Chatbase: 웹 사이트에 위젯처럼 간단히 추가할 수 있는 AI 챗봇.
• GitBook: 마크다운으로 웹 문서 만드는 사이트. 웹에서 직접 에디트도 가능하지만 도저히 쓸 물건이 아니라서(다국어 입력하다 보면 먹통됨) 마크다운이나 노션으로 작성한 후 복붙해야 됨. 문서 버전 관리보단 완성된 결과물의 출판용으로 적합한 서비스.
• ON24: 웨비나(Webinar, 웹 세미나) 서비스 사이트. Why Slack에서 쓰길래 줍줍
• Firefox Monitor: 다른 사이트 가입할 때 사용한 내 계정 정보가 털렸는지 안털렸는지 알려줌
• evanw: Source Map Visualization: 자바스크립트 소스 맵 시각화 도구 #1
• sokra: source-map-visualization: 자바스크립트 소스 맵 시각화 도구 #2
• Meta Tags: 메타 태그 만들어주는 사이트.
• ⭐Emmet: 예전 이름은 Zen Coding. 마크업이나 CSS 코드를 짧은 문법을 통해 자동으로 확장해주는 코드 단축 도구. 웬만한 편집기나 IDE에는 기본으로 포함되어 있다.
• Advent of Code: 매년 일정 시간마다 하나씩 공개되는 프로그래밍 퍼즐 사이트. 모든 언어로 풀 수 있음. UI에서해커냄새가난다

시스템 유틸리티

• ⭐Microsoft PowerToys: 윈도우 고급 사용자를 위한 유틸리티 모음. Color Picker, 항상 위, 마우스 찾기, PowerToys Run(윈도우판 Spotlight) 같은 기능을 추가해 준다. 그 중 가장 쩌는건 PowerRename(이제 파일명 바꾼다고 코딩 안해도 됨 🥹)
• Caffeine: 월급루팡의 필수품 PC가 절전 모드 혹은 화면 보호기 모드로 바뀌지 않게 해주는 앱. 개발사는 Zhorn Software.
• RunCat: CPU 사용량이 높을 수록 다리가 빨라지는 고양이. 트레이에 거주함.
• 스텔라리움: 스텔라륨. 오픈 소스 천체 투영관
• SoundSwitch: 오디오 장치가 둘 이상일 때 출력 선택을 단축키로 변경할 수 있음
• Meld: 윈도우 용 GUI diff 앱. 파일 비교 후 머지까지 할 수 있고 3-way merge도 가능. macOS는 아직 지원 안함.
• FFmpeg: CLI 방식의 동영상 변환/편집 도구. 니콜라스 유튜브 | FFmpeg 소개 영상
• CPU-Z: 설치된 컴퓨터의 하드웨어 스펙 조회 유틸리티. 칩셋, 캐시, 메인보드, 메모리, 그래픽카드의 모델명과 스펙이 표시됨.
• HWMonitor: 하드웨어 모니터링 유틸리티. 쿨링 팬 속도, 사용 전압, 온도 등을 실시간으로 보여 줌.
• OCCT: 오버클럭 테스트용으로 사용하는 과부하 앱인데, 밴치마킹, 모니터링, 안정성 테스트, 시스템 정보 확인 등의 기능도 제공한다.
• 한국표준과학연구원: 표준시각 맞추기: 한국표준과학연구원에서 제공하는 현재 시간 및 세계 시간 확인/동기화 유틸리티. 설치형이고 앱 이름은 UTCk, 현재(2023-08-09) 버전은 3.1
• Revo Uninstaller: 앱을 삭제할 때 레지스트리 같은 일종의 찌꺼기(?)도 완전히 삭제해 준다는 언인스톨러. 상용인 Pro 버전이 따로 있음.
• 구라제거기: 악성 코드 제거 도구

매크로, 키 매핑

• autohotkey: 스크립트로 작성하는 매크로
• joytokey: 게임패드-키보드(와 마우스) 매핑 앱
• REWASD: 게임패드-키보드(와 마우스) 매핑 앱. 매크로와 터보 기능은 유료다.

미디어 플레이어

• VLC media player: 기본 기능에 충실한 미디어 플레이어

미디어 편집

• ⭐paint.net: 이미지 편집기. 좋음
• Audacity: 간단한 음원 편집기
• PDF2JPG: PDF를 JPG로 변환
• Segment Anything: AI로 만든 자동 누끼(?) 앱이라는데 아직 안 써봄. 일단 깃허브 설명을 보면 파이썬으로 실행하는 모양
• OpenCut: 오픈 소스 영상 편집기. 리액트 기반의 웹 애플리케이션이며 소스를 받아 로컬 서버를 띄워 사용하는 방식이다.

원격 연결

• Parsec:
• RustDesk:
• AnyDesk:
• Splashtop:
• Jump Desktop:

21. 브라우저, 플러그인

브라우저

• Firefox: 불여시 브라우저. 개발자용 불여시는 여기로. about:config에서 browser.uidensity를 1로 해볼 것
• DuckDuckGo browser
• Brave: 프라이버시와 성능에 중점을 둔 크로미움 기반 브라우저 #1
• Ladybird: 다른 브라우저의 코드를 사용하지 않는 독립적인 웹 브라우저 겸 엔진. 2026년 여름 정식 출시 예정
• Nyxt: 해커용 브라우저(?). 고급 사용자를 위한 브라우저로, 키보드 탐색, 점프 헤딩, 쉬운 탭 관리, 명령 퍼지 검색, 내장 REPL, 스마트 북마크 검색, 사용자 정의 가능한 자동 완성, 클립보드 기록, 트리 기반의 방문 페이지 기록 등의 기능을 제공한다고 함. 2024-12-09 기준 윈도우는 아직 미지원.
• Chromium: 구글의 오픈 소스 웹 브라우저 프로젝트. 크롬의 기반 코드이며 요즘(2023-09-13) 점유율 높은 브라우저들은 대부분 Chromiun 코드베이스를 사용한다.

Firefox 플러그인

• Mate Translate
• PocketTube
• Save webP as PNG or JPEG
• uBlacklist
• uBlock Origin

Chrome 플러그인

• Go Back With Backspace
• Mate Translate
• Chrome Remote Desktop

여기에 개발용 크롬이면:

• CSSViewer
• JSON Formatter
• Vue.js devtools
• Wappalyzer
• Authenticator(인증 도구)

22. 기타 서비스

• stream: 채팅 관련 오픈 소스 같은데 뭔지 잘 몲
• Sanity: CMS(Content Management System)라는데 이게 뭘까
• Apache Tika: 파일 콘텐츠를 분석해주는 자바 라이브러리
• ⭐KeystoneJS: 어드민 패널 라이브러리. 애플리케이션에 필요한 관리자 화면을 만들어주는 라이브러리다. 자바스크립트 혹은 타입스크립트로 사용할 수 있음. 니콜라스 유튜브 | KeystoneJS 소개 영상
• Chosic: 비슷한 노래 찾기 등 노래 관련 탐색 서비스 제공하는 사이트
• Everynews: 뉴스레터 서비스인 것 같은데…
• 프리랜서를 위한 메세지 템플릿 서비스

23. 통계, 분석

• Worldometer: 전 세계의 각종 정보 실시간 카운터. 인구 증감, 남은 석유량 등
• statcounter: 전 세계 대상 브라우저, OS 점유율 등의 통계자료 조회 사이트
• A/B Testing Significance Calculator: A/B 테스트 통계적 유의성 계산기. 신뢰도를 계산해주는 사이트인가보다. 통계의 신뢰구간과 신뢰도
• built with: trends: 웹/인터넷 기술 사용 트랜드와 통계 보기. 여기는 원래 특정 사이트가 뭘로 만들어진건지를 분석해주는 사이트임.

24. 문서 작성 도구

• WPS Office: 무료 플랜은 기본 기능과 1GB 클라우드 사용 가능.
• LibreOffice

Presentation

• Prezi(web)
• Slideshare(web)