web.md

Web

• hotframeworks.com
• codelion.net
• udacity.com/courses/cs253
• 웹학교
• BehindTheSite - A log of web technology stacks
• 스타트업을 위한 기술 스택
• 깃플 기술스택 구경하세요~ (프론트엔드 편)
• 10 Web Development Trends in 2023
  • (번역) 2023년 웹 개발 트렌드 10가지 | Ykss
• The State of Frontend 2022
• 번역 2020년에 봐야하는 6가지 웹성능 기술
• Top Technologies That Will Transform Web Development in 2020 | by Sophia Martin | Quick Code | Medium
• Interesting Web Technologies to follow in 2019
• Top 10 Web Development Trends to Follow in 2019
• How to become Kickass Web Developer Frontend & Backend Tips
• 대학생을 위한 웹 개발 공부용 체크리스트
• Why can’t we find Front End developers?
  • 프론트엔드 개발자는 왜 구하기 어려운가?
• 신입 프론트엔드 개발자가 되려면 무엇을 학습해야 하나요?
• 코딩 한 줄로 웹페이지 긁어오기
• “개발자라면 즉시 설치!” 크롬 확장 프로그램 10가지
• What is Firing Range?
• A Baseline for Front-End JS Developers: 2015
• Web typography for non-designers
• 생활코딩: 웹 애플리케이션 만들기 수업
  • 웹 애플리케이션 만들기 수업
  • WEB1 2th
• Beginning your Web Development Journey? Start Here
• INTRO TO WEB DEV V2 - VIDEOS ON FRONTEND MASTERS
• Web 학습하기
• Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
  • Web Development for Beginners - A Curriculum
• Microsoft Days in the Web - Welcome
• Best GitHub Repos for Web Developers
• The Gold Standard Checklist for Web Components
• 깃헙 개발자들이 React 안쓰는 이유 : Web Component - YouTube
• 웹 컴포넌트가 프론트엔드 프레임워크를 대신할까? | 요즘IT
• Web Components are Dead: Long Live Web Components | by Fernando Doglio | Jul, 2022 | Bits and Pieces
• KnowRe web development curriculum for noobs
• Knowre web development curriculum 2018
• Front-end Tooling Workflows by Addy Osmani
• Low-level web programming in Racket + a wiki in 500 lines
• How to receive a million packets per second
• Edit this webpage with your voice
• 웹 애니메이션을 구현하는 4가지 방법 (feat. animation API) | 카카오엔터테인먼트 FE 기술블로그
• The Art of Graceful Reloading
• Things to Know When Making a Web Application in 2015
• Ask HN: How, bottom to top, does a modern web application work?
• Building Real Time Web Apps
• Speeding up Javascript Test Time 1000x
• 6 Rules of thumb to build blazing fast web server applications
• Strong Web Application Architecture
• Facebook: MVC Does Not Scale, Use Flux Instead
• MVC패턴과 재사용성을 고려한 Component 기반 Web UI 구현
• A simpler web architecture using Flux, CSP, and FRP concepts
• 4 Sinatra inspired frameworks on the JVM that will boost your productivity
• Top Ten Web Design Tools and Generators for Free (Part 2)
• 베이글 서비스의 아키텍쳐
• 프론트엔드 비지니스 로직, 아키텍처 | Medium
• 프론트엔드 아키텍처: API 요청 관리. 프론트엔드 개발을 하다보면 종종 아주 기본적인 것부터 고민할 때가… | by 이문기 | Medium
• 프론트엔드 아키텍처: 컴포넌트를 분리하는 기준과 방법. 컴포넌트를 언제 분리해야 하고 어떻게 분리해야 하는지 살펴봅니다. | by 이문기 | Feb, 2023 | Medium
• DOCKER-BASED MEAN.JS (MONGODB, EXPRESS, ANGULARJS, AND NODE.JS) WITH MONGO REPLICA SET AUTOMATION ON ANY CLOUD
• Building Web Applications With Make
• The Future of Web Development - React, Falcor, and ES6
• The Art of Debugging
• What are source maps?
  • 소스 맵의 동작 원리는 무엇일까? - 재그지그의 개발 블로그
• The Twelve-Factor App
  • Live Coding 12-Factor App
• Building a professional design tool on the web
• Fantastic Web Design Tool
  • 개발자, 트렌드를 버리다 — 1년 후 소감
• 11 Useful Online Tools for Frontend Developers
• Top 49 Web Development Tools for 2021
• Managing two million web servers
• Rocket.chat 채팅 서비스 만들기
• 웹 아이콘 폰트 패키지, FONTIUM
• 웹 폰트 사용과 최적화의 최근 동향
• 정적 사이트에서 한국어 웹 폰트 최적화하기
• 빠른 첫화면을 위한 한글 폰트 최적화 여행
  • 빠른 첫화면을 위한 한글 폰트 최적화 여행 - part 1: 기존 서비스 구경
  • 빠른 첫화면을 위한 한글 폰트 최적화 여행 - part 2: 꼼수로 완성하다
  • 한글은 용량 때문에 웹에서 다루기가 어려운데 이를 최적화하기 위한 과정을 설명한 글
  • 대부분의 한국어로 번역된 폰트 최적화 글도 영어를 번역한 것일 뿐이라 font-display:optional만 쓰면 최적화되는 줄 알고 있다가
    • 이는 폰트라 100ms 이내 폰트가 로딩되어야만 유효하다는 것을 알게 되고
    • 유명한 사이트를 찾아보면서 웹 폰트를 어떻게 쓰는지 추적했지만 안 쓰면 안 섰지 제대로 쓰는 곳은 없었음
  • 깜빡거리지 않고 처음부터 웹폰트로 보여주는 방법을 고민하다가
    • 사용하는 글자만으로 구성한 서브셋 폰트를 만들어봤지만 해결이 안되어
    • 첫 로딩 때 나오는 상단 부분만의 폰트로 서브 셋을 만들어서 드디어 문제 해결
  • 하지만 이후 아랫부분의 문제는 제대로 해결이 안 되어서
    • JavaScript로 스크롤을 감지해서 폰트를 바꾸도록 해서 해결하고
    • 첫 뷰포트에 보이는 부분의 글자만 탐지해서 서브 셋을 만들도록 자동화
• ReadingShare - 영어 독해 문장 공유 사이트
• 모던 웹 스택 심층 분석
• 요즘 '모던' 프론트엔드 개발하려면 알아야할 것들 - YouTube
• 웹 개발자의 10가지 흔한 실수
• 웹기술의 부상으로 인한 개발팀의 도전과제 보고서
• (번역) 신은 디테일 안에 있다
• 웹 개발자를 위한 서버/인프라 용어 정리
• 이세계에 진입한 서버 개발 Azure 웹앱
  • 이세계에 진입한 서버 개발 - 1
  • 이세계에 진입한 서버 개발 - 2
  • 이세계에 진입한 서버 개발 - 3
  • 이세계에 진입한 서버 개발 - 4
  • 이세계에 진입한 서버 개발 - 5
  • 이세계에 진입한 서버 개발 - 6
  • 이세계에 진입한 서버 개발 - 7
• 비 개발자를 위한 웹 개발 기초
• 간단하게 무료로 HTTPS를 사용하시려면 CloudFlare를 추천드립니다. 심지어 아무 설정도 없이… Flexible SSL
• 클라우드플레어와 방문자 IP 주소
• 웹 개발자를 위한 Web Protocols 정리
• 웹개발 패러다임의 거대한 변화 "Reactive"
• Reactive 프로그래밍 - Hello world
• Top Web Development Articles Of The Week (11 Dec 2017)
• github.com/Mybridge/learn-web-development
  • Web Development Top 10 Articles for the Past Month (v.June 2019)
  • Web Development Top 10 Articles for the Past Month (v.May 2019)
  • Learn Web Development from Top 50 Articles for the Past Year (v.2019)
  • Web Development Open Source of the Month (v.Dec 2018)
  • Web Development Top 10 Articles For the Past Month (v.Dec 2018)
  • Web Development Open Source of the Month (v.Nov 2018)
  • Web Development Top 10 Articles for the Past Month (v.Oct 2018)
  • Web Development Open Source of the Month (v.Oct 2018)
  • Web Development Open Source of the Month (v.Sep 2018)
  • Web Development Top 10 Articles for the Past Month (v.July 2018)
  • Web Development Open Source of the Month (v.July 2018)
  • Web Development Top 10 Articles for the Past Month (v.Nov 2018)
  • Web Development Top 10 Articles for the Past Month (v.June 2018)
  • Web Development Open Source Tools of the Month (v.May 2018)
  • Web Development Top 10 Articles for the Past Month (v.May 2018)
  • Web Development Top 10 Articles for the Past Month (v.Apr 2018)
  • Web Development Open Source Tools of the Month (v.Apr 2018)
  • Web Development Top 10 Open Source (v.Feb 2018)
  • Web Development Top 10 Articles for the Past Month (v.Feb 2018)
  • Learn Web Development from Top Articles of the Year (v.2018)
  • 27 Amazing Web Development Tools for the Past Year (v.2018)
  • Web Development Top 10 Articles for the Past Month (v.Dec 2017)
  • Web Development Top 10 Articles For the Past Month (v.Oct 2017)
  • Web Development Top 10 Articles for the Past Month (v.Feb 2017)
  • Web Development Top 10 Articles from October
• Differences between Web servers: Apache, IIS vs Nginx, Node.js
• Best youtube channels for web Designers and Developers
• A roadmap to becoming a web developer in 2017
• Roadmap to becoming a web developer in 2017
• Roadmap to becoming a web developer in 2018
  • developer-roadmap: 2020년 웹 개발자가 되기 위한 로드맵
• The 2018 Web Developer Roadmap
• The 2018 Roadmap To FullStack Web Development
• How to Learn Fullstack Development: A Roadmap in Charts
• Everyone Can Be a Full-Stack Engineer - YouTube
• 2019년 웹 개발자가 되기 위한 로드맵
• frontend-dev-bookmarks: Manually curated collection of resources for frontend web developers.
• frontend-resources: Resources for front-end web developers
• display: table을 사용한 갯수 가변 그래프
• UX world 2017 Spring : 후기와 강의 노트
• Node.js, PHP/JSP/ASP 및 Apache/Nginx에 대한 비교
• 개알못인 당신이 웹개발을 시작한다면 (1)
• 개알못인 당신이 웹개발을 시작한다면 (2)
• 개알못인 당신이 웹개발을 시작한다면 (3)
• 개알못인 당신이 웹개발을 시작한다면 (4)
• 개알못인 당신이 웹개발을 시작한다면 (5)
• Become a Full-Stack Web Developer
• A Guide to Becoming a Full-Stack Developer in 2017
• The Ultimate Guide On How To Become A Full Stack Web Developer
• Guide to Web Application Development
• The Evolution of the Modern Web Application Development | by Fernando Doglio | Aug, 2022 | Bits and Pieces
• Web Applications 101
• 변화하는 웹 플랫폼 따라가기
• 정적 웹사이트 생성기의 역습 - 동적 스크립트를 넘어 다시 정적 컨텐츠로
• Static vs Dynamic Website — What’s the Difference in 2019?
• Prepare Your Skill Set for Web Developer Interviews — Part 1
• Modern Frontend Developer in 2018
• 꼼꼼히 살펴보는 SCRIPT 엘리먼트
• Micro frontends—a microservice approach to front-end web development
• Building a really fast website from scratch
• Dweb 소개
• Dweb: Secure Scuttlebutt 으로 소셜 피드 작성하기
• Dweb: WebTorrent 로 강인한 웹 만들기
• Dweb: Beaker 로 브라우저에서 웹을 서비스하기
• Dweb: IPFS로 협력과 신뢰가 꽃피는 Web 만들기
• #8. IPFS(InterPlanetary File System)이해하기 1부 : HTTP Web을 넘어서, IPFS Web으로
• What is the InterPlanetary File System (IPFS)?
• WEB2 - OAuth 2.0
• one page101 - 부트스트랩을 이용해서 원페이지 만드는 과정 학습
• 웹앱의 미래 (The Future of Web Apps 다시 읽기)
• W3C 2018 참관기 libp2p
• “To be a good designer you must be a good engineer in every sense: curious, inquisitive design 자습 자료
• 2018년, Mozilla Hacks Top 10
• Web workers in action: why they’re helpful, and how you should use them
• How to Fix ERR_CONNECTION_TIMED_OUT error
• 웹 접근성 관련 국내외 자료 모음. This is for everyone who is interested in A11y!
• 웹 접근성 인증 받는 방법과 후기 – Under The Pencil
• WAI-ARIA란?
  • WAI(Web Accessibility Initiative)에서 리치 애플리케이션의 접근성 표준인 ARIA를 어떻게 사용해야 하는지 설명
    • 사용했을 때 스크린 리더기에서 어떻게 동작하는지 영상을 같이 제공하고 있어서 이해 용이
  • 접근성을 제공하기 위해 태그에 추가 정보 제공. 하지만, 태그의 의미 자체를 바꾸진 않아야 함
  • role로 컴포넌트나 요소 역할 정의
  • aria-required, aria-label같은 프로퍼티를 컴포넌트의 특징을 정의
• 김맥스 기술 블로그 | 웹 접근성 준수가 가져오는 프론트엔드 개발의 이점
• 접근성 기능 오용 사례 - 신현석(Hyeonseok Shin)
• 사람인 접근성 개선 회고
• 'Tech-Verse 2022' 웹 접근성 향상을 위한 노력
• ‘액세서빌리티 인사이트’로 누구나 접근할 수 있는 코드 만들기 - ITWorld Korea accessibility
• Six steps to building your website from scratch
• 페이스북과 쿠키의 상관관계? Cookie 기초개념 잡아드림
• Cookie Recipes
• Best practices for cookie notices
• URL shorteners set ad tracking cookies - luke miles
• First-Party & Third-Party Cookies: What’s the Difference? - Clearcode Blog
• A beginner's guide to cookies — Quartz Weekly Obsession — Quartz
• 사라지는 쿠키, 디지털 광고를 위한 차세대 ‘추적’ 기술은 무엇? - ITWorld Korea
• The Cookieless World - 디지털 마케팅의 새 시대를 위한 가이드 | GeekNews
• Cookie와 WebStorage에 대한 정리 # Web
• What are Cookies? | Explained in Detail
• Cookies Policy | Why you need a Cookie Policy Page in 2021 - YouTube
• 쿠키와 세션 - 김다은 · Present
• 파이어폭스, 무분별한 쿠키 활용 막는 ‘쿠키 통’ 기능 추가 - ITWorld Korea
• URL 끝에 ‘/’ 는 왜 붙이는 걸까?
• URL의 개념 - 이상선 - Medium
• URL, URI, URN: What's the Difference?
  • URL Uniform Resource Locator
    • 일반적으로 우리가 말하는 링크
    • 링크는 브라우저에서 URL를 연결하는 역할을 하기에 기술적으로 URL != 링크
    • 글에서 URL이 scheme, authority(domain name, port), path, parameters, anchor로 이뤄진 것을 구분
  • URI Uniform Resource Identifier
    • URL과 URI가 모두 RFC 3986을 따르지만, URL은 리소스의 위치, URI는 리소스를 식별해주기 때문에 거의 같다고 느낄 수 있으나 실제로는 URL이 URI의 subset
  • URN Uniform Resource Name: 리소스가 존재하지 않더라고 리소스를 식별하는 역할, 역시 URI의 subset
• URI, URL 및 URN의 차이점은 무엇입니까?
• URL, URI, URN: What's the Difference?
• Custom URI Scheme 만들기
• http-decision-diagram - An activity diagram to describe the resolution of HTTP response status codes, given various headers flowchart로 http status code 반환값의 흐름을 파악
  • HTTP decision diagram
• HTTP Status Code Definitions. Each Status-Code is described below… | by Mitku Dubale | Jun, 2022 | Medium
• Optimize your web apps for Interactive Canvas
• 삽질하기 싫으면 꼭 읽어봐야 할 Canvas 트러블 슈팅 | TOAST UI :: Make Your Web Delicious!
• Native lazy-loading for the web
• 회원가입을 쉽게 만드는 UI/UX 디자인은? mobile web 이야기이지만 component의 선택도 데이터에 의해 해야한다는 점에서 참고할 만한 이야기
• 개발자도 알면 좋은 UI 디자인
• 원티드 - 요즘 "프론트엔드 개발" 어떻게 하지? 참관 후기
• Building and deploying modern websites and apps - GitHub Universe 2019
• Timeout에 관한 정리
• 풀스택 개발자, 그것은 환상
• 풀스택 개발자에 대해서 어떻게 생각하나요? | 요즘IT
• LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기 - LINE ENGINEERING
• 개선된 페이지 스택으로 LINE 증권의 웹 페이지 전환 처리하기 - LINE ENGINEERING
• CGI와 웹서버
• 1993: CGI Scripts and Early Server-Side Web Programming – Web Development History
• 매출 손실을 줄여주는 외부링크 관제 Bot, 'URL Checker' 개발기 | 뱅크샐러드
• The Ultimate List of YouTube Channels to Boost your Web Development and Programming Skills · Dev & Gear
• The Ultimate Guide to Web Performance - DEV
• developer-handbook: An opinionated guide on how to become a professional Web/Mobile App Developer
• Timing web requests with cURL and Chrome TTFB time to first byte curl
• TTFB로 서비스 성능 측정하기. TTFB(Time To First Byte)를 통해 알아보는 내… | by Ryan Kim | Jul, 2021 | Medium
• Optimize Time to First Byte
  • 브라우저에 첫 바이트가 도착하는 시간인 TTFB(Time to First Byte)의 최적화 방법 설명
  • TTFB는 서비스의 특징마다 다르기 때문에 Core Web Vitals에는 안 들어가 있지만
    • 다른 매트릭에 영향을 주는 기본 매트릭이므로 적은 게 좋고
    • 대략 75 퍼센타일인 800ms를 좋은 TTFB로 이야기
  • TTFB는 lab 데이터보다는 실제 사용자의 데이터인 필드 데이터를 반드시 같이 봐야 하고
  • TTFB를 최적하 하기 위해 Server-Timing 응답 헤더로 서버에서 걸린 시간에 대한 자세한 정보 제공 가능
  • 결국 서버 로직의 최적화가 필요하지만 CDN을 사용하거나 마크업을 스트리밍으로 보내서 개선 가능
    • 서비스 워커가 설정에 따라 지연시간을 높일 수도
    • 또는 서버에서 마크업을 준비하는 동안 103 Early Hints 헤더를 제공해서 필수 리소스를 브라우저가 미리 다운로드 받게도 가능
• Core Web Vitals under control by Marta Wiśniewska - YouTube
• Introducing INP to Core Web Vitals  |  Google Search Central Blog  |  Google Developers
  • 2022년 INP(Interaction to Next Paint)를 실험적으로 도입해서 테스트한 결과 FID(First Input Delay) 대신 INP를 Core Web Vitals 메트릭으로 채택, 2024년 3월부터 적용 예정
• 구글의 프론트엔드 성공 지표 ‘Core Web Vitals’ | 요즘IT
• FE개발자의 성장 스토리 06 : 2021년 Chrome의 새로운 변화 – Schemeful same-site을 대응하자 – tech.kakao.com
• well-known 디렉토리와 securty.txt 그리고 humans.txt
• 37. 월드와이드웹(WWW)의 시작 1 | 만화로 나누는 자유/오픈소스 소프트웨어 이야기
• WebDevChallenge: A hopefully ever-growing list of web-development related challenges
• Under 1px line
• LINE에서 하루 만에 정적 웹 페이지 개발해서 배포하는 방법 - LINE ENGINEERING
• All Programming is Web Programming 기술 이야기는 아니지만 맞는 말이며 참고할만한 말
• MS Edge, Super Duper Secure Mode 실험 | GeekNews
• 정부의 웹사이트 총량제는 코로나19 방역을 어떻게 방해하나 — 북저널리즘 - 젊은 혁신가를 위한 콘텐츠 커뮤니티
• CMO를 위한 SEO가이드 48p PDF | GeekNews
• 글로벌 SaaS 만드시려면, ‘제발’ 영어 콘텐츠랑 SEO 하셔야 합니다 - Kimchi hill
• SEO 개선 초심자 가이드 | 카카오엔터테인먼트 FE 기술블로그
• (번역)성공적인 SEO 실행하기
• 기술 블로그를 위한 SEO - 재그지그의 개발 블로그
• 사이트를 임시로 닫을 때 구글에 알려 주기 | 웹으로 말하기
• 짧게 써보는 웹 프론트엔드의 역사
• 프론트엔드 개발하고 싶은데 자바스크립트(와 떨거지들)가 싫은 이들에게 - DEV Community flutter blazor vaadin
• 프론트엔드 역사와 미래, 업무 분야 ... 그리고 잘하는 프론트엔드 개발자란?
  • 시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔드 개발자란 | GeekNews
• The End of Front-End Development
  • (번역) 프런트엔드 개발의 종말
    • AI에 발전으로 인해 개발자의 일자리가 줄어들 것이라고 걱정을 많이 하는데 웹 개발자가 사라지지 않을 거라는 생각을 정리한 글
    • 1990년대부터 노코드 도구들이 등장하고 웹 개발자는 쓸모없어졌다고 하는 얘기는 계속 있었지만 그런 일은 일어나지 않았고 GPT가 만들어 준 웹사이트는 놀랍지만 이미 지금도 이런 일에는 웹 개발자가 필요하지 않고 AI가 계속 발전하겠지만 AI의 환각 현상을 알아내거나 제대로 만들려면 여전히 웹 개발자가 필요
• 2022년 웹 개발에서 고려해야 할 환경 - LINE ENGINEERING
• Making the world’s fastest website, and other mistakes - DEV Community
• Interaction to Next Paint (INP)
  • 다음 페인트에 대한 상호작용(Interaction to Next Paint, INP) | TOAST UI :: Make Your Web Delicious!
• 내 웹사이트를 슬랙에서 돋보이게 해줄 메타 태그 8가지 - 재그지그의 개발 블로그
• 32 UI Elements Designers Need To Know
  • 프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역)
• 내가 프론트엔드를 학습한 방법 | miryang.dev
• Why is Front-End Development So Unstable?
• The Medium RSS Feed’s Missing Part | by Sabesan Sathananthan | Geek Culture | Jun, 2022 | Medium
• 웹 서비스 캐시 똑똑하게 다루기 http cache
• HTTP Archive: State of the Web
• 웹 브라우저에 URL을 입력하면 어떤 일이 생기나요? | Amazon Web Services 한국 블로그
• 웹 개발 시간을 줄여주는 팁 4가지 | 요즘IT
• 완벽 정리! 쿠키, 세션, 토큰, 캐시 그리고 CDN
• 30 Ways to Validate Configuration Files or Scripts in Linux
• 웹 표준 미니앱의 어려움 @ Sunghyun Cho
• 내가 온라인 청첩장을 만든 방법
  • 온라인 청첩장을 레트로풍으로 만드는 과정 설명
  • nes.css와 둥근모체를 사용하고 좋아하는 게임 풍의 이미지를 사용해서 사이트 작성
  • Astro와 tailwind를 사용해서 사이트를 작성
  • 결혼식장 안내는 티맵, 카카오내비, 네이버 지도를 연동
  • 송금 카카오페이와 토스뱅크를 연동
  • 방명록은 Firebase 연동
• PRPL Pattern
  • PRPL Pattern | Patterns.dev.kr - 모던 웹 앱 디자인 패턴
• Airbnb Case Study
  • Airbnb Case Study | Patterns.dev.kr - 모던 웹 앱 디자인 패턴
• Optimize loading third-parties
  • Third Parties | Patterns.dev.kr - 모던 웹 앱 디자인 패턴
• Hey.com
  • Hey.com | Patterns.dev.kr - 모던 웹 앱 디자인 패턴
• The Future of the Web is on the Edge
  • Deno Company에서 엣지 컴퓨팅의 미래를 설명한 글
  • 너무 과거부터 얘기하는 거 아닌가 싶기도 한데
    • CDN이 1998년 CDN을 런칭하면서 정적 파일을 사용자에 가까운 캐싱 서버에서 제공할 수 있게 했지만
  • 이젠 동적인 웹도 엣지에 배포해서 각 사용자가 자신에게 가까운 서버에 요청을 보내서 레이턴시를 줄이고
    • 서버리스처럼 사용한 만큼만 사용할 수 있게 된다고 설명
  • DDoS도 자연히 막을 수 있어서 보안도 좋지만
  • 기존 프레임워크가 엣지에 최적화되진 않아서 Fresh같은 프레임워크가 엣지에 맞게 설계되었다고 하고 있다
• 링크, 현재창에서 열어야 할까 새 창에서 열어야 할까 | 웹으로 말하기
• Announcing Interop 2023 - Mozilla Hacks - the Web developer blog
  • 브라우저 간의 구현 차이는 많은 문제를 일으키므로 이를 해결하기 위해서 웹 플랫폼 테스트를 공유해서 모든 브라우저가 테스트하도록 하고 있음
  • Interop 프로젝트는 2022년부터 Apple, Bocoup, Google, Igalia, Microsoft, Mozilla가 협력한 프로젝트
    • 웹의 상용 운용성 개선하기 위한 프로젝트
    • Iterop 2022에서 여러 플랫폼의 상호 운용성이 많이 개선, 올해 Iterop 2023 발표
  • Iterop 2023에서는 Focus ares와 Investigation의 개선 집중
    • 웹 플랫폼 테스트에서는 이미 높은 수준의 사양과 우수한 테스트 커버리지를 가진 플랫폼을 중점적으로 다루며
    • "Active focus area"는 올해 점수에 기여한 영역
    • "Inactive focus ares"는 개선이 예상되지 않는 전년도의 포커스 영역
    • 각 브라우저의 테스트 점수도 보여주지만
      • Gecko, WebKit, Blink가 모두 통과한 테스트는 Interop 점수로 계산해서 모든 브라우저에서 안정적으로 동작하도록 하고 있음
    • Investigation는 상호운용성이 부족한데 테스트 통과만으로는 개선할 수 없는 영역을 조사하는 것
      • 모바일 플랫폼과 접근성 API에서 테스트 인프라가 불충분하다고 생각해서 이 부분에 집중할 예정
• 30분 안에 결제 페이지 개발하기 (ft. 결제위젯) 토스페이먼츠 tosspayments
• What's New in Web Animations - YouTube
• 세션 vs 토큰 vs 쿠키? 기초개념 잡아드림. 10분 순삭! - YouTube session token cookie

Apache

• installation
  • apt-get install -y libapr1-dev libaprutil1-dev libpcre3-dev apache2-dev apache2
  • Apache httpd 를 컴파일로 설치하기
  • (리눅스 업스킬 도전 #7) 웹 서버인 아파치 설치
  • How To Install Apache on macOS 10.15 Catalina Using Homebrew | by Casey McMullen | Better Programming | Medium
• 9 Tips to Use Apachectl and Httpd like a Power User
• 설정 파일의 주석 위치가 일으킨 Apache의 응답 속도 저하 주석을 설정 지시어와 같은 줄에 사용할 수 없다
• Apache 서버 설정으로 특정 IP 막기
• Windows에서 Apache + Tomcat 조합으로 설치하는 방법 (1/6)
• Rate limiting with Apache and mod-security
• mod_rewrite 로 URL 다루기
• 아파치 2.4에 추가된 filesize 식을 이용해서 특정 크기를 넘어서는 파일 접근 차단하기
• 아파치 모듈로 개발된 API 서버, 이음 베이론을 소개합니다
• Common Apache Errors | DigitalOcean
• 클라우드플레어 DNS 프록시 사용할 때 아파치 로그에 IP 주소 제대로 찍히게 하기 | 웹으로 말하기

Authentication

• Using Encryption and Authentication Correctly
• HTML attributes to improve your users' two factor authentication experience
• 머릿말 - 웹 인증 및 SSO 가이드
• SSO 1편: 오픈소스 SSO를 왜 도입하였나요. :: GS Retail Engineering
• SSO 2편: Aerobase (Keycloak) 클러스터링 & 커스텀 테마 :: GS Retail Engineering
• 어드민 인증 서비스 구현 경험기. 안녕하세요. 서비스 플랫폼 팀 소속 백엔드 개발자 유가희입니다. 서비스… | by Kahee Yu | 29CM TEAM | Feb, 2023 | Medium keycloak

Book

• 웹 개발 관련 서적 mind map
• 가볍지 않은 Web 프로그래밍
• 더북(TheBook): 모두의 HTML5 & CSS3
• Front-End Developer Handbook 2017
• web-service-hardening
• Web Browser Engineering
  • 웹 브라우저를 Python으로 구현하는 온라인 튜토리얼
  • 웹페이지 다운로드부터 페이지 그리기, 서버와의 통신, 스크립트 실행까지 단계별로 설명

Browser

• 브라우저의 동작 원리와 렌더링 최적화 | Huskyhoochu 기술 블로그
• 리소스 로딩 순서 최적화 | Patterns.dev.kr - 모던 웹 앱 디자인 패턴
• Web Browser Engineering
  • 브라우저 이해하기 시리즈 | GeekNews
• Bringing instant page-loads to the browser through speculative prerendering
  • 브라우저의 추측성 힌트인 prefetch/prerender의 사용법과 단점 설명
  • preconnect/preload는 선언적인 힌트로 다음 로딩 때 필요한 리소스에 사용
  • prefetch/prerender는 추측성 힌트로 필요할 가능성이 높은 리소스를 브라우저에 추천할 때 사용
  • B 페이지가 A 페이지 다음에 요청될 가능성이 높다고 했을 때 A 페이지에서 prefetch 힌트를 사용해서 B 페이지나 특정 리소스를 미리 받도록 브라우저에 전달
  • A 페이지에서 prerender 힌트를 사용해서 미리 B 페이지를 렌더링하게 브라우저에 전달. 미리 렌더링 되었으므로 클릭 시 바로 화면을 볼 수 있다
  • prefetch
    • 다음 페이지 전체나 same-origin의 서브 리소스를 미리 가져올 수 있다
    • 캐싱할 수 있다면 HTTP Cache에 저장(크롬은 5분간 저장)
  • prerender
    • 크로미움에서 기존 구현체가 메모리를 너무 많이 사용해서 no-state prefetch로 다시 구현
    • Quicklink, Guess.js 등의 서드파티 라이브러리 존재
• 웹 페이지 로딩 과정 이해하기
• 추론적인 프리렌더링으로 빠르게 페이지 로드하기 | TOAST UI :: Make Your Web Delicious! prefetch prerender
• 브라우저의 사용자 에이전트는 왜 이렇게 복잡하게 생겼을까? - 재그지그의 개발 블로그
• 브라우저의 사용자 에이전트는 왜 이렇게 복잡하게 생겼을까? | 요즘IT
• Optimizing resource loading with Priority Hints
  • 브라우저가 리소스를 다운로드할 때 <head>에 있는 <link>나 CSS를 먼저 다운로드받거나 뷰포트 내의 리소스를 먼저 다운로드받는 등 최적화
  • 이 우선순위 힌트를 줄 수 있는 importance 속성 설명
  • importance를 hign나 low, auto로 지정 가능
  • 이 우선순위 힌트는 실험적 기능, Chrome 96부터 origin trial로 이용 가능
  • 크롬이 처리하는 우선순위가 표로 잘 나와 있고 우선순위 힌트를 사용했을 때 얼마나 빨라지는 지도 비교 설명
  • 우선순위 힌트로 리소스 로딩 최적화하기 | TOAST UI :: Make Your Web Delicious!
• Building an adaptive favicon
  • 최신 브라우저가 파비콘에 SVG도 지원함에 따라 처럼 SVG 파비콘을 연결하고 prefers-color-scheme 미디어 쿼리를 이용해서 사용자의 테마에 따라 다크/라이트 파비콘을 보여주도록 적용하는 방법 설명
  • 현재 파비콘에서 미디어쿼리는 파이어폭스와 크로미움 기반 브라우저만 지원
• Interop 2022: browsers working together to improve the web for developers
  • Interop 2022: 브라우저가 함께 작동하여 개발자를 위한 웹 개선 | GeekNews
• 웹용 스토리지
• 웹 스토리지 : 무엇을 써야할까요?
• 웹브라우저에 데이터를 저장하기 - IndexedDB - YouTube
• Get to know your browser's performance profiler - Thomas Belin
  • 브라우저의 개발자 도구에서 Performance탭의 프로파일러를 돌린 후 결과를 어떻게 이해해야 하는지 설명하는 글
  • 1ms단위로 스냅샷을 찍기 때문에 함수의 호출 관계와 실행에 따라 데이터가 어떻게 표시되는지를 간단히 출력
  • 이를 이용해서 개발자도구에서 오래걸린 함수(total시간과 self시간)를 어떻게 찾는지를 보여주는데 예제 코드를 직접 실행해 볼 수 있게 제공해서 개발자 도구에서 성능 프로파일링 가능
• How we think about browsers | The GitHub Blog
  • 점진적 향상 원칙에 따라 오래된 브라우저에서도 사용할 수 있으면서 최신 브라우저에서는 더 빠른 경험 제공
  • GitHub 사용자의 브라우저를 분석해 보면 95% 요청이 7개 브라우저에서 오고 최신 버전에서 70%의 요청이 오고 이전 3개 버전까지 가면 1% 미만
    • 브라우저별로 추적해서 자동 업데이트되는 에버그린 브라우저를 통해 빠르게 과거 버전을 제거
  • 또한 오래된 브라우저의 4% 요청을 보면 오래되고 다양한 브라우저를 볼 수 있고 오래된 브라우저일수록 로그아웃 상태의 요청이 많음
    • 로그아웃 사용자라는 것은 읽기 전용 활동이 많다는 의미
    • 이때는 JavaScript가 많이 필요하지 않음
    • GitHub에서는 JavaScript를 비활성화해도 기본적인 활동을 대부분 가능
  • 그래서 lint로 브라우저 호환성을 검사하고 최신 기능에 대한 폴리필을 많이 사용했지만, 종종 성능 저하도 있었기에 최소한의 폴리필을 유지하도록 관리
• History API는 가라! 이제는 Navigation API의 시대가 온다 - 재그지그의 개발 블로그
• Etsy Engineering | Priority Hints - What Your Browser Doesn’t Know (Yet)
• Taking Chrome DevTools outside of the browser
• Internet Explorer 와 작별하기. 번개장터에서 Internet Explorer 지원을 종료하게 된 배경과… | by leo.kang | 번개장터 기술 블로그 | Sep, 2022 | Medium
• 브라우저 대용량 파일 1 - 한줄씩 읽기
• Container queries land in stable browsers
  • 컨테이너 쿼리를 이제 모든 주요 브라우저에서 사용 가능
  • 컨테이너 쿼리는 container-type이나 container로 card나 inline-size를 지정해야 하고
    • 미디어쿼리를 사용하듯이 부모 요소의 스타일 정보를 알 수 있게 되므로 재사용할 수 있는 컴포넌트에서 유용
  • 사이트에서 컨테이너 쿼리를 사용하는 예시를 제공하므로 직접 사용 가능
• Browsers are the new containers! by Dan Erez - YouTube
• Oh what fun! connecting to devices with your browser by Ron Dagdag - YouTube WebMidi
• Workers Browser Rendering API enters open beta
  • Cloudflare에서 Workers Browser Rendering API의 오픈 베타 시작
  • Workers Browser Rendering API를 이용하면 Cloudflare의 워커에서 헤드리스 브라우저를 사용 가능
  • Puppeteer를 워커에서 사용할 수 있도록 제공하고 있으므로 워커에서 Puppeteer API를 그대로 사용 가능
• Baseline
  • Chrome 팀에서 특정 웹 기능이 Chrome, Edge, Firefox, Safari 등 주요 버전에서 지원되는 지를 더 명확히 보여주어 웹에서 안정적으로 쓸 수 있는지를 판단할 수 있는 Baseline 공개
  • web.dev와 MDN에서 표시될 것이며 Interop 2022/2023에서 Apple, Microsoft, Mizilla와 협력해서 제작, 앞으로도 1년에 한 번씩 베이스라인을 발표할 예정
• Browserslist
  • 다양한 JavaScript에서 브라우저 호환성 정보를 공유하는 Browserslist 공식 웹사이트
  • defaults나 last 2 versions같은 설정을 입력하면 자세한 브라우져 사용 현황 확인 가능

C++

• Cheerp 1.1 - C++ for the Web with fast startup times, dynamic memory and now, more speed!
• Crow is very fast and easy to use C++ micro web framework (inspired by Python Flask)
• Building a Website with C++

Clojure

• Basic Web Development
• 간단한 클로저 웹 애플리케이션 만들기
• Catalysis - Full stack (+ clj cljs reagent datomic datascript datsync) web development
• Compojure
• Web development with ClojureScript, Om, ReactJS and Related Libraries in V Acts
• arachne-framework.org

Crawler

• 웹크롤러 아키텍쳐
• Crawling Billions of Pages: Building Large Scale Crawling Cluster
  • part 1
  • part 2
• Hosted web crawler for developers
• How to write a multi-threaded webcrawler
• I Don’t Need No Stinking API – Web Scraping in 2016 and Beyond
• 2018 데이터야놀자 웹크롤링 좀 더 잘하기
• Web scraping for web developers: a concise summary
• Bot detection 101: How to detect web bots?
• 구글 시트를 이용해 10분만에 만든 김영민 교수님 글 모음 (웹크롤링) - Financial Freedom google sheet의 importxml 이용
• Facebook Saved 크롤링
• 🚜 웹 크롤링과 아키텍쳐
  • 웹 크롤러 아키텍쳐 | GeekNews
• The State Of Web Scraping in 2021 – Mihai's Blog
• 합법적으로 ‘웹 크롤링’하는 방법 (上) | 요즘IT
• 합법적으로 ‘웹 크롤링’하는 방법 (下) | 요즘IT
• Ep(130) 크롤링, 그 범죄와의 전쟁: 저작권을 모르면 범죄자가 된다구요?! - YouTube
• The State of Web Scraping 2022 | ScrapeOps
• incolumitas.com – So you want to Scrape like the Big Boys? 🚀
  • 대규모로 웹 스크래핑하기 | GeekNews
• 함께 쓰는 풀리퀘 지금 하는 크롤링, 혹시 ‘디도스’는 아닌가요
• 대법원, 야놀자 정보 크롤링 한 여기어때 창업주 '무죄' - ZDNet korea
• 2022년 현재, 최고의 웹 스크래핑 도구는 무엇인가요? | GeekNews
• Industrial-scale Web Scraping with AI & Proxy Networks - YouTube
• browser-fingerprinting: Analysis of Bot Protection systems with available countermeasures 🚿. How to defeat anti-bot system 👻 and get around browser fingerprinting scripts 🕵️‍♂️ when scraping the web?
  • 봇 감지 우회하기 : 차단당하지 않고 웹 스크레핑 하는 법 | GeekNews
• Browserflow - Web Scraping & Web Automation
• Common Crawl - We build and maintain an open repository of web crawl data that can be accessed and analyzed by anyone
  • Basic Statistics of Common Crawl Monthly Archives
• Greenflare - 오픈소스 로컬 SEO 크롤러 | GeekNews

Crawler Go

• How to scrape websites with Golang & Goquery
• Golang tutorial: How to scrape websites with Golang & Goquery | Golang project - YouTube
• How to Build a Web Scraper using Golang with Colly
• Colly Scraping Framework for Golang
  • GO Project for Beginners - Web Scraping with Golang - YouTube
• scrape - A simple, higher level interface for Go web scraping
• wbot: A sample & efficient web crawler

Crawler Javascript

• 동영상 목록 페이지에서 데이터 추출하기 - YouTube
• Crawlee · Build reliable crawlers. Fast. | Crawlee
  • Crawlee - 웹스크래핑 & 브라우저 자동화 라이브러리 | GeekNews
• estela, an elastic web scraping cluster
• NIGHTMARE - A high-level browser automation library
• Phantom Js (Amazing library for web scraping)
  • Headless Chrome의 사용방법
  • AWS Lambda에서 사용한 Chrome의 headless_shell 직접 컴파일하기
  • 헤드리스 크롬과 selenium2의 조합을 사용해 보자 with node | devpools blog
  • How to build a GitHub bot with PhantomJS, React, and Serverless framework

Crawler Node.js

• Node.js 를 이용한 웹 데이터 수집하기
• How to Perform Web-Scraping using Node.js
• puppeteer 뉴스 기사 메타 정보 크롤링
• A Guide to Automating & Scraping the Web with JavaScript (Chrome + Puppeteer + Node JS)
• Hacking my Honeymoon with Javascript

Crawler Python

• Python Web Crawler Development
• 30분만에 따라하는 동시성 웹 스크래퍼
• Tiny basic multi-threaded web crawler in Python
• A Web Crawler With asyncio Coroutines
• PYTHON 3 Tutorials 24. 웹 크롤러(like Google) 만들기 1 - How to build a web crawler
• AskDjango 국회 사이트, 국회의원 목록 크롤링
• Python — 원숭이도 따라할 수 있는 크롤러 만들기
• Python Web Scraping Tools: A Survey
• facebook을 python으로 자유롭게 크롤링하기
• Crawl your facebook post for retrospective
• Web Scraping(웹 크롤링) - 페이지 분석하기
• 크롤링 차근차근 시작하기
• 크롤링 실습 - 대표적인 크롤링 예시 3가지
• 7-1. 웹 크롤링(스크래핑) 이해하기
• 크롤러를 이용해 우체국 등기우편을 자동으로 정리해보자
  • github.com/needleworm/post_crawler
• Python's Web Framework Benchmarks
• KBO 경기에서 선수들의 기록 데이터 수집하고 분석하기
• Tutorials 24. 웹 크롤러(like Google) 만들기 1 - How to build a web crawler
• 파이썬 크롤링 관련 모듈
• 웹 크롤링에 대해서
• 가상화폐 가격정보 가져오기
• Dataset creation and cleaning: Web Scraping using Python — Part 1
• 타베로그를 크롤링하기
• 타베로그를 크롤링하기2 - Google Places API로 비교하기
• 타베로그를 크롤링하기3 - 타베로그 데이터 까보기
• 타베로그를 크롤링하기4 - 구글 데이터 까보기
• How I used Python to analyze Game of Thrones selenium, crawl, report
• sec-web-scraping
  • How to Web Scrape the SEC | Part 1
  • How to Web Scrape the SEC | Part 2
  • How to Web Scrape the SEC | Part 3
• How to build a URL crawler to map a website using Python
• 파이썬으로 어벤져스: 엔드게임 용산IMAX 명당 예매 하기 (1)
• 파이썬으로 어벤져스: 엔드게임 용산IMAX 명당 예매 하기 (2)
• 파이썬으로 어벤져스: 엔드게임 용산IMAX 명당 예매 하기 (完)
• How I get options data for free
• Python - 한국기상청 도시별 현재 날씨 정보 분석 후 csv 저장
• Python - 한국기상청 도시별 현재 날씨 Data 분석 시각화
• 파이썬을 통한 웹페이지 크롤링 살펴보기
• 데이터톤 - 파이썬 크롤링과 분석
• BSN (Breaking Stock News) 개발기
• 뉴스 댓글 분석 프로젝트 0: 프로젝트를 시작하며
• Build A Python App That Tracks Amazon Prices!
• 온라인 뉴스 댓글은 정말 사람들의 목소리일까? - PART 2
• SBS, KBS, MBC 크롤러 만들기
• 네이버 블로그 자동 포스팅을 위한 네이버 블로그 에디터 분석 - 1
• 서버없이 동작하는 나만의 코로나 봇 만들기 - 텔레그램 활용
• Scraping Nasdaq news using Python
• 파이썬으로 배우는 초보 웹크롤링(request요청, 영화차트크롤링-1)
• Title + Price 가져오기(Crawling 후 CSV File 저장)
• 바쁜 개발자가 집 알아보는 방법 🐌 - 방 정보 크롤링 및 필터링 하기
• 파이썬으로 네이버 카페 게시판 크롤링 & 워드 클라우드 실습 하기! (feat.konlpy.Twitter)
• 네이버 카페 게시판 제목, 본문, 작성자, 글번호 웹 스크래핑 2021년 버전
• 네이버카페 파이썬 크롤링 데이터 간단한 분석 및 워드클라우드 예제
• 완전 쉽게 파이썬으로 텍스트 및 이미지 크롤링하기 | 완성형 서비스 만들기 1강 goorm 이용
• RSS 피드를 활용하여 각종 언론사에서 뉴스 데이터 받기
• 가격비교 사이트, 나도 만들 수 있다! 잼있게 파이썬으로 하는 크롤러 제작
• imDB(인터넷 영화 데이터 베이스) Tutorial - 1
• imDB(인터넷 영화 데이터 베이스) Tutorial - 2
• imDB(인터넷 영화 데이터 베이스) Tutorial - 3
• 파이썬 코딩 무료 강의 (활용편3) - 웹 크롤링? 웹 스크래핑! 제가 가진 모든 비법을 알려드리겠습니다. 나도코딩 - YouTube
• 네이버 금융 크롤러 : 네이버 블로그
• 파이썬 웹 크롤링(1) - 로스카츠의 AI 머신러닝
• 파이썬 웹 크롤링(2): 데이터 파싱 - 로스카츠의 AI 머신러닝
• 파이썬 웹 크롤링(3): 본격적인 크롤링 - 로스카츠의 AI 머신러닝
• 파이썬 웹 크롤링(4): API 활용하기 - 로스카츠의 AI 머신러닝
• Transfermarkt 크롤링 & 데이터분석 : BeautifulSoup, Pandas 실습 - YouTube
• Web Scraping 101 with Python
• 파이썬 셀레니움 이미지 크롤링 예제 코드
• Searching the web for < $1000 / month | Search more with less
• Web_Scrapping_python_for_begginers | Kaggle
• python 인스타그램 크롤러 or 스크래퍼 : 네이버 블로그
• Scrape YouTube Search with Python (part 1) | by Dimitry Zub | Geek Culture | Jun, 2021 | Medium
• Scrape YouTube Search with Python (part 2) | by Dimitry Zub | Geek Culture | Jun, 2021 | Medium
• 웹크롤링 랜덤 uger-agent, 랜덤 Proxy IP 우회 class
• Scrape Table from a Website using Python - YouTube
• How to Collect Amazon.com Data Using Python | Python in Plain English
• Modern Web Scraping with Python - YouTube
• AutoCrawler - Google, Naver multiprocess image crawler (High Quality & Speed & Customizable)
• Beautiful Soup
  • practice - beautiful soup
  • 10분만에 따라하는 웹사이트 긁어오기 javascript
  • 나만의 웹 크롤러 만들기 With Requests/BeautifulSoup
  • 나만의 웹 크롤러 만들기(2): Login With Session
  • 나만의 웹 크롤러 만들기(3): Selenium으로 무적 크롤러 만들기
  • 나만의 웹 크롤러 만들기(4): Django로 크롤링한 데이터 저장하기
  • 나만의 웹 크롤러 만들기(5): 웹페이지 업데이트를 알려주는 Telegram 봇
  • 나만의 웹 크롤러 만들기(6): N배빠른 크롤링, multiprocessing!
  • 나만의 웹 크롤러 만들기(7): 창없는 크롬으로 크롤링하기
  • 나만의 웹 크롤러 만들기
  • PYCON KR 2017: 처음부터 알아보는 웹 크롤러
  • How to scrape websites with Python and BeautifulSoup
  • BeautifulSoup를 이용하여 html파일 읽어오기
  • python을 이용한 클리앙 파서만들기 - BeautifulSoup 사용편(1차 수정)
  • 네이버(naver) 실시간 검색어 순위 가져오기
  • 네이버(naver) 실시간 검색어 순위 가져오기 - 과거데이터 까지 가져오자!
  • Beautiful Soup로 크롤링 하기 #1
  • Beautiful Soup로 크롤링 하기 #2
  • Introduction to Web Scraping with BeautifulSoup - How to use web scraping to get information from a Wikipedia page
  • Web Scraping with Beautiful Soup - Monica Puerto
    • Pydata beautiful soup - Monica Puerto
  • How to scrape websites with Python and BeautifulSoup
  • Web Scraping With Beautiful Soup in Python
    • Python Beautiful Soup
  • Scraping URLs with BeautifulSoup
  • Web Scraping E-Commerce Website with Beautiful Soup + Excel Multiple Pages PART 1/2 - YouTube
  • TOOBUK
• canrevan: 대량의 네이버 뉴스 기사를 수집하는 라이브러리입니다
• corona-tracker crawl + telegram bot
• Crawler
• Crawl your facebook post for retrospective for V9.0
• cyworld-bot - Cyworld image crawler
• Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites
  • dark-patterns: Code and data belonging to our CSCW 2019 paper: "Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites"
• eventlet#web-crawler
• Google Image Downloader - A simple script that fetches images from Google with browser simulation
• kocrawl: A collection of useful Korean crawlers (always updated)
• KoreaNewsCrawler: 대량의 뉴스 데이터를 수집하기 위해 만들어진 뉴스 크롤러입니다
• newscatcher - Programmatically collect normalized news from (almost) any website
• scrapy: Scrapy, a fast high-level web crawling & scraping framework for Python
  • scrapy_community
  • Web Crawling
  • OneQ Web Application
  • OneQ Web Application 웹크롤러
  • OneQ Web Application Scrapy 웹 크롤링- OneQ
  • 웹 스크래핑(web scraping with python)
  • 'Scrapy' 태그의 글 목록 :: 배워서 광명찾자
  • 파이썬 웹 스크래핑할 때 이거 쓰세요. 최고의 파이썬 웹 스크래핑 솔루션 scrapy
  • Python 웹 크롤러 도구 비교 및 사용 후기(Scrapy vs selenium vs Requests, urllib) | by Key Kim | Medium
  • django_ebay_scrapy: eBay Scrapy can help eBay sellers to understand the marketplace with Keyword Analysis
  • ebay_scrapy
  • Cloud Web Scraper | Scrapy Cloud | Zyte
  • scrapyd: A service daemon to run Scrapy spiders
  • scrapy-redis: Redis-based components for Scrapy
• Selenium
  • (python) selenium에서 xpath를 이용해 크롤링 하기 – Jang
  • Selenium with Python
  • Selenium Implicitly wait vs Explicitly wait
  • 테스트 수행 자동화 도구의 짬뽕.. Sikuli와 Selenium의 짬뽕.. 
  • Selenium 으로 구글 맵에서 정보 뽑기
  • selenium에서 임의의 ip로 크롤링하기 (python, Ubuntu, Firefox)
  • linux(centOS)에서 selenium 설정하기 (feat. python)
  • Controlling the Web with Python
  • Using Python to power Selenium at scale (Brandon Rhodes)
  • Selenium을 활용한 크롤러 제작 후기
  • Better web scraping in Python with Selenium, Beautiful Soup, and pandas
  • 셀레니움 브라우저 자동화 - 네이버 쪽지 쓰기
  • Send Naver note without Selenium
  • Selenium Webdriver가 백그라운드에서 자동으로 브라우저 윈도우를 열 수 있습니까?
  • linux(centOS)에서 selenium 설정하기 (feat. python)
  • 파이썬 selenium 이용 네이버 자동로그인 하기
  • Selenium 으로 Web Scraping 아이 해봤니?
  • Scraping Job Posting Data from Indeed using Selenium and BeautifulSoup
  • 자동화 브라우져에 사용자 환경 불러오기
  • Mobility-Engineering-blog-post-crawl
  • 셀레니엄으로 나무위키 다이나믹 요소 크롤하기
  • How to scrape websites using Python
  • Selenium for Test Automation — Yay or Nay?
  • Selenium (Python) 설치와 기본 사용해 보기 (Windows)
  • 개발TIP&기록 웹 크롤링을 위해 Selenium Ubuntu 서버에 배포하기 - TaeBbong의 Dev Blog
  • What is close() and quit() commands in Selenium Webdriver?
  • Facebook Webdriver를 이용하여 Selenium 테스트하기 - 완두블로그
  • 명언 + 위인 가져오기(selenium)
  • The Ultimate Guide to End to End Tests with Selenium and Docker
  • 파이썬 자동화
  • 네이버 메일 제목 가져오기 - 클립보드 사용
  • 파이썬 selenium-셀레니움 ) 네이버 로그인하기 (네이버 자동로그인 방지문자 우회 1분컷)
  • 파이썬으로 인스타그램 포스팅
  • 7 Ways to hide your Bot Automation from Detection | How to make Selenium undetectable and stealth | PiProgramming
  • Selenium 4 is releasing soon: What every QA must know? | by Muntasir Abdullah Mizan | Medium
  • Web Scraping Using Selenium. A simplified example of scraping an… | by Kiprono Elijah Koech | Towards Data Science
  • How to Use Selenium to Automate Everything in the Browser | by James Briggs | Python In Plain English | Oct, 2020 | Medium
  • 파이썬 셀레니움 이미지 크롤링으로 배우는 업무 자동화의 기초 - YouTube
  • New Live Stream: Modern UI Test Automation with Selenium Libraries | The IntelliJ IDEA Blog
  • Web Scraping Multiple Pages with Python and Selenium + CSV File - YouTube
  • 파이썬영어 공부 앱 추천해줘 . 김기연 - PyCon Korea 2021 - YouTube
  • 크롬으로 한/글 문서 작성한 후 다운받기 feat. selenium
  • Test Practice using Selenium - (1)
  • Test Practice using Selenium - (2)
  • Building a python bot to fill out online forms - Check this thing out
  • Python Selenium Tutorial - YouTube
  • Introduction to Web App Reporting API | by Bhagya Vithana | May, 2022 | Bits and Pieces
  • Top 8 Web Scraping Tips Every Beginner Should Know - YouTube
  • 부동산지인 크롤링 ①지역별 미분양수(1/2) - YouTube
  • Setting up your own test automation environment - Learn web development | MDN
  • Crawling 성능 40배 올리기, 160분에서 4분대로 -도구 선택의 중요성- :: 친환경사과의 블로그입니다
  • Crawling 성능 40배 올리기, 160분에서 4분대로 -병렬 처리- :: 친환경사과의 블로그입니다
  • Healenium
    • Healenium
    • Self-Healing Test Automation - The Next Big Thing? - YouTube
  • selenium-ide: Open Source record and playback test automation for the web
  • selenium-python-helium: Selenium-python but lighter: Helium is the best Python library for web automation
  • Selenium Tutorial - Beginner to Advanced | ArtOfTesting
  • undetected-chromedriver: Custom Selenium Chromedriver | Zero-Config | Passes ALL bot mitigation systems (like Distil / Imperva/ Datadadome / CloudFlare IUAM)
• shot-scraper: A command-line utility for taking automated screenshots of websites
  • Scraping web pages from the command line with shot-scraper
• springer_free_books - Python script to download all Springer books released for free during the 2020 COVID-19 quarantine
• webscraping-open-project: Repository of open knowledge about web scraping in Python
• youtube-downloader-v1.0

Crawler Scala

• jsoup: Java HTML parser, built for HTML editing, cleaning, scraping, and XSS safety
  • Scraping Websites using Scala and Jsoup
  • Web Scraping with Scala | ScrapingBee

CSS

• CSS 레이아웃 기초
• How to Code in HTML5 and CSS3
• 최고의 CSS 중앙정렬 기법
• 크리에이티브 코딩캠프 - 빔캠프 veamcamp.com
• The ultimate CSS battle: Grid vs Flexbox
• flexbox로 만들 수 있는 10가지 레이아웃
• CSS로 배경 이미지 위에 덧그리기
• 쪼그라드는 웹페이지
• Follow these steps to become a CSS Superstar
• 반응형 그리드 레이아웃
• 스크롤바 숨기기
• 플렉스(flex) 박스, 한 번 정리하고 가자
• 2020년 CSS 트랜드 - 신현석(Hyeonseok Shin) Tailwind CSS
• web development languages - Web4College
• CSS-Only Carousel | CSS-Tricks
• linear-gradient 속성에 transition 적용하기 | blog.rhostem.com
• Learn CSS
• IE를 버리면 사용할 수 있는 CSS 명세. | naradesign.github.io
• 새로운 CSS 기능적인 의사 클래스 :is()와 :where() | TOAST UI :: Make Your Web Delicious!
• CSS Nesting Module 다른 CSS 스타일 안에 CSS 스타일을 포함할 수 있는 CSS Nesting Module 초안 공개
• 효율적인 다크 모드 구현을 위한 배경/전경 컨텍스트 기반의 컬러 팔레트 만들기 (feat. CSS variable) – Xenosium
  • 다크 모드 구현을 위해 컬러 팔레트를 기반으로 구성하는 방법 설명
  • prefers-color-scheme 미디어 쿼리를 이용해서 라이트/다크 모드 색상 변수 선언, 사용 가능. 하지만 보통 웹사이트는 다양한 UI 요소가 있으므로 간단하지 않음
  • HSL로 색 반전 가능. 하지만, UI 요소 중 배경색을 사용한 경우에는 제대로 반전되지 않는 부분이 생기기 마련
  • 디자인에서 사용하는 색의 개수는 정해져 있으므로 팔레트로 만들어서 색의 단계별로 HLS 변수를 만들어 사용
    • HSL로 단계별로 지정했으므로 다크 모드에서는 반대되는 색을 쉽게 찾을 수 있음. 라이트 모드에서 gray-010는 다크 모드에서는 gray-090
  • UI 요소가 늘어나면 변수도 2개씩 늘어나는 문제
  • 이 부분을 이용해서 색은 배경(background)와 전경(foreground)에 따라 역할이 다르다는 것에 착안해 10단계의 색조 팔레트를 배경/전경으로 나누고 이를 이용해서 라이트 모드 다크모드 변수 정의
    • 이 많은 변수가 너무 많게 느껴질 수 있지만, UI 요소에 대응할 수 있어서 복잡한 사이트에서는 이렇게 사용하는 것이 더 나음
• LINE Web Timeline 이미지 얼굴 인식 기능 적용 - LINE ENGINEERING
• Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient.
  • CSS로 그라데이션을 표현할 때 CSS 엔진이 RGB를 쓰기 때문에 RGB 값으로 표현하는 가운데 보기 싫은 그레이 영역이 출현
  • 이는 HSL을 사용할 때는 발생하지 않은데 이 색 표현의 차이를 설명(데모가 있어서 이해하기 좋음)
  • 이를 이용해서 많은 중간 지점을 css gradient 함수에 전달해서 자연스럽게 표현되도록 한 방법을 설명, 이를 활용할 수 있는 Gradient Generator도 소개
• CSS 역사로 알아보는 CSS가 어려워진 이유
  • 크게는 문서를 위한 스타일로 만들어진 CSS가 애플리케이션에서는 어울리지 않는 부분이 생기면서 여기에 맞춰진 새로운 스펙이 나왔지만
  • 기존 개념이나 방법과 충돌하기도 하고 달라지기도 했기 때문에 CSS의 역사를 통해서 어떻게 발전해 왔는지를 정리한 글
  • CSS가 만들어진 90년대부터 현재 최신 트랜드까지 깔끔하게 잘 정리되어 있고 관련 링크도 정리해 주어서 더 관심 있다면 자세히 보면서 흐름을 이해 가능
• Responsive Personal Portfolio Website Using HTML CSS And JavaScript - YouTube
• Responsive Movies Website Design In HTML CSS & JavaScript
• CSS { In Real Life } | Aspect Ratio is Great
  • 선호하는 비율을 지정하는 aspect-ratio가 대부분의 브라우저에서 지원되어 이제 쓸 수 있고 장점이 많다는 이야기
  • 이전에는 요소의 비율을 맞추려면 padding hack을 써서 비율을 강제로 설정
  • aspect-ratio를 사용하면 쉽게 원하는 비율에 맞출 수 있고 object-fit과도 잘 어울려서 원하는 이미지를 원하는 비율로 쉽게 보여줄 수 있음
• 벨로그에 다크 모드 적용하기
  • 국내에서 많이 사용하는 블로그 플랫폼인 Velog에 다크 모드 적용 과정
  • 처음에는 Styled Components의 ThemeProvider를 고려했으나 SSR의 경우 처음 사용자의 테마를 알 수 없는 문제가 있어서 CSS Variable을 알아보기 시작
  • prefers-color-scheme 미디어 쿼리를 이용하면 사용자의 컬러스킴도 알 수 있어서 처음부터 사용자에게 맞는 모드로 보여줄 수 있어서 CSS Variable 선택
  • 다크모드를 준비하기 위해서 각 상황에 맞는 색상 팔레트를 준비하고 이를 코드로 변환해서 다크 모드를 지원
• Understanding Layout Algorithms
  • (번역) 레이아웃 알고리즘 이해하기. CSS를 보다 직관적으로 만드는 멘탈 모델 전환 | by Jung Han | Apr, 2022 | Medium
    • CSS를 공부하면서 프로퍼티의 사용법을 배웠지만 제대로 이해하려면 레이아웃 알고리즘을 배워야 한다고 설명
    • 기본 레이아웃 알고리즘은 Flow 레이아웃
      • z-index는 Flow 알고리즘에 구현되어 있지 않기 때문에 z-index를 제대로 사용하려면 레이아웃 알고리즘 지정 필요, width도 알고리즘에 따라 다르게 동작
    • 태그가
      에서 약간의 마진이 생기는 것도 CSS 프로퍼티 때문이 아니라 Flow 레이아웃에 따라 인라인 요소로 처리되었기 때문에 발생
    • 이 레이아웃 알고리즘을 이해해야 CSS 프로퍼티를 제대로 사용할 수 있다고 설명, CSS 처리할 때 꼭 살펴봐야 할 만큼 좋은 글
• How To Create A Modal In Javascript and CSS - YouTube
• em과 rem의 차이 | Univdev
• State of CSS 2022
  • Google I/O에서 2022년 CSS의 상황에 관한 발표를 정리한 글
  • 2021년의 호환성 문제를 제거하기 위해 sticky, aspect-ratio, flex, grid, transform 5가지 기능을 테스트할 수 있도록 compat 2021에서 개선
  • 올해는 interop 2022에서 개발자의 경험을 개선하기 위해 @layer, 컬러스페이스, conatain, <dialog>, 폼 호환성, 스크롤, 서브그리드, 타이포그래피, 뷰포트 유닛, 웹 호환성 기능을 계획
  • 2022년의 새로운 기능과 그 이후에 나올 기능을 하나씩 설명
  • CSS의 미래를 알려드림. feat. 구글 I/O - YouTube
• Spoqa 기술 블로그 | 다국어 환경에 맞게 타이포그래피 세팅하기 - 다국어 반응형 타이포그래피
• 내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1 – tech.kakao.com
• 내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.2 – tech.kakao.com
• Two lines of CSS that boosts 7x rendering performance! - DEV Community
  • 렌더링 성능을 7배 빠르게 하는 2줄의 CSS | GeekNews
• Create A Age Calculator Using HTML CSS & JAVASCRIPT | Age Calculator | Neumorphism CSS - YouTube
• 테이블에 border-radius가 적용되지 않을 때 - 신현석(Hyeonseok Shin)
• CSS 말줄임표 뒤에 컨텐츠 두기 - 코드쓰는사람
  • 긴 텍스트를 2줄로만 표시하고 말줄임 표시를 하고 위에 "더보기" 버튼을 넣는 것을 CSS로 구현하는 방법
  • 줄임표 표시와 버튼 배치 후 CSS Shape 적용까지 단계별로 설명하는데 이후 문제가 발견되어 이 문제도 해결하는 방법까지 제안
• CSS로 세로 사진 좌우에 블러 효과 넣기 backdrop filter | 웹으로 말하기
• Scroll Snap API를 통해 이미지 캐러셀 완성하기 | 카카오엔터테인먼트 FE 기술블로그
• 동적 아코디언(콜랩스) 테이블 만들기
• CSS 개발시 중요하다고 생각하는 도구 4가지 | 웹으로 말하기
• Buttons Generator - Marko Denic - Web Developer
• Defensive CSS
  • 사이즈가 달라져도 깨지지 않도록 Flexbox나 백그라운드 이미지, 스크롤 등 CSS 팁을 정리한 사이트로 상황별로 어떤 문제가 있는지 정리, 재현 가능한 예제 제공
• Keyframes.app
• :placeholder-shown
• system.css | A design system for building retro Apple-inspired interfaces
• tachyons.io
  • Functional CSS, Tachyons - 함수형 CSS를 지향하는 프레임웍
• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML
  • Tailwind CSS로 프로젝트에 CSS 작성 안하기 - Tailwind CSS(with React) 🌬
  • Tailwind CSS의 설치와 활용 | blog.rhostem.com
  • react에서 tailwind 적용하기
  • Let's create a link in bio with React.js (Next.js, Tailwind CSS, Sanity) - YouTube
  • Simple Responsive Navigation Menu with Tailwind CSS in ReactJS - YouTube
  • Responsive Navbar Menu in React with Tailwind CSS and NextJS
  • A Customizable Next.js and Tailwind Blog Starter
  • FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블로그
    • 카카오페이지에서 웹사이트를 개편하면서 Tailwind CSS를 사용한 경험 정리
    • 기존에 공통 컴포넌트가 없어서 비슷한 컴포넌트가 늘어났고 스타일에 이름을 붙이지 않아서 수정할 때 어려움이 존재
      • 이를 Emotion CSS로 해결해 보려했지만 여전히 문제
    • 그래서 디자인 시스템의 부가적인 코드가 실제 기능 코드를 침범하지 않고 컴포넌트의 가동성을 해치지 않도록 하는 방법을 찾다 보니 Tailwind CSS를 도입
    • 이를 직접 사용하는 대신 Twin.Marco를 사용해서 Emotion CSS와 tailwind를 같이 쓸 수 있게 되었고 이를 적용하면서 적용했던 팁 정리
  • monorepo에 tailwindcss 세팅 - Byeongjin Jason Kang
  • tailwind-dashboard-template: Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React. Made by
• XP.css - A design system for building faithful recreations of old UIs

CSS-in-JS

• css-in-js-media - Minified and Simplified include-media with CSS-in-JS
• CSS-in-JS와 성능 - 신현석(Hyeonseok Shin)
• runtime css-in-js is not free. runtime css-in-js | by DarrenKwon | Typed 개발팀 블로그 | Dec, 2021 | Medium
• emotion.js 소개 및 사용법 (feat. CSS-in-JS) | MJ Kim
• Stitches — CSS-in-JS with near-zero runtime
• xstyled: A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️

Frontend

• How To Pick a Frontend Web Framework
• Senior Front End Engineer?
  • 기본적 업무: Requirement Analysis and Summarizing UI requirements (with Product Manager) => Planning => Interaction Design, share & update by feedback (with UX Designer & Product Manager) => OO and DXF Design (with Back End Engineer) => Implementation, sharing & updating by feedback (with All) => Unit and Integration Testing (with QE) => Maintenance. Mentoring
  • 필요한 지식?
    • Front-end Job Interview Questions
    • Interview Questions for front-end-Developer
  • Unit Testing Tools: Selenium, Karma, Jasmine, Mocha etc, 사용하는데는 크게 어려움이 없다. Test script 만드는게 아직도 노가다
  • Build Tools: 필수이며, Grunt -> Gulp로 성능 및 편의성의 이유로 이동중.
  • Server Side 지식?: 오류가 발생 했을 경우 Front Side오류인지 Server Side오류인지 식별 할 수 있어야 한다. 또한, 성능 튜닝을 위한 기본적인 통신 관련 지식 요구 e.g. HTTP, 보안 관련, 프로파일링 등등. 그렇지만, 트랜드가 점점 Full Stack Javascript Engineer로 가고 있기 때문에 앞으로는 모두 알아야? 한다. Firebase에서 시작해서 MEAN stack까지~?
  • Javascript Framework/Library: 사실 특정 Framework이나 Library의 내부 구조까지 모두 이해하고 있다면 다른 Framework이나 Library를 금방 이해하고 배울 수 있기 때문에 어떤 것을 사용하든지 관계없다. 그렇지만, 잡 시장에서는 이미 사용 경험이 있는 사람을 많이 원한다. 2014는 Angular1.x가 대세였고, 2015는 Angular2가 Angular1과 호환이 안되고 Architecture가 틀리다고 발표가 나서 사람들이 다른 Framework을 찾다가 Ember로 잠깐 갔다가 React로 급 전환 했음, 2016은 Angular2가 Beta가 발표되고 Production에 사용할 수 있다고 공지해서 Angular2의 해가 되지 않을까 생각된다. Angular2는 Microsoft, Google팀 그리고 Ember팀도 합류해서 만들었고, ES6을 고려해서 만들었다. 아마 2016은 Angular2의 해가 되지 않을까 생각된다.
  • Full Stack Javascript Engineer: Firebase등을 사용하면 아주 쉽게 혼자서 Web App을 만들 수 있다. 그런 이유(인건비, 속도등)로 Startup 중심으로 Full Stack Engineer의 수요가 증가하지 않을까 예상해 본다. 추후에는 Javascript로 백앤드를 할 수 있는 Firebase, Meteor등과 MEAN등을 위한 추가적인 개발 환경과 툴들이 더 나오고 성숙될 것이고, 그러면 본격적인 Full Stack Javascript Engineer의 세계가 열리지 않을까 예상해본다.
• 최신 웹사이트와 꼼꼼한 개발자들을 위한 완벽 프론트엔드 체크리스트 http://frontendchecklist.com
• 배민에서 웹 프론트엔드 프로그래머는 뭘 하나요?. 우아한형제들 채용 공고를 보면(2022년 11월 기준) 웹 프론트엔드… | by 송요창 | Nov, 2022 | Medium

GraphQL

• REST vs GraphQL - What's the best kind of API?
• API Showdown: REST vs. GraphQL vs. gRPC – Which Should You Use? - YouTube
• API Showdown: REST vs. GraphQL vs. gRPC – Which Should You Use?
• Java Guides on Twitter: "𝗚𝗿𝗮𝗽𝗵𝗤𝗟 𝘃𝘀. 𝗴𝗥𝗣𝗖 𝘃𝘀. 𝗥𝗘𝗦𝗧: 𝗖𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗿𝗶𝗴𝗵𝘁 𝗔𝗣𝗜 #api #apidesign #grpc #rest #GraphQL https://t.co/lhVA5SaZnG" / Twitter
• libgraphqlparser - A GraphQL query parser in C++ with C and C++ APIs
• Stop Using REST For APIs. GraphQL Is Way Better | by Harsha Vardhan | JavaScript In Plain English | Nov, 2020 | Medium
• GraphQL과 REST의 차이점 | Hwasurr's Devlog
• Cloud Transparency Platform GraphQL API - GraphQL API
• GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders
  • 이 영상을 보고나면 REST API 를 못쓰게 됩니다. - YouTube
• GraphQL is a Trap?. This twitter thread blew up on twitter… | by Marc-André Giroux | May, 2022 | Medium
  • 트위터 "GraphQL is a Trap"이라는 트윗의 내용을 반박한 글
    • 주장 1: GraphQL은 공개 API를 일반적인 그래프 데이터베이스와 같게 만든다
      • 가장 일반적인 오해. 공식 웹사이트에서도 클라이언트가 사용하는 방법을 설명하도록 GraphQL 스키마를 정의하고 데이터베이스 스키마를 미러링하지 말라고 언급
    • 주장 2: 유지 보수 작업량이 많다
      • GraphQL의 유지보수가 다른 API 형식보다 어렵다는 얘기는 들어보지 못했고 유지보수성은 특정 기술보다는 어떻게 소프트웨어를 작성했느냐에 더 영향
    • 주장 3: 쿼리 기능을 잠근다는 것은 일반적인 API라는 것을 의미하지만 잠그지 않는 다는 것은 무한 성능 작업을 의미
      • 잘 설계되고 구현된 GraphQL API는 임의의 쿼리를 다른 공개 API처럼 적절한 시간에 수행할 수 있으며 쿼리를 잠근다고 하더라도 클라이언트에 유연성을 제공하고 새로운 쿼리마다 서버팀이 작업할 필요를 제거
• GraphQL kinda sucks | Hacker News
  • GraphQL은 좀 짜증나요 | GeekNews
• What is GraphQL (An Overview) – ScriptsView
• GraphQL
• DataLoader is a generic utility to be used as part of your application's data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching
• WunderBase - Serverless GraphQL Database on top of SQLite, Firecracker and Prisma - WunderGraph

Haskell

• Developing web applications with Haskell

HTML

• 웹개발자를 위한 HTML/CSS/JS 온라인 코드에디터
• HTML Canvas를 활용하여 인터랙티브 콘텐츠 만들기. Canvas(캔버스) 기술은 일반적인 HTML 요소로는 표현하기 힘든… | by 이예찬 | Uniquegood | May, 2021 | Medium
• FE개발자의 성장 스토리 09 : Offscreencanvas 적용기 – tech.kakao.com
• HTML 파일 기본 구조 - 완두블로그
• 50 HTML Best Practices & Guidelines to Build Better Web Projects | by Before Semicolon | Feb, 2021 | Medium
• HTML이 당신의 생각보다 더 중요한 이유 | ~/xo.dev
• Manage HTML DOM with vanilla JavaScript - HTML DOM
• <section> 버리고 HTML5 <article> 써야 하는 이유 - WebactuallyWebactually | 웹사이트를 만드는 사람들을 위한 온라인 정보
  • HTML에서 어디에 어떤 요소를 써야 하는지는 오랫동안 나오는 질문, 이 글에서는 <section> 대신 <article> 권유
    • 여기서 <article>이 신문 기사 같은 글이라기보다는 옷 한 벌처럼 하나의 콘텐츠라고 생각하라고
  • 그러면 <section>은 어디 쓰는지가 궁금할 수 있는데 목차를 정할 수 있도록 만들어진 컨테이너 이므로 신경 쓸 필요가 없고
    • <h1>등의 태그가 <section>과 만날 때 시각적으로는 어떻게 보이고 접근성 레벨에서는 어떻게 다른지 설명
  • <section>을 쓰면 안 되는 것은 아니지만 접근성 제공 측면에서 요약 정도 등에 스크린리더가 알 수 있게 <section>을 사용하면 된다고 설명
• HTML 요소 inert 속성에 대해 알아보자 | TOAST UI :: Make Your Web Delicious!
• Write HTML Right
• 하이퍼링크를 신뢰할 수 없다면? noopener, noreferrer, nofollow - 재그지그의 개발 블로그
• How To Add Javascript To HTML Page | by React Dojo | Jul, 2022 | Medium
• background-image 대신 img 태그를 사용하자
• HTMHell - A collection of bad practices in HTML found on real websites
• </> htmx - high power tools for html
  • Reimagining front-end web development with htmx and hyperscript
  • Htmx: HTML Approach to Interactivity in a JavaScript World – The New Stack
  • Chris James -HTMX is the Future
    • SPA가 대세이지만 학습하는 비용도 많고 클라이언트에서 JavaSciprt도 많이 필요한데 htmx를 사용하면 훨씬 쉽기 때문에 앞으로 웹 개발에 한 축이 될 것이라고 주장
    • SPA를 사용할 때 RESTful API를 이용하지만, 데이터만 주고받을 뿐 하이퍼미디어를 사용하지 않으므로 RESTful API를 쓰는 것은 아니며
    • htmx에서는 서버의 언어를 맘대로 사용할 수 있고 하이퍼미디어를 그대로 이용하기 때문에
    • 프론트엔드에서 JavaScript가 없어도 잘 동작하므로 쉬우면서 접근성 좋은 웹페이지를 만들 수 있고 프론트엔드/백엔드간의 협업도 더 편해진다고 이야기
• diff2html-cli: Pretty diff to html javascript cli (diff2html-cli)
• elml: A small markup language that compiles to HTML
• sqlite-html: A SQLite extension for querying, manipulating, and creating HTML elements
  • SQLite-html : HTML을 쿼리,조작,생성하는 확장 | GeekNews
• view-transition 모르면 손해? 엄청난 웹 API가 나타났다! - YouTube

Java

• Hilla The modern web framework for Java · Hilla
  • Hilla: The Modern Web Framework for Java - YouTube
• Spark Framework is a simple and lightweight Java web framework built for rapid development

Library

• 5 Open Source HTML5 Video Players for 2019
• 6 Must-Use Tools for Front-End Development
• 39 Web Developer Tools You'll Want To Take With You Into 2021 | Hacker Noon
• Big list of http static server one-liners
• Top 10 Backend Frameworks Software Developers Can Learn in 2022 - Best of Lot
• 5 Open Source Projects Which Can Redefine Web Development in 2022 | by Vihar Kurama | Jan, 2022 | Better Programming
• 웹 개발자의 비밀무기들 | GeekNews
  • Loom, Markup.io, Hoverify, Waapalyzer, PixelParallel, 구글 Lighthouse
  • 크롬 확장들 : CSSPeeper, SVG Grabber, WAVE, CSS Magic, WhatFont,Full Page Screenshot Capture
• The best tools for web development | Web Code Tools
• 100-days-of-code-frontend: Curriculum for learning front-end development during #100DaysOfCode
• AdminLTE 다기능의 Bootstrap기반 관리 화면 템플릿
• BakerStreet - Simple client side load balancer for microservices
• Best-websites-a-programmer-should-visit: Some useful websites for programmers
• Bit: The platform for the modular web
• carbonyl: Chromium running inside your terminal
• CODEF API - 인코딩, 암호화 등 API 요청에 필요한 전처리 작업을 최소화하고 쉽게 개발할 수 있는 API
• codepen.io
• deepstream.io - A Scalable Server for Realtime Web Apps
  • 딥스트림, 오픈소스 실시간 서버 기술 공개
• devd, a small, self-contained, command-line-only HTTP server for developers
• DHTMLX
• endl - Link Extractor and Downloader
• FastCGI — The Forgotten Treasure
• Flight - An event-driven web framework, from Twitter
• Frontend Practice | Become a better frontend developer
• gatling - a high performance web server
• glTF: glTF – Runtime 3D Asset Delivery
  • 웹 3D 모델 최적화 기법 소개
• html5-qrcode: A cross platform HTML5 QR code reader
  • Html5-QRCode - 크로스플랫폼 QR코드 리더 | GeekNews
• htmlq: Like jq, but for HTML JSON을 쉽게 조회하고 조작할 수 있는 jq처럼 CSS 셀렉터를 이용해서 HTML을 조회할 수 있는 CLI
  • htmlq - jq for HTML | GeekNews
• HTTP/2 Dashboard BETA - Monitoring the adoption and performance of HTTP/2 on the Web
• Hurl.it - Make HTTP requests
  • Hurl - 웹기반 HTTP Req 테스트 도구 | GeekNews
• HyperDev is the developer playground for building real web apps, fast
  • Introducing HyperDev
• Jet - Lightweight, Realtime Message Bus for the Web
• Mega boilerplate - 사용
• OpenResty - a fast web app server by extending nginx
• oEmbed - a format for allowing an embedded representation of a URL on third party sites
  • oEmbed를 소개합니다
• Phantom Js (Amazing library for web scraping)
• Polyfill.io
  • 똑똑하게 브라우저 Polyfill 관리하기
    • 폴리필은 브라우저 간 API의 지원 차이를 해결하기 위한 스크립트
    • 보통은 @babel/preset-env를 이용해서 타켓 브라우저에 맞는 폴리필 생성 가능
    • 하지만 이 경우 전체 스크립트가 커지므로 최신 브라우저에서도 불필요한 코드를 받게 되는데
      • Polyfill.io를 이용하면 User-agent를 보고 동적으로 폴리필을 내려줄 수 있음
    • Toss에서는 core-js와 browserslist를 이용해서 User-agent로 폴리필을 만드는 스크립트를 작성, 서버에 넣거나 엣지 함수에 배포해서 운영
• Polymer Project
  • github.com/polymer
  • The Shop app https://shop.polymer-project.org
    • shop.polymer-project.org
  • Google’s PRPL Web development pattern
• postwoman API request builder - Helps you create your requests faster, saving you precious time on your development https://postwoman.io https://liyasthomas.github.io/postwoman
• Quinn - A web framework designed for things to come
• satori: Enlightened library to convert HTML and CSS to SVG
  • Build Images with React using Vercel’s Hot New Library: Satori | by Guillaume Renard | Oct, 2022 | Bits and Pieces
• SingleFile: Web Extension for Firefox/Chrome/MS Edge and CLI tool to save a faithful copy of an entire web page in a single HTML file
• Statinamic - A static website generator for creating dynamic websites using React components
• Swagger
  • Swagger Editor
  • swagger-codegen contains a template-driven engine to generate documentation, API clients and server stubs in different languages by parsing your OpenAPI / Swagger definition
  • Rails에서 Swagger를 이용하여 API Docs 사용 시 인증 처리
  • Swagger로 API 문서 자동화하기
  • Spring REST API 문서를 Swagger로 만들자
  • API the Docs 참관 후기
  • Designing REST API with Open API Specification (OAS) v2.0 & v3.0 using Swagger
• tiny frontend
• Transform A polyglot web converter
• TSWS, A Totally Simple Web Server
• UrlDiff - Simple visual regression testing
• Wapp - A Web-Application Framework for TCL
  • Wapp - TCL을 위한 웹 어플리케이션 스택 | GeekNews
• web2img: This is the real WebPack can use image hosting sites as free CDNs to save bandwidth costs
• WebDevCurriculum: Knowre 웹개발 커리큘럼
  • Knowre 신입 웹개발 커리큘럼 | GeekNews
• WebTransport 실험하기
• zero: Allow startup developers to ship to production on day 1
  • Zero - 스타트업이 첫날부터 개발 & 배포 가능하게 해주는 부트스트래핑 도구 | GeekNews

Lisp

• Lisp for the Web
• Lisp for the Web, Part II
• Lisp for The Modern Web

Nginx

• Nginx
• nginx playground
• Thread Pools in NGINX Boost Performance 9x!
• Announcing O’Reilly’s New Book: “NGINX: A Practical Guide to High Performance”
• nginx and multi-threading support
• Ceryx - A dynamic NGINX
• Nginx with dynamic upstreams
• 1M QPS WITH NGINX AND UBUNTU 12.04 ON EC2
• How to move your app from HTTP to HTTPS?
• NAXSI is an open-source, high performance, low rules maintenance WAF for NGINX
• Nginx + Tomcat 연동 시리즈 1
• Launching nginScript and Looking Ahead
• Ubuntu + PHP7 + nginx 서버 구축하기
• Docker 로 Node.js 배포하기
• Popit 장애 보고서
• RPM build Nginx 1.11.x with ALPN on CentOS 6/7 using static OpenSSL 1.1 (v 1.02+ required for http/2 support in Chrome)
• Ubuntu-Nginx 서버에서 Let’sEncrypt를 이용한 무료 SSL 적용방법 | FUREWEB
• 우분투에서 nginx 설치부터 무료 SSL 적용까지 | FUREWEB
• no live upstreams while connecting to upstream 에러의 트러블 슈팅
• nginx 서버에서 gzip 을 사용하여 전송속도를 향상시키기
• NGINX based vod packager 소개
• NGINX에서의 REMOTE_ADDR 오류 이슈
• nginx ingress를 이용해 마케팅 이벤트를 대비하기
• Nginx 에 대하여 (Nginx Basic Usage)
• An Introduction to NGINX for Developers
• NGINX Unit - a dynamic web and application server
• 클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 1강: 구름 IDE 컨테이너 생성하기
• nginx: 로그 때문에 서버 용량이 찼을 때 처리 방법
• nginx: 허용하지 않은 도메인에서 접속이 되는 경우
• HTTP/2 성능 향상을 위한 NGINX 구조 개선
• Nginx Cache 문제 해결 시리즈
• Hello World Module for Nginx
• NGINX 모듈 제작하기
• nginx no live upstream 에러 이해하기
• Nginx 웹서버 https 설정하기
• NGINX Tuning For Best Performance
• NGINX에 대한 정리
• 나는 nginx 설정이 정말 싫다구요
• REACT 배포 이슈로 배워보는 nginx.. : 네이버블로그
• Server-side Showdown: Apache vs NGINX | Elegant Themes Blog
• http - How to reply with 200 from Nginx, without serving a file? - Server Fault
• Introducing NGINX Service Mesh - NGINX
• nginx를 이용해 호스트를 바꾸어 request 날리기
• Nginx의 응답헤더 중 Server 속성 변경하기 | FUREWEB
• nginx 시작하기 : 네이버 블로그
• nginx 시작하기 로드밸런싱 : 네이버 블로그
• Common Nginx misconfigurations that leave your web server open to attack | Detectify Blog
• Nginx-ingress controller for cross-namespace support and fix 308 redirect loops with AWS NLB | by ismail yenigül | FAUN
• daphne, nginx을 활용한 소켓 통신 연결 삽질 극복기(TroubleShooting)
• Microservices design and deployment with NGINX | Free Ebook
• The NGINX Real-Time API Handbook - NGINX
• Comparing NGINX Performance in Bare Metal and Virtual Environments - NGINX
• Nginx-Ingress in EKS — EKS + nginx-ingress +NLB + TLS | by Sauravmoy Sarkar | Medium
• nginx ingress controller 무중단 업데이트하기
  • AWS NLB와 nginx ingress controller를 Kubernetes에서 사용하고 있을 때 nginx ingress controller를 무중단으로 업그레이드하는 방법 설명
  • 하나의 클러스터 안에서 새로운 세트의 NLB와 nginx ingress controller를 생성한 뒤 NLB를 바라보든 DNS를 하나씩 옮기면서 테스트하고 기존 NLB와 nginx ingress controller를 삭제
• Upgrading Executable on the Fly
  • 실행중에 실행파일 업그레이드하기 | GeekNews
• Do Svidaniya, Igor, and Thank You for NGINX - NGINX
• Avoiding the Top 10 NGINX Configuration Mistakes - NGINX
  • NGINX 설정에서 자주 보는 실수 정리
  • 워커당 부족한 파일 디스크립터
    • 웹서버로 동작할 때는 클라이언트 하나, 제공하는 파일 하나로 2개가 필요, 프록시서버에서는 하나가 필요하기 때문에 worker_connections보다 최소 2배로 FD를 설정해야 함
  • error_log off 디렉티브: access_log 디렉티브와 달리 error_log는 off 파라미터를 받지 않으므로 실제로는 off라는 파일 생성
  • 업스트림 서버에 keepalive 연결 비활성화: 기본적으로 요청마다 업스트림에 새로운 연결을 맺는데 새 연결 비용은 크므로 트래픽이 많으면 비효율적
  • 디렉티브 상속의 동작 방식을 잊음: 자식 컨텍스트는 부모 컨텍스트의 디렉티브를 상속. 하지만 동일한 디렉티브를 설정하면 값을 추가하는 것이 아니라 덮어쓰게 됨
  • proxy_buffering off 디렉티브
    • 기본으로 버퍼링이 켜져있는데 모든 응답이 버퍼링되었을 때 응답을 주고 버퍼링을 끄면 응답을 받는 즉시 클라이언트에 응답을 보내기 때문에 클라이언트에 지연시간을 줄이려고 버퍼링을 끄는 경우가 있음
    • 레이트 리밋이나 캐싱이 안되는 등의 문제가 많으므로 끄지 않길 권장
  • if 디렉티브의 잘못된 사용: if 디렉티브는 사용하기가 까다롭고 if 디렉티브에서 안전하게 사용할 수 있는 것은 return과 rewrite 디렉티브 뿐
  • 과도한 헬스체크: 모든 server 블록에 health_check 디렉티브를 사용하면 추가적인 정보는 없이 업스트림에 부하를 줄 가능성 존재
  • 안전하지 않은 메트릭 접근: stub_status나 api 디렉티브를 누구나 접근하게 열어두면 공격자가 이를 활용 가능
  • 모든 트래픽이 같은 /24 CIDR 블록에서 올 때 ip_hash의 사용: 로드 밸런싱 목적으로 ip_hash를 사용할 때 IPv4에서는 앞의 3가지 옥텟으로 해시키를 만들기 때문에 같은 /24 CIDR을 사용하면 해시키가 같아지는 문제
  • 업스트림 그룹의 장점을 사용하지 않음: 업스트림 서버가 1개만 있는 경우 upstream 블록을 사용하지 않는 경우가 있는데 업스트림 서버가 1대여도 upstream 블록은 다양한 기능을 제공
  • Nginx 설정 시 가장 많이 하는 10가지 실수 피하기 | GeekNews
• 내블로그 :: nginx/1.18.0 (Ubuntu20.04) brotli
• 내블로그 :: nginx/1.18.0 (Ubuntu20.04) gzip
• What Is NGINX? An Overview of the Basics | Elegant Themes Blog
• Improving NGINX Performance with Kernel TLS and SSL_sendfile( ) - NGINX
• NGINX를 API Gateway로 배포, 1부 - NGINX STORE
• 어떨 때 사용할까요? API Gateway vs Ingress Controller vs Service Mesh - NGINX STORE
• 엔진엑스 플러스(NGINX Plus)의 웹방화벽과 인그레스 콘트롤러의 활용 디지털투데이TV Live - YouTube
• Best Courses to learn Nginx in depth | by javinpaul | Javarevisited | Jul, 2022 | Medium
• Webserver - Apache & Nginx - YouTube
• The Future of NGINX: Getting Back to Our Open Source Roots - NGINX
• Nginx 기반의 API Gateway 구현(with Python) :: GS Retail Engineering
• Binary Packages Now Available for the Preview NGINX QUIC+HTTP/3 Implementation - NGINX
• NGINX, 기술 부채가 되지 않으려면? | LINE DEV Meetup #13 - YouTube
• Nginx란 무엇인가? : 네이버 블로그
• Angie - drop-in replacement for Nginx
  • Добро пожаловать — документация Angie 1.0.0
• bunkerized-nginx: nginx Docker image secure by default
• NGINXConfig | DigitalOcean
• nginx-ui: Nginx UI allows you to access and modify the nginx configurations files without cli
• topngx - top for NGINX

Nginx Proxy

• nginx proxy pass와 AWS ELB 사용시 주의점
• How to set up an easy and secure reverse proxy with Docker, Nginx & Letsencrypt
• Nginx reverse proxy with URL rewrite | by λ.eranga | Rahasak Labs | Medium
• proxy 뒤에서 docker의 wordpress, https 적용
• Nginx 하위 경로를 다른 서버로 보내기 - 완두블로그
• Nginx Proxy Manager
  • DevOps NGINX Proxy Manager와 CloudFlare를 이용해 로컬 네트워크 내에서 일관된 웹 개발 테스트 환경 구성하기 — BetaMan의 공사장

Progressive Web App PWA

• The Future of Web - Progressive Web Apps
• Progressive Web Apps course
• Progressive Web Apps — The Next Step in Web App Development
• 프로그레시브 웹앱(PWA) 푸시 알람 A to Z
• Service workers: the little heroes behind Progressive Web Apps
• 14 Ways to Take UX to the Next Level for Progressive Web Apps
• 노마드 가이드 PWA 웹사이트
• A progressive Web application with Vue JS, Webpack & Material Design Part 1
• Progressive Web Apps on iOS are here 🚀
• MDN 웹 문서의 프로그레시브 웹 앱 핵심 가이드
• 프로그레시브 웹 게임
• How you can make a progressive web app in an hour
• How to make sure your Progressive Web App keeps its Lighthouse audit score
• PWA UNIVERSAL BUILDER
• Progressive Web Apps — The Future of Mobile Web App Development
• 11 Examples of Progressive Web Apps
• PINTEREST 프로그래시브 웹 앱 성능 케이스 스터디
• A Pinterest Progressive Web App Performance Case Study
• How to write simple modern JavaScript apps with Webpack and progressive web techniques
• Why Progressive Web Apps are great and and how to build one
• Everything you need to know about Progressive Web App (PWA)
• PWA 하루 만에 도입하기(삽질기)
• 드리블 모바일 디자인컨셉 구현 및 PWA
• A Simple Progressive Web App Tutorial
• PWA가 뭔가요? (+모바일 앱의 종류) - YouTube
• Build a Full Stack PWA App With Spring Boot (Step By Step Tutorial) - YouTube
• How to Build a Progressive Web App (PWA) with Create React App | by Thomas Sentre | Aug, 2022 | Bits and Pieces
• PWA의 manifest. PWA이 일반 웹과 구분되는 것 중 하나는 manifest입니다… | by 이상선 | Jul, 2022 | Medium
• Why haven’t PWAs killed native apps yet? | by Kevin Basset | Sep, 2022 | Medium
• 프로그레시브 웹앱(PWA) 푸시 알람 A to Z • 캡틴판교
• 프론트엔드 개발자가 PWA 알아야 하는 이유 | 요즘IT
• PWA Stats

Proxy

• 코딩방송 Season1- EP 15. 프록시 proxy
• Why should I use a Reverse Proxy if Node.js is Production-Ready?
• Infra 리버스 프록시(reverse proxy) 서버 개념 - 로스카츠의 AI 머신러닝
• System Design Basics: Proxy vs. Reverse Proxy | by Coder girl | InterviewNoodle | Medium
• A Primer on Proxies
• Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy
• Consul
  • HAProxy and Consul with DNS for Service Discovery - HAProxy Technologies
  • Load Balancing Strategies for HashiCorp Consul
  • Hashicorp certified consul associate exam preparation guide | by Jeewan Sooriyaarachchi | Medium
  • Consul Streaming: What’s behind it? | by Pierre Souchay | Criteo R&D Blog | Medium
    • Consul에 새로 추가된 스트리밍 기능 설명
    • 기존에는 에이전트가 서버에 요청을 보내고 대기, 변경사항이 생겼을 때 모든 결과를 보내다 보니 수만 대의 인스턴스에서 부하가 심해서 새 인스턴스를 추가할 때마다 성능 우려
    • 스트리밍 기능은 해당 서비스의 변경사항만 gRPC로 보내기 때문에 성능과 밴드위스에서 이득
• CRProxy command line tool allow you to serve web content from your local machine, or behind any firewall
• imgproxy: Fast and secure standalone server for resizing and converting remote images
  • 빠르고 안전한 오픈소스 이미지 프록시 서버 | GeekNews
• Keepalived
  • practice - keepalived 설정, postscript 예 등
  • keepalived + haproxy VIP 이중화 로드밸런싱 구축하기
  • Keepalived를 활용하여 간단하게 HA 구성해보기
• HAProxy
  • HAProxy 설치
  • HAProxy 설정 및 실행
  • L4/L7 스위치의 대안, 오픈 소스 로드 밸런서 HAProxy
  • HAProxy vs nginx: Why you should NEVER use nginx for load balancing!
  • Keepalived and HAProxy in AWS: An Exploratory Guide
  • HAProxy TCP 모드에서 내부 서버로 Source IP 전달하기
  • Docker기반 Redis 구축하기 - (8) HAProxy를 이용한 분산처리 환경 구축하기 | Carrey's 기술블로그
  • HAProxy 고가용성 설정
  • Announcing HAProxy 2.2 - HAProxy Technologies
  • Reining in the thundering herd ⛈ Getting to 80% CPU utilization with Django
• Mitmproxy 7
  • MITMProxy로 실시간 검색어 조작하기
  • mitmproxy로 iOS 기기의 네트워크 트래픽 살펴보기 :: Outsider's Dev Story
• Pingora
  • How we built Pingora, the proxy that connects Cloudflare to the Internet
    • Cloudflare에서 Nginx를 수년 동안 잘 사용했지만 Cloudflare가 커짐에 따라 한계를 느껴
      • Rust로 만든 HTTP 프락시 Pingora를 만들어서 하루에 1조 요청을 처리하게 되었고 Nginx 때보다 CPU와 메모리는 이전보다 1/3로 감소
    • Nginx의 워커 구조에서 각 요청은 하나의 워커로만 처리되므로 CPU 불균형이 발생했고 커넥션 풀이 작업자마다 할당되므로 연결 재사용이 좋지 않았음
    • 이를 해결하기 위해 Nginx를 포크할지, 다른 프락시로 바꿀지, 프락시를 새로 만들지를 고민하다가 새로 만들기로 결정
    • Rust를 선택하고 HTTP 라이브러리는 직접 구축하기로 하고 커넥션 풀을 공유하기 위해 멀티 스레딩 선택
    • Pingora는 TTFB(time-to-first-byte)가 중윗값에서 5ms 줄었고 95 퍼센타일에서 80ms 감소시켰고 새로운 연결도 1/3로 감소
    • cloudflare가 nginx를 걷어내고 Rust로 HTTP Proxy(Pingora)를 | GeekNews
• rss-proxy: RSS-proxy allows you to do create an RSS or ATOM feed of almost any website, just by analyzing just the static HTML structure
• toxiproxy: A TCP proxy to simulate network and system conditions for chaos and resiliency testing
• tproxy: A cli tool to proxy and analyze TCP connections
• traefik: The Cloud Native Application Proxy
  • traefik - 클라우드 네이티브 어플리케이션 프록시 | GeekNews
• YARP: Yet Another Reverse Proxy
• reverse-proxy: A toolkit for developing high-performance HTTP reverse proxy applications

Python

• Let’s Build A Web Server
  • Part 1
  • Part 2
  • Part 3
• Tiny basic multi-threaded web crawler in Python
• 4개의 Web Frameworks 비교 (Pyramid, Bottle, Django, Flask)
• An Introduction to Python WSGI Servers: Part 1
• A Performance Analysis of Python WSGI Servers: Part 2
• A million requests per second with Python
• Top 5 Useful Python Libraries Web Developers Can't Live Without
• Web Scraping Tutorial with Python: Tips and Tricks
• Web Application from Scratch, Part I
• Running Python in the Browser
• How To Track Coronavirus In Your Country with Python ChromeDriver
• 웹 크롤링 기초 - 네이버 개발자센터 지역 검색 Open API 사용하기 미래 실험실 Python
• The Alternative to Web Scraping. The “lazy” programmer’s guide to… | by Doug Guthrie | Towards Data Science
• 5 Smooth Python Web-Frameworks For The Modern Developer | by Emmett Boudreau | Towards Data Science FastAPI, Tornado, Pyramid, Quart, BlackSheep
• REST API 개발로 알아보는 WSGI, ASGI uvicorn
• Python and REST APIs: Interacting With Web Services – Real Python
• 파이썬 기본 모듈로 HTTPS 서버 구축하기 - 한빛출판네트워크
  • 파이썬 한 줄로 로컬 테스트서버 만들기 - YouTube
• Top 10 Trends in Python WebDev for 2021 and the resources to get started
• Top 10 Python Frameworks for Web Development in 2022 | by Ajay Kapoor | Dec, 2021 | Enlear Academy
• Django Vs Flask: Full Comparison of the 2 Python Frameworks | by Sasha Andrieiev | Jan, 2022 | Python in Plain English
• Anvil | Build Web Apps with Nothing but Python
  • Python on the front-end? How to build an entire web app with only Python - YouTube
• BlackSheep: Fast ASGI web framework and HTTP client for Python asyncio
• Brython - A Python 3 implementation for client-side web programming
  • Brython (Browser Python) is an implementation of Python 3 running in the browser
  • 파이썬을 웹에서 실행하기 :: 프즈
  • Sick of Using Javascript for the Web? Use Browser Python Instead | by Yakko Majuri | The Startup | Medium
• django-tdd-restful-api
• eel Create HTML User Interface for Python using Eel Library | by Utsav Datta | WronmberTech | Medium
• Falcon An Introduction to the Falcon Framework | by Esther Vaati | Better Programming | Aug, 2020 | Medium
• fastapi: FastAPI framework, high performance, easy to learn, fast to code, ready for production
  • FastAPI
  • 점프 투 FastAPI - WikiDocs
  • FastAPI - API 개발용 고성능 웹 프레임워크 | GeekNews
  • Why we switched from Flask to FastAPI for production machine learning
  • You Should Start Using FastAPI Now | by Tivadar Danka | Towards Data Science
  • Intro to FastAPI - The Best Way to Create APIs in Python? - YouTube
  • Learning FastAPI - YouTube
  • Integrating Tortoise ORM into a FastAPI App - YouTube
  • Integrating AIOHTTP Into a FastAPI App - YouTube
  • 4 Useful Advanced Features in FastAPI | by Ng Wai Foong | Sep, 2020 | Level Up Coding
  • How to use FastAPI with MongoDB. An easy way to serve your database… | by Fernando Souza | Python In Plain English | Sep, 2020 | Medium
  • Migrate From Flask to FastAPI Smoothly | by Ng Wai Foong | Better Programming | Medium
  • 3 Reasons to Switch to FastAPI. Flask vs. FastAPI | by Dieter Jordens | Better Programming | Medium
  • Using Docker Compose to deploy a lightweight Python REST API with a job queue | by Mike Moritz | Medium
  • FastAPI Authentication Example With OAuth2, JSON Web Tokens and Tortoise ORM - YouTube
  • FastAPI 톺아보기 - 부제: python 백엔드 봄은 온다
  • Fast API 로 3시간만에 추천 서버 만들기 (implicit, docker, gitlabCI)
  • Starting With FastAPI and Examining Python's Import System | Real Python Podcast #72 - YouTube
  • Building a Kanban Board App in FastAPI and React - YouTube
  • FastAPI with SQLAlchemy Tutorial - YouTube
  • emoji_rank: This is slack bot for emoji ranking
    • 오픈소스 프로젝트를 만들어본 썰 풉니다! (feat. FastAPI, Slack) :: Jay's Code Factory
  • Moving Fast with FastAPI (aka Building a Web App with FastAPI) - YouTube
  • FastAPI, CRUD API 개발을 위한 기록
  • Developing FastAPI Application using K8s & AWS - PyCharm Guide
  • Introduction to FastAPI and Local DynamoDB | by Agus Richard | Nerd For Tech | Jan, 2022 | Medium
  • FastAPI의 시대. 아직도 Flask 쓰시나요?
    • FastAPI의 시대. 아직도 Flask 쓰시나요?
    • 오랫동안 Python 웹 프레임워크로 Flask를 사용하다가 FastAPI로 갈아타면서 FastAPI가 왜 좋은지 설명
    • 전역 변수를 사용하는 Flask 대신 의존성 주입을 사용하는 FastAPI에서는
      • 순수 함수로 코드 작성, 테스트도 쉽게 작성 가능
      • context manager나 view decorator 대신 Depends를 이용해서 더 안전하고 쉽게 코드 작성
    • 그 외에도 비동기에 기반한 동시성 제어 모델로 훨씬 좋은 성능
    • 유효성 검사와 문서화 등 좋은 기능 제공
    • FastAPI의 시대. 아직도 Flask 쓰시나요? | GeekNews
  • Microservices with FastAPI – Full Course - YouTube
  • Settings for your FastAPI application + tests | by Gustavo Caetano | May, 2022 | Medium
  • 코딩 알려주는 라이언 - YouTube
  • 원티드 서버개발자 QnA 1편 ‘원티드 서버 FastAPI 도입 장점과 단점’ | by Myounghee jang | 원티드 제품 팀블로그 | Jun, 2022 | Medium
  • WebSockets In Python FastAPI — Fetching Data At Super Speed | by Zlliu | May, 2022 | Python in Plain English
  • uvicorn, fastapi 비동기 메커니즘 이해
  • 느슨해진 백엔드씬에 긴장감을 주는 FastAPI 프레임워크 - YouTube
  • 개발자의 공부법! 파이썬 FastAPI 공식문서로 처음부터 공부하기 - YouTube
  • How to version your fast api application? | by Gustavo Caetano | Jul, 2022 | Medium
  • 파이썬 FastAPI 학습 - YouTube
  • FullStack FastAPI Redis - YouTube
  • Backend Dev With FastAPI - YouTube
  • Full-stack Development with FastAPI, Redis And Next.js Full Course For Absolute beginners P-2 - YouTube
  • Create a REST API with FastAPI in 5 Steps
  • FastAPI MongoDB REST API w/ Python and PyMongo | CRUD Operations mongodb | Swagger UI | - YouTube
  • Generate FastAPI from Swagger definitions - YouTube
  • FastAPI 밋업 : 우리 회사도 FastAPI 써요! | 원티드
    • 다양한 커리어 성장의 기회 | 원티드 이벤트
  • Flask 서버를 FastAPI 서버로 전환하기. 안기욱 - PyCon Korea 2021 - YouTube
  • Dix et al - Lessons Learned Building Our Own Dashboard Solution | PyData Global 2022 - YouTube celery도 일부
  • Generate Python FastApi Rest Client & Server - YouTube
  • How to Use FastAPI: A Detailed Python Tutorial - YouTube
  • FastAPI-Auth: Example app using FastAPI and JWT
    • Example app using FastAPI and JWT
  • FastAPI boilerplate
  • fastapi-boilerplate: FastAPI Boilerplate
  • fastapi-from-dj: FastAPI quick start from Django
  • FastapiTutorial
  • fastapi_websocket_pubsub: A fast and durable Pub/Sub channel over Websockets. FastAPI + WebSockets + PubSub
    • A fast and durable Pub/Sub channel over Websockets with python
  • FastyAPI: FastyAPI is a Stack boilerplate optimised for heavy loads
  • full-stack-fastapi-postgresql: Full stack, modern web application generator. Using FastAPI, PostgreSQL as database, Docker, automatic HTTPS and more
  • mnist-fastapi-aio-triton: Simple example of FastAPI + gRPC AsyncIO + Triton
  • mnist-fastapi-celery-triton: Simple example of FastAPI + Celery + Triton for benchmarking
    • A: FastAPI + Celery (w/ Redis Task Queue) + One Torch Script Model per One worker process
    • B: FastAPI + Celery (w/ Redis Task Queue) + Triton
    • 실험 내용 및 결과
      1. FastAPI와 Redis Broker는 GPU가 없는 Local Machine에서, Triton과 Celery worker는 GPU가 있는 Remote Machine에서 실행
      2. Local Machine에서 Locust 실행. 단일 장비로 발생시키는 Load라서 그런지 Peak Concurrency가 10을 넘어가면 Request per Second (RPS)이 늘어나지 않는 모습을 보임 (더 강한 부하를 주려면 분산 처리 필요)
      3. Triton을 사용하지 않은 경우, Celery의 각 worker process가 하나의 독립적인 모델을 가지고 있음 (A)
      4. Triton의 경우 모델에 대한 하나의 Instance가 작동함 (B)
      5. A 시나리오에서는 10개의 worker를 사용. 즉, GPU 메모리에는 10개의 모델이 올라감 (약 1.2 GB x 10의 GPU 메모리 소요)
      6. B 시나리오에서는 하나의 모델만 GPU 메모리에 올라가며 약 1.3 GB의 GPU 메모리 소요
      7. Triton은 훨씬 적은 메모리의 사용으로 A와 비슷한 퍼포먼스를 보임 (Dynamic Batching에 의해 효율이 높아지는 것으로 추정)
      8. 입/출력이 작은 예시라서 그런지 Triton의 Shared Memory 사용 유무에 따른 성능 차이는 거의 발생하지 않음
  • picoapi: An opinionated wrapper around FastAPI with custom microservice registration
    • PicoAPI: FastAPI for microservices? | by Patrick Coffey | Towards Data Science
  • shopping-mall basic 예제 + uvicorn
• fastwsgi: An ultra fast WSGI server for Python 3
  • FastWSGI : 네이버 블로그
• Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required
• HTTPX
  • How to use httpx, a web client for Python | Opensource.com
  • Asynchronous HTTP Requests in Python with HTTPX and asyncio
  • HTTPX Tutorial - A next-generation HTTP client for Python - YouTube
• Japronto! - screaming-fast, scalable, asynchronous Python 3.5+ web micro-framework integrated with pipelining HTTP server based on uvloop and picohttpparser
• Lektor - Lektor is a static website generator. It builds out an entire project from static files into many individual HTML pages and has a built-in admin UI and minimal desktop app
• Lumi is an nano framework to convert your python functions into a REST API without any extra headache
  • Lumi - 파이썬 함수를 REST API로 변환하는 초소형 프레임워크 | GeekNews
• mod_wsgi
  • What package I should install for 'pcre-devel'?
    • yum install pcre-devel.x86_64 -y
    • apt-get install libpcre3-dev -y
  • mod_fastcgi, mod_wsgi
• pook: HTTP traffic mocking and testing made simple in Python
  • HTTP traffic mocking and testing made simple in Python
• Pynecone: The easiest way to build web apps
  • 미친 파이썬 프레임워크가 나타났다. - YouTube
  • 'pynecone 튜토리얼' 카테고리의 글 목록
  • 'pynecone 튜토리얼' 카테고리의 글 목록
• pyhttptest: HTTP tests over RESTful APIs
• Pyramid, a Python Web Framework
• PyScript | Run Python in your HTML
  • “파이썬과 HTML의 결합” 아나콘다 ‘파이스크립트’ 공개 - ITWorld Korea
  • “브라우저의 파이썬” 아나콘다, ‘파이스크립트’ 공개 - CIO Korea
  • PyScript 란? - HTML에서 파이썬 코드 작성
  • 자바스크립트 종말각?! HTML에서 파이썬 실행하는 PyScript 등장! - YouTube
  • PyScript (Pt.1) — Python Packages in The Browser | by Robby Boney | Short Bits | May, 2022 | Medium
  • PyScript (Pt.2) — Building Wordle with PyScript + Other Examples | by Robby Boney | Short Bits | May, 2022 | Medium
  • PyScript: Making Python Scripts Work In Browser For Web App Creation
  • PyScript Tutorial - YouTube
  • Simple Todo List Using Py-Script | python tutorials - YouTube
  • PyScript is officially here!🚀 Build web apps with Python & HTML - YouTube
• PythonFrameworkGuide: 이 레포지토리는 파이썬 웹 프레임워크들을 정리한 것으로 각각의 프레임워크에 맞는 가이드, 도큐 등등을 소개합니다
• PyWebIO
  • How to build your first simple web application in Python with PyWebIO - YouTube
    • pywebio-bmi
• Quart documentation
• Robyn - An async Python Framework written in Rust
  • robyn: Robyn is a fast and extensible async python web server with a rust runtime
  • Shivay Lamba: Robyn - An asynchronous Python web framework with a Rust runtime | PyData Global 2022 - YouTube
• search-script-scrape - 101 real world web scraping exercises in Python 3 for data journalists https://github.com/compjour/search-script-scrape#repo-status
• Streamlit. The fastest way to build custom ML tools
  • 파이썬 웹어플리케이션 맛보기 (feat. Streamlit)
  • Flask’s Latest Rival in Data Science
  • How to Build a Data Science Web App in Python
• Tornado Web Server
  • Python Tornado 웹서버 개발 HelloWorld부터 비동기식 데이터 처리까지
    • github.com/spritecodej/tornado_examples
  • Tornado WS Json API Server Boilerplate
• Transcrypt: Python 3.7 to JavaScript compiler - Lean, fast, open! -

Restful

• practice - restful
• Standards.REST - A collection of standards and specifications, that help make fantastic HTTP/REST APIs. Don't reinvent the wheel, use fantastic wheels, hashed out by experts, that solve problems you hadn't even considered yet
• API 관련 내용 정리
• api development tools - A collection of useful resources for building RESTful HTTP+JSON APIs
• Do you really know why you prefer REST over RPC?
• REST CookBook
• RESTful considered harmful
• RESTful APIs, the big lie
• 10 Best Practices for Better RESTful API
• Best practices for REST API design
• REST API Design Best Practices for Parameter and Query String Usage
• REST 이해하기
• REST 알아보기
  • 1부, 연동의 역사
  • 2부, 웹에서 뭐가 그리도 좋을까?
• REST API의 이해와 설계
  • #1 개념 소개
  • #2 API 설계 가이드
  • #3 API 보안
• 가볍게 시작하는 REST API 개념잡기 - YouTube
• REST API 설계
• 도대체 뭐가 RESTful 이라는건가?
• REST API가 뭔가요?
• 프론트엔드와 백엔드가 소통하는 엔드포인트, RESTful API
• Dango에서 간단한 REST API 만들기
• Request bodies in GET requests
• GET, POST의 차이점
• Get과 Post를 아시나요?
• GET과 POST의 차이 :: Outsider's Dev Story
• REST API: PUT VS POST
• post vs put
• 새로운 HTTP SEARCH 메소드 | GeekNews
• Domain-Driven Design for RESTful Systems
  • 도메인 주도 설계의 본질
• DDD 입문 @ZUM
• REST API 제대로 알고 사용하기
• REST 아키텍처를 훌륭하게 적용하기 위한 몇 가지 디자인 팁
• 골치아픈 REST API에서 벗어나 효율적인 모바일 네트워크를 구성하는 방법
• REST의 representation이란 무엇인가
• 웹훅 기능을 테스트 하기 좋은 도구들 소개 RequestBin, ngrok
• REST API Tutorial
  • Resource Naming
  • HTTP Methods for RESTful Services
• REST API 컨벤션 Top5! 단수, 복수, 네이밍 등의 url 설계를 위한 best practice 알아보기
• REST Security Basics
• 그런 REST API로 괜찮은가
  • Day1, 2-2. 그런 REST API로 괜찮은가 - YouTube
  • Day1, 2-2. 그런 REST API로 괜찮은가
• (번역) RESTful API Designing guidelines — The best practices
• HTTP API Design Guide
• REST is the new SOAP
• O API — an alternative to REST APIs
• 백엔드 개발자와 협업하는 두 가지 방법
• 마이리얼트립 프론트엔드팀은 어떻게 협업하고 있을까?
• 나만 몰랐던 Http Delete Method payload body 문제
• HTTP 메서드
• 알아둬야 할 HTTP 요청 헤더
• REST and long-running jobs
• JSON Server - Get a full fake REST API with zero coding in less than 30 seconds (seriously)
  • JSON-Server as a Fake REST API in Frontend Development
• NSP로 구현한 API 예제
• Pushpin — An Open Source Library That Turns REST APIs into Realtime APIs
• HTTP GET 요청에 body를 붙여서 보내면 어떤 일이 벌어질까?
• HTTP 요청에 body를 붙여서 보내면 어떤 일이 벌어질까? part 2 Java HttpURLConnection의 경우
• Design patterns for modern web APIs
• API-First Programming on the Front End Restful에 직접 관계된 건 아니나 읽어볼만 함
• Migrating your REST APIs to HTTP/2: Why and How?
• 아하 REST API 서버 개발 (10)
• 아하 REST API 서버 개발 (11)
• 아하 REST API 서버 개발 (12)
• 아하 REST API 서버 개발 (13)
• 아하 REST API 서버 개발 (14) sentry
• An awesome guide on how to build RESTful APIs with ASP.NET Core
• RESTful API Boilerplate
• 저기요, REST API는 데이터베이스가 아니에요
• REST API -1 Service, Protocol(SOAP)
• REST API -2 REST, SOAP
• How to Use Google Ads API with REST Endpoints
• REST API & RESTful Web Services Explained
• Guys, REST APIs are not Databases
  • 저기요, REST API는 데이터베이스가 아니에요 – Doublem.org – Doublem.org가 운영하는 화단
• API 설계·개발·시험 돕는다 '무료 툴 13종'
• Richardson Maturity Model - steps toward the glory of REST
  • REST의 영광을 향한 단계들 steps toward the glory of REST
• RESTful 웹서비스
• 당신이 만든 건 REST가 아니지만 괜찮아
• REST Tutorial - How to Design a Good RESTful API 매우 기본적인 사항에 대한 리뷰
• RESTful API 설계
• RESTful API 설계 가이드
• REST and long-running jobs
• Long Running Operation with Polling
• 젤리의 외부 API 의존 솔루션의 사용경험(성능) 개선 공유 특별히 기술적인 내용은 없지만 HEAD 사용을 통해 GET 대신 resource 확인 가능하다는 점을 알 수 있었음
• 코딩 없이 10분 만에 REST API/Graphql 서버 개발하기
• REST API 사용하기 쉽게 만드는 법
• Jira Server platform REST API reference 8.10.1 참고
• REST API 설계
• RESTful API 체크리스트
• Zalando RESTful API and Event Scheme Guidelines
• 기계들의 대화법 - REST API - YouTube
• 멱등성?
• REST vs. GraphQL vs. gRPC · Dan Hacks
• GraphQL vs REST: Which is Better for APIs? - YouTube
• 개발 초보를 위한 RESTful API 설계 가이드
• 13 REST API interview questions you need to know | by The Educative Team | Mar, 2022 | Grokking the Tech Interview
• API Architecture — Performance Best Practices for REST APIs | by Abdul Wahab | Nov, 2021 | Medium
• API Architecture - Design Best Practices for REST APIs | by Abdul Wahab | Medium
• REST API 취약점 탐지 자동화 - LINE ENGINEERING
• Horatiu Dan - Respectful REST APIs – ‘Sunset’ and ‘Deprecation’ HTTP Headers - YouTube
• Don’t Use CRUD Styled APIs, Consider Intent-Based Rest APIs | by Dominic C | Jan, 2022 | Better Programming
• Your CRUDy APIs Aren't Great. Build Better APIs | Level Up Coding
• REST API Design - Resource Modeling | Thoughtworks
• How to design better APIs
  • 더 나은 REST API를 설계하는 법 | GeekNews
• Top 10 REST Interview Questions for Java and Spring Developers | by javinpaul | Javarevisited | Apr, 2022 | Medium
• Java Guides on Twitter: "Amazing REST API Design Cheat Sheet: https://t.co/vqLvNdMjLi" / Twitter
• How Did REST Come To Mean The Opposite of REST?
• REST API & RESTful Web Services Explained | Web Services Tutorial
• How to Test a REST API with .NET and xUnit - Code Maze
• Etag를 이용하여 더 나은 Restful API 만들기 | 요즘IT
• REST API Mistakes Every Junior Developer should Avoid | clean-code - YouTube

Restful Javascript

• How to build blazing fast REST APIs with Node.js, MongoDB, Fastify and Swagger
• How to build blazing fast REST APIs with Node.js, MongoDB, Fastify and Swagger
• REST is Dying. Get Rid of It.. TIGER: Advanced Easier Webservices You… | by Beau Beauchamp | JavaScript in Plain English
• The Complete Guide To Building A REST API With Node, Express, TypeScript & MongoDB + Authentication - YouTube

Restful Python

• hug - the fastest and most modern way to create APIs on Python3
• grest: Build REST APIs with Neo4j and Flask, as quickly as possible!
  • The Story of gREST, A Graph-based Restful API Development Framework | by Mostafa Moradian | Medium

Security 보안

• All you need to know about user session security
• GOTO 2019 • Common API Security Pitfalls • Philippe De Ryck
• CORS 실패 시, 응답 개체의 status는 왜 0일까?
• How to protect your information with Local Sheriff security
• The OWASP Top 10 – A Technical Deep-Dive into Web Security
• Introduction - OWASP Cheat Sheet Series
• 현대적 보안
• API 보안 체크리스트
• 여기보기 적에게 내 WAS의 디렉터리와 파일을 알리지 말라, WAS 디렉터리 인덱싱 및 상위 디렉터리 접근 제한 - 넷마블 기술 블로그

Server

• 스타트업을 위한 서버 안내서

Session

• 웹 서버 개발의 Session 전략
• 다중 서버 환경에서는 Session은 어떻게 공유하고 관리할까? - 1편 (Scale-Up / Scale-Out이란?)
• 다중 서버 환경에서 Session은 어떻게 공유하고 관리할까? - 2편(Sticky Session, Session Clustering, Session Storage 분리)
• 다중 서버 환경에서 Session은 어떻게 공유하고 관리할까? - 3편 (Disk based database vs In-Memory database)
• 다중 서버 환경에서 Session은 어떻게 공유하고 관리할까? - 4편(Redis vs Memcached)
• 분산서버 환경에서 발생할 수 있는 Session 불일치 문제를 해결해봅시다 (1) - Sticky Session - See One
• Sticky Session과 Session Clustering - SMJ Blog
• openreplay: OpenReplay is developer-friendly, open-source session replay

SVG

• A collection of svg logos for developers
• 웹에서 SVG 사용하기 실습 가이드
• SVG Path Animation - 완두블로그
• SVG 애니메이션 - 신현석(Hyeonseok Shin)
• HTML을 SVG로 변환하기 - 신현석(Hyeonseok Shin)
• Forking Chrome to turn HTML into SVG - Fathy
  • Chromium을 포크해서 HTML 페이지를 SVG로 변환하는 프로젝트인 html2svg를 만드는 과정 설명
  • Blink와 Skia 코드를 수정해서 페이지를 SVG로 변환하는 함수를 만들고 폰트나 그림자 등의 문제를 해결하는 과정
• Safari SVG Blurry 현상 해결 방법 | Univdev
• svg-hush: Make it safe to serve untrusted SVG files

Test

• Easy A/B testing at Nextdoor
• A/B Testing: The Good, the Bad and the Ugly with Corey Losenegger at Madison+ UX
• Testing UI Changes In Large Web Applications
• maplatency
• How to a measure the Performance of a Server?
• A/B 테스트 플랫폼
• 그로스 해킹 – 웹사이트 A/B 실험에 대한 7가지 법칙
• 구글, A/B 테스팅 도구 ‘옵티마이즈’ 정식 출시
• Innovating Faster on Personalization Algorithms at Netflix Using Interleaving
• 5 Tricks When A/B Testing Is Off The Table
• replay The Time Travel Debugger for Web Development

Test Load Test

• 실전 Web Application 부하 테스트 - 1편
• 실전 Web Application 부하 테스트 - 2편
• 내가 만든 서비스는 얼마나 많은 사용자가 이용할 수 있을까? - 1편(성능 테스트란?)
• 초식 - 서버 성능 올리기 (처리량, 응답시간) - YouTube
• 무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? | Kakao Pay Tech
• Load Testing: An Unorthodox Guide
• Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)
• Why your website should be under 14kB in size | endtimes.dev
• 웹 성능 최적화 · Present
• 부하 테스트 살펴보기. 부하란? | by kyeong su kim | 월요일 오후 9시 | Jan, 2023 | Medium
• 📸 📸 A picture is worth a thousand…kilobytes - YouTube
• Budgeting JS for your Users by George Iliadis - YouTube
• Artillery.io | Load & Smoke Testing
  • Node.js 기반, 스트레스 테스트, 성능 테스트
  • 분산 기반으로 보다 확장성 있는 노드 시스템을 개발하다보면 자의적이던 타의적이던 성능검증 필요
  • 노드기반, Webpage, RESTful API, WebSocket(Socket.io) 스트레스 성능테스트, 시나리오기반 테스트
  • yml과 명령어기반으로 손쉽게 테스트, 보고서까지 빠르게 출력 가능
  • 분산(로드밸러서, nginx), 멀티 코어 클러스터링(pm2), 환경에서의 시스템 가용성 테스트가 필요하다면 유용
  • 사전예약 서버 프로파일링으로 서버 병목찾아 개선하기
  • 우분투 환경에서 Node.js 앱 성능/가용성 테스트하기 - 강창훈 | 2023. 3. 25. 정기총회 - Speaker Deck
    • 우분투 환경에서 Node.js 앱 성능/가용성 테스트하기 - 강창훈 | 2023년도 정기총회 - YouTube
• Gatling - a powerful open-source load testing solution
  • Distributed load testing with Gatling and Kubernetes
  • Como instalar o Gatling no MacOS
  • Performance Testing with Gatling
  • Gatling으로 하는 부하테스트 튜토리얼. 지난번 부하테스트를 알아보았습니다. 이번 시간에는 실제로 부하테스트를… | by kyeong su kim | 월요일 오후 9시 | Feb, 2023 | Medium
• jmeter
  • Jmeter 강좌 - 1 일반적으로 성능테스트 툴에서 TPS 제어 방법
  • 웹서버 부하테스트 실전 노하우 jmeter
  • jmeter를 사용한 가변길이 TCP Binary 패킷 처리 방법
  • JMeter을 이용해서 웹서버 성능 테스트하기 - YouTube
  • 테스트 명장, Apache JMeter
  • JMeter, 부하 테스트!. 안녕하세요, 유니크굿컴퍼니에서 이번 7월에 신입으로 입사한 강현우라고… | by Jason Kang | Uniquegood | Sep, 2021 | Medium
  • k6 vs JMeter, 어느 성능 테스트 도구를 써야 할까? | by 용태 | Uniquegood | Dec, 2021 | Medium
  • Distributed Testing using JMeter & Docker | by Team 99x | Engineering at 99x
  • Performance and Load Testing with JMeter for beginners | by Suhana Pradhan | Medium
  • JMeter API Testing | Spring Boot Rest API Performance & Load Testing using JMeter | JavaTechie - YouTube
• k6: A modern load testing tool, using Go and JavaScript - https://k6.io
  • Load testing for engineering teams | Grafana k6
    • Test builder
  • Beginner’s Guide to Load Testing with k6
    • Part 1 — The Prelude
    • Part 2 — Performance Goals and k6 Metrics
    • Part 3 — How to Write & Run a Basic Load Test Using k6
  • Load Testing Your API with Swagger/OpenAPI and k6 | by Mostafa Moradian | k6.io | Medium
  • Load Testing Your API with Postman | by Mostafa Moradian | k6.io | Medium
  • Integrating k6 with Apache Kafka. How to send k6 output to Apache Kafka? | by Mostafa Moradian | k6.io | Medium
  • Integrating NewRelic with K6 in kubernetes cluster | by Nayan Gaur | capillary-tech | Nov, 2021 | Medium
  • 부하 테스트 도구 Grafana k6 :: Outsider's Dev Story
• load tester tool
• locust - An open source load testing tool
  • locust - Scalable user load testing tool written in Python http://locust.io
  • practice - neo4j rest api test, command line test
  • 부하테스트를 위한 Locust
  • Locust #2 - 분산 부하 테스팅 (with 쿠버네티스)
  • ECS+Locust로 부하 테스트 진행하기
  • Episode 4 — Testing your Python/Django app’s performance | by Francisco Betancourt | Dec, 2021 | Medium
  • locust-k8s: Locust on k8s example for scalable load tests
• MeasureThat.net
  • 소스코드의 퍼포먼스를 벤치마킹하는 방법 | Univdev
• nGrinder - Enterprise level performance testing solution based on The Grinder
  • 내 서버는 동시 사용자 몇명일 때 터질까? - Ngrinder를 이용해 성능/부하 테스트
  • 내가 만든 서비스는 얼마나 많은 사용자가 이용할 수 있을까? - 2편(nGrinder를 활용한 성능테스트)
  • nGrinder를 이용한 api 성능테스트 후기 | Recoding Life
  • nGrinder 성능테스트 결과를 통한 로그인 성능개선 과정을 알아보자 | Recoding Life
  • 스케일링 가능한 Ngrinder 환경 구축하기 (feat. AWS Beanstalk)
  • nGrinder에 적용한 HttpCore 5와 HttpCore 5 살펴보기
• Siege - an http load testing and benchmarking utility
• vegeta - HTTP load testing tool and library. It's over 9000!

Test Performance Test, Benchmark

• A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update)
• A Real-World Comparison of Front-End Frameworks with Benchmarks
• Continuous Front End Website Performance Testing
• Webserver Benchmark: Erlang vs Go vs Java vs NodeJS
• Front-End Performance Checklist 2021 — Smashing Magazine
• Website Launch Checklist
• 웹 사이트 유지 관리 체크리스트, 주간-분기 별 작업은? : 디자인로그(DESIGN LOG)
• How Wix improved website performance by evolving their infrastructure
• 내 웹 페이지 성능을 어떻게 올릴까? — 기초 | Medium
• 내 웹 페이지 성능을 어떻게 올릴까? — 예제 | by JungHoon Park | Jun, 2021 | Medium
• 웹 프론트 속도 개선을 위한 필수도구 소개
• 광고 효율을 높이기 위한 도착 페이지 최적화 전략 | GeekNews 기술적인 이야기는 아니지만 참고할만한 내용
• Web Performance Metrics Cheatsheet
  • 웹 성능 지표 Cheatsheet | GeekNews
• Creating Airbnb’s Page Performance Score | by Andrew Scheuermann | The Airbnb Tech Blog | Nov, 2021 | Medium
  • Airbnb에서 페이지 성능을 Web, iOS, Android의 모든 플랫폼의 실사용자로부터 측정해서 0~100점으로 평가한 성능 점수(Page Performance Score)를 만드는 과정을 설명
  • 처음 성능을 추적할 때는 Time To Airbnb Interactive(TTAI)라는 인터랙트를 하는 시간을 측정하는 지표 사용
    • 좋은 효과도 많았지만 인터랙트를 정의하기 어려웠고 TTAI는 좋은데 엔게이지먼트를 떨어지는 문제도 있었고 하나의 지표로 모든 걸 담을 수 없음
  • 그래서 하나의 숫자로 성능을 볼 수 있는 Page Performance Score(PPS) 작성
    • 모든 매트릭을 "초기 로딩 매트릭"과 로드 후 반응성을 보는 "페이지 로딩 매트릭"으로 분리
    • 모든 매트릭 측정을 플랫폼의 특성에 맞게 하고 점수를 내기 위해 웹과 네이티브의 매트릭 가중치를 다르게 부여
• 조금만 신경써서 초기 렌더링 빠르게 하기 (feat. JAM Stack)
• Http Server Performance: NodeJS vs. Go | by Jan Sunavec | Jan, 2022 | Better Programming
• The Definitive Guide to Image Optimization
  • (번역) 이미지 최적화에 대한 명확한 가이드
• Speeding up this site by 50x
• When Network is Faster than Cache – Simon Hearne
• 풀버전 박정국 CTO가 알려주는 ‘서버 성능 측정 방법’ (포브스 선정, 신입 개발자, API, 백엔드) - YouTube
• Lazy Loading을 활용한 Web Vital개선 - Byeongjin Jason Kang
• 리액트 빌드 최적화 (feat. ChatGPT) - Byeongjin Jason Kang
• ab - 아파치 웹서버 성능검사 도구
  • Simple Performance Testing with Apache Benchmark
  • Example of using Apache Bench (ab) to POST JSON to an API
  • How do I measure request and response times at once using cURL?
  • Timing HTTP Requests with cURL
  • Simple HTTP benchmark with curl
• Apdex Score 그것이 알고싶다.. 개요 | by Jeongsk | 원티드 제품 팀블로그 | Mar, 2021 | Medium
• cryload - HTTP benchmarking tool written in Crystal
• Lighthouse
  • web.dev/learn/#lighthouse
  • Lighthouse와 ChatOps 인터페이스를 이용한 웹사이트 성능 추적하기 | by André Tito Vasconcelos | 원티드 제품 팀블로그 | Mar, 2021 | Medium
    • wanteddev/lighthouse: Chatbot to run Lighthouse audits from Slack
  • How to analyze website performance with Lighthouse Audit website performance manually, programmatically, or automatically
  • 웹 퍼포먼스 개선을 위한 Lighthouse CI 도입기 – DRAMA&COMPANY
  • 실제 웹사이트에서 Web Vitals 디버깅하기 :: Outsider's Dev Story
  • Lighthouse의 User Flow | TOAST UI :: Make Your Web Delicious!
  • Lighthouse 성능 지표를 사용한, '웹 애플리케이션 성능 측정 자동화 모듈' 개발기 | NHN FORWARD
  • Lighthouse CI를 알아보고 Github Actions에 적용하기 | 카카오엔터테인먼트 FE 기술블로그
  • 이미지 최적화 하기
  • Web Performance Testing With Cypress and Google Lighthouse
  • IMDEV 2023 당신의 웹페이지는 몇 점인가요? - YouTube
  • 프로파일링을 통한 성능개선, 92점에서 100점까지(feat. lighthouse) · Present
  • FE 성능개선기 1부: 주문하기 – tech.kakao.com
  • FE 성능개선기 2부: 카카오 비즈니스폼 – tech.kakao.com
  • web-performance-test: lighthouse 자동화 스크립트
• PageSpeed Insights
  • PageSpeed Insights
  • What's new in PageSpeed Insights
    • 최근 PageSpeed Insights의 UI를 개편하면서 개선한 내용 설명
    • 성능의 필드 데이터와 실험실 데이터를 명확히 이해할 수 있도록 구분해서 보여주고 모바일/데스크톱의 성능을 구분해서 보여주는 UI 등이 변경
• the-benchmarker/web-frameworks: Which is the fastest web framework?
• ttvc: Measure Visually Complete metrics in real time
  • We’re using TTVC to measure performance on the web—and now you can too - Dropbox
• webhint, the hinting engine for web best practices
  • WebHint - 웹사이트 개선을 위한 도구 | GeekNews
• Web Vitals
  • Using the Web Vitals extension to debug Core Web Vitals issues
    • Web Vitals 익스텐션이 업데이트되어 콘솔에서 JSON으로 출력하던 정보를 LCP, CLS, FID, INP로 나누어서 출력해서 문제를 더 쉽게 파악할 수 있도록 개선
• wrk - a HTTP benchmarking tool
  • installation make; worked on Redhat 6.6/7.2
  • Script Lua to work better with wrk
• wrk2 - a HTTP benchmarking tool based mostly on wrk
  • installation make; worked on Redhat 6.6/7.2

Test Speed Test

• pingdom
• website-speed-test
• Free Website Speed Test

Tomcat

• 톰캣 #09 쓰레드
• WAS와 웹서버의 차이 – 톰캣과 아파치를 구별하지 못하는 사람을 위해
• WEB과 WAS의 차이점
• Jar 파일 스캔 제외로 톰캣 시작 시간 단축
• How to install Tomcat application server in Linux Fedora/Centos/RHEL | by Bryant Jimin Son | Jul, 2020 | Medium
• 여기보기 누구나 아는 기본 계정명은 비밀이 아니다 - 넷마블 기술 블로그
• 여기보기 WAS 프로세스가 다진 마음은 루트와 헤어질 결심 - 넷마블 기술 블로그
• 여기보기 ChatGPT도 알고 있는 WAS 설정 파일 관리와 세션 타임아웃 - 넷마블 기술 블로그
• 한정 판매 이벤트 .. ? with Tomcat. 작년 하반기 쯤에 대용량 요청에 대한 이벤트가 발생을 하게 되었다. | by Spark | Mar, 2023 | Medium

WebAssembly

• WebAssembly
• WebAssembly- Explained
• 초보 개발자를 위한 웹 신기술 WebAssembly 설명 - YouTube
• 2015 LLVM Developers’ Meeting: Jf Bastien & Dan Gohman “WebAssembly: Here Be Dragons"
• WebAssembly: a binary format for the web
• Call for support for lisp in the WebAssembly development
• WebAssembly, 브라우저에 올리는 네이티브 코드
• 무엇이 WebAssembly를 빠르게 만드나?
• [Goodbye PNaCl, Hello WebAssembly!(https://blog.chromium.org/2017/05/goodbye-pnacl-hello-webassembly.html)
• 자바스크립트는 어떻게 작동하는가: 웹어셈블리와의 비교 + 언제 웹어셈블리를 사용하는 게 좋은가
• Google I/O 2019: Day 2 후기
• 만화로 소개하는 WebAssembly
• 2019년과 이후 JavaScript의 동향 - WebAssembly
• Python and WebAssembly
• Build Your Own WebAssembly Compiler
• Build Your Own WebAssembly Compiler
• Hands-on WebAssembly: Try the basics — Martian Chronicles, Evil Martians’ team blog
• WebAssembly Is the End of the Internet As We Know It | by Michael Krasnov | Better Programming | Medium
• Debugging WebAssembly with modern tools  |  Google Developers
• From JavaScript to WebAssembly in three steps
• FE개발자의 성장 스토리 08 : WebAssembly 개발기 – tech.kakao.com
• WASM SYNTH, or, how music taught me the beauty of math
• 웹어셈블리를 활용한 유망한 프로그래밍 언어 프로젝트 10가지 - ITWorld Korea
• 웹어셈블리 인기에 날개달까?··· 주목할 만한 언어 프로젝트 11가지 - CIO Korea
• Making JavaScript run fast on WebAssembly
• Making JavaScript on WebAssembly Fast - YouTube
  • WebAssembly는 어떻게 JavaScript를 빠르게 실행할 수 있는가 | GeekNews
• WebAssembly with Golang by scratch | by Roman Romadin | Aug, 2021 | ITNEXT
  • Go 언어 이용 간단한 WebAssembly 작성 예제
  • 코드는 Hello World를 출력하는 정도이지만 Go로 작성한 코드를 컴파일해서 HTML 페이지와 연동해서 불러오는 방법 소개
• What Is WebAssembly — and Why Are You Hearing So Much About It? – The New Stack
• Cloud Native WebAssembly Applications Are Already Here – The New Stack
• Containers vs. WebAssembly: What's the Difference? | Fermyon Technologies (@FermyonTech)
• WebAssembly and Containers - YouTube
• "네이티브에 가까운 성능" 웹어셈블리 활용한 언어 프로젝트 12선 - CIO Korea
• Hit the Ground Running with WebAssembly (How To Start Using WebAssembly In Your Apps) - YouTube
• Photoshop's journey to the web
  • Phtoshop을 web으로 구현하기까지 구현 과정 설명
  • 이미 Spark와 Ligthroom을 웹으로 구현했지만, Photoshop은 JavaScript의 성능 한계로 구현하지 못함
  • WebAssembly와 Emscripten C++ 툴 체인을 이용해서 C++로 작성된 Photoshop을 웹으로 바로 포팅
  • 대부분은 포팅했지만, 성능 불충분. 동적 멀티스레딩이 WebAssembly에 필요, 예외에 기반을 둔 오류 핸들링을 W3C 커뮤니티 그룹과 작업, SIMD 인스트럭션같은 성능 프리미티브로 성능 개선
  • 데이터를 디스크에서 메모리로 빨리 옮기기 위해 오리진 트라리얼로 사용할 수 있는 origin private file system API 사용 가능
  • 웹은 sRBG 색공간을 사용하고 있지만, Photoshop은 Display P3 색공간을 쓰고 있어서 더 적확히 이미지를 보여주도록 Display P3 Canvas 사용
  • 수많은 UI 요소를 관리하기 위해 Web Components와 Lit 라이브러리 사용
• Cloud Native Apps with Server-Side WebAssembly - YouTube
• webassembly vs javascript and its application in microservice & cloud computing - YouTube
• webassembly: the new kubernetes? -- wingolog
• How Prime Video updates its app for more than 8,000 device types - Amazon Science
  • 아마존 프라임 비디오, WebAssembly 사용하여 8000개의 디바이스 타입 지원 | GeekNews
• WASI: a New Kind of System Interface
  • WASI: a New Kind of System Interface - YouTube
• WebAssembly Techniques to Speed Up Matrix Multiplication by 120x
• Pay attention to WebAssembly | Harshal Sheth
  • WebAssembly에 주목해야 하는 이유 정리
    • Wasm의 바이너리 형식은 표준화되어 Wasm 런타임만 있으면 실행 가능
    • C, C++, Rust, Go, Python, Ruby 등의 언어를 Wasm으로 컴파일 가능
    • 콜드 시작 시간은 빠르고 네이티브에 가까운 성능
    • 보안에도 좋음
  • 그래서 앞으로 JavaScript의 속도를 높이고 프로그래밍 언어 간의 상호운용성을 높일 수 있고 애플리케이션이 Wasm으로 플러그인 시스템을 제공 가능
  • WebAssembly를 이용한 새로운 애플리케이션 아키텍처가 생길 것이고 Docker와 통합되고 서버리스/엣지 프레임워크의 표준을 이끌 수 있다고 예측
  • 모든 언어에서 그렇듯 Wasm에도 WAPM이라는 패키지 매니저가 있지만 거의 운영되지 않으므로 이 부분도 기회
  • WebAssembly에 주목해야 할 이유 | GeekNews
• Write Your First WASM Module using Rust - YouTube
• JavaScript vs WebAssembly easy benchmark
• An introduction to WebAssembly - YouTube
• WebAssembly in my Browser Desktop Environment - Wasm Builders
• 웹어셈블리 기반의 유력 언어 프로젝트 13종 - ITWorld Korea
• WebContainers are now supported in Firefox on desktop and Android
• Firefox 데스크탑 & 안드로이드에서 WebContainers 지원 시작 | GeekNews
• 웹어셈블리(Wasm)가 클라우드 컴퓨팅의 미래인 이유 - ITWorld Korea
• WebAssembly: The Path to Components - YouTube
• WASM Components: The Interchangeable Parts of Software - YouTube
• Matt Butcher on Web Assembly as the Next Wave of Cloud Computing - YouTube
• Making JavaScript run fast on WebAssembly
  • 웹어셈블리에서 자바스크립트를 빠르게 실행하는 방법 | bohyeon.dev
    • 브라우저 밖에서 자바스크립트를 실행하려면
      • JS 엔진을 WASM 모듈로 배포할 수 있고
      • Firefox에서 사용하는 SpiderMonkey를 사용해서 실행되도록 했는데
    • 웹어셈블리는 JIT 컴파일을 할 수 없어서 인터프리터만 사용할 수 있기 때문에 속도가 느렸다
      • 그럼에도 필요한 상황이 있는데 iOS나 스마트 티브이 등 JIT가 제한된 환경이나 서버리스 환경 등이 있다
    • JS 엔진은 크게 초기화와 런타임 작업이 있는데 Wizer라는 도구를 통해
      • Wasm에서의 JS 초기화 시간을 13배 빠르게 하고 AOT로 스루풋을 개선하는 등의 작업을 설명
    • WASM으로 어떤 시도를 하는지 살펴볼 수 있다
• WebAssembly: Open to Interpretation - YouTube
• Wasmer Things: An Upside-Down Guide to WebAssembly by Edoardo Vacchi - YouTube
• a world to win: webassembly for the rest of us -- wingolog
• WebAssembly: A new development paradigm for the web - YouTube
• Evolution of WebAssembly: Past, Present, Future - YouTube
• WebAssembly A New Development Paradigm for the Web - YouTube
• WebAssembly: From the Browser to... Everywhere? - YouTube
• AssemblyScript
  • The AssemblyScript Project
• binaryen: Optimizer and compiler/toolchain library for WebAssembly
• Emscripten - a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins
  • Emscripten: An LLVM-to-WebAssembly Compiler
  • Hello web assembly
  • Emscripten으로 WebAssembly와 JavaScript 코드 크기 줄이기
• ffmpeg.js - FFmpeg for browser and node, powered by WebAssembly
• Hippo
  • Introduction to Hippo: the WebAssembly PaaS
  • 히포를 이용한 웹어셈블리 입문 - ITWorld Korea
• howto-wasm-minimal: How to create minimal wasm module
• kotlin-wasm-examples/compose-imageviewer at main · Kotlin/kotlin-wasm-examples · GitHub
• KoWasm is an experimental project intended to provide WASI and WebAssembly Component Model support for Kotlin/Wasm
  • The huge potential of Kotlin/Wasm · seb.deleuze.fr
• Pyodide Python with the scientific stack, compiled to WebAssembly
  • pyodide: Python with the scientific stack, compiled to WebAssembly
  • 모질라, 브라우저에 파이썬 통합하는 ‘파이어다이드’ 프로젝트 분리 - CIO Korea
• Spin Introducing Spin | Spin Documentation
  • Introducing Spin | Fermyon Technologies (@FermyonTech)
  • Spin - 오픈소스 WebAssembly 프레임워크 | GeekNews
• wagi: Write HTTP handlers in WebAssembly with a minimal amount of work
• WasmEdge Runtime is a high-performance, extensible, and hardware optimized WebAssembly Virtual Machine for automotive, cloud, AI, and blockchain applications
  • WebAssembly serverless functions in AWS Lambda | Cloud Native Computing Foundation
    • WasmEdge을 이용해서 AWS Lambda에서 WebAssembly로 서버리스 펑션 작성 방법 설명
    • WebAssembly는 Python이나 JavaScript보다 훨씬 빠르고 보안에 강하면서 이식성이 좋아서 서버리스 펑션에 좋음
    • 데모로 Rust로 작성한 WebAssembly 함수를 도커 이미지로 만들어서 Lamba에 배포하는 방법 설명
    • 두 번째 예제는 Tensorflow를 이용해서 추론하는 WebAssembly 함수
    • 둘 다 WasmEdge로 실행
• Wasmer - The Universal WebAssembly Runtime
  • 서버측 웹어셈블리 런타임 ‘와스머’, GA 버전 공개 - CIO Korea
  • Wasmer 1.0. By leveraging Wasm for software… | by Syrus Akbary | Wasmer | Jan, 2021 | Medium
  • wasmer-go: WebAssembly runtime for Go
  • v86: x86 virtualization in your browser, recompiling x86 to wasm on the fly
• wasm-fizzbuzz: WebAssembly from Scratch: From FizzBuzz to DooM
  • WebAssembly로 FizzBuzz 앱을 직접 작성해 보고 Doom을 WebAssembly로 포팅해보는 튜토리얼
• wazero: the zero dependency WebAssembly runtime for Go developers
  • Wazero - Go 개발자를 위한 종속성 없는 WebAssembly 런타임 | GeekNews
• webassembly.sh
• WebVM
  • 기술 잡담 - 리눅스 서버가 브라우저에 들어왔다 (webvm, cheerpx) - YouTube
• workerd: The JavaScript / Wasm runtime that powers Cloudflare Workers
  • Introducing workerd: the Open Source Workers runtime
    • Cloudflare에서 JavaScript/Wasm 런타임인 workerd의 첫 베타를 오픈소스로 공개
    • workerd는 Cloudflare Workers와 대부분의 코드를 같이 사용하지만 다른 환경에서도 동작할 수 있도록 설계
    • workerd는 셀프 호스트 애플리케이션에 사용될 것이고 주로 웹서버가 될 것이며 워커의 로컬 테스트에도 사용 가능
• Zaplib - Rust와 WASM으로 웹 앱을 가속하는 오픈소스 | GeekNews
  • Zaplib post-mortem: WASM은 생각보다 빠르지 않습니다. | GeekNews

Websocket

• Do you really need WebSockets?
• WebSockets vs. Regular Sockets
• HTTP vs Websockets: A performance comparison
• Polling vs SSE vs WebSocket— How to choose the right one
• How to secure your WebSocket connections
• WebSocket Simplified
• Stealing Secrets from Developers using Websockets
• Why is This Website Port Scanning me
• A JavaScript library for WebSockets
• How many system resources will be held for keeping 1,000,000 websocket open? - Stack Overflow
• REST API (HTTP) vs Websockets - Concept Overview With Example - YouTube
• The WebSocket Handbook: learn about the technology behind the realtime web | Ably Blog: Data in Motion
  • WebSocket 핸드북(64p 영문 PDF) | GeekNews
• 오늘의 테크용어 : 웹소켓이 뭐냐면 - YouTube
• Server-Sent Events: the alternative to WebSockets you should be using - germano.dev
• WebSockets vs. Server-Sent Events | Bits and Pieces
• 웹소켓으로 개발하기 전 알아야 할 것들 | 요즘IT
• soketi
  • Soketi - 간단하고 빠른 오픈소스 웹소켓 서버 | GeekNews
• WAMP - an open standard WebSocket subprotocol that provides two application messaging patterns in one unified protocol

WSGI

• WSGI로 보는 웹 서버의 개념
• pypi.python.org/pypi/flowdas-oliver
  • 개발자 설명
    • Gunicorn 의 gevent worker 가 성능이 만족스럽지 못해서 worker 를 새로 작성
    • nodejs의 http parser를 cython으로, gevent 기반의 worker로 붙임
    • AWS c4large instance 에서 2,400 reqs/s 정도
    • Nginx 뒤에 KeepAlive 75초 주고 붙이면, 평균 1,500 정도
• Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX
  • Django memory leak with gunicorn
  • gunicorn (> = 19.2)는 max_requests과 함께 max_requests_jitter도 사용하자
  • gunicorn 설정의 A to Z – 화해 블로그 | 기술 블로그