포트폴리오 수정
- 초기값 업데이트
수정하기 버튼을 눌렀을때 기존 내용 가져와 보여준다.
- 수정페이지에서 fetchBoard
- props로 write container에 넘겨준다.
- presenter에서 input태그에
defaultValue=""적용
-> defaultValue는 초기값으로 보여주기만 하고 state랑 상관없음
-> 비밀번호는 defaultValue 없음
const onClickUpdate = async () => {
try {
const result = await updateBoard({
variables: {
boardId: router.query.boardId,
password: password,
updateBoardInput: {
title: title,
contents: contents // state 초기값 ""
},
},
})
router.push(`/boards/${result.data.updateBoard._id}`)
} catch(error) {
alert(error.message)
}
};- 변경된 값만 전송
비어있는 내용을 제외하고 제목만 바꾼다.
-> 변경되지 않은 키 삭제 (backend에 보내지 않음)
const onClickEdit = async () => {
// router.query.number // number
const myvariables = { number: Number(router.query.number) };
if (writer) myvariables.writer = writer; // 빈값이 아닐때 writer를 보여준다.
if (title) myvariables.title = title;
if (contents) myvariables.contents = contents;
const result = await updateBoard({
variables: myvariables,
});
console.log(result);
router.push(`/09-01-boards/${result.data.updateBoard.number}`);
};Typescript
타입스크립트는 자바스크립트의 타입을 강제시키는 언어이다.
Typescript 설치방법
yarn add typescript --dev
yarn add @types/react@17.0.2 @types/node@17.0.2 --dev
라이브러리 하위 모듈 버전 고정하기
사용하고 있는 외부 라이브러리가 의존하는 모듈의 특정 버전으로 고정시키고 싶을 경우
yarn 패키지 매니저 사용 시package.json에 다음을 추가해준다.{ "devDependencies": { ... }, "resolutions": { "@types/react" : "17.0.2" }
설치가 완료되면 위 사진과 같이 tsconfig.json 파일을 만들어준 후, yarn dev 해준다.
tsconfig.json 파일에서 "strict": true로 바꾸어 엄격한 타입스크립트를 사용한다.
Typescript 파일 확장자
javascript만 있는 .js 파일은 typescript의 .ts 로 변경하고,
javascript에서 JSX(React의 HTML) 를 return 하는 컴포넌트들은 typescript의 .tsx 로 변경해준다.
- tsx: JSX 를 return 하는 컴포넌트
- ts : 자바스크립트만사용하는 컴포넌트
Typescript 사용
타입스크립트에서는 자바스크립트 변수명 뒤에 변수 타입을 적어준다.
자바스크립트와 달리 변수에 문자열을 할당했다가 이후에 숫자를 재할당하면 문제가 생긴다.
let aaa:string = "안녕하세요" // 문자만 가능
let bbb:number = 123
let ccc:boolean = true📌 타입스크립트를 사용하는 이유와 사용방법
자바스크립트는 타입이 엄격하지 않기 때문에, 변수나 상수를 만들면 처음에 문자를 넣었다가 나중에 숫자를 넣는 등 자유자재로 변환이 가능하다.
이러한 점이 개발에는 굉장히 편리해 보이지만, 큰 서비스를 여러명이 개발하는 경우에는 문제가 될 수 있다.
예를 들어, 문자열과 숫자열이 더해져서 예상과 다른 결과가 나타날 수 있다.
따라서, 타입스크립트를 사용하여 숫자 변수에는 숫자만 넣고, 문자 변수에는 문자만 넣도록 하여 안정성을 높여줄 수 있다.
Typescript 타입지정
export default function TypescriptPage() {
// 타입추론 : 처음 들어간 데이터로 타입을 추론함
let aaa = "안녕하세요";
aaa = 333;
// 타입 명시
let bbb: String = "반갑습니다";
bbb = 10; // 오류
// 타입 명시가 필요한 상황 - number, string 둘다 가능
let ccc: number | string = 1000;
ccc = "1000원";
// 숫자 타입
let ddd: number = 10;
ddd = "철수";
// 불린 타입
let eee: boolean = true;
eee = false;
eee = "false"; // 원래 true로 작동함
// 배열 타입
let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"];
let ggg: string[] = ["철수", "영희", "훈이", 10];
let hhh: (string | number)[] = ["철수", "영희", "훈이", 10]; // 타입을 추론해서 어떤 타입을 사용하는지 알아보기
// 객체 타입 - 직접 만들어 준다.
interface IProfile {
name: string;
age: string | number;
school: string;
hobby?: string; // ? : 있어도 되고 없어도 됨
}
// 객체 안에 객체가 있을 경우
// interface IProfile {
// name: string;
// age: string | number;
// school: {
// school1: string
// school2: string
// }
// hobby?: string; // ? : 있어도 되고 없어도 됨
// }
const profile: IProfile = {
name: "철수",
age: 8,
school: "다람쥐초등학교",
};
profile.name = "훈이";
profile.age = "8살"; // number만 가능
profile.hobby = "수영하기"; // 원래 객체 추가 불가능 -> interface로 객체를 만들어 준다.
// 함수 타입 => 어디서 몇번이든 호출이 가능하므로, 타입 추론이 불가능함.(반드시 타입 명시필요!!!!!)
function add(num1: number, num2: number, unit: string): string {
// 결과의 return 타입도 예측 가능
return num1 + num2 + unit;
}
const result = add(1000, 2000, "원");
// 화살표 함수
const add2 = (num1: number, num2: number, unit: string): string => {
return num1 + num2 + unit;
};
const result2 = add2(1000, 2000, "원");
// any 타입 => 자바스크립트와 동일
let qqq: any = "철수";
qqq = 123;
qqq = true;
// 배열 안에 객체
const zzz: IProfile[] = [
{
name: "철수",
age: 8,
school: {
school1: "다람쥐초등학교",
school2: "공룡초등학교",
},
},
{
name: "영희",
age: 20,
school: {
school1: "다람쥐초등학교",
school2: "공룡초등학교",
},
},
];
return <div></div>;
}
