- hotframeworks.com
- codelion.net
- udacity.com/courses/cs253
- 웹학교
- BehindTheSite - A log of web technology stacks
- 스타트업을 위한 기술 스택
- 깃플 기술스택 구경하세요~ (프론트엔드 편)
- 지금 주목해야 할 2024년 웹 개발 트렌드 Top 4 | InfoGrab, DevOps 전문 기술 기업 | 인포그랩 | GitLab기반 DevSecOps 구축,컨설팅,교육,기술지원 서비스 제공
- 2024 프론트엔드 기술스택 이야기
- 10 Web Development Trends in 2023
- The State of Frontend 2022
- Review 2021 프런트엔드, 그리고 2022 | JBEE.io
- 번역 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
- 생활코딩: 웹 애플리케이션 만들기 수업
- 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
- 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 기술블로그
- What's New in Web Animations - YouTube
- API 없이 웹 애니메이션 구현: 인터랙티브 웹 개발 1편 | 카카오페이 기술 블로그
- API 없이 웹 애니메이션 구현: 인터랙티브 웹 개발 2편 | 카카오페이 기술 블로그
- 애니메이티드 커서 적용하기
- 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
- Beyond the 12 factors: 15-factor cloud-native Java applications - IBM Developer
- Building a professional design tool on the web
- Fantastic Web Design Tool
- 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로 스크롤을 감지해서 폰트를 바꾸도록 해서 해결하고
- 첫 뷰포트에 보이는 부분의 글자만 탐지해서 서브 셋을 만들도록 자동화
- 개발자에게 웹 폰트 최적화가 중요한 이유 | 요즘IT
- 웹폰트 살짝 수정하기 메모 – 형우의 웹개발
- 폰트어썸, 한글 웹 폰트 300개 이상 보유 사이트
- A formula for responsive font-size
- Features of your font you had no idea about · OlegWock
- The Ultimate Guide to Font Performance Optimization | DebugBear
- (번역) 폰트 성능 최적화를 위한 궁극적인 가이드 | Ykss
-
- 한 사이트에서 두 개 이상의 폰트 패밀리 로드 X (필요하면 어떻게 하나?)
-
- 웹 폰트 공개 CDN 을 사용하지 말고 자체 호스팅
- 자체 호스팅 사용이 불가능하면 다운로드 최적화 e.g. 필요한 서체 (특정 굵기, italic 적용/미적용 등등) 만 다운로드 가능
-
- WOFF2 포멧을 사용(2번이 선행되어야 가능)
-
@font-face를 잘 사용
@font-face선언은 폰트를 바로 다운로드 Xfont-family에 해당 폰트를 적용해야 다운로드(상세한 사용 방법도 공유)
-
- 일반적인 웹 성능 최적화도 잘 적용
-
- (번역) 폰트 성능 최적화를 위한 궁극적인 가이드 | Ykss
- ReadingShare - 영어 독해 문장 공유 사이트
- 모던 웹 스택 심층 분석
- 요즘 '모던' 프론트엔드 개발하려면 알아야할 것들 - YouTube
- 웹 개발자의 10가지 흔한 실수
- 웹기술의 부상으로 인한 개발팀의 도전과제 보고서
- (번역) 신은 디테일 안에 있다
- 웹 개발자를 위한 서버/인프라 용어 정리
- 이세계에 진입한 서버 개발 Azure 웹앱
- 비 개발자를 위한 웹 개발 기초
- 간단하게 무료로 HTTPS를 사용하시려면 CloudFlare를 추천드립니다. 심지어 아무 설정도 없이… Flexible SSL
- 클라우드플레어와 방문자 IP 주소
- 웹 개발자를 위한 Web Protocols 정리
- 웹개발 패러다임의 거대한 변화 "Reactive"
- Reactive 프로그래밍 - Hello world
- 차근차근 이해해 보는 HTML 반응형 이미지 – 형우의 웹개발
- 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
- 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 다시 읽기)
- “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같은 프로퍼티를 컴포넌트의 특징을 정의
- WAI(Web Accessibility Initiative)에서 리치 애플리케이션의 접근성 표준인 ARIA를 어떻게 사용해야 하는지 설명
- 김맥스 기술 블로그 | 웹 접근성 준수가 가져오는 프론트엔드 개발의 이점
- 접근성 기능 오용 사례 - 신현석(Hyeonseok Shin)
- 사람인 접근성 개선 회고
- 'Tech-Verse 2022' 웹 접근성 향상을 위한 노력
- 웹 접근성 준수를 통한 모두에게 배달되는 일상의 행복 | 우아한형제들 기술블로그
- Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium
- Airbnb가 접근성을 높이기 위해 WCAG의 권고에 따라 텍스트 크기를 2배로 키웠을 때도 웹 콘텐츠와 기능이 유지되도록 개선한 과정
- 텍스트의 단위에 px, em, rem이 있지만 일관되고 예측할 수 있는 rem 선택
- 후처리 도구를 만들어서 CSS에서 작성한 px를 자동으로, rem으로 변환
- Figma 플러그인을 만들어서 디자인 단계에서 텍스트가 커졌을 때의 문제를 미리 확인 가능하게
- 데스크톱은 확대에 대한 영향이 크지 않았지만, 모바일에서는 영향이 심했고 브라우저가 차이도 있었지만, rem 자동 변환을 통해서 쉽게 적용 가능
- Web Content Accessibility Guidelines (WCAG) 2.2
- 드래그 앤 드롭은 사실 편한 UX가 아니다?
- WAI-ARIA: role과 aria-label 사용법
- ‘액세서빌리티 인사이트’로 누구나 접근할 수 있는 코드 만들기 - 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
- URL Uniform Resource Locator
- URI, URL 및 URN의 차이점은 무엇입니까?
- 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 Status Code Definitions. Each Status-Code is described below… | by Mitku Dubale | Jun, 2022 | Medium
- HTTP 상태 코드 정리 | 와탭 블로그
- 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
- WSGI, WAS, CGI 이해 :: 불곰
- 매출 손실을 줄여주는 외부링크 관제 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월부터 적용 예정
- Interaction to Next Paint is officially a Core Web Vital 🚀 | Blog | web.dev
- Core Web Vital에 포함된 항목 중 FID(First Input Delay)를 대체하기 위해서 2022년부터 준비한 INP(Interaction to Next Paint)가 이제 안정화
- INP가 Core Web Vital에 포함
- Chrome도 공식적으로 FID 지원을 중단하고 개발자도 24년 9월 9일까지 FID에서 INF로 전환 필요
- Core Web Vital에 포함된 항목 중 FID(First Input Delay)를 대체하기 위해서 2022년부터 준비한 INP(Interaction to Next Paint)가 이제 안정화
- 구글의 프론트엔드 성공 지표 ‘Core Web Vitals’ | 요즘IT
- How Core Web Vitals affect application SEO: Understanding Google page experience ranking and Lighthouse scores – Vercel
- Google은 Core Web Vitals로 사이트의 성능을 평가해서 SEO에 반영
- 이 데이터를 실제 사용자에게 수집하므로 필드 데이터라고 호칭
- Google은 크롬 브라우저의 실제 사용자의 75 퍼센타일로 전 세계에서 필드 데이터를 수집
- 사용자는 데스크톱이나 Android에서 Chrome을 사용해야 함(즉 iPhone 사용자는 미집계)
- 지역별로 다르게 다루지 않고 전 세계에서 수집하므로 전 세계 모든 사용자에게 뛰어난 성능을 제공 필요
- 점수는 지난 28일간의 평균 점수이므로 성능을 개선한 후 영향을 파악하려면 한 달 정도 소요
- Lighthouse 등으로 Core Web Vitals를 측정한 것은 실험실 데이터라고 호칭
- 이러한 결과는 검색 결과에는 반영되지 않고 실제 사용자와는 다르기 때문에 성능 문제를 찾는 참고용으로 사용해야 함
- Google은 Core Web Vitals로 사이트의 성능을 평가해서 SEO에 반영
- 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 - 재그지그의 개발 블로그
- 제목 스타일 단계는 문서 구조의 기둥과 보 - 넷마블 기술 블로그 SEO 이야기 약간
- 당장 그만두어야 하는 구식 SEO 전략 7가지 | ㅍㅍㅅㅅ
- 사이트를 임시로 닫을 때 구글에 알려 주기 | 웹으로 말하기
- 짧게 써보는 웹 프론트엔드의 역사
- 프론트엔드 역사와 미래, 업무 분야 ... 그리고 잘하는 프론트엔드 개발자란?
- 프론트엔드 개발하고 싶은데 자바스크립트(와 떨거지들)가 싫은 이들에게 - DEV Community flutter blazor vaadin
- 프론트엔드 역사와 미래, 업무 분야 ... 그리고 잘하는 프론트엔드 개발자란?
- The End of Front-End Development
- (번역) 프런트엔드 개발의 종말
- AI에 발전으로 인해 개발자의 일자리가 줄어들 것이라고 걱정을 많이 하는데 웹 개발자가 사라지지 않을 거라는 생각을 정리한 글
- 1990년대부터 노코드 도구들이 등장하고 웹 개발자는 쓸모없어졌다고 하는 얘기는 계속 있었지만 그런 일은 일어나지 않았고 GPT가 만들어 준 웹사이트는 놀랍지만 이미 지금도 이런 일에는 웹 개발자가 필요하지 않고 AI가 계속 발전하겠지만 AI의 환각 현상을 알아내거나 제대로 만들려면 여전히 웹 개발자가 필요
- 프론트엔드 개발의 종말 | 요즘IT
- (번역) 프런트엔드 개발의 종말
- 2022년 웹 개발에서 고려해야 할 환경 - LINE ENGINEERING
- Making the world’s fastest website, and other mistakes - DEV Community
- Interaction to Next Paint (INP)
- 내 웹사이트를 슬랙에서 돋보이게 해줄 메타 태그 8가지 - 재그지그의 개발 블로그
- 32 UI Elements Designers Need To Know
- 내가 프론트엔드를 학습한 방법 | 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
- bfcache 캐시 뒤로/앞으로 backward forward cache
- How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile
- Back/Forward Cache는 즉시 뒤로, 앞으로 탐색을 가능하게 하는 브라우저 최적화 기법, bfcache라는 이름으로 알려져 있음
- 이 기능은 Firefox 1.5(2005년)에서 도입, Safari, Chrome에서도 지원
- 이 글에서는 Yahoo Japan News에서 bfcache 적중률을 개선하고, 그 결과 사용자 경험을 개선함과 동시에 비즈니스적인 성과도 가져온 내용 소개
- How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile
- 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
- Airbnb Case Study
- Optimize loading third-parties
- Hey.com
- 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에서 테스트 인프라가 불충분하다고 생각해서 이 부분에 집중할 예정
- Celebrate a more interoperable web with Interop 2023 | Blog | web.dev
- 브라우저간 호환성을 유지하기 위해 여러 브라우저가 벤더가 공동으로 테스트를 만들어서 상호 운용성을 개선하기 위한 Interop 2023 마무리
- 작년 초와 비교, 대부분 90점대 후반으로 큰 개선,
:has(), 컨테이너 쿼리, 서비그리드, 색공간 등 주요한 기능 추가 - 곧 Interop 2024 발표 예정
- The web just gets better with Interop 2024 | WebKit
- 브라우저 간 호환성을 유지하기 위해 여러 브라우저가 벤더와 회사들이 공동으로 테스트를 만들어서 상호 운용성을 개선하기 위한 Interop 2024 발표
- Interop 2023은 컨테이너 쿼리,
:has(), Flexbox, Grid 등의 영역의 상호 운용성을 크게 개선 - 올해는 Microsoft Edge를 크롬과 별도로 구분해서 보여주기 시작
- 접근성, 웹소켓용 HTTPS URL, CSS Nesting, CSS 커스텀 프로퍼티(
@property), 선언적 쉐도우 DOM, 레이아웃, 스크롤바 스타일 등
- 접근성, 웹소켓용 HTTPS URL, CSS Nesting, CSS 커스텀 프로퍼티(
- @property: Next-gen CSS variables now with universal browser support | Blog | web.dev
@property를 이제 주요 브라우저에서 모두 사용 가능@property를 사용해서 커스텀 프로퍼티 작성 가능, 그라데이션 애니메이션 같은 새로운 가능성도- 커스텀 프로퍼티에서는 초깃값을 이용해서 폴백 구현 가능
@property를 이용해서 그라데이션 카드를 구현하는 예제도 함께 제공
- 30분 안에 결제 페이지 개발하기 (ft. 결제위젯) 토스페이먼츠 tosspayments
- 세션 vs 토큰 vs 쿠키? 기초개념 잡아드림. 10분 순삭! - YouTube session token cookie
- Domain Registrars which Developers Recommend
- 사운드 리소스 전달 WebApp 만들기
- 사파리, 모바일 환경에서의 트러블슈팅 | 카카오엔터테인먼트 FE 기술블로그
- 진정한 남자들은 DB를 쓰지 않습니다 - YouTube data를 URL에 저장
- 더 나은 폼을 만드는 몇 가지 팁 – 형우의 웹개발
- Hyeseong's Blog - 컨텐츠 압축을 위한 배경지식 compression
- Being on The Semantic Web is easy, and, frankly, well worth the bother
- 디자인과 개발을 위한 그리드 시스템의 모든 것 | InfoGrab, DevOps 전문 기술 기업 | 인포그랩 | GitLab기반 DevSecOps 구축,컨설팅,교육,기술지원 서비스 제공 grid system
- 정적? 동적? 웹사이트 화면은 어떻게 채워질까? | 요즘IT
- Smarter than 'Ctrl+F': Linking Directly to Web Page Content
- (웬만한) 브라우저들의 기본 내장 기능인, 특정 웹페이지의 특정 구문을 하이라이팅 해주는 기능에 대한 글
- New Front-End Features For Designers In 2025 — Smashing Magazine
- A new learning experience on MDN | MDN Blog
- 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 주소 제대로 찍히게 하기 | 웹으로 말하기
- 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
- Let's understand the SSO Process Flow
- Password-less apps: implementing WebAuthN by Daniel Garnier-Moiroux - YouTube
- Keycloak
- 웹 개발 관련 서적 mind map
- 가볍지 않은 Web 프로그래밍
- 더북(TheBook): 모두의 HTML5 & CSS3
- Front-End Developer Handbook 2017
- front-end-handbook-2024: A guide to modern front-end web development / engineering
- Hypermedia Systems
- 웹의 기본을 이루는 하이퍼미디어와 REST 개념과 htmx, hyperview로 웹 애플리케이션 만드는 방법, SPA 프레임워크 없이 웹 애플리케이션 향상하는 방법 설명
- web-service-hardening
- Web Browser Engineering
- 웹 브라우저를 Python으로 구현하는 온라인 튜토리얼
- 웹페이지 다운로드부터 페이지 그리기, 서버와의 통신, 스크립트 실행까지 단계별로 설명
- 브라우저의 동작 원리와 렌더링 최적화 | Huskyhoochu 기술 블로그
- 리소스 로딩 순서 최적화 | Patterns.dev.kr - 모던 웹 앱 디자인 패턴
- Web Browser Engineering
- 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 등의 서드파티 라이브러리 존재
- From fast loading to instant loading - YouTube Core Web Vitals Largest Contentful Paint (LCP) Speculation Rules API Document Rules
- 웹 페이지 로딩 과정 이해하기
- 추론적인 프리렌더링으로 빠르게 페이지 로드하기 | 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
- 웹용 스토리지
- 웹 스토리지 : 무엇을 써야할까요?
- 웹브라우저에 데이터를 저장하기 - 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
- javascript - Find out whether Chrome console is open - Stack Overflow
- A simple way to detect devtools. - DEV Community
- Internet Explorer 와 작별하기. 번개장터에서 Internet Explorer 지원을 종료하게 된 배경과… | by leo.kang | 번개장터 기술 블로그 | Sep, 2022 | Medium
- 브라우저 대용량 파일 1 - 한줄씩 읽기
- Container queries land in stable browsers
- 컨테이너 쿼리를 이제 모든 주요 브라우저에서 사용 가능
- 컨테이너 쿼리는
container-type이나container로card나inline-size를 지정해야 하고- 미디어쿼리를 사용하듯이 부모 요소의 스타일 정보를 알 수 있게 되므로 재사용할 수 있는 컴포넌트에서 유용
- 사이트에서 컨테이너 쿼리를 사용하는 예시를 제공하므로 직접 사용 가능
- How to use container queries now | Blog | web.dev
- 컨테이너 쿼리가 모든 브라우저에서 지원되지만, 구형 브라우저 지원 때문에 적용 못 한다고 생각하는 사람들이 바로 적용할 수 있도록 하는 적용 가이드
@media규칙을 모두@container로 교체한 후container-type: inline-size;를 지정해서 컨테이너가 규칙의 기준이 되도록 함- 컨테이너 쿼리를 지원하지 않는 브라우저를 위해
- 크기 변경을 인지해서 스타일을 지정할 수 있는
<responsive-container>커스텀 태그를 만들어서 폴백을 구현하고 이를 위한 추가 스타일을 작성
- 크기 변경을 인지해서 스타일을 지정할 수 있는
- 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를 그대로 사용 가능
- The reckless, infinite scope of web browsers
- 잇창명 EatChangmyeong🪖 ~ 240207 on X: "흥미가 생기는 글이라서 전문을 번역해보기로 했다 <한없이 무모한 웹 브라우저의 기능 확장>" / X
- 글 작성일 기준 W3C 명세 카탈로그의 총 단어 수는 1억 1400만 단어. C11, C++17, UEFI, USB 3.2, POSIX 명세와 지금까지 공개된 RFC 8,754건, 위키백과의 가장 긴 소설 목록의 모든 소설을 합쳐도 W3C 명세보다 1200만 단어 부족
- Browser Fingerprint의 동작 원리와 운영시 예상되는 이슈
- Baseline
- Chrome 팀에서 특정 웹 기능이 Chrome, Edge, Firefox, Safari 등 주요 버전에서 지원되는 지를 더 명확히 보여주어 웹에서 안정적으로 쓸 수 있는지를 판단할 수 있는 Baseline 공개
- web.dev와 MDN에서 표시될 것이며 Interop 2022/2023에서 Apple, Microsoft, Mizilla와 협력해서 제작, 앞으로도 1년에 한 번씩 베이스라인을 발표할 예정
- Browserslist
- 다양한 JavaScript에서 브라우저 호환성 정보를 공유하는 Browserslist 공식 웹사이트
defaults나last 2 versions같은 설정을 입력하면 자세한 브라우져 사용 현황 확인 가능
- 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++
- 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
- 웹크롤러 아키텍쳐
- Crawling Billions of Pages: Building Large Scale Crawling Cluster
- 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 크롤링
- 🚜 웹 크롤링과 아키텍쳐
- 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? 🚀
- 함께 쓰는 풀리퀘 지금 하는 크롤링, 혹시 ‘디도스’는 아닌가요
- 대법원, 야놀자 정보 크롤링 한 여기어때 창업주 '무죄' - ZDNet korea
- 2022년 현재, 최고의 웹 스크래핑 도구는 무엇인가요? | GeekNews
- Industrial-scale Web Scraping with AI & Proxy Networks - YouTube
- Advanced Data Structuring with Graphs and Search Trees in Web Scraping Projects | by mostafa jafarzadeh | Nov, 2024 | Medium
- 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?
- 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
- Greenflare - 오픈소스 로컬 SEO 크롤러 | GeekNews
- Scraping Browser - Automated Browser for Scraping
- Nepenthes ZADZMO code
- 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
- scrape - A simple, higher level interface for Go web scraping
- wbot: A sample & efficient web crawler
- 동영상 목록 페이지에서 데이터 추출하기 - YouTube
- Crawlee · Build reliable crawlers. Fast. | Crawlee
- estela, an elastic web scraping cluster
- NIGHTMARE - A high-level browser automation library
- Phantom Js (Amazing library for web scraping)
- 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
- 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. 웹 크롤링(스크래핑) 이해하기
- 크롤러를 이용해 우체국 등기우편을 자동으로 정리해보자
- 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 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
- 파이썬에서의 웹 스크래핑 - 완벽 가이드 | GeekNews
- 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
- How to scrape websites with Python and BeautifulSoup
- Web Scraping With Beautiful Soup in Python
- 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
- 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
- ScrapeGraphAI
- 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분대로 -병렬 처리- :: 친환경사과의 블로그입니다
- UI, 프론트, 서버를 모두 한방에 점검하는 스크립트 만들기
- 파이썬으로 이미지 유사도 측정하고 UI 점검하기
- R) 크롤링 - 셀레늄 문제해결 - Data Doctor
- still the best way to scrape data. - YouTube
- aws lambda에서 파이썬 selenium 동작하게 하기 — 넹무
- Selenium & Python을 이용한 E2E 자동화 테스트 구현하기
- Healenium
- helium: Lighter web automation with Python
- LaVague: Automate automation with Large Action Model framework
- selenium-ide: Open Source record and playback test automation for the web
- 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
- 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
- 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 처리할 때 꼭 살펴봐야 할 만큼 좋은 글
- (번역) 레이아웃 알고리즘 이해하기. CSS를 보다 직관적으로 만드는 멘탈 모델 전환 | by Jung Han | Apr, 2022 | Medium
- How To Center a Div
- DIV를 부모 요소의 중앙에 배치하는 것은 의외로 까다로운 작업인데 중앙에 배치한 다양한 방법을 설명하는 글
- 마진을
auto로 설정해서 가운데 배치,flexbox이용 방법,position: fixed를 이용해서 뷰포트의 중앙에 배치, CSS Grid로 중앙에 배치하는 방법 설명 - 실행해 볼 수 있는 예제를 같이 보여주면서 특징을 설명하고 있어서 이해 용이
- 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,transform5가지 기능을 테스트할 수 있도록 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
- 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가지 | 웹으로 말하기
- input과 button을 딱 붙여 인풋 그룹을 만들 때 유용한 inline-flex | 웹으로 말하기
- Future CSS: State Container Queries - Ahmad Shadeed
- 알아두면 유용한 CSS 기능 : 네이버 블로그
- CSS 초보의 클론 코딩, 어떻게 하는 게 좋을까? | 웹으로 말하기
- 모달 레이어 팝업 등에서 URL을 변경해 뒤로 가기 버튼을 작동하게 하기 – pushState, popstate 활용 규칙 메모 | 웹으로 말하기
- Randomness in CSS using trigonometry
- 최신 모던 브라우저들에서는 새로운 CSS Trigonometric functions(삼각함수)들 사용 가능
- 이 함수들을 사용하면 이전에는 불가능했던 CSS 레벨에서 수학적 계산을 보다 정교하게 수행
- 이 글에선 이들 함수를 활용해 pseudo-random 값들을 생성해 애니메이션이나 위치 등에서 활용할 수 있는 방법 소개
- 최신 모던 브라우저들에서는 새로운 CSS Trigonometric functions(삼각함수)들 사용 가능
- 요소가 하나만 있을 때 그 요소에 적용하는 CSS 가상 선택자 :only-child, 언제 사용하면 좋은가? | 웹으로 말하기
- CSS Tip hover시 밑줄 그을 때 움찔 하는 것을 막기 | 웹으로 말하기
- 슬라이드 대신 가로 스크롤 컴포넌트를 사용할 때 스크롤바 모양 제어 CSS – 형우의 웹개발
- 슬라이드 대신 가로 스크롤 컴포넌트를 사용할 때 휠 스크롤하면 가로 스크롤되게 하는 JS – 형우의 웹개발
- CSS 임포트 방식은 성능에 얼마나 영향을 줄까? @import는 사용해선 안 될까? – 형우의 웹개발
- An Interactive Guide to CSS Grid
- CSS로 레이아웃을 다룰 수 있는 CSS Grid를 실제로 예제로 동작을 테스트해 보면서 설명하는 튜토리얼
- 기본적인 Grid의 동작부터 행과 열의 지정, %와
fr단위에 따라 어떻게 동작하는지, 자식 요소가 늘어날 때 Grid 레이아웃이 어떻게 동작하는지를 보여주면서 이해하기 쉽게 설명하고 다양한 레이아웃을 그리기 위한 동작 방식도 보여줌
- How I'm Writing CSS in 2024 | Lee Robinson
- Vercel의 Lee Robinson이 nesting, :has(), 컨테이너 쿼리 등의 크로스 브라우저 지원과 CSS 도구 등에 관한 생각을 정리한 글
- 이제 최신 CSS 기능이 대부분의 브라우저에서 지원되면서 Sass나 Less 없이도 최신 CSS를 작성할 수 있지만 컴파일러를 사용해서 사용하지 않는 스타일을 줄이고 고유한 파일명을 생성해서 캐싱 가능
- 동적인 화면을 위해서는 CSS를 스트리밍해야 하는데 이를 위해서 CSS 모듈, Tailwind CSS, StyleX를 사용 가능
- 마진 병합 기능 이해하기 – 형우의 웹개발
- Introducing the CSS anchor positioning API | Blog | Chrome for Developers
- Chrome에 특정 요소를 기준으로 포지셔닝 할 수 있는 CSS anchor positioning API 추가
- 특정 HTML 요소에 CSS로
anchor-name: --NAME처럼 설정하면 앵커 설정 가능 - 다른 요소에서
position-anchor:로 앵커의 이름을 지정하면anchor()함수로 특정 요소를 기준으로 요소의 위치 지정 가능 - 이 API를 사용하면 툴팁 등 특정 요소를 기반으로 요소의 위치를 아주 쉽게 잡는 게 가능
- CSS의 5가지 position 속성 값 기본 정리 | 달레의 웹 프로그래밍 - YouTube
- Inline conditionals in CSS? • Lea Verou
- It’s Time To Talk About “CSS5” — Smashing Magazine
- A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() | Codrops
- CSS finally adds vertical centering in 2024 | Blog | build-your-own.org
- Double your specificity with this one weird trick | Cirrus's Realm
- CSS 선택자 우선순위를 높이는 의외의 방법 | GeekNews 마치 hack같지만 spec에 써있는 방법
- Smarter than 'Ctrl+F': Linking Directly to Web Page Content
- A Framework for Evaluating Browser Support • Josh W. Comeau
- 특정 CSS 속성에 대해 모든 브라우저가 지원하지 않을 경우, 우리는 적용 여부를 어떻게 판단하고 fallback 해야 할 것인가에 관한 글
- :has() 셀렉터 - 신현석(Hyeonseok Shin)
- :placeholder-shown
- :user-invalid CSS 가상 선택자로 폼 밸리데이션 표시하기 — :invalid 대신 :user-invalid – 형우의 웹개발
- ฅ^•ﻌ•^ฅ ♥ AdorableCSS
- Buttons Generator - Marko Denic - Web Developer
- CSS Grid Generator
- CSS Selectors: A Visual Guide & Reference | fffuel
- CSS Subgrid
- CSS 그리드에서 그리드 컨테이너의 직접 자식에만 영향을 주는데
grid-template-columns를subgrid로 지정해서 사용하는 서브그리드를 사용하면 부모 그리드의 값을 서브그리드에서 사용 가능해 레이아웃 내에서 콘텐츠 정렬 가능
- Defensive CSS
- 사이즈가 달라져도 깨지지 않도록 Flexbox나 백그라운드 이미지, 스크롤 등 CSS 팁을 정리한 사이트로 상황별로 어떤 문제가 있는지 정리, 재현 가능한 예제 제공
- flyonui: 🚀 The easiest, free and open-source Tailwind CSS component library with semantic classes
- Keyframes.app
- Open Props: sub-atomic styles
- State of CSS 2023에 따르면 관심/만족도에서 Tailwind CSS를 앞지름
- Rethinking CSS in JS - DEV Community
- shadcn/ui
- shadcn ui 자세히 알아보기
- 작년 가장 많은 GitHub Star를 받은 shadcn/ui 설명
- shadcn/ui는 Tailwind CSS를 기반으로 한 컴포넌트 컬렉션
- 라이브러리와 달리 설치해서 쓰는 게 아니라 컴포넌트 코드를 복사해서 붙여 넣고 사용하는 방식
- 필요한 부분을 수정 사용 가능
- 이 관리를 쉽게 할 수 있도록 CLI 제공
- The anatomy of shadcn/ui
- shadcn ui 자세히 알아보기
- system.css | A design system for building retro Apple-inspired interfaces
- tachyons.io
- 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를 같이 쓸 수 있게 되었고 이를 적용하면서 적용했던 팁 정리
- Let's start a React/Next.js + Typescript + TailwindCSS project - Zhe-Jia's Blog
- monorepo에 tailwindcss 세팅 - Byeongjin Jason Kang
- tailwindcss에서 임포트 구문 사용하기 – 형우의 웹개발
- shadcn-ui/ui: Beautifully designed components built with Radix UI and Tailwind CSS
- shadcn-ui는 UI 라이브러리이면서 UI 라이브러리가 아님
- UI 컴포넌트 코드가 파일로 추가되어 설치가 되는 특이한 방식으로 동작. 이러한 특성 덕분에, 코드 동작 및 스타일을 변경 용이
- tailwind-dashboard-template: Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React. Made by
- ui - 깔끔한 애니메이션을 지원하는 UI 컴포넌트 라이브러리 | GeekNews
- XP.css - A design system for building faithful recreations of old UIs
- css-in-js-media - Minified and Simplified include-media with CSS-in-JS
- Real-world CSS vs. CSS-in-JS performance comparison - Tomas Pustelnik's personal website
- Why is CSS-in-JS slow? | Playful Programming
- 일반적인 vanilla CSS 는 아래와 같은 과정을 거쳐 적용
-
- HTML 파싱
-
- 1번 과정 중
<head />안에서 CSS 를 발견
- 1번 과정 중
-
- CSS 파싱
-
- HTML 과 CSS 를 같이 적용해서 사용자에게 보여줌
-
- 하지만 CSS-in-JS 라이브러리들은 아래와 같은 과정
-
- HTML 파싱
-
- HTML 을 사용자에게 보여줌
-
<body />안에서<script />를 발견함
-
- JS 파싱
-
- JS 까지 적용된 결과를 사용자에게 보여줌
-
- CSS-in-JS 라이브러리가 CSS 를 생성
-
- CSS 파싱
- CSS 까지 적용된 결과를 사용자에게 보여줌
-
- Vanilla Extract 같은 일부 라이브러리가 기존 CSS-in-JS 라이브러리들보다 빠른 이유는 런타임에서 CSS 를 생성하는 것이 아니라 컴파일 단계에서 미리 생성하기 때문
- 일반적인 vanilla CSS 는 아래와 같은 과정을 거쳐 적용
- devup-ui: JSX Zero-Runtime UI Styling Library CSS-in-JS preprocessor
- mincho: Natural CSS in the Typescript design system 디자인 시스템을 만들기위한 CSS in JS 프레임워크
- 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
- Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
- PandaCSS와 함께 CSS-in-JS의 미래로 : Wonderwall Tech
- 기존에 styled component를 사용하고 있었지만, PandaCSS로 바꾸게 된 배경 설명
- styled component를 잘 사용하고 있었지만 사용하지 않는 스타일이 번들에 포함되고 동적 기능으로 인한 성능 저하 문제가 있었고 디자인 시스템을 직접 만들기는 어려움
- PandaCSS는 디자이너와 공유하는 토큰을 쉽게 정의할 수 있고 컴포넌트 레시피로 재사용이 쉽고 정적인 CSS를 지원해서 프레임워크를 타지 않는 장점
- 빌드타임에 코드를 생성하므로 토큰/레시피를 수정하면 다시 생성해 주어야 하고 다양한 방법을 지원하므로 팀에서 사용하려면 표준을 정하는 것이 좋음
- PandaCSS와 함께 CSS-in-JS의 미래로 : Wonderwall Tech
- Stitches — CSS-in-JS with near-zero runtime
- StyleX
- Introducing StyleX | StyleX
- Meta에서 표현력, 결정성, 안정성, 확장성을 갖춘 스타일링 시스템인 StyleX를 오픈소스로 공개
- StyleX는 CSS-in-JS의 개발자 경험을 컴파일 도구를 사용해서 CSS 성능과 확장성을 지원할 수 있도록 설계
- 그래서 표현형 CSS 하위집합을 지원하며 유틸리티 클래스나 라이브러리를 학습할 필요 없이 스타일을 원자적 CSS 클래스 명으로 변환해서 최적화하며 파일/컴포넌트를 넘어서 스타일을 합칠 수 있고 타입을 지원해서 프로퍼티와 값을 세밀하게 제어 가능
- StyleX는 컴파일 타임과 런타임 모두에서 빠르게 설계
- StyleX는 Facebook.com을 React로 다시 구축할 때 스타일에 더 나은 무언가가 필요하다는 것을 깨닫고 만들기 시작했고 Meta에서 Facebook, WatsApp, Instagram, Threads 등에서 수년간 사용하면서 발전시켜 오다가 오픈소스로 공개
- Introducing StyleX | StyleX
- xstyled: A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️
- 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
- 필요한 지식?
- 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
- 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
- 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처럼 적절한 시간에 수행할 수 있으며 쿼리를 잠근다고 하더라도 클라이언트에 유연성을 제공하고 새로운 쿼리마다 서버팀이 작업할 필요를 제거
- 주장 1: GraphQL은 공개 API를 일반적인 그래프 데이터베이스와 같게 만든다
- 트위터 "GraphQL is a Trap"이라는 트윗의 내용을 반박한 글
- GraphQL kinda sucks | Hacker News
- 개발자에게 편리함을 주는 ‘GraphQL’ 도입 시 주의할 점은? | 요즘IT
- What is GraphQL (An Overview) – ScriptsView
- GraphQL
- GraphQL에 대하여 (장점 ＆ Schema ＆ Type)
- GraphQL에 대하여 (Interface ＆ Union Type)
- GraphQL에 대하여 (Resolver ＆ DataLoader)
- GraphQL에 대하여 (Aliases ＆ Fragments)
- GraphQL Mesh - Query Any API, Run On Any Platform • Uri Goldshtein • GOTO 2023 - YouTube
- 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
- Maximizing GraphQL's Potential: Netflix's Federated Journey Unveiled - YouTube
- GraphQL - 한 방에 이해하기 - YouTube
- Why, after 6 years, I’m over GraphQL
- 6년 만에 GraphQL을 그만둔 이유 | GeekNews
- 오랫동안 GraphQL을 사용해왔고 옹호했지만, 최근에 그 입장이 변경되어 더는 추천하지 않는 이유를 정리한 글
- 클라이언트에 쿼리 언어를 노출했기에 권한 부여나 Rate limit 같은 공격 표면 증가, N+1 성능 문제 경험
- GraphQL에서는 비즈니스 로직이 전송 계층으로 이동되기 때문에 커플링이 심해지고 복잡해지는 문제 존재
- Why, after 8 years, I still like GraphQL sometimes in the right context
- Why, after 6 years, I’m over GraphQL에 대한 반박 글
- 기본적으로 Persisted Query를 사용하고 GraphQL을 공개 API로 사용하는 것은 위험하다고 이야기
- 해당 글은 어느 정도 공개 API로 사용해서 발생한 문제라는데 동의, 이 부분은 실제로 어려운 일
- Persisted Query를 사용하는 것이 아주 중요하고 권한 문제와 성능 문제, API 호환성 문제 등은 GraphQL의 문제라기 보다 모든 API가 가진 문제라고 이야기
- 자신은 8년 동안 사용했는데 구축이 쉽지는 않지만 만족하고 있다고 설명
- WunderBase - Serverless GraphQL Database on top of SQLite, Firecracker and Prisma - WunderGraph
- 웹개발자를 위한 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에서 어디에 어떤 요소를 써야 하는지는 오랫동안 나오는 질문, 이 글에서는
- 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 태그를 사용하자
- Your website does not need JavaScript - Amy Kapernick - Copenhagen DevFest 2023 - YouTube
- 노드 간의 포함관계를 확인하는 contains - 신현석(Hyeonseok Shin)
- State of HTML 2023
- HTML 생태계의 상황을 2만여 명에게 설문 조사해서 정리한 결과
- From, 상호작용, 접근성 등 각 기능의 사용 여부와 알려진 정도를 살펴볼 수 있고 정적 사이트 생성기나 API의 사용 정도 파악 가능
- 컨텐츠에 따라 높이가 자동으로 조절되는 textarea 구현하기 | 사진찍는 웹 개발자의 블로그
- textarea를 감싸는 div에 여백이 생겨버리는 이유 | 사진찍는 웹 개발자의 블로그
- Replace Twitter Embeds with Semantic HTML – Terence Eden’s Blog
- 7 Old-School Practices in HTML Should Be Avoided - DEV Community
- HEAD: A simple guide to HTML elements
- HTMHell - A collection of bad practices in HTML found on real websites
- </> htmx - high power tools for html
- htmx: </> htmx - high power tools for HTML
-
웹 개발의 대부분은 HTML/CSS을 통해 사용자 입력을 받고, 그에 따라 JavaScript를 통해 새로운 콘텐츠를 업데이트하는 방식의 접근을 오랜 시간 동안 받아들이고 사용
-
htmx는 어쩌면 우리가 일반적으로 알고 있는 개발 방식에 새로운 접근을 제시하며, 대부분의 작업들은 HTML 태그의 속성을 통해 처리 가능하게 변경
<!-- htmx를 로딩 --> <script src="https://unpkg.com/[email protected]"></script> <button hx-post="/some-api" hx-trigger="click" hx-target="#parent-div" hx-swap="outerHTML"> Click Me! </button>- 위의 코드는 사용자가 을 클릭하면, /some-api로 POST 요청을 보내고, 그 결과를 #parent-div의 outerHTML로 교체
-
- 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가 없어도 잘 동작하므로 쉬우면서 접근성 좋은 웹페이지를 만들 수 있고 프론트엔드/백엔드간의 협업도 더 편해진다고 이야기
- What the hell is HTMX? - YouTube
- Hypermedia Systems
- The Truth About HTMX - YouTube
- Htmx: The newest old way to make web apps - LogRocket Blog
- htmx란 무엇이며 어떻게 웹사이트를 간소화할 수 있나요? - All Things N
- Htmx 2.0.0 릴리즈 | GeekNews
- HTMX does not play well with content security policy
- Htmx의 미래 | GeekNews
- htmx: </> htmx - high power tools for HTML
- diff2html-cli: Pretty diff to html javascript cli (diff2html-cli)
- elml: A small markup language that compiles to HTML
- htmz: html with targeted manipulation zones
- sqlite-html: A SQLite extension for querying, manipulating, and creating HTML elements
- view-transition 모르면 손해? 엄청난 웹 API가 나타났다! - YouTube
- Hilla The modern web framework for Java · Hilla
- Spark Framework is a simple and lightweight Java web framework built for rapid development
- 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
- FlowMapp web planning platform. Visual Sitemaps, User Flows and Wireframe tools
- Frontend Practice | Become a better frontend developer
- gatling - a high performance web server
- glTF: glTF – Runtime 3D Asset Delivery
- HAR Sanitizer
- hotwire HTML Over The Wire | Hotwire
- html5-qrcode: A cross platform HTML5 QR code reader
- htmlq: Like jq, but for HTML JSON을 쉽게 조회하고 조작할 수 있는 jq처럼 CSS 셀렉터를 이용해서 HTML을 조회할 수 있는 CLI
- HTTP/2 Dashboard BETA - Monitoring the adoption and performance of HTTP/2 on the Web
- Hurl.it - Make HTTP requests
- HyperDev is the developer playground for building real web apps, fast
- Jet - Lightweight, Realtime Message Bus for the Web
- Mega boilerplate - 사용
- mpa-archive: Crawls a Multi-Page Application to a zip file, serve the Multi-Page Application from the zip file. A MPA archiver. Could be used as a Site Generator
- OpenResty - a fast web app server by extending nginx
- oEmbed - a format for allowing an embedded representation of a URL on third party sites
- Phantom Js (Amazing library for web scraping)
- Polyfill.io
- 똑똑하게 브라우저 Polyfill 관리하기
- 폴리필은 브라우저 간 API의 지원 차이를 해결하기 위한 스크립트
- 보통은
@babel/preset-env를 이용해서 타켓 브라우저에 맞는 폴리필 생성 가능 - 하지만 이 경우 전체 스크립트가 커지므로 최신 브라우저에서도 불필요한 코드를 받게 되는데
- Polyfill.io를 이용하면
User-agent를 보고 동적으로 폴리필을 내려줄 수 있음
- Polyfill.io를 이용하면
- Toss에서는
core-js와browserslist를 이용해서User-agent로 폴리필을 만드는 스크립트를 작성, 서버에 넣거나 엣지 함수에 배포해서 운영
- 레몬베이스가 폴리필을 대하는 방법. 레몬베이스 프론트엔드 챕터의 피트스탑에 관하여 | by Jerome (Jaeuk Yoo) | Jan, 2024 | 레몬베이스 팀블로그
- Andrew Betts on X: "If your website uses https://t.co/3xHecLPXkB, remove it IMMEDIATELY. I created the polyfill service project but I have never owned the domain name and I have had no influence over its sale." / X
- 브라우저 간 동작 차이를 채워주는 polyfill.js를 쉽게 사용할 수 있도록 pollyfill.io에서 서비스로 제공
- 이 polyfill.io를 운영하던 사람이 polyfill.io를 Funnull이라는 회사로 이전
- polyfill.io 서비스를 만들었던 사람이 공급망 공격을 걱정하며 이제는 polyfill 자체도 그리 필요 없으니 즉시 제거하라고 경고
- 이에 Cloudflare는 자사의 CDN에서 이를 제공한다고 빠르게 공지
- 브라우저 간 동작 차이를 채워주는 polyfill.js를 쉽게 사용할 수 있도록 pollyfill.io에서 서비스로 제공
- 똑똑하게 브라우저 Polyfill 관리하기
- Polymer Project
- 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
- 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
- Strada: Create high fidelity native interactions driven by your web app.
- 37signals Dev — Announcing Strada
- HTML을 사용해서 JavaScript를 많이 사용하지 않고 웹 애플리케이션을 만드는 Hotwire의 기술로 하이브리드 모바일 애플리케이션을 만들 수 있게 하는 Strada 발표
- Hotwire가 발표될 때 Strada도 스택에 포함되어 있었지만 이제 공개된 것이고 37signals에서는 HEY의 iOS/Android 앱을 만드는데 지난 3년 동안 사용
- 37signals Dev — Announcing Strada
- 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
- 프론트엔드, 백엔드 개발자 간 소통 돕는 Swagger | 요즘IT
- Swagger를 이용한 세상 간단한 API Mocking | Univdev
- swagger-typescript-api: TypeScript API generator via Swagger scheme
- 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
- web2img: This is the real WebPack can use image hosting sites as free CDNs to save bandwidth costs
- Web Check
- WebDevCurriculum: Knowre 웹개발 커리큘럼
- WebTransport 실험하기
- zero: Allow startup developers to ship to production on day 1
- 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
- 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란 무엇인가? : 네이버 블로그
- mirror를 활용하여 트래픽 제어
- NGINX로 Reverse Proxy 및 로드 밸런싱 이해하기 - YouTube
- Top 25 Nginx Web Server Best Security Practices - nixCraft
- Nginx, GitHub로 이전 | GeekNews
- NGINX - Zero To Hero: Your Ultimate Guide from Beginner to Advanced Mastery | by Saquib Khan | Medium
- Angie - drop-in replacement for Nginx
- bunkerized-nginx: nginx Docker image secure by default
- freenginx nginx news
- NGINXConfig | DigitalOcean
- nginx-ui: Nginx UI allows you to access and modify the nginx configurations files without cli
- topngx - top for NGINX
- 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 Server가 이상하다! :: All About Dev/Ops
- Nginx Proxy Manager
- 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
- Progressive Web Apps (PWAs) vs native mobile apps | Leigh Kendell and Aranda Morrison - YouTube
- PWA Stats
- 코딩방송 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
- Keepalived
- 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
- pingora: A library for building fast, reliable and evolvable network services
- 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
- Cloudflare에서 Nginx를 수년 동안 잘 사용했지만 Cloudflare가 커짐에 따라 한계를 느껴
- Announcing River: A High Performance and Memory Safe Reverse Proxy Built on Pingora - Prossimo
- Pingora - 네트워크 시스템 구축용 오픈소스 Rust 프레임워크 | GeekNews
- The Cloudflare Blog
- Cloudflare가 2022년 Nginx를 대체하기 위해 Rust로 작성한 HTTP 프록시 서버 Pingora를 오픈소스로 공개
- Pingora는 HTTP/1, HPTT/2, gRPC, WebSocket 프록시를 지원하고 Pingora 기반으로 서비스를 구축할 수 있는 라이브러리와 API도 제공
- Cloudflare Open sources Pingora (NGINX replacement) - YouTube
- How we built Pingora, the proxy that connects Cloudflare to the Internet
- 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
- YARP: Yet Another Reverse Proxy
- reverse-proxy: A toolkit for developing high-performance HTTP reverse proxy applications
- Let’s Build A Web Server
- 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
- PYTHON 내장 라이브러리(wsgiref)로 가짜 FLASK 만들기
- I/O Python의 Selectors
- 네트워크 WSGI와 Python 1편
- 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 서버 구축하기 - 한빛출판네트워크
- 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
- 13ft: My own custom 12ft.io replacement
- Anvil | Build Web Apps with Nothing but Python
- BlackSheep: Fast ASGI web framework and HTTP client for Python asyncio
- Brython - A Python 3 implementation for client-side web programming
- 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
- 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
- 광고 시스템 퍼포먼스 튜닝 회고록. 신규 광고 시스템 운영 과정에서 발생한 퍼포먼스 이슈와 그에 대한 해결… | by Youngsik Choo | Jul, 2023 | YOGIYO Tech Blog - 요기요 기술블로그
- Why You NEED To Learn FastAPI | Hands On Project - YouTube
- Balthazar - Blog – How to profile a FastAPI asynchronous request
- 5 Things about fastAPI I wish we had known beforehand - Alexander Hendorf - YouTube
- PyCon KR 2023 Django와 FastAPI를 사용해서 채팅 백엔드 서비스 만들어보기 김지훈 - YouTube
- PyCon KR 2023 FastAPI Deep dive 정보람 - YouTube
- Build an AI app with FastAPI and Docker - Coding Tutorial with Tips - YouTube
- Mastering API Testing with FastAPI: Databases, Dependencies, and More! - YouTube
- 4 Tips for Building a Production-Ready FastAPI Backend - YouTube
- Alexander Hendorf - ✨ FastAPI facts we wish we'd known beforehand. | PyData London 2023 - YouTube
- FastApi - YouTube
- 정말 기초적인 FastAPI 튜토리얼 #0 - 환경 설정
- 정말 기초적인 FastAPI 튜토리얼 #1 - 쿼리 파라미터
- 정말 기초적인 FastAPI 튜토리얼 #2 - 경로 파라미터와 자동 문서화
- 정말 기초적인 FastAPI 튜토리얼 #3 - 입력 데이터 검증
- FastAPI 개요
- FastAPI 보일러 플레이트
- Debug FastAPI and SQLModel with VS Code and Breakpoints - YouTube
- SQLModel + FastAPI: Say Goodbye to Repetitive Database Code - YouTube
- Helping FastAPI: How to contribute to docs translations - DEV Community
- 1. FastAPI로 API 만들고 배포하기
- AI•Data FastAPI와 데이터베이스(이론) - YouTube
- FastAPI-Auth: Example app using FastAPI and JWT
- FastAPI boilerplate
- fastapi-boilerplate: FastAPI Boilerplate
- fastapi-from-dj: FastAPI quick start from Django
- fastapi-rocket-boilerplate: 🐍💨 FastAPI Rocket Boilerplate to build an API based in Python with its most modern technologies!
- FastapiTutorial
- fastapi_websocket_pubsub: A fast and durable Pub/Sub channel over Websockets. FastAPI + WebSockets + PubSub
- 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
- 실험 내용 및 결과
- FastAPI와 Redis Broker는 GPU가 없는 Local Machine에서, Triton과 Celery worker는 GPU가 있는 Remote Machine에서 실행
- Local Machine에서 Locust 실행. 단일 장비로 발생시키는 Load라서 그런지 Peak Concurrency가 10을 넘어가면 Request per Second (RPS)이 늘어나지 않는 모습을 보임 (더 강한 부하를 주려면 분산 처리 필요)
- Triton을 사용하지 않은 경우, Celery의 각 worker process가 하나의 독립적인 모델을 가지고 있음 (A)
- Triton의 경우 모델에 대한 하나의 Instance가 작동함 (B)
- A 시나리오에서는 10개의 worker를 사용. 즉, GPU 메모리에는 10개의 모델이 올라감 (약 1.2 GB x 10의 GPU 메모리 소요)
- B 시나리오에서는 하나의 모델만 GPU 메모리에 올라가며 약 1.3 GB의 GPU 메모리 소요
- Triton은 훨씬 적은 메모리의 사용으로 A와 비슷한 퍼포먼스를 보임 (Dynamic Batching에 의해 효율이 높아지는 것으로 추정)
- 입/출력이 작은 예시라서 그런지 Triton의 Shared Memory 사용 유무에 따른 성능 차이는 거의 발생하지 않음
- picoapi: An opinionated wrapper around FastAPI with custom microservice registration
- shopping-mall basic 예제 + uvicorn
- fastwsgi: An ultra fast WSGI server for Python 3
- HTTPX
- 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
- The Ludic Framework
- Lumi is an nano framework to convert your python functions into a REST API without any extra headache
- microdot: The impossibly small web framework for Python and MicroPython
- mod_wsgi
- What package I should install for 'pcre-devel'?
yum install pcre-devel.x86_64 -yapt-get install libpcre3-dev -y
- mod_fastcgi, mod_wsgi
- What package I should install for 'pcre-devel'?
- panther: Fast & Friendly Python Web Framework
- pook: HTTP traffic mocking and testing made simple in Python
- 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
- 무료 30분 요약강좌 시즌6: PyScript 대시보드 - 인프런 | 강의
- PyScript
- 웹브라우저로 python 실행하기
- Chris Laffra - PyScript - Python in the browser - YouTube
- Mesop
- Mountaineer is a batteries-included web framework for Python and React
- PythonFrameworkGuide: 이 레포지토리는 파이썬 웹 프레임워크들을 정리한 것으로 각각의 프레임워크에 맞는 가이드, 도큐 등등을 소개합니다
- PyWebIO
- Quart documentation
- Reflex
- Robyn - An async Python Framework written in Rust
- 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
- 파이썬 Streamlit 활용 - Short URL에 Qrcode기능을 포함 #python #업무자동화 - YouTube
- 파이썬 스트림릿으로 데이터 대시보드 만들기 | 요즘IT
- 1.뭔신(神)? 머신러닝(Machine Learning) 웹 앱 서비스 만들기 - 스트림릿(Streamlit) 강좌- 단 8줄의 코드로 테슬라 주가 차트 파이썬 웹 앱 만들기 - YouTube
- Streamlit 웹개발 한번에 끝내기! - YouTube
- Furkan M. Torun - Become a Data Storyteller with Streamlit! PyData Prague 2023-11-20 - YouTube
- 9단계 : Streamlit 실전 프로젝트 예제 - YouTube
- 10단계 : Streamlit Web 배포 - YouTube
- 11단계 : Streamlit Web with GCP - YouTube
- Streamlit Tutorials - YouTube
- Streamlit Explained: Python Tutorial for Data Scientists - YouTube
- Simple Pretty Maps That Will Better Your Python Streamlit Skills
- ipyvizzu
- toy_filemover_streamlit: Sometimes the process of editing MP3 tags is the result of an old man's work
- Streamsync | Streamsync
- Taipy, an open-source Python library for building your web applications frontend & backend
- Tornado Web Server
- Transcrypt: Python 3.7 to JavaScript compiler - Lean, fast, open! -
- 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 알아보기
- REST API의 이해와 설계
- 가볍게 시작하는 REST API 개념잡기 - YouTube
- REST API 설계
- 도대체 뭐가 RESTful 이라는건가?
- REST API가 뭔가요?
- RESTful API란 무엇인가요? - RESTful API 설명 - AWS
- 프론트엔드와 백엔드가 소통하는 엔드포인트, 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 아키텍처를 훌륭하게 적용하기 위한 몇 가지 디자인 팁
- HTTP API 디자인 - URI편
- 골치아픈 REST API에서 벗어나 효율적인 모바일 네트워크를 구성하는 방법
- REST의 representation이란 무엇인가
- 웹훅 기능을 테스트 하기 좋은 도구들 소개 RequestBin, ngrok
- REST API Tutorial
- REST API 컨벤션 Top5! 단수, 복수, 네이밍 등의 url 설계를 위한 best practice 알아보기
- REST Security Basics
- 그런 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 요청 헤더
- HTTP Headers for the Responsible Developer • Stefan Judis • GOTO 2019 - YouTube
- iOS 네트워크 통신의 HTTP Accept-Encoding 헤더 이해하기 | by whitelips | a day of a programmer | Nov, 2024 | Medium
- REST and long-running jobs
- JSON Server - Get a full fake REST API with zero coding in less than 30 seconds (seriously)
- 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
- API 설계·개발·시험 돕는다 '무료 툴 13종'
- Richardson Maturity Model - 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
- 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
- REST test test...
- 10 REST API BEST PRACTICES. 1. Use descriptive and meaningful… | by Abhishek Singh | Javarevisited | Medium
- REST API Design Best Practices. “Application Programming Interface,” or… | by Dr Milan Milanović | Dec, 2023 | Medium
- GET, POST, PUT, DELETE… A list of common HTTP “verbs” in one diagram
- Rest API Authentication Methods
- 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
- hug - the fastest and most modern way to create APIs on Python3
- grest: Build REST APIs with Neo4j and Flask, as quickly as possible!
- 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 디렉터리 인덱싱 및 상위 디렉터리 접근 제한 - 넷마블 기술 블로그
- 여기보기 WAS의 정보는 개인정보 다루듯이 보호하라 - 넷마블 기술 블로그
- 웹 서버 개발의 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
- WireQuery is a full-stack session replay tool. Using WireQuery, you can see how a user experiences an issue through a video-like frontend recording. Combined with an overview of the network calls to the backend (including network calls further upstream and their actual payload), you get a holistic overview of how an issue came into existence
- 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
- A Deep Dive Into SVG Path Commands
- practice - CANVAS / SVG 책 집필기
- svg-hush: Make it safe to serve untrusted SVG files
- 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
- 10분 테코톡 헤다의 프론트엔드 테스트 종류 - YouTube
- replay The Time Travel Debugger for Web Development
- 실전 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
- 성능 테스트의 중요성과 목적 그리고 효과
- ‘이거 어디까지 올라가는 거예요?’ — 성능 테스트 환경 구축기 | by Ian | Mar, 2024 | 레몬베이스 팀블로그 | 레몬베이스 팀블로그
- 성과관리 서비스를 만드는 레몬베이스에서 서비스가 커짐에 따라 서비스의 성능을 확인하기 위해 성능 테스트 환경을 구축한 과정
- 여러 테스트 중 Stress Test가 가장 필요하다고 결정
- Locust와 k6 중에서 k6 선택
- GitHub Actions를 사용해서 테스트 환경 작성
- Grafana 대시보드로 결과를 확인할 수 있게 연동
- 성능 테스트 후 병목이 되는 부분을 확인하고 이 부분까지 개선해서 성능 향상
- Wonderwall 은 부하 테스트를 어떻게 진행했을까? | AWS 기술 블로그
- Artillery.io | Load & Smoke Testing
- Node.js 기반, 스트레스 테스트, 성능 테스트
- 분산 기반으로 보다 확장성 있는 노드 시스템을 개발하다보면 자의적이던 타의적이던 성능검증 필요
- 노드기반, Webpage, RESTful API, WebSocket(Socket.io) 스트레스 성능테스트, 시나리오기반 테스트
- yml과 명령어기반으로 손쉽게 테스트, 보고서까지 빠르게 출력 가능
- 분산(로드밸러서, nginx), 멀티 코어 클러스터링(pm2), 환경에서의 시스템 가용성 테스트가 필요하다면 유용
- 사전예약 서버 프로파일링으로 서버 병목찾아 개선하기
- 우분투 환경에서 Node.js 앱 성능/가용성 테스트하기 - 강창훈 | 2023. 3. 25. 정기총회 - Speaker Deck
- 네이버 통합 검색의 웹 성능 - 데이터 수집과 시각화
- 네이버 통합 검색의 웹 성능 - 모니터링과 성능 개선
- autocannon: fast HTTP/1.1 benchmarking tool written in Node.js
- 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
- Rafał Piotrowski - Load Testing Made Easy with Gatling - YouTube
- JMeter Apache JMeter - Apache 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
- Practical Performance Analysis by Simone Bordet - YouTube Jetty, JMeter만이 아니라 전반적인 load test/performance JVM tuning등의 이야기
- VidiGo Practical Performance Analysis by Simone Bordet
- Simone Bordet의 실제 성능 분석 | 완벽한 영상요약, 릴리스에이아이 | Lilys AI
- Jetty는 29년 된 오픈소스 프로젝트
- 초기엔 issue tracking tool이었으나 나중에 웹 서버로 발전하여 현재는 Java 분야에서 가장 많이 사용하는 서비스 중 하나
- 최근 출시된 Jetty 버전 12는 기존 서버 엔진을 재작성한 새로운 업그레이드
- 'Jetty 12'에서는 Java X 서블릿 또는 REST를 포함한 이전 기술과 함께 Jakarta EE 및 최신 E10 애플리케이션도 실행 가능
- 웹 어플리케이션의 성능을 측정할 때, 올바른 질문 필요
- 성능을 재는 이유와 최종 목표를 정확히 이해해야 하며, 성능 '그 자체'만 고려하는 것이 아니라 필요한 기능 및 대응 전략 고려 필요
- 로드 테스트를 통해 웹 어플리케이션의 성능을 평가하고, 클라이언트의 한계를 고려해야 실제 서버 성능을 파악 가능
- 서버가 클라이언트의 요청을 대기하거나 대기하는 경우가 훨씬 많으며, 실제로 클라이언트가 제한요소가 될 가능성 존재
- 로드 테스팅에서 Steady State와 Limit Load 테스팅 중요
- Steady State는 정상 부하 테스팅을 의미하며, 시스템이 정상적으로 작동할 때의 부하를 테스트
- 한편, Limit Load 테스팅은 자원 한계치를 확인하기 위해 CPU나 네트워크, 힙 메모리, 애플리케이션 리소스 등을 포화시키는 것이 목적
- 예를 들어, CPU를 100%로 올리거나 네트워크를 다운로드하거나 업로드하면서 리소스 한계를 테스트 가능
- 이를 통해 데이터베이스의 부하 감당 여부 등을 확인 가능
- 서로 다른 메트릭과 데이터를 제공하여, '스테디 상태'는 용량 계획과 생산에 필요한 기기 수를 결정하는 데 매우 유용
- 반면, 한도 부하 테스트는 자원 포화 시의 행동을 알려주며, 한계 부하 테스트를 통해 시스템이 정상 속도로 복구할 수 있는지 확인 가능
- 한계 부하 테스트는 부하를 추가하고 제거한 후 시스템이 회복할 수 있는지 파악하는 등, 시스템의 동작에 관한 중요 정보를 제공
- 시스템 세팅 첫 단계는 서버와 로더, 그리고 프로브(Probe) 등 하드웨어 구성 정의
- 클라이언트는 여러 포트를 사용하여 접속 필요, 이를 위해 에펨럴 포트 범위를 설정 필요
- CPU 주파수 조정과 JVM 튜닝 역시 중요하며, 저지연을 위해 Generational ZGC를 권장
- 로드 테스트 시 사용한 JVM과 배포용 JVM은 동일해야하며, 가비지 컬렉터 선택도 중요, Generational ZGC 권장. 그러나 다양한 테스트 필요
- Bagnone safe points는 프로필링 시 매우 유용한 특별한 스위치로, 프로필링 시 매우 중요하며 추가 비용이 소요
- 로드 테스트 시나리오 생성이 중요, 푸는 것은 기존 자바 가상 머신을 튜닝하고 운영 체제를 조정한 후에 형성
- 로드 테스트를 위해 다양한 도구 사용 가능, Scala로 작성된 Gatling, Red Hat의 hyperfoil, Java로 작성된 JMeter, C로 작성된 Wrk2 등
- 로드 테스트에는 Gatling이 매우 인기가 많지만, hyperfoil을 추천하는 것도 있으며, 회사에 따라 가장 적합한 도구를 선택 필요
- 어플리케이션 내부의 일련의 흐름을 테스트하거나 간단한 테스트를 수행하고 싶다면 로드 테스트 도구를 조사해 적합한 도구를 선택 필요
- JRY는 고객과 이슈를 접하는 사람들에게 '서버는 더 많은 작업을 수행할 수 있으며 클라이언트의 제한이 있음'이라는 가장 일반적인 답변을 제공
- JRY 서버는 4개의 로더 사용, 각 로더는 초당 60,000개 요청 처리
- 이로써 서버는 초당 240,000개의 요청 처리
- 이런 환경에서도 JRY 서버는 CPU의 약 10%만 사용
- 시스템을 설정한 후 기준선을 설정하는 것이 중요, 시스템이 예상대로 작동하는지 확인 중요
- 이후 로드 테스트를 실행, 클라이언트와 서버 양쪽에서 모두 기록하는 것이 필요
- 브랜든 그레그의 도입된 USE 방법론을 사용 제안, 이를 이용하여 기록된 자원 사용, 포화도, 오류 등 확인
- 이 방법론은 자원 사용, 포화도, 그리고 오류를 나타내며, 이를 역순으로 사용하는 것이 가장 효과적
- JRY 서버는 4개의 로더 사용, 각 로더는 초당 60,000개 요청 처리
- USE 방법 사용 시, 에러를 먼저 찾아야 한다
- 200s 응답을 받는지 확인하는 것이 중요, 예를 들어 URI를 잘못 입력하여 404 에러를 빠르게 받아내는 경우도 존재
- 에러 확인 외에도 자원 포화 체크 필요, 모니터링 지표의 평균화된 결과에 주의, 자원의 사용율(Utilization)과 포화(Saturation)의 차이 이해 필요
- 예를 들어, CPU 사용율이 70%인 경우, 해당 시간 동안 CPU가 70% 정도 바쁘게 일했다는 것을 의미
- 로드 테스트 후에는 성능을 개선하기 위해 프로파일링 작업 필요, 비동기 방식의 프로파일러를 활용
- 비동기 방식의 프로파일러를 활용하지 않으면 결과가 부정확, Async Profiler와 같은 특수 호출 고려 필요
- 프로파일링을 통해 성능 문제를 해결하고, 불평한 점을 개선하여 반복하는 것이 성능 개선의 일반적인 사이클
- 프로파일링을 통해 서버에 연결하고 로드 테스트를 실행하여 정보를 수집, 결과는 플레임 그래프로 표시. 이를 통해 문제를 식별하고 해결 가능
- JTI 프로젝트의 부하 테스트 진행 중에 120,000 요청/초의 쓰레드 문제가 발생
- 클라이언트의 요청량이 변동적이고 예상과 달랐으나 CPU 사용률은 정상적임을 확인
- 해결책은 2개의 쓰레드를 사용하는 것으로, CPU 활용과 성능을 향상
- 한 주에 걸쳐 쓰레드 구성 모드의 차이를 테스트하여 성능 측정 및 문제 해결에 집중
- API 디자인에서 성능을 우선시하여, 설계가 더 직관적이고 빠른 버전을 선택
- 로드 테스팅은 어렵지만, 도구를 활용하여 Baseline 설정, 로드 실행, 프로파일링을 수행이 핵심
- 결과를 분석할 때, 자원 포화된 부분을 찾아 분석 방법을 이용해 빠르거나 더 나은 성능을 위해 적용 필요
- 분석 중에는 문제 해결을 위한 인내와 자신의 실수를 스스로 인정하며 적절히 대응 필요
- 설치 단계에서 권장 구성 중 하나를 빼먹어 성능 저하를 겪는 등 실수를 방지하고 최적화를 위한 노력 필요
- Jetty는 29년 된 오픈소스 프로젝트
- Apache JMeter란 무엇인가? (+ 사용 방법 with 성능 및 부하 테스트)
- k6: A modern load testing tool, using Go and JavaScript - https://k6.io
- Load testing for engineering teams | Grafana k6
- 서버 부하 테스트 도구 k6 그리고 시각화 : 네이버 블로그
- Beginner’s Guide to Load Testing with 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
- Spring Boot로 K6 & Grafana를 활용한 부하테스트 해보기
- 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 성능 테스트 도구 소개 - Yun Blog | 기술 블로그
- Locust 성능 테스트 도구 소개 Part 2 - Yun Blog | 기술 블로그
- locust-k8s: Locust on k8s example for scalable load tests
- MeasureThat.net
- 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 살펴보기
- nGrinder 성능테스트 사용법 및 테스트 예제
- Siege - an http load testing and benchmarking utility
- vegeta - HTTP load testing tool and library. It's over 9000!
- 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
- 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
- React reportWebVitals
- 리액트 빌드 최적화 (feat. ChatGPT) - Byeongjin Jason Kang
- 성능 테스트의 중요성과 목적 그리고 효과
- Shopping for speed on eBay.com
- 성능 개선을 위해 어떤 항목들에 집중해야 하는지를 eBay의 사례
- 웹 성능은 온라인 비즈니스, 특히 온라인 쇼핑에서 매출에 직접적인 영향을 미치는 중요한 영역
- eBay는 2019년부터 성능 개선의 가치를 인식하기 시작, 실제로 검색 로딩 시간이 100ms 향상될 때마다 장바구니 추가 횟수가 0.5% 증가했다고 공개
- SpeedCurve | The psychology of site speed and human happiness
- A Survey and Taxonomy of Latency Compensation Techniques for Network Computer Games | ACM Computing Surveys
- 멀티-플레이어 게임 서버와 레이턴시 보상 테크닉 | by scalalang2 | 취미로 논문 읽는 그룹 | Medium
- 멀티-플레이어 게임 서버와 레이턴시 보상 테크닉 | GeekNews 게임에 대한 이야기이지만 여러가지 관점에서 생각을 해볼만하게 하는 좋은 글
- The 202402 dataset is live
- Google Chrome에서 실제 사용자가 경험하는 웹사이트 성능을 측정한 데이터 세트인 CrUX의 2024년 2월 데이터가 BigQuery에 등록, 직접 조회 가능
- LCP가 good을 경험한 사용자는 61.3%
- FID가 good을 경험한 사용자는 96.2%
- CLS가 good을 경험한 사용자는 76.6%
- LCP, CLS, FID 모두 good을 경험한 사용자는 48.8%
- INP가 good을 경험한 사용자는 80.6%
- LCP, CLS, INP가 모두 good을 경험한 사용자는 45.6%
- Google Chrome에서 실제 사용자가 경험하는 웹사이트 성능을 측정한 데이터 세트인 CrUX의 2024년 2월 데이터가 BigQuery에 등록, 직접 조회 가능
- Does Your Startup Website Pass The First Impression Test? | Design Review - YouTube
- New Industry Benchmarks for Mobile Page Speed - Think With Google
- 인포그랩 공식 홈페이지 성능 최적화 후기 :\ 초기 로딩, 렌더링 속도 단축 비결 | InfoGrab, DevOps 전문 기술 기업 | 인포그랩 | GitLab기반 DevSecOps 구축,컨설팅,교육,기술지원 서비스 제공
- ab - 아파치 웹서버 성능검사 도구
- Apdex Score 그것이 알고싶다.. 개요 | by Jeongsk | 원티드 제품 팀블로그 | Mar, 2021 | Medium
- cryload - HTTP benchmarking tool written in Crystal
- Killed by LLM
- Lighthouse
- web.dev/learn/#lighthouse
- Learn Performance | web.dev
- Introducing Learn Performance | Articles | web.dev
- 웹 성능에 관심이 있는 사용자를 대상으로 웹페이지를 만든다는 것의 기술적 세부 사항을 설명하는 학습 코스인 Learn Performance의 초기 버전 공개
- Introducing Learn Performance | Articles | web.dev
- Learn Performance | web.dev
- Lighthouse와 ChatOps 인터페이스를 이용한 웹사이트 성능 추적하기 | by André Tito Vasconcelos | 원티드 제품 팀블로그 | Mar, 2021 | Medium
- 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 자동화 스크립트
- web.dev/learn/#lighthouse
- PageSpeed Insights
- PageSpeed Insights
- What's new in PageSpeed Insights
- 최근 PageSpeed Insights의 UI를 개편하면서 개선한 내용 설명
- 성능의 필드 데이터와 실험실 데이터를 명확히 이해할 수 있도록 구분해서 보여주고 모바일/데스크톱의 성능을 구분해서 보여주는 UI 등이 변경
- Speedometer 3
- Speedometer 3.0: The Best Way Yet to Measure Browser Performance | WebKit
- Apple WebKit 팀이 Blink, Gecko 등의 주요 브라우저 엔진 개발자들과 협업해서 브라우저 성능을 측정하는 Speedometer 3.0 공개
- Speedometer는 다른 벤치마크 도구와는 달리 TodoMVC 앱을 구동해서 실제 웹 앱이 동작하는 것을 테스트 가능
- 더 복잡한 앱과 다양한 콘텐츠, 차트, 코드 에디터, WYSIWIG 에디터를 테스트에 추가해서 브라우저 성능을 제대로 측정 가능
- Speedometer 3.0: The Best Way Yet to Measure Browser Performance | WebKit
- the-benchmarker/web-frameworks: Which is the fastest web framework?
- ttvc: Measure Visually Complete metrics in real time
- webhint, the hinting engine for web best practices
- Web Vitals
- Using the Web Vitals extension to debug Core Web Vitals issues
- Web Vitals 익스텐션이 업데이트되어 콘솔에서 JSON으로 출력하던 정보를 LCP, CLS, FID, INP로 나누어서 출력해서 문제를 더 쉽게 파악할 수 있도록 개선
- 네이버 통합 검색의 웹 성능 - 데이터 수집과 시각화
- Using the Web Vitals extension to debug Core Web Vitals issues
- wrk - a HTTP benchmarking tool
- installation
make; worked on Redhat 6.6/7.2 - Script Lua to work better with wrk
- installation
- wrk2 - a HTTP benchmarking tool based mostly on wrk
- installation
make; worked on Redhat 6.6/7.2
- installation
- 톰캣 #09 쓰레드
- WAS와 웹서버의 차이 – 톰캣과 아파치를 구별하지 못하는 사람을 위해
- WEB과 WAS의 차이점
- 웹 서버와 WAS(Web Application Server) | 요즘IT
- 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- Explained
- 웹어셈블리 | MDN
- 초보 개발자를 위한 웹 신기술 WebAssembly 설명 - YouTube
- 웹 어셈블리 (WASM) - 자바스크립트의 대체제? - YouTube
- 웹 어셈블리는 자바스크립트의 무덤일까? - 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 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
- What is WebAssembly and where did it come from?
- 어셈블리 언어의 성능은 얻으면서 아키텍처 종속성이 없도록 하기 위한 WebAssembly의 개념을 간단하게 설명
- 첫 단계는 asm.js
- asm.js의 AOT 컴파일 전략 사용 가능
- 정적 타입 언어는 LLVM 기반의 Emscripten로 변환
- WebAssembly는 저수준 어셈블리 유사 언어로 C/C++, Rust 등의 언어를 웹에서 실행할 수 있게 컴파일 타겟 제공
- 모듈식 시스템 인터페이스인 WASI로 브라우저가 아닌 환경에서도 실행 가능
- 2015년 발표된 WebAssembly는 2019년 W3C recommendation
- WebAssembly는 textual와 binary 두 가지 표현이 있는데
- textual 표현은 S-expressions에 기반, .wat 확장자를 사용, 텍스트이므로 직접 수정 가능
- binary 표현은 .wasm 표현 사용, wat2wasm 같은 도구로 textual 표현을 binary 표현으로 변환 가능
- 이 두 표현은 사람에게 친화적이지 않으므로 Emscripten 같은 컴파일러를 사용하는 방법 설명
- Introducing the Wasm landscape | Cloud Native Computing Foundation
- 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
- practice - WASM을 이용한 NES 에뮬레이터 만들기
- WASI: WebAssembly System Interface
- WASI: a New Kind of System Interface
- 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
- WebAssembly에 주목해야 하는 이유 정리
- JavaScript vs WebAssembly easy benchmark
- An introduction to WebAssembly - YouTube
- WebAssembly in my Browser Desktop Environment - Wasm Builders
- 웹어셈블리 기반의 유력 언어 프로젝트 13종 - ITWorld Korea
- 웹어셈블리(Wasm)가 클라우드 컴퓨팅의 미래인 이유 - ITWorld Korea
- 웹어셈블리가 컨테이너를 대체할 수 있을까? - ITWorld Korea
- WebContainers are now supported in Firefox on desktop and Android
- Firefox 데스크탑 & 안드로이드에서 WebContainers 지원 시작 | GeekNews
- WebAssembly: The Path to Components - YouTube
- WASM Components: The Interchangeable Parts of Software - YouTube
- What is a WebAssembly Component (and Why?) - YouTube
- Wasm Components for Every Language - Kyle Brown, SingleStore - 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으로 어떤 시도를 하는지 살펴볼 수 있다
- 브라우저 밖에서 자바스크립트를 실행하려면
- 웹어셈블리에서 자바스크립트를 빠르게 실행하는 방법 | bohyeon.dev
- WASM을 이용한 NES 에뮬레이터 만들기 · Present
- 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
- What Can't WebAssembly Do - YouTube
- "What can't WebAssembly do?" - Katie Bell (PyCon AU 2023) - YouTube
- Charting a Wasm Landscape - YouTube
- Using WebAssembly Now: It's Easier Than You Think - YouTube
- The State of WebAssembly 2023
- Webassembly beyond the browser by Mete Atamel, Google - YouTube
- Evolution of Wasm: Past, Present, Future - YouTube
- WASM is Awesome! Explained with Examples | Ft Docker - YouTube
- Wasm GC: What Exactly Is It (and Why I Should Care) - Ivan Mikushin, VMware - YouTube
- SQLite in Wasm: A Glimpse into the Future of Shared Libraries - Carl Sverre, Amplify Partners - YouTube
- Wasm Is Becoming the Runtime for LLMs - Michael Yuan, Second State - YouTube
- What Actually Is WebAssembly: Taking a Look Under the Hood - YouTube
- Wasm: What is Universal Compute Good For? - YouTube
- Don't Trust Anything! Real-world Uses For WebAssembly • Katie Bell • YOW! 2023 - YouTube
- 웹은 어떻게 소프트웨어를 먹어치울 수 있는가 WebGPU, WebAssembly 및 게임의 가능성
- WebAssembly in Production: A Compiler in a Web Page • Brian Carroll • GOTO 2023 - YouTube
- VidiGo WebAssembly in Production: A Compiler in a Web Pag
- 웹어셈블리(WebAssembly) 소개 및 기본 개념
- 브라이언 캐롤(brian carroll)이 웹어셈블리에 대해 소개
- 웹어셈블리는 바이너리 코드 형식, 브라우저에서 실행, 자바스크립트 외의 다른 옵션 제공
- 이번 강연에서는 웹어셈블리 앱을 실제로 운영 환경에 배포하는 과정과 그로 인한 이점 및 도전 과제에 대해 이야기
- 새 프로그래밍 언어 Rok과 REPL 도구
- Rok은 새로운 프로그래밍 언어, 가비지 컬렉션 언어보다 빠르고 c/c++/rust보다는 조금 느린 것을 목표
- Rok repl은 사용자가 명령줄에 코드를 입력하면 실행 결과를 바로 보여주는 도구
- Webassembly를 사용하여 repl을 포팅하는 것은 신규 사용자에게 유용, 백엔드 없이 정적 사이트를 만들 수 있는 장점
- 개발 도구의 예시와 WebAssembly의 활용
- 개발자 도구 예시를 통해 인터프리터 언어와 컴파일 언어 간의 차이점 설명
- Compiler explorer와 같은 웹사이트는 사용자가 입력한 코드를 서버로 보내 컴파일하고 결과 출력
- Rok repl은 모든 처리 과정을 프론트엔드에서 webassembly를 통해 처리, 네트워크 요청 없이 실행 결과 확인 가능
- WebAssembly 도입으로 인한 도전 과제 해결
- Webassembly 사용으로 서버 관리 필요성 감소 및 트래픽 급증 시 스케일링 문제 해결 가능성 탐색
- Repl 구현 시 컴파일 언어와 인터프리터 언어 간 차이점 극복 방법과 webassembly의 한계 극복 방법 모색
- 다운로드 크기 축소와 webassembly의 제한 사항(사용자 입력 수신 불가 등) 해결 방법 탐색 필요성 지적
- 컴파일러 최적화와 개발 환경의 이해
- 컴파일러는 생산과 개발 두 가지 시나리오를 위해 별도의 코드 경로 존재
- 생산 시나리오에서는 최적화를 통해 실행 시간 단축이 중요
- 개발 시나리오에서는 컴파일 시간을 단축하여 빠른 반복 작업이 가능하도록 하는 것이 중요
- 웹 REPL을 위한 컴파일러 구조 조정
- 웹 repl 사용 사례에 맞게 개발 코드 경로 사용
- 불필요한 기능을 제거하여 웹어셈블리 크기 최적화
- 새로운 진입점을 생성하여 필요한 패키지만 포함
- 웹어셈블리의 한계와 자바스크립트 연동 필요성
- 웹어셈블리는 숫자만 이해하고 사용자 입력이나 html 페이지 수정 등은 불가능
- 웹 api에 접근하기 위해서는 자바스크립트와 연동 필수적
- 데이터 변환 외의 작업(예 io 작업)을 수행하기 위해서는 자바스크립트 필요
- 웹어셈블리와 자바스크립트의 상호작용
- 웹어셈블리 함수를 호출하기 위해 메모리에 바이트를 작성하고 시작 인덱스와 길이 지정
- 웹어셈블리는 html 페이지를 직접 수정할 수 없으므로 출력을 표시하기 위해 자바스크립트로 이동 필요
- 문자열을 웹어셈블리에서 자바스크립트로 반환하기 위해 공유 메모리와 포인터, 길이 사용
- 웹어셈블리 제한과 사용자 코드 평가
- 웹어셈블리 내부에서 다른 웹어셈블리를 실행할 수 없기 때문에 사용자 코드를 평가 제한
- 컴파일러는 문자열을 바이트 배열로 변환하고 이를 실행 가능한 웹어셈블리 인스턴스로 작성
- 생성된 웹어셈블리 인스턴스는 사용자 코드를 실행하고 결과를 문자열로 변환하여 표시
- 비동기 처리와 콜백 함수의 복잡성
- 비동기 함수는 호출 스택 전체에서 비동기가 되도록 요구, 이는 rust와 자바스크립트 간의 상호작용을 복잡하게
- 결과 크기가 미리 알려지지 않아 컴파일러 모듈과 사용자 코드 모듈 간에 메모리를 복사하는 추가 단계 필요
- Wasm bindgen과 같은 코드 생성 도구는 rust futures와 자바스크립트 promises 사이의 연결
- 웹어셈블리(WebAssembly) 소개 및 기본 개념
- 프로덕션 환경에서의 웹어셈블리: 웹 페이지의 컴파일러 - Brian Carroll - GOTO 2023 | 완벽한 영상요약, 릴리스에이아이 | Lilys AI
-
- 웹어셈블리의 프로덕션에서 컴파일러를 웹페이지에서 사용하기
- 웹어셈블리는 브라우저에서 실행되는 이진 코드 형식, 자바스크립트 외에도 코드를 실행하는 선택지로 사용
- Rock라는 오픈소스 프로젝트의 일부로서 언어 개발자들이 웹어셈블리로 포팅하여 실제 사이트 운영 및 정적 사이트 제작, 이렇게 함으로써 다양한 언어들이 웹어셈블리로 컴파일되고 사용
- 웹어셈블리를 사용하면 입문자에게 좋은 대안, 언어를 확인하고 사용해볼 수 있어 유용, 특히 웹어셈블리는 정적 사이트를 만드는 것을 가능하게
- 여러 고급 프로그래밍 언어들이 웹어셈블리로 컴파일되어 실제 사이트에서 사용되고 있음을 확인 가능
-
- 컴파일러 익스플로러 툴과 웹어셈블리를 통한 웹 서비스 아키텍처 비교
- 컴파일러 익스플로러는 C++ 언어 예제 사용, 코드 입력 후 결과물 출력까지 웹서버를 통해 동작하는 프로세스 시연
- 웹어셈블리를 활용한 웹서비스 아키텍처는 클라이언트 측에서 코드를 컴파일하고 실행 결과를 즉시 웹페이지에 표시하는 방식, 서버를 거치지 않아 효율적
- 웹어셈블리를 통해 정적 파일 서버에서 웹사이트 제공, 사용자 입력 코드를 동일 페이지 내의 웹어셈블리 컴파일러로 보내어 결과값을 웹페이지에 표시
- 3.️ 컴파일러에서 REPL 만들기: 언어 차이와 도전
- 컴파일러로부터 REPL을 구축하는 방법은 컴파일된 언어와 해석된 언어간의 차이에 달려있음
- 일부 컴파일된 언어는 사용자가 한 줄씩 입력하기 때문에 전체 프로그램을 다루는 'Compiler Explorer' 시스템이 보다 용이
- REPL을 원하는 경우, 사용자가 현재 세션에서 입력한 모든 텍스트 줄을 가져와 'main' 함수로 묶고, 마지막 입력 'X Plus Y'를 반환하는 식으로 REPL 구축
- 다만 도전에는 다운로드 크기, 바이너리 크기, 그리고 WebAssembly의 제약. 예를 들어, WebAssembly는 사용자 입력을 듣지 못한다는 한계 존재
-
- 컴파일러의 프로덕션 vs. 개발 시나리오: 성능 중심 vs. 수정 및 디버깅 중심
- 프로덕션 시나리오에서는 최종 바이너리의 러타임이 중요, 컴파일 타임은 오래 걸려도 괜찮음
- 개발 시나리오에서는 빠른 컴파일이 필요하여 최적화를 줄이는 경향, 버그 발견 및 수정에 초점
- 컴파일러는 이 두 시나리오에 대한 구조를 가지며, REPL 사용 사례에는 개발 쪽이 더 유리
- 페이지 크기를 줄이기 위해 컴파일러의 대체 진입점을 만들어, CLI 패키지를 통해 명령줄 옵션을 해석하고 다른 패키지를 통합
-
- Web REPL을 위한 웹 어셈블리 최적화
- Web REPL을 위해 새로운 진입점 생성
- Web 어셈블리 이진 파일 작성 시, CLI(명령줄 인터페이스)를 무시하고 Web REPL 시나리오에 필요한 내부 패키지 및 외부 패키지만 가져옴
- 웹 어셈블리만 사용하여 최적화된 크기 구축. Brotli 압축 사용으로 2MB로 크기 축소 가능
- WebAssembly의 제약 사항으로 유저 입력 감지, HTML 페이지 수정 불가 등 제약 존재
- 웹 API가 브라우저에 내장된 JavaScript 함수들, WebAssembly는 이에 액세스할 수 없어 언어 제약 존재
-
- 웹 어셈블리 및 자바스크립트 기능 설명과 그 연결 방법에 대한 설명
- 웹 API는 입력 받기, 결과 표시 등 용도로 활용
- 입력 받는 것은 데이터 전환 및 WebAssembly 생성을 위해 필요, WebAssembly 평가도 필요
- 웹 어셈블리 함수(entrypoint)는 자바스크립트에서 호출, 한편 WebAssembly는 JavaScript 숫자만 인식 가능
-
- 웹어셈블리와 자바스크립트의 상호작용
- 웹어셈블리는 자바스크립트 엔진의 즉시 컴파일을 활용하여 최적화된 형태로 최적 컴파일
- 웹어셈블리는 자바스크립트 함수처럼 보이며, 양쪽은 서로 번호 형식의 인자 및 반환 값을 사용하여 함수 호출 수행
- 자바스크립트는 웹어셈블리의 메모리를 볼 수 있고 숫자 배열로 인식하여 읽고 쓸 수 있으나, 웹어셈블리는 자바스크립트 객체를 볼 수 없음
- 문자열 전달 예시를 들어, 자바스크립트에서 웹어셈블리로 문자열을 전달할 때 UTF-8으로 인코딩하여 메모리에 저장, 실제 웹어셈블리 함수를 호출
-
- 웹어셈블리를 통한 문자열 반환과 코드 생성 방법
- 웹어셈블리는 HTML 페이지를 수정할 수 없기 때문에 JavaScript 측으로 출력 부분을 옮겨야 함
- 입력 변화에 따른 함수로 텍스트 처리하며 내부 HTML에 결과를 표시하는 방식 확인
- 문자열 반환을 위해 입력 포인터와 길이를 활용하여 JavaScript 문자열을 만들고 반환하는 과정 설명
- 이때 Wasm Bindgen 같은 도구를 활용하여 번거로운 과정 대신에 코드를 생성함으로써 작업 용이
-
- 웹어셈블리 사용: 사용자 코드 평가와 실행
- 웹어셈블리로 사용자 코드 평가는 인스턴스화와 실행 단계로 구분
- 우선, '인스턴스화'는 숫자로 이루어진 바이트 배열을 실행 가능한 웹어셈블리 인스턴스로 변환하는 작업 의미
- '인스턴스화' 후에는 웹어셈블리 인스턴스가 생성되어 JavaScript에서 호출할 수 있는 웹어셈블리 함수를 포함
- 이후 JavaScript 어플리케이션은 컴파일러 웹어셈블리를 호출, 사용자 코드를 실행하여 결과 반환. 이는 여러 단계를 거쳐 진행
-
- 웹어셈블리를 이용한 아키텍처의 이점과 도구들
- 터미널 CLI, Repl, 웹 Repl 간에 공유된 코드가 있었으며, 이들 간의 비동기 처리를 위해 함수 분리
- Rust와 JavaScript 간 비동기 상호작용은 wasm-bindgen 라이브러리로 용이, Rust의 Futures와 JavaScript의 promises를 연결하는 데 도움
- JS에서 사용자 코드 실행 결과를 받을 때 결과의 크기를 미리 알 수 없어 별도 콜백 함수를 이용해 컴파일러로 결과 전송하는 작업이 복잡
- 웹어셈블리를 사용하여 웹 페이지 용량을 감소, 사용하지 않는 서브시스템 제거 등 아키텍처적 이점, JavaScript를 통해 기능을 확장하는 중요성 강조
-
- VidiGo WebAssembly in Production: A Compiler in a Web Pag
- Understand the Next Phase of Web Development - Steve Sanderson - NDC London 2024 - YouTube
- WebAssembly at Google by Thomas Steiner & Thomas Nattestadt @ Wasm I/O 2024 - YouTube
- How we sped up Notion in the browser with WASM SQLite
- Notion이 WASM SQLite로 브라우저에서의 속도를 향상시킨 방법 | GeekNews
- Notion은 자사의 앱에서 3년 전 SQLite로 클라이언트 캐싱을 해서 속도 개선, 이를 WASM SQLite로 웹 브라우저에 적용, 웹에서 SQLite 적용시
- WASM SQLite가 사이트가 사용자 기기 파일을 read write이 가능하게 하는 API OPFS(Origin Private File System)를 웹 워커에서 사용하도록 구성
- Origin private file system - Web APIs | MDN
- 이를 적용하려고 하자 OPFS가 크로스 오리진이 격리 요구
- 노션의 특성상 이렇게 하면 서드파티 기능에 큰 문제 발생
- 앱과 달리 브라우저에서는 여러 탭을 열기 때문에, 데이터베이스에 여러 탭이 동시에 접근하면서 데이터가 손상되는 문제 발생
- 이 문제를 해결하기 위해 Shared Worker를 만들어서 여러 탭에서 노션을 열어도 활성화된 탭에서만 데이터베이스에 접근할 수 있도록 구현
- AssemblyScript
- backgroundremover: Background Remover lets you Remove Background from images and video using AI with a simple command line interface that is free and open source.
- binaryen: Optimizer and compiler/toolchain library for WebAssembly
- componentize-js
- ComponentizeJS는 실험적 도구로 임베드 된 SpiderMonkey JS 엔진을 사용해, JavaScript 코드를 WebAssembly Component로 생성
- componentize-py
- container2wasm: Container to WASM converter
- 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
- ffmpeg.js - FFmpeg for browser and node, powered by WebAssembly
- Hippo
- howto-wasm-minimal: How to create minimal wasm module
- jco: JavaScript tooling for working with WebAssembly Components
- 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
- Pyodide Python with the scientific stack, compiled to WebAssembly
- remove-bg: Remove background directly in your browser, powered by WebGPU
- Spin Introducing Spin | Spin Documentation
- 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로 실행
- WebAssembly serverless functions in AWS Lambda | Cloud Native Computing Foundation
- Wasmer - The Universal WebAssembly Runtime
- 서버측 웹어셈블리 런타임 ‘와스머’, GA 버전 공개 - CIO Korea
- Wasmer 1.0. By leveraging Wasm for software… | by Syrus Akbary | Wasmer | Jan, 2021 | Medium
- Running PHP blazingly fast at the Edge with WebAssembly · Blog · Wasmer
- Wasmer 5.0 릴리즈 | GeekNews
- 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
- webassembly.sh
- WebVM
- workerd: The JavaScript / Wasm runtime that powers Cloudflare Workers
- Introducing workerd: the Open Source Workers runtime
- Cloudflare에서 JavaScript/Wasm 런타임인 workerd의 첫 베타를 오픈소스로 공개
- workerd는 Cloudflare Workers와 대부분의 코드를 같이 사용하지만 다른 환경에서도 동작할 수 있도록 설계
- workerd는 셀프 호스트 애플리케이션에 사용될 것이고 주로 웹서버가 될 것이며 워커의 로컬 테스트에도 사용 가능
- You can now use WebGPU in Cloudflare Workers
- Cloudflare Workers에 WebGPU 추가, Workers의 오픈소스 런타임인 workerd가 WebGPU 지원, 로컬에서도 사용 가능
- 이 구현은 Chrome 브라우저처럼 Dawn을 사용해서 Linux, macOS, Windows에서 사용 가능
- Introducing workerd: the Open Source Workers runtime
- Write Your First WASM Module using Rust - YouTube
- JavaScript: Empowered by Rust - YouTube
- Rust_WASM: Rust_WebAssembly_WASM
- Zaplib - Rust와 WASM으로 웹 앱을 가속하는 오픈소스 | GeekNews
- WebSocket Simplified
- 웹소켓을 알아봅시다. - YouTube
- 오늘의 테크용어 : 웹소켓이 뭐냐면 - YouTube
- 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
- 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
- Server-Sent Events: the alternative to WebSockets you should be using - germano.dev
- WebSockets vs. Server-Sent Events | Bits and Pieces
- 웹소켓으로 개발하기 전 알아야 할 것들 | 요즘IT
- 웹소켓 코딩시 꼭 알아야 할 에러 처리 전략 | 웹으로 말하기
- Don't Use Websockets (Until You Try This…) - YouTube
- 채팅앱 만들기 | 웹소켓이란 뭘까?| 풀스택으로 만들어보자 - YouTube
- Pushy to the Limit: Evolving Netflix’s WebSocket proxy for the future | by Netflix Technology Blog | Sep, 2024 | Netflix TechBlog
- How Discord Reduced Websocket Traffic by 40%
- How WebSockets cost us $1M on our AWS bill
- soketi
- WAMP - an open standard WebSocket subprotocol that provides two application messaging patterns in one unified protocol
- WebSocketChatApp2: Chat Application with Redis and Postgres intergration.
- 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