😮 Python....못 하는 게 뭐야...?
python을 배우면서 python의 영역이 점점 넓어진다는 이야기를 들은 적이 있다. 하지만 실제 채용 공고들을 뒤적여봤을 때 결국 메인 언어는 JAVA, C++, C# 이었고, 기업 내부에서 도전적으로 일부 페이지나 기능에서만 python이 쓰여지고 있다고 생각했다.
그러던 중 주말에 팽팽 놀다가 자려고 누운 일요일 밤, 노마드코더의 유튜브를 보고 "이거시 모다냐...."했던 게 있는게 그게 바로 Pynecone이다.
Pynecone은 프론트엔드, 백엔드 그리고 배포까지 모두 python으로 가능한 프레임워크이다. 신기한 건 못 참는 나는 바로 공식문서를 토대로 +구글링으로 토이 프로젝트를 진행해보았다.
🛠 환경 설정
기본적으로 python 3.7 이상 + node.js 12.22.0 이상이 필요하다.
프로젝트는
- windows10
- vscode
- git bash
- python 3.10.9
- node.js 19.4.0
로 진행하였다.
우선 커맨드창에서 가상환경을 생성해준다.
$ mkdir my_app # 디렉토리 하나 만들어주고
$ cd my_app
$ python -m venv venv # 가상환경 생성
$ source venv/Scripts/activate # 가상환경 활성화가상환경까지 만들어주었으면 이제 pynecone을 세팅해준다.
$ pip install pynecone-io # 패키지 설치
참 많은 것을 깔아준다..;
그 다음 node.js를 설치해줘야 하는데, 그냥 node.js 홈페이지에서 다운받으면 로컬에 깔리기 때문에 내 venv 가상환경에 가져올 필요가 있다. 따라서 아래와 같은 절차를 거쳐야 한다.
$ pip install nodeenv # nodejs를 가상환경별로 사용할 수 있게 해주는 패키지
$ nodeenv -p # 현재 가상환경에 독립된 nodejs 환경 추가
$ node -v # 버전이 나오는지 확인한다.
🖲 pynecone 실행
이제 환경 설정은 끝났고 이제 pynecone을 실행해주면 알아서 폴더가 쫘-악 깔린다.
mkdir testapp # 폴더를 하나 더 만들어주고
cd testapp # 여기에 들어가서
pc init # pynecone프로젝트를 만들어준다생성해주면 아래와 같은 폴더 구조가 생긴다.
폴더 구조는 간단하다.
.web은 NextJS로 컴파일된 결과물들이 들어가있는 폴더이다. 딱히 만질일은 없다. 디버깅 할 때만 건들이자.assets는 각종 css나 image 파일들을 넣어놓는 폴더이다.testapp는 본인이 만든 app의 이름의 폴더로, 그 아래의.py파일에서 다 작성하면 된다.pcconfig.py파일은 환경 설정 파일로, DB랑 연결하는 등의 코드를 추가할 때 쓰면 된다.
여기까지 다 되었다면 이제 진짜 pynecone을 실행해주면 된다. 처음엔 조금 시간이 걸린다.
pc run끝이다. 그러면 커맨드창에 이것저것 뜬다. 그 다음 http://localhost:3000/에 접속하여 잘 뜨는지 확인한다.
다만, 나는 이렇게 했을 때, 아래와 같은 에러를 만났다.
error - node_modules\next\dist\client\link.js (216:22) @ Object.LinkComponent [as render]
error - Error: Multiple children were passed to <Link> with `href` of `https://pynecone.io/docs/getting-started/introduction` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children
next.js를 1도 모르는 사람 입장에서 당황스러웠다. 우선 에러를 잘 읽어보니 <Link>에 href를 여러개 준 게 문제인 듯 했다. 기본으로 깔릴 때 href를 전달할 때 문제인 듯 하나, 잘 모르겠어서 그냥 서버가 잘 작동하는지만 확인하기 위해 testapp.py파일을 바꿔주었다.
from pcconfig import config
import pynecone as pc
class State(pc.State):
pass
def index():
return pc.text("Hello World!", color="blue", font_size="1.5em")
app = pc.App(state=State)
app.add_page(index)
app.compile()그렇다면 아래와 같은 화면을 만날 수 있다.
서버 연결은 완성되었다.
더 자세한 내용은 다음 포스팅에서 계속하겠다.
