[TIL] 220714 코드캠프 9일차

재인·2022년 7월 13일
0

TIL

목록 보기
11/38

포토폴리오 리뷰

  • backend 분이 '작성자' 부분은 수정하지 못하게 만들어 놓으셨다
  • 비밀번호가 틀렸을 때, 수정하지 못하게 alert가 뜨게 된다
  • BoardWrite.presenter.js -> Submitbutton -> inActive 수정하기에서는 항상 true로 , 클릭했을 때 onClickUpdate에서 한 개라도 수정한게 있는지, 모든 내용이 차게 되면 노란색으로 바꿔줘!라고 분기처리

어떻게 해서 기본 값을 줄건지, 수정한 부분만 변경이 된다면 좋을텐데...!

  • placeholder → 이렇게 입력하시면 됩니다 라는 예시를 보여주는 것
  • value → 등록된 값 (고정 값, 입력 못함)
  • defaultValue 로 출력 → 내가 입력한 값이 없을 때 보여주는 것 (초기 값, 수정가능)

그러면 기존에 있는 값을 가져와야 하니까 fetchBoard를 컨테이너에서 하면 괜찮나?? -> ❌
→ 등록하기 페이지에도 갈텐데, 등록하기에선 fetch할 수 없다

💡게시글 수정 페이지에서 fetchBoard하고 props로 내려주기

  • 등록하기에서는 Data를 받아오지 못하니까, 데이터가 비어있고 수정하기 페이지에서는 props로 데이터를 받아오고 있으니까 데이터가 남아있다
    → 제목만 수정이 되고, 작성자랑 내용은 비워짐
    → defaultValue가 남아있는 상태에서 그냥 수정하기를 누르면 다 지워져서 나옴
    → OnClickUpdate에 있는 state는 빈 문자열이 있는 것!

    해결방법

    1. 모든 state에 (시작하자마자) 초기 값으로 defaultValue를 넣어주기 (비효율적)
    2. mutation을 보낼 때, state가 채워져 있는 것만 보내기 (이거쓰기)

TypeScript

  • 자바스크립트는 타입이 엄격하지 않음
    → 문제점 : 문자열과 숫자를 구분하지 못함 → 큰 서비스를 여러명이 만들 때 위험

TypeScript 사용 방법

Interface의 'I'와 변수명을 합쳐주는 것
ex) 객체를 담은 변수 이름 : profile
타입을 지정하는 객체 : IProfile로 네이밍해주기 (관례)

package.json

  • dependices : 실행용 (실행할 때 실제로 필요)
  • devDependencies : 개발용 (vsCode를 위한 것)
  1. JSX 를 return 하는 컴포넌트 : tsx (index.tsx)
  2. 자바스크립트만사용하는 컴포넌트 : ts (index.ts)

타입추론
변수에 타입을 먼저 입히지 않고 할당 → 처음에 들어간 값으로 자동 지정

let aaa = "안녕하세요" // string

타입명시

let bbb: string = "반갑습니다"

문자타입

let ccc: string` `ccc: 반가워요!

숫자타입

let ddd: number = 10

불린타입

let eee: boolean = true
eee = false

배열타입

let hhh: (string | number)[] = ["철수", "영희", "훈이", 10]

객체타입

  interface IProfile { 
        name: string
        age: number | string
        school : string
    }
    const profile: IProfile = {
      name: "철수",
      age: 8,
      school: "다람쥐초등학교",
    };
    profile.name = "영희"
    profile.age = "8살" 

함수타입

const add = (num1 : number, num2 : number, unit: string): string=> {
        return num1 + num2 + unit
    }
    const result = add(1, 2, "원") // 결과의 타입도 예측 가능 

애니타입(쓰지말기)

 //애니 타입 (쓰지말기)
    let qqq: any = "철수" //js와 동일
    qqq = 123
    qqq = true

0개의 댓글