처음 뵙겠습니다.
nana music에서 서버사이드 엔지니어를 하고 있는 강원이라고 합니다.
평상시 서버 팀에 속하지만 최근에는 전면을 메인으로 개발을 하고 있습니다. (가끔 API를 만들거나 했는데 요즘도 전혀 하지 않아서 외롭다)

자기 소개는 제쳐두고, 어드벤트 캘린더 13일째는 Weex라는 Vue.js제의 네이티브 앱 언어를 사용해 당사에서 개발하고 있는 nana의 로그인 화면을 만들어 보려고 생각합니다.

Weex란?

우선 Weex는 뭐야! 처음 들었어! 라고 말하는 것이 대부분이라고 생각합니다.

Weex는 세계적으로 유명한 회사 인 alibaba가 개발 한 Vue.js의 네이티브 앱 언어입니다.
React에서 말하는 React Native에 해당하는 언어입니다.
현재는 Apache Software Foundation이라는 곳으로 이관된 것 같습니다.

기본 Vue 기반이므로, Vue.js를 쓸 수 있는 분이라면 누구나 간단하게 쓸 수 있다고 생각합니다.

이번 목표

그런데, 이번의 목표입니다만, 처음에도 말했듯이, 폐사에서 개발하고 있는 nana의 로그인 화면을 Weex로 만들어 보는 곳까지 하려고 합니다.


이런 화면입니다.

실제로는 화면의 묘화만으로, 천이라든지의 구현은 하지 않으므로 양해 바랍니다.

Weex 설치

먼저 weex의 tool-kit을 install합니다.

npm install weex-toolkit -g

Project 만들기

프로젝트를 만듭니다.

weex create your-project-name

위의 명령을 실행하면 다음 내용을 듣기 때문에 입력합니다.

? Project name (weex)
? Project description (A weex project)
? Author (Ebara Kazuhiro <mailadress>)
❯ 1.0.17 Current: latest features 
  0.12.17 LTS: recommended for most users 
❯ stage-0: recommended for most users, support you to use all es6 syntax 
  stage-1 
  stage-2 
  stage-3 
? Use vue-router to manage your view router? (not recommended)
? Use ESLint to lint your code? (Y/n)
❯ Standard (https://github.com/standard/standard) 
  Airbnb (https://github.com/airbnb/javascript) 
  none (configure it yourself) 
? Set up unit tests (Y/n) 
❯ Yes, use NPM 
  Yes, use Yarn 
  No, I will handle that myself 

インストールが終わると以下のようなメッセージが表示されます。

```bash
✨  Done in 3.02s.

Success! Created weex at /Users/ebarakazuhiro/blog/weex

Inside that directory, you can run several commands:


  npm start
  Starts the development server for you to preview your weex page on browser
  You can also scan the QR code using weex playground to preview weex page on native

  npm run dev
  Open the code compilation task in watch mode

  npm run ios
  (Mac only, requires Xcode)
  Starts the development server and loads your app in an iOS simulator

  npm run android
  (Requires Android build tools)
  Starts the development server and loads your app on a connected Android device or emulator

  npm run pack:ios
  (Mac only, requires Xcode)
  Packaging ios project into ipa package

  npm run pack:android
  (Requires Android build tools)
  Packaging android project into apk package

  npm run pack:web
  Packaging html5 project into `web/build` folder

  npm run test
  Starts the test runner

To get started:

  cd weex
  npm start

디렉토리 구조는 이런 느낌입니다.
iOS와 안드로이드의 build 명령을 실행하면 디렉토리가 늘어나지만 구조 자체는 그리 복잡하지 않다고 생각합니다.

├── README.md
├── android.config.json
├── configs
├── dist
├── ios.config.json
├── node_modules
├── package.json
├── platforms
├── plugins
├── src
├── test
├── web
├── webpack.config.js
└── yarn.lock

로컬로 움직여보세요

실제로 로컬 환경에서 움직입니다.

웹

cd weex

npm start
or
yarn start
or
npm run web
or
yarn web

로 로컬 환경이 시작됩니다.
기동 방법이 많이 있는 것은 조금 수수께끼입니다만, 기본적으로 npm run serve or yarn serve 를 하고 있으므로, 직접 npm run serve or yarn serve 를 실행하는 것도 있습니다.


일어났습니다.
간단하네요.

iOS와 Android를 빌드하는 방법은 이번에는 생략합니다.

실제로 만들어 본 화면

결론으로서, 어느 정도까지 형태에는 할 수 있지만, 로컬 이미지는 현재 상태 참조할 수 없을 것 같아?


htps : // 기주 b. 코 m / 우에 x x 아 m / 우에 x는 c r ws / 이스 s / 52
위의 issue를 본 느낌, 안드로이드 스튜디오나 Xcode에 이미지를 배치해 참조하면 되는 것 같습니다만, VSCode등 에디터에서는 할 수 없는 것 같습니다.

만나보고 네이티브 앱 언어로서는 아직 발전 도상이라고 느꼈습니다만, 개인적으로는 아직 미지수의 언어이므로 앞으로 기대하고 있습니다.

이번에 쓴 코드는 나중에 Github에 올리므로 기대하세요.

내일은 @djmapet이 써줍니다! 기대하세요!

덤

Weex에는 WeexPlayground라는 앱이 있습니다.


이곳은 Weex에서 개발하고 있는 화면을 실제 기기로 확인할 수 있는 앱입니다.



로컬 환경을 시작할 때 표시되는 QR 코드를 이 앱에서 로드하면 기기에서 로컬 환경의 디자인이 표시됩니다.