본문 바로가기
pynecone 튜토리얼

파인콘 및 node.js를 설치합니다.

by 일코 2023. 1. 17.
반응형

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

좌측의 LTS버전을 다운로드하시는 것을 추천합니다.

 

다운로드가 완료되었으면 아래 파일을 실행하여 설치를 시작해줍니다.

설치파일을 실행하여 설치 시작

 

Next -> Next ...
체크버튼 선택한 후 Next
설치경로는 그대로 두고 Next
커스텀이 필요한 경우가 아니면 그냥 Next
필수툴 설치에 체크하고 Next
Install 클릭
설치 진행중
설치완료

Node.js의 설치가 완료되고 Finish를 클릭하시면

아래와 같이 터미널창이 하나 열리고, 필수도구 및 chocolatey 등이 자동으로 설치됩니다.

VS인스톨러 등.. 3기가 정도가 소요된다고 하네요.

시간은 제법 오래 소요됩니다. 멈춰 있더라도 다운된 것이 아니니 기다려주시면 됩니다.

아무 키나 누르면 설치 시작

이제 파인콘을 사용하기 위한 모든 준비가 완료되었습니다.

 

2. 간단한 예제를 실행해봅시다.

 

2-1. 파이참 실행

저는 파이참 IDE를 기준으로 설명드리겠습니다.

새 프로젝트를 하나 생성하고, 위에서 생성하신 가상환경을 적용하시거나, 새 가상환경을 만드셔도 됩니다.

프로젝트명은 자유롭게, 가상환경 설정 후, 우측 하단의 Create

프로젝트 생성이 완료되었습니다.

2-2. 파인콘 프로젝트 초기화

파이참에서 Alt-F12를 눌러 터미널을 열어줍니다.

아직 pip를 통해 pynecone-io를 설치하지 않으셨다면

pip install pynecone-io를 먼저 실행해주시고,

이어서 pc init을 입력하여 파인콘 프로젝트를 초기화해줍니다.

FastAPI,

이제 프로젝트 탐색창(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.13 미만의 버전에서는 link 컴포넌트 관련 오류가 발생합니다.

 


아래는 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

 

반응형

댓글0