전체 글

TypeScript Practice - Class, Interface

Classes 기존의 Java, Python에서의 클래스 개념과 별반 다를게 없습니다. 따라서 편하게 작성해 보도록 하겠습니다. class Player { constructor( private firstName: string, private lastName: string, public nickname: string ) {} } const hyunseo = new Player("hyunseo", "las", "현서"); // error hyunseo.firstName 다음과 같이 Class의 생성자 안에 private, public을 써줄 수 있는데, 이는 JS에서는 없는 기능입니다. 위 코드가 트랜스 파일된 결과를 보 면 "use strict"; var Player = /** @class */ (func..

Typescript Practice - Functions

Call Signatures 함수의 타입을 call signatures형태로 작성하여 줄 수 있습니다. 아래의 예시를 보시죠. type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 이렇게 작성해 주게 되면, add함수 안의 argument타입을 명시해 줄 필요가 없게 됩니다. 아래와 같이 add함수에 반환값을 주게 되면 안된다는 것입니다. type Add = (a: number, b: number) => number; // error const add: Add = (a, b) => { a + b; }; Overloading overloading은 동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 ..

Typescript Practice - OverView

Set Up touch index.ts && tsc --init 이라는 명령어를 쳐서 프로젝트를 만들어 줍니다. 그러면 tsconfig.json이라는 파일이 생성될 것이고, 아래와 같이 작성해 줍니다. tsconfig.json { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Projects */ // "incremental": true, /* Enable incremental compilation */ // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project re..

[Carrot Market] #8 REFACTORING Form

REFACTORING 이제 enter페이지의 form들을 이전 챕터에서 배운 React Hook Form으로 다 바꿔보도록 하겠습니다. /pages/enter.tsx import { useState } from "react"; import Button from "../components/button"; import Input from "../components/Input"; import { cls } from "../libs/utils"; import { useForm } from "react-hook-form"; type MethodType = "email" | "phone"; interface EnterForm { email?: string; phone?: string; } export default..

[Carrot Market] #7 React Hook Form

React Hook Form 이는 사용하기 쉬운 유효성 검사를 통해 선응이 뛰어나고 유연하며 확장 가능한 form입니다. 기존의 form형식을 간단히 아래에 적어보도록 하겠습니다. import { useState } from "react"; export default function Forms() { const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [formErros, setFormErros] = useState(""); const onUsernameChange = (event: React.SyntheticE..

[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을 해주면 됩니다. 하지만..