diff --git a/_i18n/ko/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md b/_i18n/ko/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md new file mode 100644 index 00000000000..732735aa41f --- /dev/null +++ b/_i18n/ko/_posts/2021/2021-07-27-vscode-js-debug-privacy-sandbox-timeline-.md @@ -0,0 +1,217 @@ +--- +title: "2021-07-27: vscode-js-debug, Privacy Sandbox Timeline, 작은 브라우저를 만드는 방법" +author: "azu" +translator: U-Yeong Ju +layout: post +date : 2021-07-27T12:52:36.749Z +category: JSer +tags: +- node.js +- browser +- security +- Tools +- Chrome + +--- + +JSer.info #550 - vscode-js-debug는 VSCode에서 브라우저의 디버거에 접속해 JavaScript를 디버깅하는 VSCode 확장이다. +이 vscode-js-debug가 VScode에 bundle 되도록 됐다. + +- [Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog](https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/) +- [microsoft/vscode-js-debug: The VS Code JavaScript debugger](https://github.com/microsoft/vscode-js-debug) + +vscode-js-debug는 Chrome 및 MSEdge 등의 브라우저 디버거에 접속할 수 있다. +구조로는 [Debug Adapter Protocol](https://microsoft.github.io/debug-adapter-protocol/)(DAP)라는 개발 도구(VScode 등)과 디버거(브라우저나 노드 등)를 중계하는 Adapter를 사용하고 있다. + +DAP는 [Language Server Protocol](https://microsoft.github.io/language-server-protocol/)(LSP)와 비슷하게 개발 도구와 각종 언어를 중계하는 프로토콜을 정하고 있다. +개발 도구 등은 DAP를 지원하는 것으로 각종 언어 용 디버깅 기능을 일일이 개발하지 않아도 대응할 수 있다. + +---- + +[Privacy Sandbox Timeline](https://privacysandbox.com/timeline/)에는 Google의 Privacy Sandbox라고 불리는 third-party cookies를 폐지하기 위한 Proposal과 관련된 로드맵을 공개돼 있다. + +Privacy Sandbox의 각 Proposal 별로 어떤 일정으로 구현 및 테스트 할지 정리돼 있다. + +--- + +[작은 웹 브라우저를 만들어보자](https://browserbook.shift-js.info/)(일본어)에서 Rust로 웹 브라우저를 만들어가면서 브라우저의 렌더링 구조와 보안 등에 대해 학습할 수 있는 과정을 다루고 있다. + +작은 브라우저를 만들면서 브라우저의 내부 구조에 대해 배우는 것을 목적으로 하고 있는 교재이며 현재는 WIP(Working In Progress) 상태인 장이 많지만 계속해서 작성될 것으로 보인다. + +덧붙여 Rust로 브라우저를 만들어 보면서 학습할 수 있는 튜토리얼로는 "Let's build a browser engine!"이 유명하다. +관심이 있는 사람은 함께 읽어보면 좋을 것. + +- [Let's build a browser engine! Part 1: Getting started](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html) + - [브라우저를 만드는 방법 - Speaker Deck](https://speakerdeck.com/keiya01/burauzafalsezuo-rifang)(일본어) + - [「Let's build a browser engine!」를 읽고 Rust로 간이 렌더링 엔진을 만들었다 - dackdive's blog](https://dackdive.hateblo.jp/entry/2021/02/23/113522)(일본어) + + +---- + +

헤드라인

+ +---- + +## Version 2.0 released : Node-RED +[nodered.org/blog/2021/07/20/version-2-0-released](https://nodered.org/blog/2021/07/20/version-2-0-released "Version 2.0 released : Node-RED") +

node.js ReleaseNote

+ +IoT 디바이스 등을 다루는 비쥬얼 프로그래밍 환경 Node-RED 2.0.0 릴리스. +Node-RED는 IBM사에서 개발한 IoT 분야의 대표 front-end 개발용 미들웨어 도구([참고](https://www.koreascience.or.kr/article/JAKO201827750146296.pdf)). + +- [Release 2.0.0: Milestone Release · node-red/node-red](https://github.com/node-red/node-red/releases/tag/2.0.0 "Release 2.0.0: Milestone Release · node-red/node-red") + +---- +

아티클

+ +---- + +## URLPattern brings routing to the web platform +[web.dev/urlpattern/](https://web.dev/urlpattern/ "URLPattern brings routing to the web platform") +

JavaScript Chrome WebPlatformAPI article

+ +npm 패키지 path-to-regexp 같이 URL의 패턴 매치를 다루는 `URLPattern` 자바스크립트 객체를 소개하는 글. +기본적인 사용법, 캡쳐, 브라우저 지원과 폴리필을 설명. +`URLPattern`의 목표는 브라우저 / 서버사이드에서 사용하는 라우팅 패턴 매칭을 최대한 표준화시키는 것. + + +---- + +## Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog +[blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/](https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/ "Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog") +

VSCode browser debug article

+ +VSCode에서 Chrome와 MSEdge의 Debugger에 접속하는 vscode-js-debug 확장 소개. +DAP(Debug Adapter Protocol)의 Protocol Adapter를 사용하여 VScode에서 브라우저 디버깅에 접속한다. + +- [microsoft/vscode-js-debug: The VS Code JavaScript debugger](https://github.com/microsoft/vscode-js-debug "microsoft/vscode-js-debug: The VS Code JavaScript debugger") + +---- + +## Fastly Launches New Era of Highly-Secure Serverless JavaScript With Zero Cold Starts | Fastly +[www.fastly.com/press/press-releases/fastly-launches-new-era-of-highly-secure-serverless-javascript-with-zero](https://www.fastly.com/press/press-releases/fastly-launches-new-era-of-highly-secure-serverless-javascript-with-zero "Fastly Launches New Era of Highly-Secure Serverless JavaScript With Zero Cold Starts | Fastly") +

WebAssembly cdn JavaScript article

+ +Fastly의 Compute@Edge가 JavaScript를 지원한다. + +- [JS on Wasm with Nick Fitzgerald (JS Party #183) |> Changelog](https://changelog.com/jsparty/183 "JS on Wasm with Nick Fitzgerald (JS Party #183) |> Changelog") + +---- + +## How to Eliminate Render-Blocking Resources: a Deep Dive +[sia.codes/posts/render-blocking-resources/](https://sia.codes/posts/render-blocking-resources/ "How to Eliminate Render-Blocking Resources: a Deep Dive") +

JavaScript CSS browser performance article

+ +렌더링 블록킹 원인이 되는 자바스크립트와 CSS의 요소 소개. +렌더링이 블록되면 성능에 어떠한 영향을 주는지, WebPageTest를 사용한 확인 방법, 렌더링 블록킹 제거 방법 등을 다룬다. + + +---- +

사이트, 서비스, 문서

+ +---- + +## Privacy Sandbox Timeline +[privacysandbox.com/timeline/](https://privacysandbox.com/timeline/ "Privacy Sandbox Timeline") +

Chrome privacy document

+ +Privacy Sandbox의 로드맵과 타임라인. + + +---- + +## nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨ +[github.com/nicoespeon/abracadabra](https://github.com/nicoespeon/abracadabra "nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨") +

VSCode refacoring plugin JavaScript

+ +JavaScript와 TypeScript 리팩터링을 보조하는 VSCode 확장. +WebStorm와 같이 Quick Fix를 제공한다. + + +---- +

소프트웨어, 도구, 라이브러리

+ +---- + +## Tak-Iwamoto/ptera: Ptera is DateTime library for Deno +[github.com/Tak-Iwamoto/ptera](https://github.com/Tak-Iwamoto/ptera "Tak-Iwamoto/ptera: Ptera is DateTime library for Deno") +

deno JavaScript library

+ +Deno 용 날짜 조작 라이브러리. + +- [Deno의 DateTime 라이브러리 Ptera를 릴리스했다](https://zenn.dev/tak_iwamoto/articles/8b32b27bd577b1 "Deno의 DateTime 라이브러리 Ptera를 릴리스했다")(일본어) + +---- + +## ajitid/fzf-for-js: Do fuzzy matching using FZF algorithm in JavaScript +[github.com/ajitid/fzf-for-js](https://github.com/ajitid/fzf-for-js "ajitid/fzf-for-js: Do fuzzy matching using FZF algorithm in JavaScript") +

JavaScript library search

+ +커맨드라인 도구 용 유사어 검색(퍼지 검색) FZF 알고리즘을 JavaScript에 이식한 라이브러리. +퍼지란 검색하는 키워드와 완전히 일치하지 않아도 표기의 차이나 동의어 까지 포함해 유연하게 해석 및 검색하는 것. + + +---- + +## ES-Community/nsecure: Node.js security CLI / API that allow you to deeply analyze the dependency tree of a given package / directory +[github.com/ES-Community/nsecure](https://github.com/ES-Community/nsecure "ES-Community/nsecure: Node.js security CLI / API that allow you to deeply analyze the dependency tree of a given package / directory") +

node.js npm security Tools

+ +디렉터리나 특정 패키지의 npm 패키지 의존 정보를 분석하는 도구. +코드를 분석(파싱)하여 현재 사용하고 있는 npm 패키지의 메타데이터, 라이센스, 보안 정보 등의 데이터를 살펴 볼 수 있는 기능 제공. + + +---- + +## tangramxyz/tangram: Tangram is an all-in-one automated machine learning framework. +[github.com/tangramxyz/tangram](https://github.com/tangramxyz/tangram "tangramxyz/tangram: Tangram is an all-in-one automated machine learning framework.") +

MachineLearning library Rust JavaScript ruby python golang

+ +기계 학습 프레임워크. +커맨드 라인으로 학습할 모델을 작성하고, 각종 언어의 FFI 라이브러리로 예측할 수 있다. +자바스크립트로는 와즘(Wasm) 빌드를 공개하고 있다. +또, 브라우저로 볼 수 있는 모델의 퍼포먼스 대시보드를 제공한다. + + +---- + +## udecode/plate: A plugin framework for building rich text editors with slate. +[github.com/udecode/plate](https://github.com/udecode/plate "udecode/plate: A plugin framework for building rich text editors with slate.") +

JavaScript editor React library

+ +slate 기반의 리치 텍스트 에디터 라이브러리. +플러그인으로 기능을 추가할 수 구조로 돼 있으며 다양한 플러그인이 준비돼 있다. + + +---- + +## actuallyakash/spacers: 🔳 when you need more \_\_space\_\_ +[github.com/actuallyakash/spacers](https://github.com/actuallyakash/spacers "actuallyakash/spacers: 🔳 when you need more \_\_space\_\_") +

JavaScript library

+ +드래그엔드랍 으로 요소에 대한 padding이나 margin 등의 공간을 설정할 수 있는 라이브러리. + + +---- + +## davewasmer/devcert: Local HTTPS development made easy +[github.com/davewasmer/devcert](https://github.com/davewasmer/devcert "davewasmer/devcert: Local HTTPS development made easy") +

node.js SSL debug Tools

+ +로컬에서 개발용 HTTPS 서버 구축을 보조하는 라이브러리. +임의의 도메인에 대한 증명서 작성, 머신에 루트 증명서 설치 등 로컬에서의 HTTPS 서버 동작을 보조한다. + + +---- +

도서

+ +---- + +## 작은 웹 브라우저를 만들어보자(일본어) +[browserbook.shift-js.info/](https://browserbook.shift-js.info/ "작은 웹 브라우저를 만들어보자") +

browser book Rust security

+ +Rust로 웹 브라우저를 만들어보면서 브라우저의 렌더링 구조, 전체적인 흐름, 보안에 대해 학습할 수 있는 일본어 교재. + + +----