코멘토 React 실무 PT 2주차 - Typescript 기반의 React 프로젝트

LIVE로 배우는 실무 PT ㅣ 코멘토

 

<2주차 요약 >

1. Typescript를 쓰는 이유

 

자바스크립트가 동적타입 이라서 생기는 문제.

if ("" == 0) {
	//참
}
if (1< x < 3) {
	//어떤 x값이던 참
}

JS의 동일 연산자는 (==) 인수를 강제로 변환하여 예기치 않은 동작을 유발.

const obj = { width: 10, height: 15};

//철자 틀림 NaN
const area = obj.width * obj.heigth;

 

존재하지 않는 프로퍼티의 접근을 허용.

 

타입스크립트는 프로그램을 실행시키기 전에 type을 기반으로 프로그램의 오류를 찾음.

 

 

 

Javascript와 Typescript 차이점

Javascript는 동적 타입 (dynamic type) 언어

• 타입에 대한 고민 X -> 배우기 쉬움
• 타입 오류가 런타임 시 발견.
• 코드의 양이 적을 때 생산성 높음.

Typescript는 정적 타입 (static type) 언어

• 변수 선언때마다 타입을 고민 -> 진입장벽 올라감
• 타입 오류가 컴파일 시 발견.
• 코드의 양이 많을 때 비교적 생산성 높음.

 

Typescript의 생산성

타입스크립트는 코드들이 타입으로 연결돼 있기 때문에

• 연관된 코드 간의 이동이 쉬움
• 변수명/함수명을 변경하는 리팩토링 쉬움
• 호출하는 함수의 parameter와 return value 타입 확인 가능

 

interface 와 type

interface

• 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용
• 여러가지 타입을 갖는 property로 이루어진 새로운 타입을 정의하는 것과 유사함

 

type

• Type과 Interface는 매우 유사한 기능
• 대부분의 프로젝트에서, 둘 중 어느 것을 사용해도 상관없는 경우 많음

 

type과 interface 비교

 

interface는 property 확장/추가가 가능하고, type은 안됨.

interface는 하나의 형태로만 사용 가능  -> Type은 union 또는 tuple 사용 가능

 

 

 

2. 협업하기 좋은 코딩 스타일

클린코드 중요 원칙

1.네이밍 컨벤션 준수

• 클래스명은 명사를 사용하며 의미가 드러나는 이름을 짓는다.
• 변수는 의도가 드러나게 작성한다.
• 함수는 객체의 동작을 의미하므로 동사를 사용하여 이름을 짓는다.
• 멤버 변수, 인자명, 로컬 변수명은 lowerCamelCase 방식을 따른다.
• 상수명은 CONTANT_CASE 방식을 이용한다.

2.주석 관리

불필요한 주석을 제거하고 의도를 명확하게 관리해야함.

• 중복 주석 제거 : 코드로서 의도를 직관적으로 파악할 수 있다면, 주석을 남기지 않아도 됨.
• 정보제공주석 : 코드에서 강조할 부분이 있거나, 직관적으로 파악할 수 없다면 정보 제공 주석을 남겨야 함.
• 할일 주석 : 추후에 추가 구현이 필요할 때, 유용하게 사용 가능.

3.코드 복잡도 관리

좋은 개발자는 사람이 이해하기 쉬운 코드를 작성.

• 주기적인 리팩토링으로 점진적 개선하여 낮은 복잡도의 코드가 되도록 해야함.

4.코드 품질 관리

• 예외 관리: 오류를발생시키지말고,예외문을 발생시켜 간결한코드를 유지하도록 해야함.
• 테스트 관리: 버그 주변은 철저히 테스트하여 코드 안전성 확보

GitHub - airbnb/javascript: JavaScript Style Guide

 

 

GitHub - qkraudghgh/clean-code-javascript-ko: Clean Code concepts adapted for JavaScript - 한글 번역판

 

3.React에 어울리는 폴더/파일 구성

1. 파일 유형에 의한 분류

# 구조
src/
	- apis/
	- components/
	- pages/
	- types/
	- utils/

 

2.파일 기능이나 라우트 단위로 묶기 (디자인 시스템(컴포넌트 단위 디자인 따로있는거)이 약하거나 없으면)

# 예시	
src/
	- apis
	- components
		- Navigation.tsx
	- pages/
		- Home/
			- index.tsx
			- components/
				CampCard.tsx 
		- CampDetail/
				- index.tsx
				  index.tsx
		- types
			- type.tstypes
		- utils

파일 구조 – React

 

4. 프로젝트를 통해 알게 된 점

클린코드

1.인터페이스를 짤 때 코드는 최대한 간단하게 짜자.

2. 변수명이 길어져도 누구나 이해할 수 있도록 해야한다.

 

 

프로젝트 설정

1.Craco를 통한 절대경로 설정

다만 Craco 사용시 충돌들이 많이 생겨 다음에는 jsconfig.json / tsconfig.json 에서 절대경로를 설정하는 형식으로 해봐야겠다.

2.Formatter (prettier) 설정

ESLint는

• 코드의 에러와 문제점들을 검사하고, 고쳐준다!
• javascript코드를 실행하지 않고도, 오류를 발견해 알려주는 Node.js 패키지

Prettier는

• 코드의 모습을 예쁘고, 읽기 좋게 만든다!
• 코드를 사용자가 원하는 형식으로 일관되게 만들어주는 Node.js 패키지

 

기타

1.React Router v6

 

CRA + Typescript 절대경로 설정 (w/craco)

[React] 상대경로 지옥에서 벗어나기 (craco)

React | 프로젝트 절대경로 설정하기(Part.2)

 

React Router v6 업데이트 정리