보충해야할 것
1-4. Typescript 사용해보기 2-4. Tailwind 예제
TypeScript
1. TypeScript란?
타입스크립트(TypeScript) 는 마이크로소프트에서 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 확장된 버전이다.
타입스크립트는 정적 타입 시스템을 도입하여 개발자가 코드를 안정적으로 유지하고 런타임 오류를 최소화할 수 있게 해주는 강력한 언어다.
2. 왜 TypeScript를 사용할까?
그러면 우리가 왜 TypeScript를 사용해야 할까?
(1) 타입 안정성
타입스크립트는 변수, 함수 및 객체의 타입을 명시적으로 정의하므로 코드를 작성하면서 발생하는 다양한 유형의 오류를 사전에 감지할 수 있다.
(2) 대형 프로젝트 관리
인터페이스, 제네릭 등과 같은 객체지향 프로그래밍의 지원을 통해 대규모 프로젝트의 코드 기반을 쉽게 구성할 수 있도록 돕는다.
(3) 개발자 경험 향상
IDE를 포함한 다양한 도구를 지원 받을 수 있다.
ㄴ 높은 수준의 IntelliSense, 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있다.
이로써 개발 속도를 높일 수 있고, 버그를 미리 발견하여 디버깅 시간을 절약할 수 있다.
3. TypeScript 개발환경 구축하기
TypeScript 파일은 브라우저에서 동작하지 않으므로 타입스크립트 컴파일러를 이용해 자바스크립트 파일로 변환해야한다.
(1) 설치
npm install -g typescript(2) 파일 내용 작성하기
app.ts 파일에 내용을 작성한다.
// app.ts
let num1: number = 1
console.log(num1)(3) ts 파일 컴파일하기
tsc --target es6 --outDir js app.ts--target 옵션을 사용하면 컴파일러에서 생성할 Javascript 버전을 지정할 수 있다.
--outDir 옵션을 사용하여 생성한 JavaScript 코드를 js 라는 폴더에 넣도록 지정하고 있다.
4. TypeScript 사용해보기
(1) 변수 선언
변수는 JS 처럼 변수 = 값 형태로 선언할 수 있다.
단, TS는 변수명 뒤에 타입을 명시하는 것으로 변수에 타입을 선언할 수 있다.
let str1: string = 'Harry kane';만약 선언한 타입에 맞지 않는 값을 할당하면 컴파일 시점에 에러가 발생한다.
// 컴파일 에러
let num1: number = 'Rodrigo Bentancur'; // number 타입 변수에 문자열을 대입했기 때문에
(2) 함수 선언
함수의 매개변수와 반환값에 대한 타입 선언 방법은 아래와 같다.
// 함수 선언식
function func1(x: number, y: number): number {
return x * y;
}
// 함수 표현식
function func2 = (x: number, y: number): number => x * y;(3) 타입스크립트의 내장 타입
1. any
any 타입은 어떤 타입의 값도 받아들일 수 있기 때문에 타입 안정성이 떨어져서 의도치 않는 결과가 나올 수 있고, 그렇다고 한가지 타입으로만 정의하면 지정된 타입 이외에는 다른 타입을 받을 수 없다는 단점이 있다. 그래서 잘 사용하지 않는다.
2. object
object 타입은 타입 구분 없이 값을 할당할 수 있는 특성이 있어 any 타입과 비슷하다.
단, any 타입으로 선언한 변수는 속성의 유무를 런타임 시에 검사하지만, object 타입으로 선언한 변수는 컴파일 시간에 속성의 유무를 검사한다는 차이점이 있다.
let number = 50;
console.log(typeof number, number.toFixed(1)); // number, 50.0
let number2: Object = 50;
console.log(typeof number2, number2.toFixed(1)); //error 발생
let number3: any = 50;
console.log(typeof number3, number3.toFixed(1)); //number, 50.0object 타입의 변수에 숫자를 할당하더라도 컴파일 시에 숫자 메서드를 인식하지 못하므로 컴파일 시간에 에러가 발생한다.
Tailwind
1. Tailwind 소개
Tailwind CSS는 웹 개발자 및 디자이너를 위한 현대적인 CSS 프레임워크다.
Tailwind는 HTML 요소에 직접 클래스를 적용하여 웹 페이지 디자인을 빠르고 일관되게 구축할 수 있도록 도와준다.
2. 테일윈드의 특징
(1) 클래스 기반 스타일링
테일윈드는 클래스를 사용하여 스타일을 정의하고 적용한다.
bg-blue-500 클래스는 배경색을 파란색으로 지정하며, text-xl 클래스를 이용하여 텍스트 크기를 크게 지정할 수 있다.
(2) 구성 가능한 디자인 시스템
테일윈드는 커스터마이징이 가능한 디자인 시스템을 제공한다. 프로젝트의 필요에 따라 클래스, 색상, 글꼴 등을 정의하고 확장할 수 있다.
(3) 반응형 디자인
테일윈드는 미디어 쿼리를 사용하여 반응형 디자인을 지원한다. 화면 크기에 따라 다른 클래스를 적용하여 모바일 및 데스크톱 환경에 맞춘 디자인을 구현할 수 있다.
(4) 유틸리티 퍼스트
테일윈드는 유틸리티 퍼스트(utility-first) 접근 방식을 채택하여, 디자인을 빠르게 작성하고 프로토타입을 빌드하는 데 유용하다.
3. 테일윈드의 장점
(1) 빠르고 일관된 개발
클래스 기반 스타일링을 통해 빠르게 디자인을 적용할 수 있으며, 일관된 디자인을 유지하기 쉽다.
(2) 가독성 및 유지보수성
클래스 이름은 스타일과 관련된 의미를 전달하므로 코드의 가독성이 높고, 디자인 변경 시 유지보수가 용이하다.
(3) 커스터마이징 가능
프로젝트에 맞게 클래스 및 디자인 시스템을 커스터마이징할 수 있다.
(4) 생산성 향상
스타일링에 집중하기보다 비즈니스 로직에 더 많은 시간을 투자할 수 있도록 도와준다.
4. 테일윈드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sizing</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="space-y-6 bg-blue-300">
<div class="w-96 bg-white shadow rounded">About Me</div>
<div class="w-80 bg-white shadow rounded-md">
Github : https://github.com/baekseojin
</div>
<div class="w-72 bg-white shadow rounded-lg">
Velog : https://velog.io/@baekseojin
</div>
<div class="w-72 bg-white shadow rounded">
Tistory : https://baekseojin.tistory.com
</div>
<div class="w-72 bg-white shadow rounded">Birth date : 2006/12/16</div>
<div class="w-72 bg-white shadow rounded-md">
Phone number : 010-8879-5141
</div>
<div class="w-72 bg-white shadow rounded-lg">
Email : seojinbaek100@gmail.com
</div>
<div class="w-72 bg-white shadow rounded-full">
School : 부산소프트웨어마이스터고
</div>
</div>
</body>
</html>
