1.TypeScript
1-1. TypeScript - 설명
- JS는 웹 브라우저에서 간단한 스크립트를 작성하기 위해 설계된 언어라서 대규모 프로젝트를 한다면 문제점들이 생기게 된다.
1. 규모가 커질수록 관리가 어려워진다.
- 타입이 정해져 있지 않아 변수나 함수에 잘못된 값을 할당해도 에러를 빠르게 잡기 어려움.
2. 프로젝트 간의 협업 문제
- JS는 코드의 가독성, 유지보수, 일관성에 약점이 있고 타입 정보가 없어 동작의 예측이 어려움.
3. 런타임 에러 문제
- JS의 대부분 에러는 런타임에서 발견되어 문제가 커질 가능성이 높다.
- 이러한 문제를 해결하기 위해 만들어진 타입스크립트는 자바스크립트를 확장하여 만들어진 라이브러리이며 정적 타입을 제공해서 위에 있는 문제들을 보완해준다.
1-2. vsc에서 TypeScript 사용하기
타입스크립트 설치해서 사용하기
-
터미널에서 현재위치 찾고(ls) 필요한 위치로 이동(cd)함.
-
packge.json이 있는지 확인하고 yarn add @types/react @types/react-dom하고 yarn add typescript 해줌.
-
그런후 packge.json에 가보면 "@types/react", "@types/react-dom", "typescript"가 설치되어 있는 것을 볼 수 있음.
-
타입스크립트형태로 작성된 코드를 브라우저는 인식할 수 없어서 TS => JS로 변환(컴파일)해주는 tsconfig.json을 설정해야 한다.
-
직접 만들어도 되고 만들어진거 가져와써도 됨.
-
npm으로 가서 tsconfig/create라고 검색해서 코드를 가져다가 tsconfig.json이라는 새파일을 만들고 붙여넣기 해줌.
1-3 TypeScript - 예제
// 타입추론 - 타입을 추가하지 않아도 예측해서 문자열로 지정함.
let aaa = "안녕";
aaa = 10; // X
// 타입명사
let bbb: string = "잘가";
bbb = 10; // X
// 타입명시가 필요한 상황 - 2개의 타입이 필요한 경우 정수형 또는 문자형으로 지정.
let ccc: number | string = 1000;
ccc = "1000원"; // O
// 숫자타입
let ddd: number = 10;
// ddd = "철수"; // O
// 불린타입
let eee: boolean = true;
eee = false;
// eee = "false"; // true로 작동함 X
// 배열타입
let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"]; // X
let ggg: string[] = ["철수", "영희", "훈이", 10]; // X
let hhh: string | string = [1, 2, 3, 4, 5, "안녕"]; // 타입을 추론해서 어떤 타입인지 알아낼 수 있음.
// 객체타입 - 객체 타입의 경우 interface를 작성해서 값은 i(객체이름)으로 하는 것이 관례, ?의미는 그 값이 들어올 수도 있고 안들어 올 수도 있을 경우에 사용.
interface iProfile {
name: string;
age: string | number;
school: string;
hobby?: string;
}
const profile: iProfile = {
name: "철수",
age: 8,
school: "다람쥐초등학교",
};
profile.name = "훈이";
profile.age = "8살";
profile.school = "중학교";
profile.hobby = "수영";
// 함수타입 => 어디서 몇번이던 호출 가능해서, 타입추론 안됨(타입 명시하기)
function add(num1: number, num2: number, unit: string): string {
return num1 + num2 + unit;
}
const result = add(1000, 2000, "원"); // 결과의 리턴 타입도 알 수 있음
const add2 = (num1: number, num2: number, unit: string): string => {
return num1 + num2 + unit;
};
const result2 = add2(1000, 2000, "원"); // 결과의 리턴 타입도 알 수 있음
// any타입 - 정말 힘든 경우아니면 굳이 사용X
let qqq: any = "철수"; // 자바스크립트와 동일
qqq = 123;
qqq = true;
2. 린터(eslint)와 포멧터(prettier)
2-1. 린터
- eslint
- 린터는 코드에서 잠재적인 오류나 버그, 비효율적인 코드 패턴을 미리 감지해주는 도구
- 코드가 실행되기 전에 문제를 발견하여 개발자가 빠르게 수정할 수 있게 해준다.
- 지키지 않아 빨간줄로 감지가 되더라도 실행에는 문제없는 에러인 경우가 많다.
- 사용자가 커스텀해서 어떤 부분을 에러로 처리할지, 넘길지 가능
역할
-
문법 오류 감지: 잘못된 문법이나 구문 오류를 코드 실행 전 미리 감지
-
코딩 스타일 검사: 코드가 일관된 스타일을 유지하도록 체크 (들여쓰기, 세미콜론 사용 여부, 공백 규칙 등)
-
베스트 프랙티스 확인: 일반적으로 권장되지 않는 코드 패턴이나 잠재적인 문제를 감지 (정의되지 않은 변수 사용, 불필요한 코드 등)
-
성능 문제 감지: 성능에 영향을 줄 수 있는 코드 패턴이나 비효율적인 구문을 발견
function add(a, b) {
return a + b
}
// ex) 세미콜론을 항상 붙여야 한다라는 규칙이 있었다면 ESLint가 감지해서 경고를 출력함.2-2. 대표적인 린터(ESLint)사용하기
설치하기
- package.json이 있는 파일에 가서 npm init @eslint/config@latest로 설치해줌.
- 각종 물어보는 질문이 있는데 현재 자신에 상황에 맞는 부분 엔터해서 체크해주기
- 설치가 완료된다면 eslint.config.mjs라는 파일이 생성된다.
- vs익스텐션에도 eslint가 있는데 그거도 설치해준다.
수정하기
- 사용하다가 끄고 싶은 기능은 붉은 줄로 나타낸 에러에 마우스를 가져대면 기능이 담긴 코드가 있고 그걸 복사한다.
- eslint.config.mjs파일로 가서 export default 중괄호 안에 중괄호를 만든다.
- 끄는 것은 off이고, warn과 error도 있음.
// eslint.config.js
export default [
{
rules: {
"no-unused-vars": "error",
"no-undef": "error",
"끄고싶은 코드": "3개중 하나 정하기"
}
}
];2-3. 포멧터
- Prettier
- 포매터는 코드 스타일을 자동으로 정리해주는 도구
- 개발자가 작성한 코드를 규칙에 맞게 자동으로 재구성해 줍니다.
- 사용자가 커스텀해서 줄바꿈, 띄어쓰기 칸 수 등을 조절 가능
역할
-
코드 형식 일관성: 들여쓰기, 괄호 배치, 세미콜론 사용 등의 코딩 스타일을 일관되게 유지한다.
-
자동 정렬 및 포맷팅: 코드의 가독성을 높이기 위해 자동으로 포맷팅하여, 수동으로 코드 스타일을 수정할 필요가 없다.
-
팀 간 코드 일관성 유지: 여러 개발자가 협업할 때, 각 개발자가 서로 다른 스타일로 코드를 작성하는 문제를 방지해 준다.
function foo() {console.log("Hello"); }
// ⬇︎ 적용한다면?
function foo() {
console.log("Hello");
}2-4. 대표적인 포멧터(Prettier)사용하기
설치하기
- 프리티어 홈페이지에 가서 yarn add --dev --exact prettier 복사해옴.
- 완료되면 package.json안에서 설치된것을 확인 할 수 있다.
- vs익스텐션으로 프리티어를 설치해준다.
수정하기
-
혼자할꺼면 설정 들어가서 설정해도 되는데, 협업을 한다는 가정하에 프리티어를 파일로 만든다.
-
vscode라는 최상단에 폴더 생성 => 폴더 안에 settings.json 파일생성
-
중괄호 만들고 저장하기 누르면 자동으로 포메팅해주는 설정("editor.formetONSave": true,(싫으면 false))
-
포메터 중에서 프리티어를 사용한다고 정하는 설정("editor.defaultFormetter": "esbenp.prettier-vscode")
-
2칸공백 or 4칸공백 등을 조절하는 방법은 prettierrc 파일을 생성해준다.
-
{"tabWidth": 2}작성하면 됨.
