react-native-web

6월 26, 2016

React를 개발하다가 React-native를 개발하다가 보면 생기는 생각들은 1. 자연스럽게 개발이 가능하다. 2. 쉽게 native 개발하는구나 등등 일겁니다.

하지만, 그 과정 가운데에서도 React-native 로 개발하면 web으로 거꾸로도 만들어 주면 어떨까? 하는 생각들 다들 해 보셨을 거 같습니다.

2016/06/25 Editor’s choice

necolas/react-native-web
_react-native-web - React Native for Web: A framework for building Native Web Apps_github.com

React-native의 View를 지정하면 안드로이드와 iOS 에 해당되는 ViewComponent 로 자연스럽게 지정해 주는 것처럼 똑같이 그리고 나면 div로 변환이 되는 형태를 취하고 있습니다.

codepen의 샘플입니다.

개발자 도구에서 확인해 봐도

분명히 소스는 View와 Text를 집어 넣었는데 div로 변환이 되어 있는 것을 볼 수 있습니다.

흥미롭지 않나요?

앞의 문구는 Java가 우리를 놀래켰을 때의 문구 이고 두번째는 React에서 쓴 오마주라고 한다면 지금 나온 이 컨셉이라면,

write once, run everywhere 도 가능하겠다는 생각이 드는군요.

Exported from Medium on May 31, 2017.

monaco-editor

6월 21, 2016

데쓰노…

페이지를 만들 때에 web editor 다들 어떤 거 쓰시나요? 최근에는 facebook에서도 Draft.js를 내 놓았습니다.

오늘은 단순한 web editor는 아닙니다. 개발IDE 중 하나인 Microsoft 의 VS code 용 editor를 웹에서 사용할 수 있도록 MS 가 공개 했습니다.

2016/06/21 Editor’s choice

Microsoft/monaco-editor
_monaco-editor - A browser based code editor_github.com

한번 어떤 내용인지 화면으로 보시면 더 좋겠죠?

Monaco Editor
_The Monaco Editor is the code editor that powers VS Code, a good page describing the code editor’s features is here._microsoft.github.io

이 사이트에서 코드 에디터가 얼마나 괜찮은지 확인해 볼 수 있습니다.

위 화면은 java 에디터에서 javascript 에디터로 바꾸니 console.log 로 바꾸는 과정에서 MS VS Code에디터 처럼 똑같이 작동하는 것을 볼 수 있습니다.

설치형으로 직접 확인해 볼 수 있습니다.

npm install monaco-editor

내가 만들 프로젝트에서 이렇게 셋팅할 수 있습니다.

좀 더 쉽게 확인해 볼 수 있는 방법을 확인해 볼까요?

친절한 MS 씨는 MSDN처럼 샘플코드도 완벽하네요

git clone https://github.com/Microsoft/monaco-editor-samples.git  
cd monaco-editor-samples  
npm install .  
npm run simpleserver

8888포트로 열린 걸 확인할 수 있습니다.

이런 아름다운 그림을 볼 수 있습니다!

이제 클라우드 에디터 시장이 통째로 변화가 되겠네요.

Exported from Medium on May 31, 2017.