2주 차 세 번째 수업 TIL

원티드 프리온 보딩 프론트 앤드 2주 차 세 번째 수업  TIL (22.01.24~22.03.03)

프리온 보딩 프론트 앤드의 강사님은 위 코드의 공동 창업자&이사의 직책을 가지고 계신 김예리 님이 강의를 해주셨습니다.

 

form tag 사용과 validation

form tag를 사용하지 않아도 되지만 사용자의 경험을 좀 더 좋게 해주는 역할을 하며 form 태그를 씀으로 인해 브라우저의 웹 환경을 더 좋게 만들어 준다는 강의를 들었습니다

 

<form> 태그 없이도 같은 역할을 하는 기능을 충분히 구현할 수는 있지만, 프런트 앤드 개발자로서 늘 쓰임새에 맞는 태그를 사용하여 시멘틱(semantic) 마크업을 준수해야 합니다. 그래야 브라우저에서 웹 페이지를 정확히 분석하고 검색엔진도 그에 맞게 대응해줄 수 있습니다.

상수 관리

똑같은 상수 혹은 한 번만 쓰더라도 언제인가는 또 쓰일 것 같다면 따로 변수만 모아두는 파일을 만들어서 관리를 하는 것이 좋다. 그 이유는 사람이기 때문에 스트링 타입으로 쓰다가 오타를 낼 수 있으며 유지 보수를 할 때 관리하기 좋기 때문이다.

• utils/constants 또는 src/constants에서 관리
• 또는, 같은 컴포넌트 폴더 내 constants 에서 관리
• 여러 페이지가 있는 경우 → Routes 정보

! 연산자 활용

if else로 가독성을 늘린다고 생각할 수도 있지만 개발자라면 간단한 코드 정도는 쉽게 이해하므로 좀 더 직관적으로 상용할 필요가 있다고 하였습니다.

useEffect(() => {
    if (toggles[name] === "true") {
      setChecked(true);
    } else {
      setChecked(false);
    }
  }, [toggles[name]]);
  
  ===================
  
  useEffect(() => {
      setChecked(toggles[name] === "true");
  }, [toggles[name]]);

타입 스크립트

타입 스크립트의 특징은?

• 답:
• 컴파일 언어, 정적 타입 언어...
• 자바스크립트 슈퍼셋(Superset)...
• 객체 지향 프로그래밍 지원...
• 높은 수준의 코드 탐색과 디버깅...
• 자바스크립트 호환...
• 강력한 생태계...
• 점진적 전환 가능...
• 리액트(React)

 

타입 스크립트 도입의 장/단점은?

• 답:
• 장점 : 코드를 실행하기 전 미리 알려줌으로써 오류를 고치는 데 시간이 단축이 되며 팀 단위로 협업하여 작업할 때 타입 스크립트를 씀으로써 드는 시간보다 유지보수하는 시간을 줄여주는데 효과적으로 생각된다.
• 단점 : 타입 스크립트를 사용할 때 원하는 데로 타입을 지정하기 어려울 경우가 있으며 이러한 타입오류를 해결하기 위해 드는 시간이 존재한다. 기존의 레거시 코드가 있을 경우 많은 리소스가 들 것이고 회사의 매출에 큰 도움은 주지 않지만 드는 시간은 많아서 기존의 타입스크립트를 안 쓰던 회사에서는 주저할 수 있을 것 같다.

 

스크립트 언어와 컴파일 언어 차이

• 답:
• 컴파일 언어는 이미 기계어로 번역된 파일을 컴퓨터가 실행하므로 스크립트 언어에 비해 빠르고 소스코드에 문법적 오류가 있으면 컴파일 에러를 발생시켜 디버깅이 수월합니다.
• 스크립트 언어는 컴퓨터가 코드를 실행하는 과정에서 소스 코드를 기계어로 번역하는 과정이 포함되어 있으므로 컴파일 언어에 비해 느립니다.

 리액트와 웹팩(Webpack), 바벨(Babel)

CRA에서 기본으로 제공해주는 웹팩 설정에 대해서 알려주었고 사이트 배포에서 좀 더 자유롭게 사용할 수 있는 기본 웹팩과 바벨에 대해 알려주었습니다.

타입 스크립트

한 달 전 프로젝트부터 사용하고 있어서 조금 익숙하지만 enum이나 제네릭 같이 아직은 조금 생소한 부분은 까먹었었는데 강사님이 강의해주신 덕분에 다시 한번 복습하는 시간이 되었었습니다.

함수 정의

function 함수 이름 (매개변수 : 타입 )  :  리턴 값의 타입 }{

}

 

함수 선언식의 타입 정의는 아래와 같습니다.

function formatDate(d: **Date**): **string** {
	let year = d.getFullYear();
	let month = d.getMonth() + 1;
	let day = d.getDate();

	return `${year}년 ${month}월 ${day}일`
}

const today = formatDate(new Date());

• 매개변수의 우측에 **콜론(:)**과 매개변수의 타입을 정의합니다.
• return 값의 타입은 소괄호() 우측에 타입을 정의합니다.
• formatDate의 매개변수 d는 Date 객체 타입을 받아야 하고, return 값은 문자열이어야 합니다.

다양한 매개변수 타입

const에서 화살표 함수도 똑같습니다

 

아래와 같이 여러 매개변수의 타입을 복잡하게 해 볼 수도 있습니다.

let formatDate = (d: Date | number, lang = "ko", delimiter?: string): string => {
	// 로직 생략
};

formatDate(new Date());
formatDate(20201028, "en");
formatDate(20201028, "en", "-");

• 두 번째 매개변수인 lang의 경우 인자를 전달하지 않으면 "ko"라는 문자열 값이 할당되도록 했습니다.
• delimiter는 물음표를 사용하여 선택적으로 인자를 전달하도록 했습니다.

자바스크립트에 없는 타입 - 기본

Any

any는 어떤 타입도 지정할 수 있습니다. 자바스크립트로 컴파일된 코드를 보면 아무 타입도 지정하지 않은 원래의 자바스크립트 코드와 똑같습니다. 즉, any 타입을 사용하면 타입 스크립트를 쓸 이유가 없는 것과 다름없습니다.

void

void는 any와는 반대로 어떤 타입도 없다는 뜻입니다. 보통 함수에서 반환 값이 없는 경우 사용합니다.

Enum

Enum(열거형)은 이름이 있는 정해진 값의 세트라고 생각하시면 됩니다.

언제 사용?

• 상수로 된 세트 값이 필요할 때
• export enum AssignmentStatus { Submitted, Pending, Rejected, Passed }

 

union
union타입은 여러 타입이 올 수 있을 때 사용합니다.

Tuple

Tuple(튜플)은 배열과 마찬가지로 데이터를 순차적으로 저장할 수 있는 자료형 중 하나이며, 타입 스크립트에서는 배열에 두 개 이상의 타입을 사용하고 싶을 때 주로 사용합니다.

let starArr: [number, string]= [1, '1점'];

 

Type 별칭 (Type Alias)

type이라는 키워드를 사용하여 타입에 이름을 붙여서 사용할 수도 있습니다. 타입을 재사용하거나, 객체를 위한 타입을 정의할 때 많이 사용됩니다.

 

인터페이스 (Interface)

객체 타입 정의

인터페이스는 객체의 타입을 정의할 때 사용됩니다. 아래는 매개변수로 name 프로퍼티가 포함된 객체를 받습니다.

인터페이스 확장

extends 키워드를 사용하여 기존에 정의된 인터페이스를 확장해서 사용할 수도 있습니다.

교차 타입(Intersection Types) 활용

interface BasicInfo {
	name: string;
	star: number;
}

interface DetailInfo {
	position: number[];
}

**type** Info = BasicInfo & DetailInfo;
// Info타입을 사용하는 경우, name, star, position 세 가지 프로퍼티가 모두 필요합니다!

제네릭 (Generic)

제네릭 - 함수

function makeArr<T>(el: T): T[] {
	return [el];
}

makeArr<number>(1);      // 1
makeArr<string>("1점");  // 2
makeArr<boolean>(true);  // 3

제네릭은 함수명 우측에 화살표 괄호(<>)로 감쌉니다. T는 특별한 의미가 없는 변수명 같다고 생각하면 되는데, 제네릭을 사용할 때 보통 대문자 T를 자주 사용합니다. 내가 원하는 이름으로 자유롭게 작성할 수 있습니다.

각 반환 타입은 1번이 number [], 2번이 string [], 3번이 boolean []이 됩니다.

 

 

리액트를 위한 타입 스크립트

useRef

useRef 또한 useState처럼 타입을 명시하지 않아도 됩니다. 만약 코드의 명확성을 위해서 타입을 정의하고 싶은 경우 아래와 같이 ref의 태그에 맞는 제네릭을 넘겨주면 됩니다.

const reviewRef = useRef<HTMLDivElement>(null);  // 1
//로직 생략

return (
	<>
		<Review reviewTextRef={reviewRef} />  // 2
		<div ref={reviewRef}>  // 3
			리뷰
		</div>
	</>
)

1. userRef우측에 HTMLDivElement타입을 제네릭으로 넘겨주었습니다. 3번 코드에서 div태그이기 때문에 div용 타입을 선택한 것입니다. HTMLDivElement 말고도 여러 태그의 타입이 존재합니다. 예를 들어 HTMLAnchorElement, HTMLButtonElement, HTMLTableElement 등이 있습니다.
2. 정의된 reviewRef를 자식 컴포넌트에 props로 넘겨보았습니다.
3. ref를 사용할 요소

 

Event Handler

이벤트 핸들러 함수의 이벤트 매개변수에는 특별한 타입이 필요합니다. 물론 매개변수에 타입을 명시하지 않아도 오류는 나지 않지만, 정확히 어떤 종류의 이벤트이고, 어느 태그에서 발생하는 것인지 써주는 것이 좋습니다.

// onChange 이벤트 예제
const updateValue = (e: React.ChangeEvent<HTMLInputElement>) => { // 1
	setEmail(e.target.value);
};

//생략

<input onChange={updateValue} />

 

:: TypeScript 기타 자료 (즐겨찾기 추가!)

GitHub - typescript-kr/awesome-typescript-korean: 😎한국어로만 선별된 타입스크립트 리소스 리스트 🇰🇷

 

GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript

 

GitHub - piotrwitek/react-redux-typescript-guide: The complete guide to static typing in "React & Redux" apps using TypeScript