쿠...sal

[컴][웹] Launching Ignition and TurboFan 번역

Launching Ignition and TurboFan

Launching Ignition and TurboFan 의 내용을 대략적으로 번역했다.

JavaScript execution pipeline

새로운 자바스크립트 수행 파이프라인

- Ignition : V8’s interpreter
- TurboFan : compiler

v5.9 부터 2010년부터 사용해온 Full-codegen 와 Crankshaft 를 더이상 사용하지 않가로 함.

TurboFan

TurboFan 은 처음 디자인할 때부터 ES2015 이후의 기능(feature) 에 대한 최적화도 고려했다.

터보팬은 layered compiler design 을 도입했다.
high-level 과 low-level compiler optimizations 을 분리해서 새로운 언어기능(language features) 을 추가하기 쉽게

명확한 명령어 선택 컴파일 phase(explicit instruction selection compilation phase)를 추가해서
구조와 덜 연관된 코드를 만들 수 있게 해준다.

Ignition

Ignition interpreter 의 최초의도는 모바일기기에서의 메모리 사용을 줄이기 위함이었다.

이전에 Full-codegen baseline compiler가 생성한 코드는 크롬에서 평균 javascript heap 의 1/3을 차지했다.

그래서 어플리케이션의 실제 데이터가 사용할 수 있는 공간이 적었다.

후에 V8팀은 TurboFan 을 이용해서 Ignition의 bytecode를 바로 최적화된 machine code 로 바꿀 수 있는 사실을 이용했다.

소스코드를 다시 컴파일을 해야만 했던 Crankshaft

Ignition의 bytecode는 v8에서 좀 더 깔끔하고 덜 error-prone 한 기준선(baseline)을 제공한다.
Full-codegen의 baseline compiled code를 생성하는 것보단 bytecode 를 생성하는 것이 더 빠르다.

그래서 ignition을 사용하게 되면 script startup 시간과 웹페이지 로드 속도가 빨라진다.

References

Launching Ignition and TurboFan

[컴][안드로이드] React Native App - react-navigation

react-navigation

여러 페이지(Activity) 를 사용하는 App 을 만들 것이라면 react-navigation 이 필요하다. 아래 명령어로 설치할 수 있다.

>npm install --save react-navigation
>npm install --save react-native-gesture-handler
>react-native link react-native-gesture-handler

react-native link

어떤 library 들은 native code 로 작성되었을 수 있다. 이 경우에 이 native code 의 library 를 우리가 만드는 app 에 넣어줘야 한다. 그것을 위해 하는 것이 linking libraries 이다.

react-native-gesture-handler 를 link 하면서 잠깐 봐보자.

우선 link 는 아래처럼 react-native link 를 해주면 된다.

c:\newApp>react-native link react-native-gesture-handler
rnpm-install info Linking react-native-gesture-handler ios dependency
rnpm-install info Platform 'ios' module react-native-gesture-handler has been successfully linked
rnpm-install info Linking react-native-gesture-handler android dependency
rnpm-install info Platform 'android' module react-native-gesture-handler has been successfully linked

변경된 내역

이제 react-native link 를 통해 무엇이 바뀌었는지 한번 봐보자.

<newApp>\android\app\build.gradle
<newApp>\android\app\src\main\java\com\newapp\MainApplication.java
<newApp>\android\app\src\main\res\values\strings.xml
<newApp>\android\settings.gradle
<newApp>\ios\newApp.xcodeproj\project.pbxproj
<newApp>\node_modules\.cache\@babel\register\.babel.7.2.2.development.json

위의 파일들이 변경된다. 대략적으로 보면 build.gradle 의 dependency 에 아래와 같은 부분이 추가된 것을 확인할 수 있다.

dependencies {
    compile project(':react-native-gesture-handler')
    ...

Android 에서 추가작업

MainActivity.java 를 변경해 줘야 한다.

<newApp>\android\app\src\main\java\com\newapp\MainActivity.java

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

References

[컴][웹] 정부의 https 접속문제 원인

왜 정부사이트는 https 가 안되나 / 보안접속이 안되는 이유 / 정부사이트의 문제 / 정부사이트가 욕을 먹는 이유/ 정부 사이트에서 https 가 안되는 이유

정부의 https 접속문제 원인

현재 정부 사이트들을 https 로 접속하면 문제가 있다. 이것은 보통 브라우저가 신뢰할 만한 기관이라고 인정하는 녀석들의 리스트를 가지고 있는데, 그 리스트에 한국정부가 들어가지 못해서이다.

처음에 나는 이것이 단순히 인지를 못해서 추가를 못한 수준인줄 알았다. 하지만 기사가 더 자세한 내용을 알려줬다. 기사를 차라리 몰랐으면 할 정도로 정부의 IT 인식 수준(특히 보안)이 참담했다. 여기서는 그 기사의 내용을 좀 더 정리해 보도록 하겠다.

문제점

인증받지 못한 행정안전부가 발급하는 'G-SSL 인증서'

인증서는 누구나 발행할 수 있다. 하지만, 누가발행했느냐를 보고, 브라우저는 이 인증서가 믿을만한 인증서인지 아닌지 여부를 판단한다. 브라우저는 믿을만한 발행 업체에 대한 리스트를 가지고 있다.

즉, 많은 브라우저 업체(구글, 모질라, 애플)들이 한국 정부의 CA (Certificate authority)자격을 인정하지 않는다는 뜻이다.

하지만 그래도 되는 브라우저들이 있다. 이것은 브라우저가 자신의 CA 리스트를 사용하는 대신 OS가 가지고 있는 CA list 를 사용하기 때문이다.

모질라의 CA 인증서 프로그램에서 탈락

2015년 11월

2015년말부터 행정안전부(당시 '행정자치부') 가 CA 자격을 얻기 위해 노력.
--> 그 일환으로 모질라의 CA인증서프로그램(CA Certificate Root Program, 이하 '프로그램')을 신청(관련자료)
--> 이 검증이 대체로 아무문제가 없다면 2년이 소요된다고 한다.

모질라의 검증

검증 작업: 2016년 초부터 2018년 초까지 약 2년간 진행
행정안전부 산하기관인 "한국지역정보개발원(KLID)"의 담당자가 실무를 맡음
KLID가 실질적인 G-SSL 인증서 발급 및 관리체계 운영 조직

모질라의 최종판단

한국 정부의 G-SSL 인증서 발급 및 관리 체계가 프로그램 검증을 위해 내걸고 있는 '루트저장소정책(Root Store Policy)' 등 준칙의 기준에 맞지 않는다고 판단

왜 탈락했는가?

ref. 1 에 따르면, 모질라의 최종판단은 아래 3개의 사건에 근거한다고 한다. 아래는 대략적인 정리이다. 조금 더 자세한 사건 내용은 ref. 1 을 참고하자.

사건1: 2016년 2월 모든 GPKI 인증기관 인증서 검증 신청 기각

처음에는 행정자치부를 Root CA 로 해서 행정자치부만 검증을 받으려 함.
행정자치부는 GPKI 기반의 인증서 / 교육부는 EPKI라는 인증체계 기반의 인증서를 발급
모질라는 수퍼 CA 하나만이 아니라 실질적인 Root CA 역할을 하는 모든 기관이 개별적으로 검증을 받던지, GPKI 를 재설계 해야 한다고 지적.
결국 행자부와 교육부는 개별적으로 인증서 검증을 받기로 함.
또한 행자부 밑에 sub CA 로 있던 대법원, 대검찰청, 병무청도 빠짐. 이들은 원래 검증기관에 CP 및 CPS 문서를 제출하지 않고, 외부기관 감사도 받지 않는 것을 전제로 sub CA 에 들어있었는데, 모질라가 인증서를 발급하는 주체는 모두 검증대상이라고 했기 때문이다.

사건2: 2018년 3월 행정안전부·교육부 인증서 부실관리 실태 노출

2018년 4월초 행정안전부와 교육부, 두 정부부처의 인증서 발급이 이상했다.

구글 포럼 제보
1. 행정안전부 행정전자서명인증센터 사이트 인증서 : 유효한 '온라인인증서상태프로토콜(OCSP)' response을 제공하지 않는다
2. 교육부 행정전자서명인증센터 사이트 인증서 : HTTP 인증서해지목록(CRL) endpoint 및 OCSP HTTP endpoint 정보가 없다.

모질라 측은 4월 중순 한국 정부에 해명을 요구
결국 8월 검증 절차를 중단

사건3: 2018년 4월 인증서 부정발급 실태 노출

2018년 4월초 모질라의 온라인 포럼인 '버그질라'에는 또다른 두 가지 인증서 관련 문제가 추가로 제보(1451235 - Distrust the WebTrust Audit of Deloitte Anjin South Korea)

1. 행정안전부와 교육부가 도메인검증을 하지 않은 인증서를 발급
2. 교육부가 교육기관용으로 각 기관별 도메인이 아닌 최상위도메인(TLD) 범주를 지정한 '와일드카드' 인증서를 발급.

교육부가 웹트러스트 인증을 받은 시점에 발생
교육부는 웹트러스트 인증을 위해 '딜로이트안진'에게 외부감사를 받았었다. 교육부가 외부감사를 통과했는데, 문제가 발생해서 '딜로이트안진'의 감사 신뢰성이 무너졌다.
행정안전부의 감사도 '딜로이트안진' 이 맡았었기에, 행정안전부의 감사결과도 신뢰를 잃게 되었다.

당시 문제가 된 인증서들은 곧 폐기

사건3 이 문제가 되는 이유는 우리가 https 를 사용하기 위해 인증서를 신청하고, 발급받는 과정을 생각해 보면 이해가 간다.

EV, OV, DV 인증서의 차이

References

정부, 공공사이트 HTTPS '보안경고' 못 없앴다 - 지디넷코리아

[컴][안드로이드] React Native App Debugger 설치 - vscode

VsCode 에서 React Native Debugger 사용

prerequisite

adb 의 path 가 환경변수 PATH 에 들어있어야 한다.

설치 및 실행

vscode 에서 extension 으로 React Native Tools 를 설치한다.

React Native Tools - Visual Studio Marketplace

vscode 에 react-native project folder 를 연다.
Debug(Ctrl+D) --> 바퀴모양의 아이콘 클릭 --> lanuch.json 이 보이게 된다. --> Add Configuration --> React Native : Debug Android 선택 (그림2 참고)
이제 위에서 새롭게 만든 configuration "Debug Android" 를 실행하자. (F5)
--> React Native Packager 가 실행된다.(하단 바에서 확인가능)
현재로선 app 에 대한 build/release 는 따로 하고, F5 를 눌러서 app 과 vscode 에서 띄운 React Native Packager 와 연결을 해야 하는 듯 하다.

그림. 1

그림. 2

Chrome Debugger

Debugging · React Native

절차

크롬을 연다.
--> react-native run-android
--> 폰에 app 이 설치된다.
--> 폰을 app 을 흔들면 In-App Developer Menu 가 뜬다.
--> Start Remote JS Debugging 을 고른다.
--> chrome 의 console 에 log 가 보인다.

References

GitHub - Microsoft/vscode-react-native: VSCode extension for react native - supports syntax highlighting, debugging and editor integration

[컴][안드로이드] React Native App

updated, 2019-08-11

reddit 에 올라온 댓글 (Flutter: A Framework to Surpass React Native : programming) 을 보면, react native 의 단점을 엿볼 수 있다. 더불어 Flutter 의 장점도 알 수 있다.

react native library 업데이트가 어렵다.(https://github.com/facebook/react-native/issues/23886#issuecomment-472946523)
간단한 앱을 만든 개발자도 반년정도 써봤는데, 최악이라고(horrible)

글을 보면 Flutter 가 여러모로 나아보인다.

React Native 시작하기

Getting Started · React Native >> Building Projects with Native Code >> OS 선택 및 target OS 선택

Windows 에서 Android App 을 만드는 경우에 대한 글이다. 각각의 경우에 대해서는 ref. 1 을 참고하자.

설치

Node >= 8.3
Python2
JDK >= 8
React Native command line interface : npm install -g react-native-cli
Android Studio 설치, 아래 component 를 전부 설치하자.

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

Android 8.1(Oreo) SDK

Android Studio > Tools > SDK manager
Show Package Details 를 클릭 해서, Android 8.1 아래서 다음것들을 check 하고 설치한다.(그림. 1)

Android SDK Platform 27
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

제어판 > 시스템 > 고급시스템설정 (시스템속성) > 고급탭 > 환경변수

ANDROID_HOME 이란 변수를 설정해 준다. Android SDK 의 path 를 설정해 주면 된다. path 는 Android Studio 의 Preferences 에서 찾을 수 있다.(Appearance & Behavior → System Settings → Android SDK.)

그림. 1

그림. 2

project 시작하기

project 를 위한 folder 를 하나 만들자. 여기서는 newApp 이라는 이름을 사용하려 한다. 아래처럼 실행한다.

react-native init newApp

아래와 같은 파일들이 만들어진다.

android\
ios\
node_modules\
.babelrc
.buckconfig
.flowconfig
.gitattributes
.gitignore
.watchmanconfig
App.js
app.json
index.js
package.json
package-lock.json

실행

먼저 Android phone 을 USB 로 컴퓨터에 연결하고 USB debugging 이 가능하게 설정해준다.

그다음, 아래처럼 run-android 를 하면 자동으로 build 를 하고 app 을 실행한다.

cd newApp
react-native run-android

Error: Unable to load script from assets index.android.bundle

위처럼 하면, asset bundle 을 load 할 수 없다고 error 가 보인다. 그래서 asset 을 하나 만들어 줘야 한다. 방법은 아래와 같다.

react native - Unable to load script from assets index.android.bundle on windows - Stack Overflow

c:\a\programming\nodejs\reactnative\newApp>react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res
Loading dependency graph, done.
bundle: Writing bundle output to: android\app\src\main\assets\index.android.bundle
bundle: Done writing bundle output

이러면 아래 경로에 index.android.bundle 가 만들어진다.

<newApp>\android\app\src\main\assets\index.android.bundle

이제다시 react-native run-android 를 하면 된다. 참고로, App.js 를 수정한 후에도 다시 위의 react-native bundle ...를 해주고 난 후 run-android 를 해야 한다.

with vscode

참고로 build 시에 vscode 를 열어놓으면 access permission 때문에 작업이 제대로 안되는 경우가 있다. 참고하자.

결과

제대로 실행이되면 아래와 같은 화면이 보인다.

Typescript 사용

이것은 tsx를 js 대신에 사용할 수 있다. 즉, react-native bundle 를 할 때 tsx 를 js로 변경해서 bundling 을 해준다. 그래서 현재 .tsx 에 대해서 따로 .js 파일을 만들지 않는다.

react-native init MyApp --template typescript && node MyApp/setup.js

React-navigation

React Native App - react-navigation

debugger

쿠...sal: [컴][안드로이드] React Native App Debugger 설치 - vscode

References

Getting Started · React Native

[컴] chocolatey 설치

Chocolatey 설치

"관리자 모드"로 cmd.exe를 실행한후 powershell 을 실행한다.

아래 명령어를 실행한다.(자세한 내용은 여기를 참고)

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

그러면 "c:\ProgramData\chocolatey" path 에 설치된다.
uninstall 은 여기 를 참고하자.

PS C:\Windows\system32> Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
Getting latest version of the Chocolatey package for download.
Getting Chocolatey from https://chocolatey.org/api/v2/package/chocolatey/0.10.11.
Extracting C:\Users\namh\AppData\Local\Temp\chocolatey\chocInstall\chocolatey.zip to C:\Users\namh\AppData\Local\Temp\chocolatey\chocInstall...
Installing chocolatey on this machine
Creating ChocolateyInstall as an environment variable (targeting 'Machine')
Setting ChocolateyInstall to 'C:\ProgramData\chocolatey'
WARNING: It's very likely you will need to close and reopen your shell
before you can use choco.
Restricting write permissions to Administrators
We are setting up the Chocolatey package repository.
The packages themselves go to 'C:\ProgramData\chocolatey\lib'
(i.e. C:\ProgramData\chocolatey\lib\yourPackageName).
A shim file for the command line goes to 'C:\ProgramData\chocolatey\bin'
and points to an executable in 'C:\ProgramData\chocolatey\lib\yourPackageName'.

Creating Chocolatey folders if they do not already exist.

WARNING: You can safely ignore errors related to missing log files when
upgrading from a version of Chocolatey less than 0.9.9.
'Batch file could not be found' is also safe to ignore.
'The system cannot find the file specified' - also safe.
chocolatey.nupkg file not installed in lib.
Attempting to locate it from bootstrapper.
PATH environment variable does not have C:\ProgramData\chocolatey\bin in it. Adding...
경고: Not setting tab completion: Profile file does not exist at
'C:\Users\namh\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1'.
Chocolatey (choco.exe) is now ready.
You can call choco from anywhere, command line or powershell by typing choco.
Run choco /? for a list of functions.
You may need to shut down and restart powershell and/or consoles
first prior to using choco.
Ensuring chocolatey commands are on the path
Ensuring chocolatey.nupkg is in the lib folder
PS C:\Windows\system32>

chocolatey 사용

아래처럼 사용하면 된다. 아래는 python2 를 설치하는 command 이다. 이러면 python2 의 msi 를 download 해서 "c:\python27" 에 install 을 한다. msi 로 설치해서 당연히 제어판 "프로그램 및 기능" 에도 보인다.

choco install -y python2

package 정보 확인

아래와 같은 방법으로 package description 등을 확인할 수 있다. parameter 같은 것들을 알 수 있다.

choco search vscodium -v

update

CommandsUpgrade

choco upgrade vscodium --params "/NoAddContextMenuFiles /NoAddContextMenuFolders"

.config 를 이용해서 install

packagesconfig 의 예시

choco install packages.config -y

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="7zip" />
  <package id="7zip.install" />
  <package id="apache-httpd" />
  <package id="chocolatey" />
  <package id="chocolateygui" />
  <package id="dataram-ramdisk" />
  <package id="totalcommander" />
  <package id="lockhunter" />
  <package id="sublimetext3" />
  <package id="sumatrapdf" />
  <package id="sumatrapdf.install" />
  <package id="TcpView" />
  <package id="telegram.install" />
  <package id="launchyqt" />
  <package id="irfanview" />
  <package id="Firefox" packageParameters="/NoTaskbarShortcut /NoDesktopShortcut /RemoveDistributionDir"/>
  <package id="git" />
  <package id="git-lfs" />
  <package id="git-lfs.install" />
  <package id="git.install" />
  <package id="glogg" />
  <package id="heidisql" />
  <package id="vscodium.install" packageParameters="/NoDesktopIcon /NoAddToPath /NoAddContextMenuFolders /NoAddContextMenuFiles /AssociateWithFiles /NoAddToPath"/>
  <package id="bitvise-ssh-client" />
  <package id="mariadb.install" />
  <package id="microsoft-windows-terminal" />
  <package id="powertoys" version="0.17.0" />
  <package id="elevate.native" />
</packages>

package가 설치되는 path 를 변경

Chocolatey Overriding default install directory
licenced version 에서는 option 을 제공한다.

choco install mariadb.install -ia "INSTALLDIR=d:\a\apps\mariadb"

Windows Package Manager

Windows Package Manager: MS 에서 만드는 windows package manager

References

Chocolatey Installation

[컴][Hack] Visual Studio C/C++ compiler 로 compile 하기

Visual Studio C/C++ compiler 로 compile 하기

환경

Visual Studio Community 2015

compile

cmd 창을 열고 일단 vsvarsall.bat 를 실행해 주자. 이녀석이 필요한 환경 변수등을 세팅해준다.

"c:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\vcvarsall.bat"

그리고 아래처럼 compile 을 하면 된다.

"c:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\bin\cl.exe" my.cpp

assembler

만약 assembler 를 보고 싶다면, /Fa option 을 사용하면 된다.

"c:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\bin\cl.exe" my.cpp /Famy.asm

x86_amd64

64 bit 으로 compiler 는 x86_amd64 에 있다. amd64_x86 라는 folder 도 있는데, 차이는 찾아보지 않아서 일단 패스.

c:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\bin\x86_amd64\vcvarsx86_amd64.bat

"c:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\bin\x86_amd64\cl.exe" my.cpp

Launching Ignition and TurboFan

JavaScript execution pipeline

TurboFan

Ignition

See Also

References

react-navigation

react-native link

변경된 내역

Android 에서 추가작업

References

정부의 https 접속문제 원인

문제점

인증받지 못한 행정안전부가 발급하는 'G-SSL 인증서'

모질라의 CA 인증서 프로그램에서 탈락

2015년 11월

모질라의 검증

모질라의 최종판단

왜 탈락했는가?

References

VsCode 에서 React Native Debugger 사용

prerequisite

설치 및 실행

Chrome Debugger

절차

References

updated, 2019-08-11

React Native 시작하기

설치

project 시작하기

실행

Error: Unable to load script from assets index.android.bundle

with vscode

결과

Typescript 사용

React-navigation

debugger

References

Chocolatey 설치

chocolatey 사용

package 정보 확인

update

.config 를 이용해서 install

package가 설치되는 path 를 변경

Windows Package Manager

See Also

References

Visual Studio C/C++ compiler 로 compile 하기

환경

compile

assembler

x86_amd64

See Also