프론트엔드 2주 4일차

보드 수정 보완

어제의 게시판 수정에서는 2가지 문제점이 존재했다. 바로 수정하고 싶은 값만 수정하고 싶어도 아무것도 변경하지 않은 input은 빈칸으로 수정되고 이전에 작성한 input이 보이지 않는 다는 문제점이었다.

 

 먼저 후자의 문제는 input에 있는 Default value라는 속성을 통해서 바로 해결할 수 있다. 

 

Default value

리액트의 수정 가능한 input 값을 초기에 설정해 두는 속성이다. 이 defalult value를 사용해서 props로 받은 data를 통해서 이전에 백엔드에 저장해둔 input 등록 값들을 불러와 출력해 줄 수 있다. defalult value와는 반대되는 수정이 불가능한 readOnly라는 속성 또한 리액트에는 존재한다.

 

예시 코드

위 코드를 확인하면 props를 통해 받은 data의 contents라는 값을 defaultValue를 통해서 출력하는 것을 알 수 있다.

 

그렇다면 수정하고 싶은 값만 수정하고 싶어도 아무것도 변경하지 않은 input은 빈칸으로 수정되는 것은 어떻게 보완해줘야할까?

이걸 해결하는 방법에는 2가지 방법이 있다. 바로 edit페이지에서 등록 컴포넌트로 접근할 때 백엔드에서 데이터를 받아와서 그걸 미리 등록할 값에 default값으로 저장해두는 것과 수정하지 않은 값은 아예 그 이름의 데이터를 아예 전달하지 않아 update에 적용시키지 않는 것이다. 이 2가지 방법 중 더 좋은 방법은 후자인데 그 이유는 데이터의 전송을 줄여 자원이 낭비되는 것을 막을 수 있기 때문이다. 

 

예시 코드

위 예시 코드를 보면 확인할 수 있 듯이 객체를 만들고 input에 변경이 없어서 ""인 input 데이터는 전송을 하지 않도록 객체를 만들어 그 객체를 업데이트 보드에 쓰이는 객체로 쓰는 것으로 변경이 없는 데이터는 기본값이 유지되게 만들 수 있었다.

 

타입 스크립트

타입스크립트를 한마디로 정의하자면 자바스크립트에 데이터 타입을 강제하는 언어라고 할 수 있다. 

 

타입스크립트와 자바스크립트의 차이

자바스크립트	타입스크립트
동적 타입 언어	정적 타입 언어
인터프리터 언어	컴파일 언어
혼자 사용 가능	자바스크립트 언어가 같이 사용되야 함
프로젝트의 단위와 효율성이 반비례함	프로젝트의 단위와 효율성이 비례함

 

 

 타입스크립트의 변수의 선언과 정의는 위의 그림과 같이 진행되며 위 코드의 a는 string이라는 데이터 변수로 고정되게 된다. 지난 과정을 통해서 자바스크립트의 특징은 배웠기 때문에 이번에는 자바스크립트와 비교해서 타입스크립트의 차이점을 위주로 작성하겠습니다.

 

타입 명시 

 

위 사진을 보면 알 수 있듯이 자바스크립트였다면 아무런 에러 없이 동작했을 코드가 타입스크립트에서는 명시된 데이터 타입이 아니라는 에러를 일으키고 있다. 타입 명시라고 하는 것은 변수의 선언과 함께 그 변수에 들어갈 데이터의 타입을 고정하는 것이다.

 

타입 추정

 

 타입 추정은 타입 스크립트에서 아무런 타입 명시 없이 변수를 선언하고 데이터를 할당하게 되면 처음 할당한 데이터를 변수의 타입으로 명시하는 것을 말한다. 위의 사진을 보면 알 수 있듯이 aaa의 경우 처음 문자열 타입이 들어갔으므로 타입 추정에 의해서 문자열 타입으로 명시되고 ooo의 경우 2가 할당되어 number 타입이 명시된 것이다.

 

타입 명시를 반드시 해야하는 경우

그렇다면 타입 명시를 왜 해야하는 것일까? 타입 명시를 해야만 하는 경우가 있기 때문이다. 2가지 경우를 대표적으로 예로 들 수 있는데 1번째는 바로 2개 이상의 데이터 타입을 변수가 받고 싶을 때이고 2번째는 함수의 타입을 명시할 때 이다.

 

 1번째 사진이 바로 2개 이상의 데이터 타입을 변수로 받고 싶을 때의 타입 명시 방법이고

 2번째 사진처럼 함수의 입력 매개변수의 타입을 정할 때에는 이 함수가 어떤 코드에서 어떻게 호출될 지 모르기 때문에 타입 추론이 힘들어서 선언시 명시해줘야하는 것이다.

 

 배열과 객체의 타입 명시

위의 그림과 같이 배열은 배열 안의 원소가 어떤 데이터 타입이 들어가는지 까지 명시해주게 된다. 그리고 객체는 interface를 이용해서 각 객체의 키의 이름과 키 안의 데이터 타입을 명시해준다. 또한 ?를 사용하여 사진처럼 추가할 수도 있고 아닐 수도 있는 property도 명시 가능하다.

 

자바 스크립트의 데이터 형태와 비슷한 데이터 타입 명시 - any

타입 스크립트에는 any라는 어떤 데이터 형태도 받는 데이터 타입이 존재한다. 하지만 이걸 사용하면 타입스크립트를 쓰는 의미가 없기 때문에 사용을 삼가하는 것이 좋다.

 

타입스크립트를 사용해야하는 이유

자바스크립트는 데이터 타입이 없이 변수를 정의해서 숫자타입 문자타입 등을 제약 없이 넣는 것이 가능하다. 하지만 이렇게 되면 큰 프로젝트에서 사용시 여러 에러사항 예를 들어 숫자들로 해야하는 연산에서 문자열과 숫자타입으로 잘못 연산한다던가 하는 등의 에러들이 발생하게 되고 이는 프로젝트가 커질 수록 더 많아지고 위험해진다. 그래서 보완하기 위해서 타입스크립트가 나오게 되었다. 

 

 

오늘의 코딩 결과

코딩 결과 어제의 게시판 수정 기능을 보완할 수 있었다.

 

 

알고리즘 공부

 

NaN과 isNaN 

NaN값은 등호를 통해서 타입을 확인 할 수 없다. 즉 NaN === NaN은 true를 출력하지 않고 false를 출력한다. 이로 인해서 이를 보완할 메서드가 존재하는데 그것이 바로 isNaN이다. NaN 타입의 변수 a에 a.isNaN을 쓰게 되면 true를 출력하게 된다.

 

형식

DATA.isNaN = true or false

 

isNaN과 Number.isNaN()

isNaN에 비해서 Number.isNaN은 더 엄격하게 NaN값을 구별하는데 예를 들어

Number.isNaN("NaN")은 true를 출력하지만 isNaN은 false를 내뱉는다.

	isNaN	Number.isNaN()
"NaN"	true	false
undefined	true	false
{}	true	false
"abc"	true	false