본문 바로가기

파인콘24

파이썬의 리스트도 표현할 수 있나? # 투두리스트 앱 만들기 앞선 포스팅에서는 간단히 rx.heading이나 rx.text를 이용해 화면에 글자를 출력해보았으며 State라는 클래스와 클래스 변수인 Var를 이용해 동적인 웹앱, Counter를 구현해보았다. 그럼 이런 생각도 해볼 수 있을텐데? 단순한 텍스트 목록은 rx.text를 나열하면 될텐데, ["a", "b", "c"] 같은 리스트도 표현할 수 있을까? (직접 공식문서를 찾아 읽어보신 분이라면, 어렵지 않게 구현하실 것) 이 때는 우리가 사용할 또 다른 레이아웃 컴포넌트, 바로 rx.foreach가 필요하게 되는 시점이다. (굳이 비유하면 파이썬의 for문과 map 함수를 합친 느낌이다.) 참고로 rx.foreach는 단순한 파이썬의 for문과는 살짝 다르다. 무엇이 다른고 하니, rx.foreach(리스.. 2023. 10. 3.
간단한 동적 웹앱 만들어보기 : Counter 이번 포스팅에서는 아래와 같은 페이지를 만들어 보고, State의 사용법에 대해 간단히 이해해보고자 한다. 아래와 같은 코드로 index 함수를 만들었다. import reflex as rx def index(): return rx.vstack( # 행 방향으로 나열하는 레이아웃 컴포넌트 rx.heading("Counter"), # 제목 rx.hstack( # 열 방향으로 나열하는 레이아웃 컴포넌트 rx.button("-", color_scheme="red"), rx.heading("0"), rx.button("+", color_scheme="green") ) ) app = rx.App() app.add_page(index) app.compile() 참고로 위에서 사용한 vstack, hstack은 각각.. 2023. 10. 3.
[컴포넌트 소개] flex VS grid VS hstack #layout 지난 포스팅에서 가장 기본적인 wrapping component인 rx.box와 rx.fragment를 소개했습니다. 하지만, 기본적인 스타일(예를 들면 가운데정렬이나 컴포넌트 간격 조절 등?)만 적용하려고 해도 코드라인이 길어집니다. reflex에서는 이런 작업의 편의를 위해 rx.flex, rx.container, rx.center, rx.stack, rx.vstack, rx.hstack, rx.grid 등 다양한 컴포넌트를 다양하게 제공하고 있습니다. rx.center rx.center는 rx.box의 자식컴포넌트를 중앙으로 정렬해주고 flex-box가 적용되며, 아래의 CSS가 기본적으로 적용되어 있습니다. { display: -webkit-box; display: -webkit-flex; dis.. 2023. 9. 24.
[컴포넌트 소개] rx.box vs rx.fragment #layout rx.box는 가장 기본적인 태그와 같습니다. 특정 컴포넌트를 태그로 한 겹 감싸주는 기능 외에 아무 스타일도 적용되지 않습니다. rx.box와 거의 동일한 컴포넌트로 rx.fragment가 있습니다. rx.box와 rx.fragment의 차이는 딱 한 가지입니다. rx.box는 로 변환되어 그 안의 컴포넌트들을 한 겹 감싸주는 데 반해, rx.fragment는 (렌더링 후를 보면) 어떤 태그로도 감싸져 있지 않다는 점입니다. 그래서 rx.fragment에는 (당연히) 어떤 prop이나 이벤트 트리거도 적용되지 않습니다. rx.box의 렌더링 결과 rx.fragment의 렌더링 결과 그밖에 rx.box와 유사한 컴포넌트들 rx.box에 아주 조금씩 스타일이 추가적용된 컴포넌트들로 rx.center, rx.. 2023. 9. 24.
[컴포넌트 소개] rx.span #typography 1. rx.span이란 rx.span 컴포넌트는 줄바꿈을 하지 않고 라인 내 특정 텍스트에만 스타일을 적용할 수 있습니다. 렌더링 후에는 기본적으로 요소로 바뀝니다. 또한 rx.span 대신 rx.text("text", as_="span")으로 을 구현할 수도 있습니다. 2. 이전에 소개한 컴포넌트 2023.09.22 - [REFLEX 튜토리얼] - [컴포넌트 소개] rx.text #typography [컴포넌트 소개] rx.text #typography 1. rx.text란 rx.text 컴포넌트는 파이썬의 문자열을 웹에 표시하기 위한 기본 단위입니다. 렌더링 후에는 요소로 변환됩니다. 특정 속성을 부여하고 싶지 않다면 index 함수 내에서 rx.text("Hello world!") martinii... 2023. 9. 22.
[컴포넌트 소개] rx.heading #typography 1. rx.heading이란 rx.heading 컴포넌트는 파이썬의 문자열을 "제목(heading)"으로 표시해줍니다. 렌더링 후에는 기본적으로 요소로 바뀝니다. 2. 크기조절 rx.heading 또한 rx.text와 마찬가지로 font_size 파라미터로 크기를 조절할 수 있으며, as_ 파라미터로 부터 까지 태그 변환도 가능합니다. 또한 내부적으로 rx.box 컴포넌트와 동일하게 작동하므로, rx.box에 부여할 수 있는 속성을 동일하게 rx.heading에도 적용할 수 있습니다. 3. 특정 라인수를 넘어갈 때 자르고 싶다면? 위의 예시에서 보시다시피 rx.heading에도 (rx.text와 마찬가지로) no_of_lines라는 속성(prop)이 있어서 (noOfLines로 사용해도 됩니다) 긴 제목.. 2023. 9. 22.
[컴포넌트 소개] rx.text #typography 1. rx.text란 rx.text 컴포넌트는 파이썬의 문자열을 웹에 표시하기 위한 기본 단위입니다. 렌더링 후에는 요소로 변환됩니다. 특정 속성을 부여하고 싶지 않다면 index 함수 내에서 rx.text("Hello world!") 대신 "Hello world!" 라고 사용하셔도 결과는 (거의) 동일해 보이기는 합니다. rx.text로 렌더링한 결과 Hello world! 일반 문자열로 렌더링한 결과 Hello world! 2. 크기조절 rx.text는 font_size 파라미터로 크기를 조절할 수 있습니다. 3. 특정 라인수를 넘어갈 때 자르고 싶다면? rx.text에는 no_of_lines라는 속성(prop)이 있습니다. 긴 텍스트를 표현해야 할 때, 레이아웃이 깨지는 것을 방지하기 위해 특정 라.. 2023. 9. 22.
[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.