2024-08-12 주간 URL 모음

  • 귀여운 걸 보면 '지구 뿌셔ㅠㅠ 아파트 뽑아ㅠㅠ' 하는 이유
  • "컬럼이 부족해요" - 최고이면서 최악이었던 코드베이스 | GeekNews
  • SVG triangle of compromise (resolved)
    • 요약
      • 웹에서 SVG는 CSS로 스타일을 지정할 수 있고, 캐시 가능하므로 다시 로드할 필요가 없으며, 비례적으로 크기를 조정할 수 있는 세 가지 주요 속성을 가질 수 있습니다.
      • <use> 태그를 사용하여 외부 SVG를 표시하면 스타일 지정, 캐시 가능, 크기 지정이 가능합니다. 여기에는 <symbol> 태그를 사용하여 SVG 파일에 아이콘을 정의하는 것이 포함됩니다.
      • <img> 태그와 함께 SVG를 표시하면 <use>를 사용하는 것과 마찬가지로 스타일 지정, 캐시 가능, 크기 지정이 가능합니다.
      • <svg> 태그를 사용하여 HTML에 직접 SVG를 임베드하면 CSS 및 JavaScript를 통해 완전한 스타일 지정 및 조작이 가능하지만 페이지 전체에 캐싱할 수는 없습니다.
      • <iframe>을 사용하여 SVG를 표시하면 캐시가 가능하다는 이점이 있지만 다른 방법의 직접적인 스타일 지정 기능이 부족합니다.
      • 다른 옵션으로는 두 개의 SVG 파일 간에 호버 상태를 교환하거나, <object> 태그를 사용하거나, SVG 애니메이션에 SMIL을 활용하는 방법 등이 있습니다.
      • <use> 방법은 SVG 파일이 동일한 도메인에서 호스팅되어야 하며 일부 웹 피드 리더에서는 작동하지 않을 수 있습니다.
      • 인라인 SVG는 완전한 CSS 및 자바스크립트 제어가 가능하다는 장점이 있지만 캐시가 불가능하다는 단점이 있습니다.
      • <img> 또는 <use>를 통해 SVG를 참조하면 캐싱이 가능하지만 SVG 내의 개별 요소 스타일링에 몇 가지 제한이 있습니다.
      • SVG 표시 방법의 선택은 스타일 가능성, 캐시 가능성 및 크기와 같은 특정 요구 사항과 장단점에 따라 달라집니다.
  • Perfect Bug Reporting: Write Bug Reports Developers Love
    • 요약
      • 기술적 문제를 요약하는 명확하고 간결하며 구체적인 버그 보고서 제목을 작성하세요.
      • 약어는 보고서의 검색 가능성을 떨어뜨릴 수 있으므로 제목에 약어를 사용하지 마세요.
      • 문제가 있는 특정 기능이나 구성 요소에 초점을 맞춘 제목을 사용하세요.
      • 개발자가 관련 버그 리포트를 쉽게 찾을 수 있도록 제목을 검색 가능하게 만드세요.
      • 재현 단계를 포함하여 버그에 대한 명확하고 자세한 설명을 제공하세요.
      • 개발자가 문제를 디버깅하는 데 도움이 되도록 환경, 브라우저, OS 등 관련 정보를 포함하세요.
      • 문제를 설명하는 데 도움이 되는 스크린샷, 로그 또는 기타 지원 파일을 첨부하세요.
      • 개발자가 요청하는 경우 신속하게 대응하고 추가 세부 정보를 제공하세요.
      • 버그 신고에 대한 후속 조치를 취하여 문제가 해결되었는지 확인합니다.
      • 처리하기 쉽도록 일관된 형식과 템플릿을 사용하여 버그 보고서를 작성하세요.
  • Plain Vanilla
    • 요약
      • 이 문서는 빌드 도구나 프레임워크를 사용하지 않고 편집기, 브라우저, 웹 표준에만 의존하여 웹사이트와 웹 애플리케이션을 구축하는 기술에 대한 개요를 제공합니다.
      • 대상 독자는 초심자가 아닌 HTML, CSS, JavaScript에 대해 이미 잘 이해하고 있는 사람입니다.
      • 최신 웹 개발 프레임워크는 강력한 기능을 제공하지만 복잡성과 유지 관리 요구 사항도 증가합니다.
      • "Plain Vanilla" 접근 방식은 단기적인 편의성과 단순성 및 낮은 유지 관리와 같은 장기적인 이점을 교환합니다.
      • 이 접근 방식은 최신 브라우저 환경의 뛰어난 웹 표준 지원 덕분에 가능합니다.
      • 저자는 인기 있는 프레임워크를 사용해보고 장단점을 이해하기 전까지는 Plain Vanilla 접근 방식을 사용하지 말 것을 경고합니다.
      • 브라우저 네이티브 도구에 더 익숙해지거나 유지 관리가 필요 없고 안정성이 높으며 장기적으로 사용할 수 있는 사이트/앱을 구축하려는 경우 Plain Vanilla 접근 방식을 사용하는 것이 좋습니다.
  • Thread by @0xTib3rius on Thread Reader App – Thread Reader App
    • 요약
      • JSON 웹 토큰(JWT)을 저장하는 100% 안전한 방법은 없으며 각 저장 방법에는 관련 약점이 있습니다.
      • HttpOnly 보호 기능이 있는 쿠키에 JWT를 저장하면 JavaScript에서 액세스하는 것을 방지할 수 있지만 여전히 CSRF 공격에 취약합니다.
      • 세션/로컬 스토리지에 JWT를 저장하면 CSRF 문제를 피할 수 있지만 토큰을 훔칠 수 있는 XSS 공격에 여전히 취약합니다.
      • 쿠키에 의존하는 경우 CSRF에 대한 보호가 필요한데, SameSite 쿠키 속성을 사용하면 더 쉬워졌지만 여전히 한계가 있습니다.
      • 권한 부여와 같은 비쿠키 헤더를 사용하여 세션 토큰을 설정하면 CSRF를 피할 수 있지만 XSS 취약점으로 인해 여전히 보안이 손상될 수 있습니다.
      • 세션 저장소는 사이트 단위가 아닌 탭 단위라는 제한이 있으므로 한 탭에서 로그아웃하면 모든 탭에서 사용자가 로그아웃됩니다.
      • 각 저장 방법마다 보안 측면에서 장단점이 있기 때문에 보편적으로 "가장 좋은" 솔루션은 없습니다.
      • 이 글에서는 특정 방법을 지지하거나 반대하는 것이 아니라 각 접근 방식의 약점에 대한 개요를 제공하고자 합니다.
      • 애플리케이션의 특정 보안 요구 사항과 위험을 고려하여 JWT를 저장할 위치를 신중하게 결정해야 합니다.
      • 개발자는 정보에 입각한 결정을 내리고 애플리케이션을 적절히 보호하기 위해 각 저장소 옵션의 미묘한 차이와 한계를 알고 있어야 합니다.
  • LukeW | The Death of Lorem Ipsum
    • 요약
      • 디자이너는 전통적으로 인터페이스 디자인에서 Lorem Ipsum을 플레이스홀더 텍스트로 사용해 왔지만, 이는 실제 콘텐츠를 표현하지 못합니다.
      • 실제 콘텐츠를 사용하면 UI 디자인이 지원해야 하는 내용을 훨씬 더 사실적으로 파악할 수 있습니다.
      • 이제 대규모 언어 모델(LLM)은 디자이너에게 관련성이 높은 콘텐츠를 즉시 제공할 수 있으므로 Lorem Ipsum은 쓸모가 없어졌습니다.
      • Lorem Ipsum을 사용하면 실제 텍스트 길이, 줄 바꿈 또는 콘텐츠 계층 구조를 고려하지 않는 비현실적인 디자인과 사용성 문제가 종종 발생합니다.
      • 일부 팀은 디자인 프로세스에서 보다 사실적인 콘텐츠를 구현하기 위한 도구를 만들었지만, 대부분의 팀에서는 여전히 Lorem Ipsum이 더 쉬운 방법이었습니다.
      • LLM은 샘플 콘텐츠를 생성할 수 있을 뿐만 아니라 디자인 중인 모든 애플리케이션에 맞는 매우 구체적이고 관련성 높은 콘텐츠를 만들 수 있습니다.
      • LLM은 빠르고, 널리 사용 가능하며, 무료이기 때문에 더 이상 실제 콘텐츠 대신 Lorem Ipsum을 사용해야 할 이유가 없습니다.
  • OpenAI, API에서 구조화된 출력 지원 | GeekNews
    • 요약
      • OpenAI는 개발자가 모델 출력에 대한 JSON 스키마를 지정할 수 있는 새로운 '구조화된 출력' 기능을 API에 도입했습니다.
      • 이렇게 하면 모델의 출력이 개발자가 제공한 스키마와 정확하게 일치하므로 API를 애플리케이션에 더 쉽게 통합할 수 있습니다.
      • 구조화된 출력은 모델 출력을 사용 가능한 형식으로 포맷하기 위해 오픈 소스 도구, 프롬프트, 재시도와 같은 해결 방법을 사용해야 했던 이전의 문제를 해결합니다.
      • 평가 결과, gpt-4o-2024-08-06 모델은 복잡한 JSON 스키마 테스트에서 100%의 정확도를 달성한 반면, 이전 모델은 40% 미만의 점수를 기록했습니다.
      • 구조화된 출력은 API를 호출할 때 함수 정의에서 strict: true를 설정하여 활성화할 수 있습니다.
      • OpenAI의 기존 안전 정책은 유지되며, 모델은 안전하지 않은 요청을 거부할 수 있습니다.
      • Python 및 Node SDK는 기본적으로 구조화된 출력을 지원하므로 JSON 응답의 자동 직렬화 및 구문 분석이 가능합니다.
      • JSON 스키마 기능에 대한 부분적인 지원과 새 스키마를 사용한 첫 번째 응답에 대한 추가 대기 시간 등 몇 가지 제한 사항이 있습니다.
      • 구조화된 출력은 일반적으로 API에서 사용할 수 있으며 응답 형식 옵션을 지원하는 모델에서 지원됩니다.
      • 이 기능을 사용하면 데이터 검색, 질문 답변, 비정형 입력에서 데이터 추출과 같은 사용 사례를 보다 안정적이고 쉽게 통합할 수 있습니다.
  • Y'all are sleeping on HTTP/3
    • 요약
      • 현재 웹 트래픽의 30% 이상이 단기간에 HTTP/3을 사용해 전송되는 등 HTTP/3과 QUIC 프로토콜이 빠르게 채택되고 있습니다.
      • QUIC은 더 빠른 연결 설정, 동적 네트워크 환경의 더 나은 처리, 향상된 멀티플렉싱, 보다 신속한 혼잡 제어 등 TCP에 비해 여러 가지 이점을 제공합니다.
      • QUIC은 UDP를 기반으로 구축되었지만 그 위에 안정성 보장을 구현하여 UDP가 본질적으로 불안정하다는 오해를 해소합니다.
      • 현재 주요 웹 브라우저, 클라우드 제공업체, 로드밸런서에서 HTTP/3을 광범위하게 지원하고 있으며, 이는 미래에서 현재로 전환되고 있음을 나타냅니다.
      • 그러나 많은 웹 개발자들은 사용 중인 프로토콜 버전에 대한 가시성이 부족하여 여전히 HTTP/3에 대해 잘 모르고 있습니다.
      • 앞으로의 과제로는 QUIC을 위한 더 많은 도구와 언어 지원이 필요하며, 사용자 공간에 남을지 아니면 OS 커널에 통합될지 여부에 대한 질문이 있습니다.
      • 일부 네트워크 엔지니어들은 오버헤드, 모니터링, 잠재적 취약성에 대한 우려를 이유로 QUIC의 빠른 도입에 회의적인 입장을 보이고 있습니다.
      • 웹 외에도 QUIC의 기능은 온라인 게임이나 화상 회의와 같은 다른 실시간 애플리케이션에도 매력적인 옵션이 될 수 있습니다.
      • 인터넷 통신의 새로운 표준이 될 것으로 보이는 HTTP/3와 QUIC의 추진력은 부인할 수 없는 사실입니다.
      • 개발자와 애호가들은 QUIC의 잠재력을 탐구하고 이 분야의 지속적인 혁신에 기여해 주시기 바랍니다.
  • Prevention of HIV | Science | AAAS
    • 요약
      • 레나카파비르는 HIV 치료 및 예방을 위해 승인된 최초의 캡시드 억제제입니다.
      • 레나카파비르는 여러 가지 의약 화학적 특징을 가진 독특한 분자 구조를 가지고 있어 화학적으로 정교한 화합물입니다.
      • 대규모 임상시험에서 레나카파비르를 1년에 2회 주사한 결과, 수천 명의 고위험 여성 참가자의 HIV 감염률이 100% 예방된 것으로 나타났습니다.
      • 이 결과를 발표하는 컨퍼런스에서 청중들이 장시간 기립 박수를 보낸 것은 매우 이례적인 일로, 이 연구 결과가 얼마나 중요한지 알 수 있습니다.
      • 대규모 임상연구에서 이처럼 높은 효능을 보이는 경우는 드물기 때문에 이번 임상시험에서 100%의 예방율은 매우 이례적입니다.
      • 레나카파비르의 예방법으로서의 성공은 향후 HIV 백신에 대한 매우 높은 기준을 제시하며, 잠재적으로 백신 개발과 테스트를 복잡하게 만들 수 있습니다.
      • 현재 HIV 치료 현황은 환자들이 질병이 통제된 상태에서 완전한 삶을 살 수 있도록 하며, 1980-90년대의 파괴적인 상황에 비하면 상당한 진전을 이루었습니다.
      • 이러한 진전에도 불구하고 여전히 매년 100만 건 이상의 새로운 HIV 감염이 발생하고 있어 효과적인 예방 방법이 지속적으로 필요합니다.
      • 레나카파비르는 1년에 두 번 주사하는 요법으로 매일 복용하는 경구용 약물 조합에 비해 실제 환자 순응도가 더 높습니다.
  • 라즈베리파이 재단, 새 MCU RP2350 발표 | GeekNews
  • 배포 시점에 급상승하는 API Latency 해결하기 — Django + Gunicorn 사례
    • 요약
      • API 지연 문제: 이 문서에서는 배포 중 API 지연 시간이 크게 증가하여 사용자 경험에 부정적인 영향을 미치는 문제에 대해 설명합니다.
      • 모니터링 도구: 이 팀은 지연 시간 문제를 파악하기 위해 모니터링 및 로깅에 Datadog을 활용했으며, 특히 배포 버전을 추적하여 지연 시간 급증과 상관관계를 파악했습니다.
      • 콜드 스타트 가설: 지연 시간 증가의 잠재적 원인은 배포 중 Gunicorn 작업자의 콜드 스타트 때문이라는 가설을 세웠습니다.
      • 앱 사전 로드 옵션: Gunicorn에서 preload_app = True 옵션을 사용했음에도 불구하고 지연 시간 문제가 지속되어 해당 기능에 대한 추가 조사가 필요했습니다.
      • 구니콘 이해하기: 포크 전 모델, 워커 프로세스, 마스터 프로세스를 중심으로 Gunicorn의 아키텍처에 대한 자세한 설명이 제공되었습니다.
      • WSGI와 장고: 이 문서에서는 애플리케이션 코드가 로드되는 방식과 미들웨어의 역할을 강조하면서 WSGI와 Django의 관계에 대해 설명합니다.
      • URL 구성 사전 로드: 작성자는 URL 및 보기와 같은 중요한 구성 요소가 미리 로드되지 않아 미들웨어 실행 전 지연이 발생한다는 사실을 확인했습니다.
      • 코드 수정: URL 구성을 미리 로드하도록 코드를 수정하여 API 호출 중 지연 시간을 줄였습니다.
      • 배포 중 리소스 급증: 문서에서는 롤링 배포 중 CPU 및 메모리 스파이크는 리소스 할당 설정으로 인한 정상적인 현상이며 근본적인 문제를 나타내는 것이 아니라고 설명합니다.
      • 공동 문제 해결: 작성자는 지연 시간 문제를 해결한 팀 협업에 감사를 표하며 기술적 문제를 극복하는 데 있어 팀워크의 중요성을 강조합니다.