Developer

[유데미X웅진씽크빅X스나이퍼팩토리] React 2기 - 사전직무교육 2일차

yunicornlab 2024. 8. 21. 09:07
반응형

오늘은 TypeScript, 패키지, 리액트 기본 문법에 대해서 알려주셨다.

 

TypeScript - interface vs. type Alias

인터페이스는 자동 병합되는 특징이 있어서, 같은 이름으로 여러번 선언해도 에러가 발생하지 않고 자동으로 병합된다.

그리고 extends 키워드를 사용해서 상속도 가능하다.

하지만 type은 두 번 이상 같은 이름으로 선언하면 안 되고 extends 키워드도 사용할 수 없다.

대신 & 연산자를 사용해서 병합할 수는 있다. (ex. TUser & TJob)

그런데 interface로 선언한 변수에 마우스를 올리면 아무 정보도 나오지 않지만,

type으로 선언한 변수에 마우스를 올리면 type의 구성을 자동으로 보여주는 편리함이 있다.

interface는 이름 첫 글자를 I로 두는 편이고 type alias는 이름 첫 글자를 T로 두는 편이다.

 

참고로, 인터페이스는 객체를 정의할 때 쓰고 변수를 정의할 때는 type을 쓴다는 말은 잘못된 말이다.

타입도 객체를 정의할 수 있다. 그저 소속된 곳의 코드 컨밴션을 따라가는 선택의 문제이다.

일관되게만 사용하면 된다.

 

타입 추론

타입스크립트는 직접적으로 명시하지 않아도 처음 할당된 값으로 타입을 자동으로 추론해준다.

let num = 10; 이라고만 작성해도 num의 타입이 number라고 인식하는 것이다.

함수의 매개변수는 꼭 적어줘야 하지만 return값도 확실하다면 사실 타입을 적어주지 않아도 된다.

타입 추론을 너무 믿으면 안정성이 떨어지게 되지만 잘 판단해서 적절히 사용하면 더 가독성 좋은 코드가 될 것이다.

 

제네릭

간단히 말해 치환할 타입 부분을 미리 문자로 지정해두는 문법이다.

선언할 때 바로 타입을 지정하는 것이 아니라 할당할 때 지정하는 방법이다.

function getSize<T>(arr: T[]) {
	return arr.length;
}

// T가 number로 치환된다는 느낌
console.log(getSize<number>([1, 2, 3]));
console.log(getSize<string>(["a", "b", "c"]));
console.log(getSize<boolean>([true, false]));

function getReturnValue<T>(arr: T[]): T[] {
	return arr;
}
console.log(getReturnValue<number>([1, 2, 3]));

 

<> 괄호 안에 들어가는 문자는 어떤 문자가 들어가도 상관없지만, 일반적으로 T를 사용한다.

 

extends 키워드오 함께 사용하면 타입을 제한할 수 있다.

function getLength<T extends { length: number }>(item: T): void {
  console.log(item.length);
}

getLength("Hello World");
getLength([1, 2, 3, 4, 5]);

 

any 타입

any 타입은 모든 타입을 허용하는 타입으로, 양날의 검이라서 사용을 권장하지 않는다.

하지만 리액트와 라이브러리를 사용하다보면 타입을 모르는 경우가 있다. 모든 타입을 다 알기 어려울 수도 있기 때문에 필요할 때 적절히 사용하는 것이 좋다.

 

타입 가드

어떤 정해진 문법을 말하는 것은 아니고, 에러가 발생할 것을 방지하기 위한 것이라 생각하면 된다

const add = (n1: number, n2?: number) => {
	return n1 + n2; // 타입스크립트에서는 에러 발생한다.
};

// 타입 가드 방식으로 수정
const add = (n1: number, n2?: number) => {
	if (typeof n2 !== 'undefined') return n1 + n2;
	else return n1;
};

 

Node 패키지 관리자

NPM

NPM(Node Package Manager)는 Node.js를 설치할 때 함께 설치되는, 이름 그대로 Node.js의 기본 패키지 관리자이다.

dependency에 설치하려면 [npm install 패키지이름]을 입력하면 되고,

devDependency에 설치하려면 [npm install 패키지이름 --save-dev]를 입력하면 된다.

 

NPX는 Node Package Execute의 약자로, Node 패키지를 실행하는 도구이고, npm과 마찬가지로 Node.js를 설치할 때 함께 설치된다. 보통 [npx 패키지이름]으로 실행한다.

 

YARN

페이스북에서 npm의 단점을 보완해서 개발한 패키지 매니저이다.

NPM은 싱글 스레드인데, YARN은 멀티 스레드로 여러 개의 작업이 동시에 진행되는 병렬 처리가 가능하기 때문에 NPM보다 훨씬 바르다.

npm은 package.json으로 관리하는데, yarn은 yarn.json으로 관리된다는 차이점도 있다.

 

이 외에도 다양한 패키지 관리자 도구가 있지만, 원하는 라이브러리를 지원하지 않는 호환성 문제가 있을 수 있기 때문에 주의해서 사용해야 한다. 한 프로젝트에 하나의 패키지 매니저를 사용할 수 있기 때문이다.

 

패키지 버전 의미

  1  .   2   .   3  

 

첫 번째 자리(1)

- Major 변화(주요 릴리즈)

- 패키지에서 아주 큰 변화가 있었을 때 증가된다. 이전 버전과 호환성 문제가 발생할 수 있으니 주의해야 한다.

두 번째 자리(2)

- Minor 변화(새로운 기능)

- 호환성의 문제가 생길 정도는 아니지만 새로운 기능이 추가되었을 때 증가된다.

세 번째 자리(3)

- Patch(버그 수정)

- 기존에 포함되었던 기능에 대해 버그를 수정했을 때 증가된다.

 

리액트 프로젝트 생성

이제 create-react-app 방식은 권장하지 않는다.

이제는 vite를 사용해서 생성하는 방식이 제일 주목받고 있다.

npm create vite@latest 프로젝트이름
npm create vite@latest . (현재 폴더에 설치)

 

이후 React, TypeScript + SWC를 선택하면 된다.

 

참고로 npm run dev에서 dev는 완전 고정된 명령어는 아니다.

package.json을 보면 scripts 영역에서 "dev"라고 기본적으로 적혀있게 된다. 

이 부분이 변경되면 변경된 단어로 교체해서 명령어를 입력해주면 된다.

 

컴포넌트 작성 시 주의

HTML5는 <br />이 아닌 <br>로 쓰기를 권장하지만,

React의 JSX에서는 반드시 <br /> 이렇게 닫아줘야 한다.

(HTML4까지만 해도 <br /> 이렇게 사용했어야 했다.)

 

TIP

이젠 프론트엔드도 Figma를 다룰 줄 알아야 한다.

적어도 피그마로 만들어진 디자인을 보면서 퍼블리싱까지 할 줄 알아야한다.

점점 프론트가 퍼블리싱까지 맡게될 것이다.

 

자주 사용하는 리눅스 기본 명령어

cd : 폴더 이동 (Change Directory)

pwd : 현재 터미널의 경로 출력 (Print Working Directory)

ls : 디렉터리 목록 출력 (List Segments)

cp : 복사 (Copy)

mv : 이동 (Move)

mkdir : 디렉터리 생성 (Make Directory)

rm : 삭제 (Remove)

sudo : 관리자 권한 (SuperUser Do)

find : 검색

 

? vs 1

? : 옵셔널 연산자 - 없을 수도 있음을 의미함

! : null이 아니라고 보장해주는 연산자

// root는 반드시 있다라고 알려주는 것
createRoot(document.getElementById('root')!).render()
반응형