10) typescript 니가 몬대

이희주·2022년 5월 20일
0
post-thumbnail

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 = 함수를 리턴

  1. 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)
    }```
  1. 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>
        )```
  2. 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칸 , ㅇㅇ길이 넘으면 줄바꿈

주말동안 해야 할 일

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

    • 댓글 삭제하기 만들 때 비밀번호 입력하는 것
    confirm() => 취소, 확인 버튼 누를 수 있는 입력창
    1.prompt("비밀번호를 입력해주세요") => 입력 할 수 있는 입력창 (여기에 1234를 치고)
    2.const mypassword = prompt("비밀번호를 입력해주세요") 
    3.mypassword
    //결과값 1234
    • 컴포넌트는 이런식으로 나누기

댓글 할때 한페이지에 같이 받아와야 할 경우

2.코딩테스트 할 때 필요한 메서드들 정리하기
여태까지 썼떤거 !

freeboard 오류 해결 참고
1.boardRoutind_presenter

/ts
오류는,, 실행은된다,,,

profile
어제보다 오늘 발전하는 프론트엔드 개발자

0개의 댓글