Web/CloneCoding

[Carrot Market] #6 Prisma - PlanetScale

Prisma primsa는 Node.js와 Typescript ORM(Object Relational Mapping)으로 JS or TS와 데이터베이스 사이에 다리를 놓아줌 으로서 데이터베이스와 통신을 위해 사용되는 도구 입니다. Prisma를 사용하기 위해서는 먼저 Prisma에게 DB가 어떻게 생겼는지, 데이터의 모양을 설명해 주어야 합니다. ( schema.prisma ) Prisma가 이런 타입에 관한 정보를 알고 있으면 client를 생성해 줄 수 있습니다. client를 사용하면 TS로 DB와 직접적인 상호작용이 가능해지고 자동완성기능이 제공됩니다. 그 외에도 Prisma Studio, Visual Database Broswer등 DB를 위한 관리자 패널을 제공하기도 합니다. Prisma는 앱..

[Carrot Market] #5 TAILWIND ReFactoring UI - 2

저희는 Home, community, chats를 리팩토링 하였습니다. 이제 items, live, profile만 리팩토링하면 끝입니다. 바로 live를 리팩토링 해보도록 하겠습니다. pages/live/index.tsx import type { NextPage } from "next"; import Link from "next/link"; import Layout from "../../components/layout"; import FloatingButton from "../../components/FloatingButton"; const Live: NextPage = () => { return ( {[...Array(5)].map((_i, i) => ( Let's try potatos ))..

[Carrot Market] #5 TAILWIND ReFactoring UI - 1

Refactoring 이제 중복되는 코드들을 싹다 묶어보는 깔끔하게!! 묶어봅시다~ 먼저 Home Screen부분입니다. /pages/index.tsx import type { NextPage } from "next"; import Layout from "../components/layout"; import Item from "../components/item"; import FloatingButton from "../components/FloatingButton"; const Home: NextPage = () => { return ( {[...Array(11)].map((_, i) => ( ))} ); }; export default Home; /components/item.tsx import Lin..

[Carrot Market] #5 TAILWIND CLONING UI - 3

Streams UI 이제 비디오를 스트리밍할 페이지를 만들어 보도록 하겠습니다. pages/streams/index.tsx import type { NextPage } from "next"; const Live: NextPage = () => { return ( {[...Array(5)].map((_i, i) => ( Let's try potatos ))} ); }; export default Live; 여기서도 마찬가지로 Home screen에서 사용한 부유 버튼을 사용하였습니다. 이를 FAB라고 합니다. 여기서 Heroicons.dev에 들어가서 svg icon만 바꾸었습니다. 다음으로는 비디오를 클릭했을 떄 비디오를 보며 채팅할 수 있는 페이지를 만들어 보겠습니다. Streams Detai..