내 전화만 사용하여 전체 풀스택 앱을 만들었습니다 🤯️

Thanks to Cyclic.sh for sponsoring this article!

프로그래밍으로 긴 하루를 보낸 후 집에 돌아와 샤워를 하다가 문득 일련의 생각이 떠올랐습니다...

전화가 정말 먼 길을 왔다는 것은 알려진 사실입니다. 부피가 큰 통신 장치부터 주머니에 쏙 들어가는 작은 컴퓨터까지.

이 작은 사각형이 전화를 걸고, 전문적인 사진을 찍고, 심지어 복잡한 AI 처리까지 할 수 있다는 것이 놀랍습니다.

그러나이 모든 권한을 가지고 완전한 프로그램을 작성하기 위해 전화를 사용할 수 없다고 누가 말할 수 있습니까?

그래서 나는 이 작은 수수께끼를 풀기 위해 스스로를 떠맡았다. 이 기사에서는 휴대전화만 사용하고 Cyclic.sh의 약간의 마법을 사용하여 전체 스택 앱을 작성하는 것이 얼마나 쉬운지 보여드리겠습니다.

아직 공식 기능이 아니므로 app for scheduling posts on DEV.to 을(를) 빌드할 것입니다. 유용하게 사용하시길 바랍니다 :)

의 시작하자!

IDE 설정 💻

Termux 설치

Google Play 스토어에서 사용할 수 있지만 해당 버전은 오래되었습니다.

최신 버전의 Termux를 설치하려면 visit F-Droid .

완료되면 Termux를 실행하고 전화기에서 바로 Linux의 경이로움을 탐색하십시오!

앞으로 많은 문제를 방지할 수 있으므로 작업을 수행하기 전에 이 두 명령을 실행하는 것이 중요합니다.

pkg upgrade
pkg update

Git, Github CLI 및 Vim 설치

Git과 우리가 가장 좋아하는 텍스트 편집기 Vim이 없었다면 Linux가 아니었을 것입니다! 또한 Github CLI를 사용하여 Git 워크플로우를 단순화합니다.

이것들을 설치하는 것은 Vim을 닫는 방법을 알아내는 것만큼 간단합니다 ;)

pkg install git gh vim

그리고 Node와 그 패키징 시스템인 NPM의 도움 없이는 웹 애플리케이션을 만들 수 없었을 것입니다. 또한 설치가 매우 쉽습니다.

pkg install nodejs-lts

프런트 엔드 만들기 🤷‍♂️️

이것은 내가 생각했던 것보다 훨씬 쉬웠다…

모바일에서 Vue 앱 개발하기!

좋은 템플릿에서 시작하여 웹앱을 구축하는 것이 훨씬 쉽습니다! 이 명령을 실행하면 정확히 다음 작업이 수행됩니다.

npm init vue@latest

프런트엔드 코드는 매우 간단하기 때문에 자세한 내용은 다루지 않겠습니다. 대신 Vim으로 코딩하는 짧은 비디오가 있습니다.

Spoiler alert: it’s pretty rough on the fingers!

백엔드 만들기 🙅️

이 부분이 복잡할 것 같지만 Cyclic starter templates을 사용하면 파이처럼 쉽습니다!

Cyclic을 사용하여 Express 서버 만들기

코딩 시간을 절약하기 위해 Cyclic’s Express template을 사용했습니다.

Cyclic의 모바일 반응형 웹사이트 덕분에 이 작업은 매우 쉬웠습니다.

Cyclic API를 프런트 엔드에 연결

백엔드를 프런트엔드에 연결하는 방법은 무엇입니까? 단순한. HTTP 요청!

Note: we also have to setup CORS, but for quick usage, it can be done with one line of code: app = express(cors())

모바일 장치에 작성된 코드는 다음과 같습니다.

서버 시작 🚀

이 단계는 약간 어려울 수 있습니다. 백엔드를 배포하려면 일반적으로 서버를 구입하고 구성하는 데 몇 시간을 소비해야 합니다.

고맙게도 Cyclic.sh이 이 모든 문제에서 우리를 구해줍니다. Cyclic을 사용하면 서버를 무료로 배포할 수 있으며 모든 Github 리포지토리와 쉽게 작동할 수 있습니다.

Github 저장소와 Cyclic 통합

Cyclic’s mobile-responsive website 의 도움으로 이것은 매우 쉬운 일이었습니다.

버튼 클릭으로 배포

이 모든 작업을 마친 후에는 긴장을 풀고 휴식을 취하고 전개할 시간입니다!

Cyclic에서 배포는 단일 버튼 클릭을 의미합니다. 너무 간단해서 컴퓨터가 필요하지 않습니다!

결론

정말 멋진 여행입니다! 그리고 가장 놀라운 부분이 무엇인지 아십니까? 실제로 작동합니다!

직접 보고 싶나요? Here's the source code , 여기에 live app 이 있습니다.

우리는 이 여정에서 프런트엔드용 VueJS 및 TailwindCSS부터 백엔드용 Express 및 Cyclic에 이르기까지 다양한 도구를 사용했습니다. 그리고 Cyclic의 힘은 그 이상으로 확장됩니다!

실제로 Cyclic은 React에서 Svelte, NextJS에 이르기까지 모든 종류의 앱을 배포할 수 있습니다. 꽤 깔끔하죠?

자, 만약 당신이 이 도전을 시도했다면, 당신은 무엇을 다르게 했을까요?

엘루다 팔로우

follow me for a free cookie 🍪️