Tomato Basil

얼마 전, LLM을 활용하는 프로젝트를 위해 간단한 웹을 제작할 일이 있었다.주요 목적은 사용자의 피드백을 받기 위한 것이었어서, 사용자의 응답을 실시간으로 받아서 저장하는 기능이 필요했다.   [정보의 흐름]Google Sheet  ->  Streamlit  ->  Firebase Firestore 위와 같이 정보가 이동하도록 했다.API를 통해 구글 시트로부터 읽은 정보가 Streamlit에 표현되고,Streamlit에서 사용자가 선택한 응답 내역이 Firestore에 저장된다.원래 Firebase의 realtime database를 사용하려고 했는데, API 연동이 생각되로 되지 않아서 Firestore를 쓰게 되었다.   [배포]Streamlit Community Cloud  깃허브 계정으로 이곳..

1. 라우트 작성 라우트는 '페이지', '링크를 통해 이동하는 경로' 라고 볼 수 있다.이 프로젝트에서는 라우트로 가장 많이 쓰이는 'React Router' 라이브러리를 사용할 것이다. (v6)npm install react-router-dom @types/react-router-dom --save 명령어를 통해 React Router 를 다운받는다.   작성할 라우트는 다음과 같다. 1. 로그인 /login2. 회원가입 /signup3. 비밀번호 초기화 /reset 1. 도서 목록 /books2. 도서 상세 /books/{id}3. 장바구니 /cart4. 주문서 작성 /order5. 주문 목록 /orderlist   App.tsx  *) React Router는 a href 가 아닌 Link to 와..

CSS 애니메이션은 GPU를 사용하여 렌더링하고, JS 애니메이션은 CPU를 사용하여 렌더링한다는 차이가 있다. CSS 애니메이션브라우저의 렌더링 엔진에 의해 최적화되어 GPU 사용이 가능하다.간단하고 성능이 좋지만, 복잡한 애니메이션 구현에는 한계가 있다.`transform`과 `opacity` 속성을 사용할 때 효과적이다.선언적이어서 코드가 간결하고 이해하기 쉽다.JS 애니메이션CPU를 사용하기 때문에 성능에 주의해야 한다.복잡하고 동적인 구현이 가능하며 유연하다.낮은 버전의 브라우저에서도 지원이 가능하여 크로스 브라우징 측면에서 유리하다. 데일리 CSS 챌린지100 Days CSS Challenge 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란, 100일간 주어진 문제를 CSS..