수정한 값만 바꿔주기

우리가 게시물을 수정하게 되면 수정한 값만 업데이트가 되어야 합니다.
하지만 기존값이 유지되도록 하지 않고 수정을 하게되면 모든 부분이 업데이트 되는 것을 확인할 수 있습니다.
그러나 실제 게시글은 수정된 부분만 업데이트가 되어야 하므로 이 부분은 보완해야 합니다.

수정 input에 내가 적었던 글 가져오기

• defaultValue에 기존값을 넣어두면됩니다.

문제는 defaultValue에 기존 데이터를 가져오는 과정에서 fetch를 해주어야 하는데, 해당 컴포넌트를 재사용하기 때문에 container에서 fetch를 하게되면 등록과 수정 모두에게 적용됩니다.
하지만 수정에만 적용해야 하므로 fetch는 페이지 컴포넌트(container)에서하고, 해당 data를 props로 넘겨주면 됩니다.

defaultValue와 state

defaultValue를 줬음에도 불구하고 수정하기를 누르면, 수정하지 않은 부분에 defaultValue로 들어가는 것이 아닌 빈 값이 들어갑니다.
이는 state의 초기값때문입니다.
defaultValue는 실제 state가 아닌 input의 속성이기 때문에 실제 눈에 보이는 것과 달리 state에 저장되지 않습니다.

해결 방법
1. defaultValue를 state의 초기값으로 넣는 것
2. mutation할 때 변경된 부분만 보내주는 것 (추천)

// mutation에 변경된 부분만 보내주기
const xxx = async () => {
	const myVariables = {
		number : Number(router.query.mynumber), // 필수 속성은 미리 삽입
	}
    
	// 변경된 값만 객체에 key와 value 추가
    if(myWriter !== ""){ myVariables.writer = myWriter }
    if(myTitle !== ""){ myVariables.title = myTitle }
    if(myContents !== ""){ myVariables.contents = myContents }

	// mutation
	const result = await ww({
		variables : myVariables
	})
}

TypeScript

타입스크립트란, 자바스크립트의 타입을 강제시키는 언어입니다.
기존의 자바스크립트 에서는 아래와 같이 변수에 문자열을 할당했다가 이후에 숫자열을 재할당해도 문제가 되지 않습니다.

// javascript
let hello = "hello"
hello = 12345

하지만 타입스크립트에서는 변수의 자료형을 지정해주기 때문에 위와 같이 재할당이 불가능합니다.

// typescript
let hello: string = "hello"
hello = "12345"
hello = 12345 // type error

🔔 브라우저는 HTML, CSS, JavaScript만 읽을 수 있는데 타입스크립트는 어떻게 읽나요?
실행시에 자바스크립트로 변경되어 실행됩니다.


이렇게 변경되는 작업을 컴파일 또는 트랜스파일이라고합니다.
이렇게 변경해주는 도구를 컴파일러 또는 트랜스파일러라고 합니다.


컴파일 : 하나의 언어가 다른 언어로 변경되는 작업
트랜스파일 : 하나의 언어가 같은 언어의 다른 버전으로 변경되는 작업

TypeScript를 사용하는 이유

자바스크립트는 타입이 엄격하지 않기 때문에 문자를 넣다가 숫자를 넣는다는 등 자유자재로 변환이 가능합니다.
이러한 점이 개발에는 편리해 보이지만, 큰 서비스를 여러명이 개발하는 경우에는 문제가 발생될 수 있습니다.

TypeScript 사용 방법

// 변수에 타입을 지정해주면 됩니다
let aaa: string = "안녕하세요"
let bbb: number = 1234

객체 타입을 만들어줄때 네이밍에는 관례가 있습니다.
interface의 I와 변수명을 합져주는 것 입니다. 예를 들어 객체를 담은 변수 이름이 Profile이라면 타입을 지정하는 객체는 IProfile로 네이밍을 해주는 것이 관례입니다.

이렇게 타입스크립트를 이용해 각 변수에 타입을 지정해주고나면, 타입에 맞지 않는 값을 할당 시 에러가 나게 됩니다.

TypeScript 설치 및 세팅

홈페이지 접속 및 설치 코드 복사

먼저 TypeScript 공식 홈페이지에 접속해줍니다.

접속해서 상단 메뉴 중 Docs를 클릭해 줍니다.

스크롤을 하단까지 내려 Get Started의 Installation을 클릭해 줍니다.

yarn add typescript ---dev 를 복사해 주세요.
패키지 매니저가 npm이 아니라면 맞는 패키지 매니저 버튼을 클릭하면 됩니다.

프로젝트에 설치

코드를 복사했다면, 터미널에서 프로젝트 폴더로 이동한 후 붙여넣기하여 설치를 진행합니다.

React와 TypeScript 호환을 위해 추가 설치

설치가 완료되었다면, yarn add @types/react@17.0.2 @types/node@17.0.2 --dev를 붙여넣기하여 설치를 진행해줍니다.

이 또한 설치가 완료되었다면, typescript 설정 파일(tsconfig.json)을 만들어 줍니다. 내용은 비워 놓습니다.

현재 상태에서 yarn dev 명령을 실행하게 되면, nextjs가 typescript의 설정 파일인 tsconfig.json을 감지하고, tsconfig.json에 기본 설정으로 자동으로 채워줍니다.

아래와 같이 기본 설정 내용이 채워졌다면, 정상적으로 설치가 완료된 것입니다.

엄격한 타입스크립트를 사용하기 위해 tsconfig.json파일에서 strict가 false로 되어있으면 true로 바꿔줍니다.

TypeScript 배열, 객체 예제

/* 배열타입 */
// 문자열만 있는 배열
let aaa:string[] = ["철수", "훈이", "맹구"]

// 배열에 문자열과 숫자열을 같이 넣어두고 싶을 때
let fff:(string | number)[] = [1, 2, 3, "짱구", "유리"]

// 모두 숫자이거나 모두 문자인 배열
let hhh: string[] | nuber[] =[ "철수","훈이" ]
hhh=[1,2,3]


/* 객체타입 */
interface Ipropfile { // 객체 속성들 타입 지정
  name : string
  age : number 
  school : string
}

const profile:Ipropfile = {
  name : "짱구"
  age : 8
  school : "떡잎 초등학교"
} 

// age의 타입이 문자열이거나 숫자열일 때
interface Ipropfile {
  name : string
  age : string | number
  school : string
}

const profile:Ipropfile = {
  name : "짱구"
  age : 8 or "7살"
  school : "떡잎 초등학교"
}