[Lynx] Quick Start - Lynx 프로젝트를 처음 실행해보자

이번엔 Lynx 공식문서의 Quick Start 파트를 통해 Lynx 세팅을 하고 처음 실행하는 일을 해볼 생각이다.

공식문서 - Quick Start를 읽고...

이 글은 Lynx 프로젝트를 세팅하고 처음 실행해보는 일을 따라한다.
그리고 맥북에 iOS 시뮬레이터로 실행한다. (Xcode는 이미 깔려있다.)
pnpm으로 진행하는데, 이건 상관 없을 것 같다.
(또한 2025년 4월 기준인 만큼 버전 이슈는 미래에 알 수 없다.)

 

Requirements

Node.js 18 버전 이상
(Type Script를 쓰기 위해선 Node.js 18.19은 되야한다.)

 

Installation

1. Create a new Lynx project

[create-respeedy]
Rspeedy라는 툴을 사용해서 Lynx 프로젝트를 빌드한다.
그리고 추천하는 프로젝트 시작하는 방법은 create-respeedy이다. (React에서 CRA를 했던 것과 비슷한 느낌)

# npm
npm create rspeedy@latest

# yarn
$ yarn create rspeedy

# pnpm
$ pnpm create rspeedy@latest

# bun
$ bun create rspeedy@latest

 

Rspeedy

✅ Respeedy란?
The Build Tool for Lynx. Build your Lynx application instantly with Rspack.
지난 글 (Why Lynx)에 나온대로 Lynx를 빌드툴로 Rust 기반이다.
Repack이라는 Rust 기반 번들러를 통해 Lynx에 최적화된 구성을 만들었다고 한다.

 

[Project Setting]

pnpm create respeedy@latest 결과

 

먼저 프로젝트 이름, 경로를 작성하라고 하는데, 나는 quick-start라고 했다.

 

TS / JS 선택

 

TypeScript와 JavaScript 중 하나를 선택하라고 나오는데 난 TypeScript를 선택했다. (TypeScript를 권장한다고 나온다.)

 

lint 툴 선택 (Biome, ESLint, Prettier)

 

추가적으로 lint 툴을 추가할 것인지 나오는데, 그냥 넘어갔다.

 

(Next Step) 프로젝트 실행법

 

설치가 완료됐다. 이제 어떻게 실행하는 지 설명해주는 내용이 나온다.

이대로 따라가는건 이후에 시뮬레이터까지 돌아가면 하자.

 

2. Prepare Lynx Explorer

[Install Xcode]

 

install Xcode

Xcode ➡️ 설치하고 업데이트가 필요하면 하면 된다.

 

[Download LynxExplorer]

 

LynxExplorer 설치하기

LynxExplorer-arm64.app.tar.gz ➡️ 공식문서에서 설치하라고 한다.

 

 

 

압축 파일을 추출한다.

$ mkdir -p LynxExplorer-arm64.app/
$ tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/

 

명령어대로 압축을 해제하면 응용프로그램이 나온다.

 

추출하니까 이렇게 응용프로그램이 나왔다.

 

✅ LynxExplorer란?

Lynx Explorer is a sandbox for trying out Lynx quickly.

 

Lynx를 실행할 수 있게 도와주는 샌드박스. 잘 모르겠다. 아무튼 그렇다.

React Native 안써봤어서 모르겠지만... React Native의 Expo와 비슷한 것처럼 생각해도 되지 않을까?

 

[Xcode 시뮬레이터에 LynxExplorer 설치]

 

Xcode 시뮬레이터 실행

Xcode를 키고 메뉴에서 OpenDeveloer Tool > Simulator를 누르면 시뮬레이터가 실행된다.

 

 

실행된 시뮬레이터에 LynxExplorer-arm64를 드래그 앤 드랍한다.

(그럼 시뮬레이터에 LynxExplorer가 설치된다!)

 

시뮬레이터에서 LynxExplorer를 실행하자.

 

3. Start developing

$ cd <project-name>
$ pnpm install
$ pnpm run dev

 

위 순서대로 CLI에 입력하자.

CLI에 `run dev`를 하면 QR 코드랑 URL 등등 여러가지가 나온다.

 

실행 결과에 나오는 URL을 복붙.

 

시뮬레이션에서 LynxExplorer를 키고 URL을 복사해서 넣어주자.

 

기본 프로젝트가 실행된 모습

 

짠!

 

4. Debugging

[Lynx DevTool 설치하기]

 

링크에 들어가면 나오는 최신 버전의 DevTool을 받아보자

Lynx-devtool ➡️ 설치하고 열면 데스크탑 어플리케이션으로 Lynx DevTool을 쓸 수 있고, 해보진 않았지만 USB 케이블을 연결하면 해당 디바이스에서도 디버깅이 된다고 한다.

들어가서 설치하면 된다.

 

[시뮬레이터와 연결하기]

시뮬레이터와 데브툴을 연결하는 방법

일단 자동으로 위에 뭔가 iPhone from mac LynxExplorer가 잘 잡히는 것 같다. (자동으로 잡히나보다.)

Please Open The Page 탭을 눌러서 LynxExplorer에서 했던 것처럼 우리 페이지(?)의 URL을 넣자.

 

Confirm을 눌러주자.

 

승인하라고 창이 뜬다. 승인했더니 시뮬레이터에서 앱이 꺼졌는데, 다시 키면 된다.

 

DevTool 내부 모습 (크롬브라우저에서 개발자도구를 킨 모습과 유사하게 생겼다.)

 

다시 실행하면 이렇게 DevTool과 연결된 모습이 보이는데, 크롬브라우저에 개발자도구와 정말 똑같이 생겼다. 익숙해지기 편할 것 같다.

 

추가로 나중에 디버깅 방법, 도구 사용법을 알아보고 싶다면 Debugging 파트를 읽어보면 될 것 같다.

---

마치며

다음 스텝으로 ReactLynx라는 프레임워크와 함께 튜토리얼을 진행할 예정이다. React와 얼마나 비슷한지도 경험할 수 있을 것 같다. 아쉬운 점은 React Native는 해본 적이 없어서 같은 크로스플랫폼인데 비교를 못한다는 점이 아쉽다. 최근에 플러터를 공부하는 중이라 비교하면서 동시 학습이 될거라 그 둘은 비교를 할 수 있을지도...

 

조금 해보고 나중엔 디버깅 툴 Lynx DevTool도 다루는 부분을 읽어봐도 좋을 것 같다.
확실히 웹이랑 다르게 앱을 하려고 하면 진입장벽이 좀 있다. 이것저것 받으라는게 많다. 번거로웠지만 이제 개발만 하면 되겠지?