1. pynecone 및 node.js 설치
1-1. pip install pynecone-io
파인콘을 설치하는 방법은 간단합니다. pypi로 설치가 가능하기 때문입니다.
파이썬 가상환경을 하나 생성한 후, 터미널에서
pip install pynecone-io를 실행하면 파인콘의 설치가 완료됩니다.
파이참을 사용하시는 분이라면, 프로젝트를 먼저 생성한 후 가상환경에서 pip 설치를 하시면 되겠습니다.
pynecone과 별개로, 여러분의 PC에 NodeJS가 설치되어 있어야 합니다.
node.js의 설치는 클릭 몇 번이면 해결되니 아래 과정을 따라해 주시면 되겠습니다.
1-2. Node.js 설치
노드JS는 12.22 이상의 버전이 필요합니다.
2023년 1월 현재 기준으로 최신버전은 19.4이며, LTS 버전은 18.13입니다.
아래 링크를 클릭해서 Node.js 홈페이지로 이동 후
18.13 버전을 클릭하여 다운로드 후 설치파일을 실행해줍니다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
다운로드가 완료되었으면 아래 파일을 실행하여 설치를 시작해줍니다.
Node.js의 설치가 완료되고 Finish를 클릭하시면
아래와 같이 터미널창이 하나 열리고, 필수도구 및 chocolatey 등이 자동으로 설치됩니다.
VS인스톨러 등.. 3기가 정도가 소요된다고 하네요.
시간은 제법 오래 소요됩니다. 멈춰 있더라도 다운된 것이 아니니 기다려주시면 됩니다.
이제 파인콘을 사용하기 위한 모든 준비가 완료되었습니다.
2. 간단한 예제를 실행해봅시다.
2-1. 파이참 실행
저는 파이참 IDE를 기준으로 설명드리겠습니다.
새 프로젝트를 하나 생성하고, 위에서 생성하신 가상환경을 적용하시거나, 새 가상환경을 만드셔도 됩니다.
프로젝트 생성이 완료되었습니다.
2-2. 파인콘 프로젝트 초기화
파이참에서 Alt-F12를 눌러 터미널을 열어줍니다.
아직 pip를 통해 pynecone-io를 설치하지 않으셨다면
pip install pynecone-io를 먼저 실행해주시고,
이어서 pc init을 입력하여 파인콘 프로젝트를 초기화해줍니다.
이제 프로젝트 탐색창(Alt-1)을 열어보시면
폴더와 파일 몇 개가 생성되어 있습니다.
프로젝트명(폴더이름)과 동일한 이름의 폴더가 하나 생성되어 있고,
그 폴더 안에, 폴더이름과 동일한 파이썬 파일이 하나 생성되어 있습니다.
내용은 아래와 같네요. 여러분도 그런가요?ㅎ
"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config
import pynecone as pc
docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"
class State(pc.State):
"""The app state."""
pass
def index():
return pc.center(
pc.vstack(
pc.heading("Welcome to Pynecone!", font_size="2em"),
pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
pc.link(
"Check out our docs!",
href=docs_url,
border="0.1em solid",
padding="0.5em",
border_radius="0.5em",
_hover={
"color": "rgb(107,99,246)",
},
),
spacing="1.5em",
font_size="2em",
),
padding_top="10%",
)
# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()
장고와 마찬가지로 이 파일도 별도로 실행해야 하는 파일이 아닙니다.
노드 서버를 시작하면 자동으로 index 함수를 앱에서 불러들어와 실행하게 됩니다.
한 번 실행해볼까요?
다시 터미널을 열고
pc run을 입력해줍니다.
최초 pc run 실행시에는 react 등 프론트엔드 패키지들을 설치하기 때문에 시간이 제법 소요됩니다.
설치가 완료되면 아래와 같이 로컬서버 실행상태가 됩니다.
우측 아래의 파란 링크(http://localhost:3000)를 클릭하시거나
브라우저를 직접 열고 localhost:3000을 입력하시면 우리가 실행한 웹앱이 열립니다.
아래는 0.1.12 버전에서 테스트하면서 생긴 오류입니다.
최신 버전에서는 발생하지 않습니다.
그런데... 뚜둔..
(아쉽게도?) 인트로 페이지가 제대로 작동하지 않네요.
위 오류는 현재 pynecone 코어팀에서도 다루고 있습니다.
2023년 1월 17일 오늘까지도 해당 이슈에 대한 언급이 있네요.
[get started] Error - Multiple children were passed to <Link> · Issue #267 · pynecone-io/pynecone (github.com)
흠, 당분간 링크는 빼놓고 진행합시다. 곧 고쳐주겠지요^^
그래서 소스코드에서 링크 컴포넌트를 아래와 같이 제거하고
"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config
import pynecone as pc
docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"
class State(pc.State):
"""The app state."""
pass
def index():
return pc.center(
pc.vstack(
pc.heading("Welcome to Pynecone!", font_size="2em"),
pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
# pc.link(
# href=docs_url,
# text="Check out our docs!",
# border="0.1em solid",
# padding="0.5em",
# border_radius="0.5em",
# _hover={
# "color": "rgb(107,99,246)",
# },
# ),
spacing="1.5em",
font_size="2em",
),
padding_top="10%",
)
# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()
다시 로컬호스트를 열어보면
그럼 다음 포스팅에서는 웰컴페이지의 소스코드를 한 번 스터디해볼까요?
다음 포스팅
2023.01.17 - [pynecone] - 파인콘 웰컴페이지 소스 훑어보기
파인콘 웰컴페이지 소스 훑어보기
소스코드는 아래와 같습니다. 간단해 보이지만 파인콘의 핵심이 되는 요소들이 전부 들어가 있으므로 프로젝트 구조와 더불어 이 코드를 한 번 훑어보는 것은 큰 도움이 될 것 같습니다. """Welcom
martinii.fun
국내 유일의 파이썬+한컴오피스 업무자동화 입문강의
움짤로 빠르게 배우는 파이썬-아래아한글 자동화 레시피 - 인프런 | 강의
파이썬으로 아래아한글을 다루는 짧은 예제코드들을 소개하고, 중간중간의 결과를 GIF로 보여드립니다. 동영상 강의가 아니지만 오히려 빠르게 배울 수 있고, 따라하기도 쉽습니다., - 강의 소개
www.inflearn.com
'REFLEX 튜토리얼' 카테고리의 다른 글
| 파인콘 첫 번째 예제, 카운터 앱 (4) | 2023.01.17 |
|---|---|
| 파인콘 웰컴페이지 소스 훑어보기 (0) | 2023.01.17 |
| 파인콘(pynecone)이란 무엇인가? (0) | 2023.01.17 |
댓글