웹프레임워크8 reflex 웹페이지는 기본적으로 클래스 하나, 함수 하나로 구성된다. reflex는 프론트엔드와 백엔드의 구분이 다소 모호(?)한 pure-python fullstack webframework이다. reflex로 만드는 웹앱은 기본적으로 State라는 클래스 하나, 그리고 index라는 함수 하나로 구성된다. 이를 이해하기 위해서는 가장 간단한 앱 하나를 만들어보는 것이 좋다. 우선 State 없이 간단한 페이지함수인 index를 만들어보자. import reflex as rx def index(): return rx.heading("Hello world!") app = rx.App(state=State) app.add_page(index) app.compile() python 코드로 구성된 간단한 소스이지만, 이는 리플렉스를 구성하고 있는 node.js, React, N.. 2023. 10. 3. [pynecone] Dall-E 2 이미지 생성 앱 만들기⑤ #마치며 파인콘으로 이미지생성앱 만들기 마지막 시간입니다. 지난 포스팅에서 사실상 앱을 완성한 거나 다름이 없었는데, 2023.02.16 - [pynecone 튜토리얼] - [pynecone] Dall-E 2 이미지 생성 앱 만들기④ [pynecone] Dall-E 2 이미지 생성 앱 만들기④ 들어가기 전에 지난 시간에는 작정하고 우리 앱에 들어가는 파인콘 컴포넌트 10개를 모두 짚어보았습니다. 사실 컴포넌트가 어떻게 작동하고 어떤 속성을 지녔는지를 파악했다면, 이들을 배치 martinii.fun 이번 포스팅에서는 세 가지 정도만 다듬어보겠습니다. 바로, ① 프로그레스바는 이미지 생성중에만 나타나게 하기(pc.cond 활용) ② 프롬프트 하나로 이미지 여러 개 한 번에 생성하기 ③ API 오류 발생시 window.. 2023. 2. 16. [pynecone] Dall-E 2 이미지 생성 앱 만들기④ #State 들어가기 전에 지난 시간에는 작정하고 우리 앱에 들어가는 파인콘 컴포넌트 10개를 모두 짚어보았습니다. 사실 컴포넌트가 어떻게 작동하고 어떤 속성을 지녔는지를 파악했다면, 이들을 배치하고 조합하는 코딩은 듀플로를 조립하듯 너무 간단한 일입니다. 기억이 나지 않으면 검색하면 되고요. https://pynecone.io/docs/library 알려드렸죠? 그래서 프론트엔드 중에서도 UI 파트라고 할 수 있는 index 함수를 짜는 것보다 더 중요한 것은 웹앱의 상태값(변수 등)을 저장하는 State클래스에 대해 이해하는 것입니다. 지난 튜토리얼에서도 계속해서 State 클래스와 State 변수에 대해 설명드렸지만 가장 중요한 점은 State 클래스 안에 정의된 변수들은 특별한 기능을 지녔다는 것입니다. 바로.. 2023. 2. 16. [pynecone] Dall-E 2 이미지 생성 앱 만들기③ #컴포넌트 지난 포스팅에서는 우리 튜토리얼 프로젝트인 Dall-E 웹앱에 들어가는 구성요소, 즉 우리 앱을 구성할 컴포넌트 목록에 대해 알아보았습니다. 2023.02.15 - [pynecone 튜토리얼] - [pynecone] Dall-E 2 이미지 생성 앱 만들기② [pynecone] Dall-E 2 이미지 생성 앱 만들기② 지난 포스팅에서는 openai.com Dall-E2의 API를 활용하여 이미지를 생성해보았습니다. (아직 본격적인 파인콘 앱을 만들지는 않았습니다.) 2023.02.15 - [pynecone 튜토리얼] - [pynecone] Dall-E 2 이미지 생성 앱 martinii.fun 이번 포스팅에서는 우리가 이 앱에서 다룰 컴포넌트에 대해 개략적으로만 알아봅시다. 코드에 출현하는 10개의 컴포넌.. 2023. 2. 16. [pynecone] Dall-E 2 이미지 생성 앱 만들기② #UI배치 지난 포스팅에서는 openai.com Dall-E2의 API를 활용하여 이미지를 생성해보았습니다. (아직 본격적인 파인콘 앱을 만들지는 않았습니다.) 2023.02.15 - [pynecone 튜토리얼] - [pynecone] Dall-E 2 이미지 생성 앱 만들기① [pynecone] Dall-E 2 이미지 생성 앱 만들기① 이번에 밑바닥부터 만들어볼 pynecone 앱은 바로 Dall-E 이미지 생성기입니다. 아시다시피 Pynecone은 React.js라는 자바스크립트 UI 라이브러리를 래핑한 파이썬 패키지인데요. 파이썬 풀스택 웹프레임 martinii.fun 이번 포스팅은 본격적으로 코딩을 시작하기 전에.. 우리가 진행할 파인콘 프로젝트를 차근차근 알아가봅시다. 입문자를 대상으로 하는 만큼, 가급적 .. 2023. 2. 15. Pynecone tutorial: Todo앱을 만들어봅시다. 지난 포스팅에서는 터미널에서 pc run을 실행하여 pynecone 프로젝트를 초기화할 때 생성되는 프로젝트의 구조에 대해 간략히 훑어보았습니다. 이번에는 본격적으로 react의 hello world로 불리는(?) todo앱을 pynecone으로 시작 단계부터 간단히 구현해보겠습니다. 우리가 만들 todo앱은 아래와 같은 모습입니다. 아쉽게도 on_key나 on_enter 같은 키보드입력 이벤트는 아직 pynecone에 구현되어 있지 않습니다. 투두리스트에 할 일을 추가할 때 버튼을 클릭하지 않고 엔터키를 누르면 바로 할 일이 추가될 수 있도록 하여 사용자 경험을 개선하고자 하는 제안들이 많이 있고, 개발진에서도 바로 다음 릴리즈에서 추가하겠다고 하니, 빠른 업데이트를 기다려봅니다. 출처 : Input .. 2023. 1. 19. 파인콘 첫 번째 예제, 카운터 앱 카운터 앱 만들어보기 파인콘의 공식문서에서 제공하고 있는 첫 번째 예제, 카운터 앱을 같이 만들어봅시다. 전체 소스코드와 영문 설명은 아래 링크의 문서에서 확인하실 수 있습니다. https://pynecone.io/docs/getting-started/introduction 전체 소스코드를 먼저 보여드리기보다는;;; 같이 틀을 잡아가면서 한 줄씩 완성해봅시다. 파인콘 앱과 인터랙션에 대해 이해하는 좋은 예제이기 때문입니다. 1. 파인콘 앱을 추가해줍니다. 앱을 추가하는 것이 복잡한 과정은 아닙니다. 그냥 폴더 하나, 파일 하나 생성하는 것에 지나지 않습니다. 이전 포스팅에서 예제를 테스트하면서 파이참 프로젝트를 생성하셨던 분들이라면 굳이 파이참 프로젝트를 하나 더 생성하지 마시고, 아래와 같은 과정을 통.. 2023. 1. 17. 파인콘 웰컴페이지 소스 훑어보기 소스코드는 아래와 같습니다. 간단해 보이지만 파인콘의 핵심이 되는 요소들이 전부 들어가 있으므로 프로젝트 구조와 더불어 이 코드를 한 번 훑어보는 것은 큰 도움이 될 것 같습니다. """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.. 2023. 1. 17. 이전 1 다음
