REFLEX 튜토리얼/reflex 공식문서 요약7 투두리스트에서 특정 업무를 수정해보자. #Update # 끝! 지난 시간까지 CRUD 중 CRD를 완료했다. 이번 포스팅에서는 Update를 구현해볼 차례이다. 우리가 비록 리플렉스 문법은 다소 생소할지언정, 파이썬의 간단한 문법인, 리스트 메서드나 enumerate만 가지고도 투두리스트의 기본로직을 전부 구현해낸다는 점은 시사하는 바가 결코 작지 않다. 특히 react나 각종 관련 컴포넌트 라이브러리, 자바스크립트 및 html, css 등의 코드가 전혀 없었음을 감안해보면 충분히 리플렉스의 강점을 느끼고 계실 거라고 생각한다. 완성한 형태를 미리 보여드리면 아래와 같다. 참고로 Update를 담당하는 이벤트핸들러에서 쓰게 될 파이썬 문법은 (여러분 대부분이 예상하시는 바와 같이) `todo_list[idx] = val` 이라는 인덱스 명령어다. 그냥 전체 코드를 .. 2023. 10. 12. 투두리스트에서 완료한 업무를 제거해보자. # Delete[2/2] 지난 포스팅에서는 특정 할일의 정확한 삭제(pop)를 위해 State에서 enumerate를 통해 enum_list: list[tuple[int, str]] 라는 변수를 추가로 만들었다. (이 안에 index번호가 있는 덕분에, 정확하게 순서(인덱스)를 명시하여 특정 요소를 삭제할 수 있게 됐다.) 그래서 이번 포스팅에서는 페이지함수인 index를 완성해보기로 한다. 기존에 만든, "할 일 추가"만 가능한 페이지 함수 index는 아래와 같다. def index(): return rx.container( rx.foreach( State.todo_list, rx.text ), rx.form( rx.hstack( rx.input(value=State.new_item, on_change=State.set_ne.. 2023. 10. 12. 투두리스트에서 완료한 업무를 제거해보자. # Delete[1/2] 지난 포스팅에서 투두리스트 앱의 CRUD 중 Create와 Read를 구현해보았다. 리플렉스 컴포넌트 사용법이 다소 생소할 수는 있지만, 실제로 로직 자체는 굉장히 간단한 파이썬 문법만 사용했다. append를 통해 할 일을 추가할 수 있다니! (CRUD를 구현하고 난 뒤에는 임의의 리스트가 아니라 실제 데이터베이스로도 구현해볼 예정이다.) 이번에는 Delete를 구현해 볼 차례다. 잠시 한 가지만 고민해보자. 할 일을 완료한 시점에서 마우스로 할일을 클릭했을 때 그냥 목록에서 없어져버리는 것이 나을지, 아니면 취소선만 적용하고, 완료한 업무를 그대로 보여주는 것이 나을지는 사용자경험 관점에서 우리가 충분히 고민해 봐야 할 부분이다. 참고로 (정말 잘 만들었다고 생각되는) 마이크로소프트의 To-do 앱은.. 2023. 10. 3. 투두리스트에 할 일을 추가해보자. #Create 공식문서의 투두리스트 앱은 로직의 간단함에 비해 다소 구현이 복잡하게 되어 있다. 이 포스팅 시리즈에서는 최소의 코드로 투두리스트를 만들어보면서 리플렉스에서 로직을 구현하는 방법에 익숙해지도록 하는 것을 1차목표로 한다. (이 포스팅을 읽고 나면 공식문서의 todo 앱도 한 번 연습해 볼 것을 추천한다.) 지난 포스팅에서는 리스트를 표현하는 방법으로 시작해서 우리가 구현할 투두리스트 앱의 CRUD 중 R을 완성했다. 이번에는 Create를 구현할 차례인데, 이 또한 너무너무 간단해서 헛웃음이 나올 정도다. 한 번 시작해보자. 지난 포스팅에서 완성한 코드는 아래와 같다. import reflex as rx class State(rx.State): todo_list = ["밥먹기", "잠자기", "공부하기".. 2023. 10. 3. 파이썬의 리스트도 표현할 수 있나? # 투두리스트 앱 만들기 앞선 포스팅에서는 간단히 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. 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. 이전 1 다음
