1. 정규식 공부
- 총 55 단계별 인터랙티브 학습
ㅤ→ 완전 기초부터 간단한 설명과 함께 정규식 문제를 풀면서 진행
ㅤ→ 실시간으로 실행 결과가 보여서 확인 가능
ㅤ→ 키보드 만으로 진행 가능
- Playground 및 Practice 추가 예정
- JavaScript 오픈소스
- 사용자 중심 성능 지표를 4가지로 구성해서 설명하고, 목표해야 하는 점수를 나열
ㅤ→ 진행여부 : TTFB, FP, FCP
ㅤ→ 유용성 : LCP, VC, SI
ㅤ→ 사용 가능 여부 : FID, mFID, TBT, TTI
ㅤ→ 쾌적함 : CLS, Frame Rate
- Cheatsheet
ㅤ→ Time to First Byte (TTFB) <600ms
ㅤ→ First Paint (FP) <1.8s
ㅤ→ First Contentful Paint (FCP) <1.8s
ㅤ→ Largest Contentful Paint (LCP) <2.5s
ㅤ→ Visually Complete (VC) <3.4s
ㅤ→ Speed Index (SI) <3.4s
ㅤ→ First Input Delay (FID) <100ms
ㅤ→ Max Potential First Input Delay (mFID) <130ms
ㅤ→ Total Blocking Time (TBT) <200ms
ㅤ→ Time to Interactive (TTI) <3.8s
ㅤ→ Cumulative Layout Shift (CLS) <0.1
ㅤ→ Frame Rate (FR) 60 FPS
다양한 통계 그래프/모듈을 깃헙 리드미에 추가 가능
- 깃헙 Stats
ㅤ→ 랭크 계산 : 커밋 수, 기여도, 이슈 갯수, 즐겨찾기, PR, 팔로워..
- 깃헙 Extra Pin : 다른 Repo 연결
- 많이 쓰는 개발 언어
- Wakatime 주간 통계
- 테마 지원 : dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
- 모든 색상 커스터마이징 가능
- 자신의 Vercel 인스턴스에 Deploy 가능
4. knative.dev : 쿠버네티스 기반의 오픈소스 서버리스 솔루션
- 구글이 주도하는 쿠버네티스 기반의 오픈소스 서버리스 솔루션(2018년 공개)
ㅤ→ Scalabe, Secure, Stateless 서비스를 쉽게 시작
ㅤ→ 서버리스 컨테이너를 자동으로 관리
ㅤ→ VMWare, IBM, Red Hat, SAP 등과 협업
- 클라우드 종속성 없음
- 플러그인을 쉽게 추가 가능
- GitOps, DockerOps 등을 지원
- 멀티 HTTP Routing Layer 지원(Istio, Contour, Kourier, Ambassador)
- 이벤트를 위한 멀티 스토리지 레이어 지원(Kafka, GCP PubSub, RabbitMQ)
- HTTP/2, gRPC, WebSockets
- TLS 인증서 자동 프로비져닝
- Django, RoR, Spring 등 기본 지원
- 프리뷰 기능으로 97버전부터 추가될 예정
- 개발자 도구에 Recorder 패널이 추가 됨
ㅤ→ 사용자 플로우를 녹화(Record)/재생(Replay)/측정(Measure)
ㅤ→ 재생할때 세팅에서 네트웍 속도 설정 가능(Slow 3G, Fast 3G)
ㅤ→ Measure Performance 버튼으로 성능 측정 가능
ㅤ→ 단계별로 상세히 동작을 확인하고 마음대로 편집 가능
6. Microsoft Loop : 노션과 유사한 새로운 협업 도구
- 모든 컴포넌트 배치가 자유로운 Flexible Canvas를 가진 Page
- 리스트, 투표 가능한 테이블, 상태 트래커, 노트, 파일, 링크, Dynamics 365등의 Component : 실시간으로 업데이트
- 진척도 트래킹, 알림, 변경 하이라이트, 상태 라벨 등을 지원하여 멤버간에 Sync
- 프론트엔드 : React / TypeScript / TailwindCSS
- Node.js Firebase function
- Samsung Research의 LaMa를 이용한 인페인팅 서비스를 Google Cloud Run for Anthos 에서 실행
- 자신의 앱에 쉽게 추가 가능
ㅤ→ 자연스러운 선 그리기, 도형(사각/원), 화살표, 텍스트, 노트
ㅤ→ 멀티 플레이어 협업 그리기 지원
- 세가지 앱으로 제공
ㅤ→ 웹사이트
ㅤ→ VSCode 내부에서 바로 사용 가능한 확장
ㅤ→ Electron 앱
9. 웹에 Cmd + k 기능 추가하는 React 컴포넌트
- 커맨드 팔레트 기능을 통해서 사용자에게 사이트의 모든 기능에 쉬운 접근 제공
- 애니메이션 내장 및 모든 컴포넌트 커스터마이즈 가능
- 키보드 네비게이션 및 단축키 지원
- 중첩 액션 지원
- 쉽게 커스텀 컴포넌트를 만들수 있는 간단한 자료 구조
10. Next.js 12 릴리즈
짧은 요약 : https://jimmymoondev.notion.site/Next-js-12-c6f543b8856a45e8ba08769b1cd01a67
- Rust 컴파일러 : 3배 빠른 로컬 Refresh, 5배 빠른 프로덕션 빌드
- Middleware (beta) : 리퀘스트 완료전에 다양한 코드 실행 가능
ㅤ→ 인증, 피쳐 플래그, A/B테스팅, 봇 차단, 리디렉션, 서버측 분석기능, 로깅등
- React 18 지원 : 네이티브 Next.js API 지원 (Suspense & SSR Streaming 포함)
- <Image /> 에 AVIF 지원 : 20% 더 작은 이미지를 위해 Opt-in 가능
- Bot-aware ISR Fallback : 웹크롤러들을 위한 SEO 최적화
ㅤ→ Incremental Static Regeneration
- URL Imports (alpha)
- React Server Components (alpha)
11. 어떤 브라우저가 개인정보 보호에 가장 뛰어날까?
Brave/크롬/Edge/FF/Opera/Safari/Tor
- 각 브라우저의 개인정보 특성들을 측정하는 오픈소스 테스트
- 누구나 쉽게 이해할 수 있도록 결과를 렌더링
테스트 항목
- 상태 정보 파티셔닝 (쿠키, 캐쉬, 서비스워커..)
- 네비게이션 (레퍼러,세션..)
- 핑거프린팅 방지
- 추적 쿼리 파라미터
12. 자바스크립트 알고리즘 및 자료구조
- 많이 알려진 알고리즘과 자료 구조 설명, Javascript 기반 예제 및 관련 유튜브 영상 포함 [한국어 번역]
ㅤ→ B : 입문자용 63개
ㅤ→ A : 숙련자용 69개
자료구조
B: 연결 리스트, 이중 연결 리스트, 큐, 스택, 해시 테이블, 힙, 우선순위 큐
A: 트라이, 트리, 이진 탐색 트리, AVL 트리, Red-Black 트리, 세그먼트 트리, Fenwick 트리, 그래프, 서로소 집합, 블룸 필터
알고리즘
- Math
ㅤ→ B : 팩토리얼, 피보나치 수, 소수 판별, 유클리드 호제법, 최소 공배수, 에라토스테네스의 체, 2의 거듭제곱 판별법, 파스칼 삼각형
ㅤ→ A : 자연수 분할, 리우 후이 π 알고리즘 - N-각형을 기반으로 π 근사치 구하기
- Sets
ㅤ→ B : 카티지언 프로덕트, Fisher–Yates 셔플
ㅤ→ A : 멱집합, 순열, 조합, 최장 공통 부분수열, 최장 증가 수열, Shortest Common Supersequence (SCS), 배낭 문제
- Strings
ㅤ→ B : 해밍 거리 - 심볼이 다른 위치의 갯수
ㅤ→ A : 편집 거리, 커누스-모리스-프랫 알고리즘, Z 알고리즘, 라빈 카프 알고리즘, 최장 공통 부분 문자열, 정규 표현식 매칭
- Searches
ㅤ→ B : 선형 탐색, 점프 탐색, 이진 탐색, 보간 탐색
- Sorting
ㅤ→ B : 거품 정렬, 선택 정렬, 삽입 정렬, 힙 정렬, 병합 정렬, 퀵 정렬, 셸 정렬, 계수 정렬, 기수 정렬
- Trees
ㅤ→ B : 깊이 우선 탐색 (DFS), 너비 우선 탐색 (BFS)
- Graphs
ㅤ→ B : 깊이 우선 탐색 (DFS), 너비 우선 탐색 (BFS), 크루스칼 알고리즘
ㅤ→ A : 다익스트라 알고리즘, 벨만-포드 알고리즘, 플로이드-워셜 알고리즘, 사이클 탐지, 프림 알고리즘, 위상 정렬, 단절점, 단절선, 오일러 경로 와 오일러 회로, 해밀턴 경로, 강결합 컴포넌트, 외판원 문제
- Uncategorized
ㅤ→ B : 하노이 탑, 정방 행렬 회전, 점프 게임, 탐욕 알고리즘 예제, Unique 경로, 빗물 담기 문제
ㅤ→ A : N-Queens 문제, 기사의 여행 문제
패러다임별 알고리즘
- 브루트 포스(Brute Force)
- 탐욕 알고리즘(Greedy)
- 분할 정복법(Divide and Conquer)
- 동적 계획법(Dynamic Programming)
- 백트래킹(Backtracking)
13. 풀스택 React 프레임워크
- Ruby on Rails 에서 영향받고, Next.js 기반으로 만들어짐
- REST/GraphQL 필요없는 "Zero-API" 데이터 레이어 제공
ㅤ→ 서버 코드를 컴포넌트에 직접 임포트하면 빌드시에 자동으로 HTTP API를 생성해서 교체됨
ㅤ→ 생성된 API는 앱이나 써드파티에서도 이용 가능
- ESLint, Prettier, Jest, 사용자 가입/로그인/암호 재설정 기능등은 기본 포함
- 다양한 기본값과 컨벤션 : Routing, 파일 구조, 인증 등
- DB부터 프론트엔드까지 모두 포함. 하나만 만들어서 서버/서버리스에 배포 가능
- Next.js 앱을 마이그레이션 지원
14. ImgSrc.space - 쓰기 편한 이미지 / 비디오 플레이스홀더
- 3백만장 이상의 이미지/비디오를 무료로 빠르게
ㅤ→ https://imgsrc.space/cat 고양이 이미지
ㅤ→ https://imgsrc.space/dog-v 강아지 동영상 "검색어-v"
- 리사이징 지원
ㅤ→ https://imgsrc.space/sunset?w=500&h=500
- JS 라이브러리 이용시 짧은 표현 가능
ㅤ→ <img src=". cow" >
ㅤ→ <video> <source src=". big mountain-v" type="video/mp4"> </video>
- 최대 해상도 1920x1080
15. Typescript를 배울때 알았으면 좋은 트릭들
- Readonly<T>
ㅤ→ JS의 Array와 Object는 Reference라서 수정이 가능. 사이드 이펙트 줄이기
- Any vs Unknown
ㅤ→ 컴파일할 때 모르는 타입에 대한 강제 체크가 가능하게 any 대신 Unknown 사용하기
- Record로 객체 Typing 하기
ㅤ→ interface 대신 Record를 이용
HN 댓글에 추가로 나온 것들 https://news.ycombinator.com/item?id=28837181
- Utility Type 에 대해 알기
ㅤ→ https://www.typescriptlang.org/docs/handbook/utility-types.html
ㅤ→ 한국어 https://typescript-kr.github.io/pages/utility-types.html
- 함수에서 Sometype|undefined 대신 Sometype|null 리턴하기
- Indexed Access Types https://typescriptlang.org/docs/handbook/…
16. 유용한 크롬의 숨겨진 기능들
모두 "Settings-Experiments" 에서 켜줘야 함
- CSS Overview : 사용된 컬러,폰트,미디어쿼리 및 사용 안한 선언들 보기
- CSP Violations : 알려진 보안 약점들 경고
- New Font Editor : 모든 폰트를 한번에 변경해서 보기
- Dual Screen Mode : 듀얼스크린/폴더블 기기들 디버깅용
- Full Accessibility Tree View : 접근성 관련 항목을 더 상세히 보기
17. 프로그래머를 위한 이름 짓는 원리 (링크)
컴퓨터 프로그래머는 '이름 짓기'를 가장 전문적으로 다루는 직업일지도 모릅니다
- 이름은 프로그래머들이 생각하는 것만큼 실제로 중요한 것일까요?
- 어떤 이름이 좋다 나쁘다 판단할 수 있는 기준은 무엇일까요?
이름 짓는 원리 from 책 "클로저 기본원리(Elements of Clojure)"
- 이름이 중요한 이유
- 좋은 이름을 어떻게 찾을 수 있을까?
- 프레게의 의미이론
- 코드에서의 의미이론
- 의미를 기준으로 이름을 붙여야 하는 이유
- 협의성과 일관성
- 의도적 비일관성
- 자연 이름, 인공 이름
- 그 외의 팁들
18. 미디어 쿼리를 대체할 컨테이너 쿼리 (링크)
- 반응형 페이지 만들때 스크린 사이즈가 아닌 컨테이너의 사이즈에 따라 변경하는 방식
- 아직 스펙 초기 단계
- 크롬에서는 플래그 설정시에만 지원되지만, CQFill 폴리필로 모든 브라우저에서 미리 적용 가능
@container (min-width: 600px) {
ㅤ.card {
ㅤㅤdisplay: flex;
ㅤ}
}
19. 노트 필기로 공부를 도와주는 툴 (링크)
- 프로그래머/의학/법학/언어 공부/각종 시험 준비등 학습자를 위한 노트테이킹 도구
ㅤ→ 노트를 작성하고
ㅤ→ 노트 기반으로 학습 코스를 자동 생성
ㅤ→ SR 알고리듬으로 잊어먹었을 법한 문제를 추천받아 풀기
ㅤ→ 체크리스트와 학습과정을 관리
- 검색 및 양방향 링크
- 쉬운 수식 입력 지원
- 트리 구조 입력, 스프레드시트, 멀티 윈도우 기능 제공
- 마크다운 지원
20. 웹 개발 커리큘럼 (링크)
2021년 버전의 커리큘럼에서는 다음과 같은 주제들과 그 뒤에 숨겨져 있는 원리들을 다룹니다:
형상관리 시스템, HTML과 웹의 기초, CSS의 기초와 응용, 자바스크립트와 DOM, OOP의 기본,
OOP 특훈, 인터넷의 이해, node.js의 기초, 웹 API의 기초: REST와 CRUD, 서버와 클라이언트의 대화, 인증의 이해,
RDB의 기초와 ORM, 보안의 기초, 웹 API의 응용과 GraphQL, 정적 분석: 타입스크립트와 린트 시스템, 자동화된 테스트,
컴포넌트 기반 개발, 번들링과 빌드 시스템, 프로그레시브 웹앱, 웹 어셈블리의 기초,
도커와 컨테이너, 배포 파이프라인, 서비스의 운영: 로깅과 모니터링, 서버 아키텍쳐 패턴
21. 테크니컬 라이팅 4대 원칙 (링크)
"짧게 써라, 명료하게 써라, 그림같이 써라, 무엇보다 정확하게 써라 - 조셉 퓰리처"
① 명확성 (Clarity) : 핵심어나 핵심 문장이 모호하게 사용되지 않고, 기술문서를 읽을 때 내용의 모호함이나 혼란 없이 한 번에 이해하도록
② 간결성 (Conciseness) : 기술적인 내용을 신속하고 정확하게 이해할 수 있도록 미사여구나 감탄사 등을 사용하지 않고, 간단하고 쉬운 단어와 간결한 문장을 사용
③ 정확성 (Accuracy) : 독자가 필요로 하는 정보를 기술적 오류 없이 정확하게 제공하는 것
④ 일관성 (Coherence) : 문서에 용어, 표현, 그리고 어조 등을 일관성 있게 사용하는 것
원문: https://news.hada.io/topic?id=1642
22. 크롬 브라우저 자동화 확장 (링크)
- No-Code 블록 연결 방식으로 웹 브라우저를 자동화
- 폼 자동 채우기, 반복 작업, 스크린샷 저장, 데이터 스크래핑 등의 다양한 작업 지원
ㅤ→ 웹훅 호출, CSV/JSON Export, 탭/창 열기/닫기, 프레임 선택..
- 원하는 시간에 스케쥴링 가능
23. 대규모로 웹 스크래핑하기 (링크)
- 만약 구글검색을 수백만건씩 실행하는 서비스를 만든다면 차단 당하지 않을 대안이 필요함
- 가장 쉬운 것은 유료 프록시를 사용하는 것이지만 상당히 비싼편
ㅤ→ 그래서 필자가 시도해본 것들을 상세히 설명한 재미난 글
- 처음엔 AWS Lambda + Puppeteer를 사용
ㅤ→ AWS가 전세계 16개 리전을 제공하고, 3번 Lambda를 실행하면 새 IP가 지정됨
ㅤ→ 동시에 1000개의 람다를 실행하면 약 250개의 퍼블릭 IP를 사용하게 됨
ㅤ→ 16개 리전 * 250 이면 4000개의 IP주소이고, 이정도면 주간 백만단위의 구글 검색을 수행하는데 충분
ㅤ→ GCP에서도 써봤는데, 웃긴게 구글이 자신의 클라우드 IP를 더 공격적으로 차단함 (AWS와 비교해서)
ㅤ→ 2019~2020년 사이 얘기고 변했을 수 있음
- 이 방법은 구글/빙/아마존 등을 스크래핑 하는데는 사용 가능 하지만 한계가 있음
ㅤ→ DataDome, Akamai, Imperva 같은 안티 봇 회사를 이용한다면 적용 불가
ㅤ→ 굉장히 다양한 방식으로 브라우저 핑거프린팅을 통해서 봇인지를 식별해 냄
ㅤ→ 구글 Picasso, Font/TLS/WebGL Fingerprinting..
ㅤ→ 사실 대부분의 대규모 Scraping 서비스는 클라우드 + 도커 컨테이너들 을 사용하기에 식별하기에 쉬움
- 감지하기 어렵고 확장 가능한 스크래핑 인프라
ㅤ→ 성공적으로 스크래핑 하기 위한 두가지 법칙
ㅤㅤ1. 브라우저 설정을 속이지 않기
ㅤㅤ2. 가장 중요한 것은 "아무도 눈치 채지 못할 경우에만" 브라우저 설정을 속일 것
ㅤ→ 이를 위해서는 그냥 "실제 디바이스를 사용"하는게 가장 좋다는 결론
ㅤㅤ⇨ 500대의 싼 안드로이드 기기를 제조사 여러곳에서 구입하고, 저렴한 데이터 플랜을 가입
ㅤㅤ⇨ 여러 도시에 분산 (안테나 가까운 곳에)
ㅤㅤ⇨ DeviceFarmer/stf 같은 오픈소스를 활용해서 기기를 동시에 컨트롤
ㅤㅤ⇨ Android Go 같은 경량OS를 설치하고, 5분마다 에어플레인모드로 들어가게 해서 계속 새로운 IP주소를 획득
ㅤㅤ⇨ "4G carrier grade NAT" : 4G 캐리어급 NAT는 IPv4 주소 고갈을 막기 위해 고안된 방식으로 IP를 수십만이 공유하기 때문에 차단이 불가능
ㅤ→ 500대의 안드로이드 기기를 사야 하고, 설치 장소가 필요하고, 하드웨어 유지보수 해야 하는 등 귀찮은 점이 많음
- 개선 : 안드로이드를 Emulate
ㅤ→ 안드로이드 기기를 사는 대신, Android-X8, Bluestacks, Android Studio Emulator 등을 이용하면 ?
ㅤ→ Proxidize 는 4G 모바일 프록시를 만들 수 있게 함
ㅤ→ 서버 한대에 50개의 4G 동글을 설치
ㅤ→ 각 서버에서 50~100개의 안드로이드 기기를 에뮬레이트
ㅤ→ 이 스테이션을 5개 도시에 설치
ㅤ→ 단단한 코맨드로 이 스테이션들을 관리
24. 퇴고의 기술 - 기술문서 작성 방법 (링크)
- 퇴고(推敲) : 글을 지을 때 여러 번 생각하여 고치고 다듬음. 또는 그런 일
- 퇴고가 필요한 이유
- 퇴고 Tips
ㅤ→ 내 글 낯설게 하기 : 소리 내어 읽기, 얼마 후에 읽기, 종이에 출력해서 읽기
ㅤ→ 피어 리뷰
ㅤ→ 체크리스트 활용
ㅤ→ 가독성을 높이는 문장 수정 Tip
ㅤㅤ① 단문으로 정리하여 수정하기
ㅤㅤ② 불필요한 표현 삭제하기
ㅤㅤ③ 논리적인 글로 탈바꿈하기
25. 유용한 1줄 CSS 레이아웃 (링크)
- Super Centered { place-items: center }
- The Deconstructed Pancake { flex: 0 1 <baseWidth> }
- Sidebar Says { grid-template-columns: minmax(<min>, <max>) ... }
- Pancake Stack { grid-template-rows: auto 1fr auto }
- Classic Holy Grail Layout { grid-template: auto 1fr auto / auto 1fr auto }
- 12-Span Grid { grid-template-columns: repeat(12, 1fr) }
- RAM (Repeat, Auto, Minmax) { grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr)) }
- Line Up { justify-content: space-between }
- Clamping My Style { clamp(<min>, <actual>, <max>) }
- Respect for Aspect { aspect-ratio: <width> / <height> }
'Geek News Scrap' 카테고리의 다른 글
| 22. 4월 스크랩 (0) | 2022.07.25 |
|---|---|
| 22. 3월 스크랩 (0) | 2022.03.03 |
| 22. 2월 스크랩 (0) | 2022.02.17 |
| 22. 1월 스크랩 (0) | 2022.01.14 |
| 12월 스크랩 (0) | 2021.12.20 |
