pynecone21 [컴포넌트 소개] 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. wsl에서 파이참 터미널 열 때 가상환경 자동 활성화하는 방법 오랜만에 포스팅을 남깁니다. 최근 reflex(구:pynecone) 관련 스터디를 하면서, 파이참 - 윈도우 터미널에서는 자동으로 가상환경이 활성화되는데 wsl 환경에서는 터미널을 열 때마다 가상환경을 직접 activate 해줘야 하는 부분이 불편했습니다. 다행히 스택오버플로와 젯브레인스 블로그 등을 참고해서 wsl터미널을 열 때마다 가상환경을 자동 활성화하는 방법을 찾아 적용하기 쉽게 정리해보았습니다. 아래 세 단계만 따라하시면 됩니다. 1. (당연하지만) 가상환경을 생성합니다. 저는 ~/.virtualenvs/venv 안에 가상환경을 만들어보았습니다. 2. ~/.pycharmrc 파일을 생성합니다. (파일명은 중요하지 않습니다.) 내용은 아래와 같이 두 줄을 입력합니다. source ~/.bashrc.. 2023. 8. 15. [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] Dall-E 2 이미지 생성 앱 만들기① #프로젝트 생성 이번에 밑바닥부터 만들어볼 pynecone 앱은 바로 Dall-E 이미지 생성기입니다. 아시다시피 Pynecone은 React.js라는 자바스크립트 UI 라이브러리를 래핑한 파이썬 패키지인데요. 파이썬 풀스택 웹프레임워크라는 이름답게 간단한 파이썬 코드만으로 위와 같은 웹앱을 금세 만들어낼 수 있습니다. 대신 리액트나 Next.js에 대한 지식이 조금이라도 있으면 보다 쉽게 pynecone을 이해할 수 있는 것 같아요. 지난 튜토리얼인 투두리스트처럼 pynecone 프로젝트를 하나 생성하고 시작하겠습니다. pynecone을 아직 설치하지 않으셨거나, pynecone 프로젝트 생성이 처음이신 분은 아래 포스팅을 참고해주세요. 파인콘 및 node.js를 설치합니다. (martinii.fun) 파인콘 및 no.. 2023. 2. 15. 이전 1 2 3 다음
