Build and Debug C++ with WSL 2 Distruibutions and Visual Studio 2022 - 번역

  • 2021-07-14에 등록된 article
    • 저자는 Erika Sweet , Microsoft C++ Team - Cross Platform Tools 개발 담당
  • VS2022는 C++ 개발에 대해 native WSL 2 toolset을 소개했다
  • 이 toolset은 VS2022 ver 17.0 Preview 2 부터 사용가능하다
  • WSL는 개선된 Linux file system 성능, GUI 지원, full system call 호환성을 지원한다
  • VS WSL 2 toolset을 사용하면 ..
    • SSH 연결을 추가하지 않고
    • WSL 2 배포판에서 C++ 코드를 빌드하고 디버그할 수 있다
  • 당신은 이미 VS2019 ver 16.1에서 소개된 native WSL 1 toolset으로 ..
    • C++ 코드를 빌드하고 디버그할수 있긴하다
  • VS의 WSL 2 toolset은 CMake와 MSBuild 기반 Linux 프로젝트를 모두 지원한다
  • 하지만, 모든 C++ cross-platfor 개발에 대해 CMake가 우리의 추천인데 ..
    • 이 방식으르 당신은 Windows와 WSL, remote system에서 같은 프로젝트로 빌드와 디버깅을 할 수 있기 때문이다

WSL 2 toolset은 어떻게 동작하는가?

  • VS의 C++ cross-platform 지원은 모든 소스 파일이 Windows file system에서 시작된다고 가정한다
  • WSL 2 배포판에서 개발할 때, VS는 ..
    • Windows file system에서 WSL file system으로 파일을 복사하기 위해
    • local rsync copy 를 실행할 것이다
  • 위의 로컬 rsync 복사는 …
    • VS가 WSL 2 배포판이 사용됨을 감지하고 사용자의 간섭이 요구되지 않을 경우
    • 자동으로 발생한다
  • Comparing WSL 1 and WSL 2 를 확인하여 WSL 1과 WSL 2의 차이점에 대해 더 배워라
  • CMake 와 WSL 2 의 Step-by-Step 가이드와 MSBuild-기반 WSL 2 지원 개요에 대한 다음 섹션을 읽어보자

WSL 2 배포판 에서 Cross-platform CMake 개발

  • WSL 2 toolset은 VS의 CMake Presets integration에 의해 지원된다
  • CMake presets에 대해 더 배우려면..
  • WSL 2 배포판에서 CMake project를 빌드하고 디버그하기위해 아래 instructions를 따라와라
  1. Windows 10용 WSL 설치 가이드 를 참조하여 WSL과 WSL 2 배포판을 설치하라
  2. 필요한 빌드 툴들을 WSL 2 distor 에 설치한다
    • C++ compiler, gdb, CMake, 기본적인(underlying) 빌드 시스템 생성기, rsync, zip이 필요할 것이다
    • 아래 명령으로 설치할 수 있다 
      

      1
2

      		

       > sudo apt update
 > sudo apt install g++ gdb make ninja-build rsync zip
    • 이 튜토리얼에서는 GCC, Ninja를 Ubuntu위에서 사용할 것이다.
  3. VS2022 ver 17.0 Preview 2 나 이후 버전에서 CMake 프로젝트를 Open해라
    • VS는 프로젝트 루트에 CMakeLists.txt 파일이 있는 폴더를 CMake 프로젝트로 규정한다

Python의 map function과 유사한 기능을 C++ 로 구현할 수 있을까?

Partial Sort in Python ?

github 페이지로 비공개 포스팅 작성하기

C++ 기초 배우기

Figma 강좌 따라하기

  • #figma

figma로 아이콘 만들기 강좌

크롬 확장 만들어 보기

참조 링크

개발 환경

  • VS Code + Chrome Extension Dev Tools
  • Command Palette에서 Chrome Extension: Create New 선택
  • 주요 기술 : HTML, CSS, JavaScript

Getting started

Create the manifest

  • repository 폴더 밑에 새폴더를 하나 만들고 code .으로 VS Code 오픈
  • manifest.json 파일 하나 만들고 다음 내용을 써넣는다 
    

    1
2
3
4
5

    		

    {
  "manifest_version": 3,
  "name": "Getting Started Example",
  "description": "1.0"
}

Load an unpacked extension

  • manifest.json 파일을 가진 directory는 developer mode에서 extension으로 간주되어 추가될 수 있다
  • unpacked extension을 로딩하기 위해 아래 단계대로 실행하라
    1. chrome://extensions 확장 페이지 열기
      • 다른 방법 : 크롬에서 ⁞ ▶ 도구 더보기 ▶ 확장 프로그램
    2. 확장 페이지에서 개발자 모드 ON
    3. 압축해제된 확장 프로그램을 로드합니다 버튼 클릭 해서 방금 만든 새폴더 선택해주기 extension page
    4. ! 확장이 성공적으로 설치됨. 아이콘이 없으므로 generic icon이 생성됨

Add functionality

Register the background script in the manifest

  • 다른 중요한 컴포넌트들과 마찬가지로, background scripts도 manifest에 등록되어야 한다
  • manifest에 background script를 등록함으로써, extension이 어느 파일을 참조하고 어떻게 동작할지 알려준다 
    

    1
2
3
4
5
6

    		

    {
  ...
  "background": {
    "service_worker": "background.js"
  }
}
  • 이제 Chrome은 extension이 service worker를 가지고 있음을 알게 된다
  • extension을 reload하면 ..
    • chrome은 지정된 파일을 스캔하여 중요한 이벤트 리스너가 있는지 검색한다

Create the background script

  • 이 extenstion은 설치되자마자 persistent 변수로 부터 정보가 필요하다
  • background 스크립트에 runtime.onInstalled 이벤트를 리스닝 하는 것부터 시작하라
    • onInstalled 리스너 내부에서, extension은 storage API 를 이용하여 값을 하나 설정할 것이다
    • 이 작업으로 많은 extenstion 컴포넌트가 이 값에 접근해서 업데이트 할 수 있게 된다
  • extension 폴더내에 background.js를 생성하고 아래 코드를 추가하라 
    

    1
2
3
4
5
6
7

    		

    // background.js
let color = '#3aa757';
  
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log('Default background color set to %cgreen', `color: ${color}`);
});

    Add the storage permission

  • storage API를 비롯해서 대부분의 API들은 사용하려면 manifest 파일의 “permissions” 필드에 등록되어야 한다 
    

    1
2
3
4

    		

    {
  ...
  "permissions": ["storage"]
}
  • (역자 추가) chrome.storage API
    • 유저 데이타를 저장, 회수, 변경 추척하는데 사용하는 API
    • 이 API는 특별한 storage 요구 사항을 충족시키도록 최적화되어 있다
    • localStorage API 와 같은 storage 기능을 제공하지만 아래와 같은 주요 차이점이 있다
      • 유저 데이타는 자동으로 Chrome Sync와 (storage.sync를 이용하여) 동기화될 수 있다
      • extension의 content script는 background 페이지 없이도 유저 데이타에 직접 접근할 수 있다
      • 심지어 split incognito behavior(분할 익명 동작) 중에도 유저의 extension 설정이 유지될수 있다
        • (역자 주) incognito 모드는 크롬의 시크릿 창을 의미함 (로그인 하지 않은 상태)
          • 동작을 원래 일반 모드와 공유할 것인지 분리할 것인지 extension 별로 결정해야 함
      • bulk read 와 write 동작과는 비동기적이므로, 블락이 걸리며 순차적인 localStorage API보다는 빠르다
      • 유저 데이타가 객체로 저장될 수 있다. ( localStoarge API는 문자열로 저장된다)
      • extension 관리자가 설정한 Enterprise 정책 읽기가 가능하다 ( storage.managed를 schema와 함께 사용해서)

Inspect the background script

  • 다시 extension 관리 페이지로 되돌아가서 Reload 링크를 클릭하라 ( 아래 그림 맨 아래 동글뱅이 화살표)
  • 새로운 필드인 Inspect views가 파란 링크, service worker 사용할 수 있게된다 Inspet views
  • 이 링크를 클릭하면 console.log 창이 뜨면서 “Default background color set to green” 이 표기된다

Introduce a user interface

  • extension은 다양한 형태의 user interface 를 가질 수 있다
    • 이번에는 popup을 사용할 것이다
  • popup.html 파일을 만들어서 extension 디렉토리에 추가하라
  • 이 extension은 background color 를 변경하는데 버튼을 하나 사용한다 
    

    1
2
3
4
5
6
7
8
9

    		

    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>