10) typescript 니가 몬대

이희주·2022년 5월 20일

React

포트폴리오 코드리뷰

게시판 수정하기

1.제목, 내용 중 수정한 내용이 없다면 수정한 내용이 없습니다 alert창 띄우고 게시물 수정 안되게 하기
2.비밀번호를 입력하지 않았다면 alert창 띄우고 게시물 수정 안되게 하기

early-exit 패턴
: if문에서 거짓일 때 함수를 종료시키는 리팩토링 패턴

const onClickUpdate = async (event) => {

        const EditVariables = {boardId: router.query.Board}

        if(writer) EditVariables.writer = writer
        if(title) EditVariables.title = title  
        if(contents) EditVariables.contents = contents

        if(!title && !contents) {
            alert("수정한 내용이 없습니다")
            return 
            //return : 함수의 종료
        }

        if(!password) {
            alert("비밀번호를 입력해주세요")
            return
            //함수를 종료시켜서 밑의 함수 실행 안되게 하기
      	}
=> 이렇게 틀린것들을 return으로 함수를 종료시켜 아래쪽 코드를 실행되지 않도록 하기(이때 return은 if문의 종료가 아니라 함수의 종료!) 또한 리턴값은 복수 일 수 없다! 한 리턴 내에서 여러개의 값을 리턴해주고 싶다면 하나의 덩어리로 묶어서 리턴하면 된다

typescript 코드에 적용하기

boards ts 파일로 변경하기

tsx = jsx를 리턴하는 컴포넌트
ts = 함수를 리턴

tsconfig.json 에서 "strict: true, 로 변경 해주기

에러 없애기
1. container

결과

1) BoardWrite를 import 하는 곳은 newpage, editpage니까
isEdit가 오류나지 않게 Iprops 안에 isEdit 넣어주기

근데 이렇게 하면 edit의 boardData가 오류난다!

있을수도 있고 없을수도 있을 때 물음표를 붙여주니까이렇게 해결하기
//Iprops 선언해주기
interface IBoardWriteprops {
    isEdit: boolean
    boardData?: any
}

//기능
export default function BoardWrite(props: IBoardWriteprops)
이렇게 해결해주기

2) EditVariables 오류

const onClickUpdate = async () => {

        interface IEditVariables {
            number: number
            writer?: string
            title?: string
            contents?: string
        }

        const EditVariables: IEditVariables = {number: Number(router.query.number)}
        if(Writer) EditVariables.writer = Writer
        if(Title) EditVariables.title = Title  
        if(Contents) EditVariables.contents = Contents

이렇게 해결!

3) event 오류

    const onChangeWriter = (event: ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.value)
        setWriter(event.target.value)
    }
    const onChangeTitle = (event: ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.value)
        setTitle(event.target.value)
    }
    const onChangeContents = (event: ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.value)
        setContents(event.target.value)
    }```

presenter

import * as S from "./BoardWrite.styles"
import {ChangeEvent} from "react"
//styles에서 writerInput import
//*로 styles에 있는것들 다 import

interface IBoardWriteUIprops {
    onChangeWriter: (event: ChangeEvent<HTMLInputElement>) => void //return이 없는거: void
    onChangeTitle: (event: ChangeEvent<HTMLInputElement>) => void
    onChangeContents: (event: ChangeEvent<HTMLInputElement>) => void
    onClickGraphqlApi: () => void
    onClickUpdate: () => void
    data: {
        // number?: number,
        // _id?: string,
        // message?: string
    }
    isEdit: boolean
    boardData?: any
}

//화면
export default function BoardWriteUI(props: IBoardWriteUIprops) {

    console.log(props.isEdit)
    //onChange들이 하나도 연결되어있지 않으니까 container에서 props로 가지고 와서 쓰기

    return (
    <div>
        <h1>{props.isEdit ? "수정" : "등록"}페이지</h1>
        작성자 : <S.WriterInput type="text" onChange={props.onChangeWriter} defaultValue={props.boardData?.fetchBoard.writer}></S.WriterInput><br></br>
        제목 : <input type="text" onChange={props.onChangeTitle} defaultValue={props.boardData?.fetchBoard.title}></input><br></br>
        내용 : <input type="text" onChange={props.onChangeContents} defaultValue={props.boardData?.fetchBoard.contents}></input>
        <div>{props.data}</div>
        {/* <div>{props.data?._id}</div>
        <div>{props.data?.number}</div>
        <div>{props.data?.message}</div> */}
        <button onClick={props.isEdit ? props.onClickUpdate : props.onClickGraphqlApi}>
            {props.isEdit ? "수정" : "등록"}하기</button>
    </div>
    )```

styels

import styled from "@emotion/styled"
//presenter의 작성자 emotion

//css
interface IWriterInputProps {
    backgroundColor?: string
}

//presenter로 export
export const WriterInput = styled.input`
    background-color: ${(props: IWriterInputProps)=>props.backgroundColor}```

코드 린터 / 코드 포멧터

eslint / prettier

규칙 / 옙부개

코드 린터
eslint
: import 순서 , ==금지, ===허용

코드 포멧터
prettier
: 띄어쓰기 2칸 , ㅇㅇ길이 넘으면 줄바꿈

주말동안 해야 할 일

프리보드에 댓글등록, 댓글삭제 등등 추가하기 (별점, 댓글수정은 할 수 있으면 하기)

댓글 삭제하기 만들 때 비밀번호 입력하는 것

confirm() => 취소, 확인 버튼 누를 수 있는 입력창
1.prompt("비밀번호를 입력해주세요") => 입력 할 수 있는 입력창 (여기에 1234를 치고)
2.const mypassword = prompt("비밀번호를 입력해주세요") 
3.mypassword
//결과값 1234