현서의 개발 일지📚

[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..

[Carrot Market] #5 TAILWIND CLONING UI - 2

Chats UI 이제 어떠한 상대방과 채팅을 할떄의 UI를 구축해 보도록 하겠습니다. pages/chats/index.tsx import type { NextPage } from "next"; const Write: NextPage = () => { return ( {[...Array(5)].map((_, i) => ( Steve Jebs See you dtomorrow in the corner at 2pm ))} ); }; export default Write; 여기서 중요한 점은 divide modifier입니다. 만약 border-b-1을 하게되면 맨 마지막 component에도 border가 생기는데 우리는 이를 없애주고 싶다면 상위 컴포넌트에 last:border-b-0을 해주면 됩니다. 하지만..