[백엔드TIL] react , typecript 에대한 개념 학습(70일차)

tyepscript 도입을 위해 공부를 해보았다. 

typeScript의 주요 특징 :

정적 타입: TypeScript는 변수, 함수, 클래스 등에 명시적인 타입을 지정할 수 있다.
이는 컴파일 시점에 오류를 잡을 수 있으며, 코드의 가독성과 유지보수성을 향상시킨다.

ECMAScript 호환: TypeScript는 JavaScript의 상위 집합이므로, 모든 JavaScript 코드가 TypeScript로 유효하다.
따라서 기존 JavaScript 코드를 그대로 사용하면서 타입 시스템을 점진적으로 도입할 수 있다.

클래스 기반 객체지향 프로그래밍: TypeScript는 인터페이스, 추상 클래스, 상속 등의 객체지향 프로그래밍 개념을 지원하여 코드의 재사용성과 구조화를 촉진한다.

타입 추론: TypeScript는 타입을 명시하지 않아도 변수의 초기값이나 함수의 반환값 등을 분석하여 타입을 유추할 수 있다. 이는 코드 작성 시 타입 선언을 간소화하고 생산성을 높여준다.

도구 지원: TypeScript는 강력한 개발 도구 지원을 제공한다.
TypeScript 컴파일러는 JavaScript로 변환하며, 타입 체크와 오류 검사를 수행하고 대부분의 개발 환경에서 TypeScript를 지원하므로, 코드 완성, 디버깅, 리팩토링 등의 기능을 이용할 수 있다.

TypeScript는 주로 대규모 프로젝트, 협업 개발, 프론트엔드 개발 등에서 많이 사용됩니다. 타입 시스템을 활용하여 코드의 안정성을 향상시키고, 개발자 간의 협업을 원활하게 하며, 생산성을 높일 수 있는 장점이 있습니다.

개념 사실 피료업따..난 당장 플젝에 써먹을 이론

코드,,,가 필요해!!!

function sum(a: number, b: number) {
  return a + b;
}

sum('x', 'y');
// 

요로코롬 number type 선언 가능!

타입 선언

변수명 뒤에 타입을 명시하는 것으로 타입을 선언할 수 있다.

let umc: string = 'hello';
// 함수 표현식
function func2 = (x: number, y: number): number => x * y;
//boolean, null, undefined, number, string, symbol, object
// array
let list1: any[] = [1, 'two', true];
let list2: number[] = [1, 2, 3];
let list3: Array<number> = [1, 2, 3]; // 제네릭 배열 타입
//array : 배열
//tuple : 고정된 요소수 만큼의 타입을 미리 선언 후 배열을 표현
//enum : 열거형. 숫자값 집합에 이름을 지정한 것
//any : 타입 추론을 할 수 없거나 타입 체크가 필요없는 변수에 사용. var 키워드로 선언한 변수와 같이 어떤 타입의 값이라도 할당 가능
//void : 일반적으로 함수에서 반환값이 없을 경우 사용
//never : 결코 발생하지 않는 값

[Typescript] 타입 함수

매개변수의 타입과 반환 타입을 설정해야 합니다.

// 함수 선언식
function myFunc1(x: number, y: number): number {
   return x + y;
}
// 함수 표현식
let myFunc2 = function (x: number, y: number): number {
   return x + y;
};
// 화살표 함수
let myFunc3 = (x: number, y: number): number => {
   return x + y;
};

[Typescript] 함수 - call signature

call signatures란 함수 이름 위에 커서를 올렸을 때 뜨는 파라미터 타입 정보와 리턴 타입 정보를 말한다.즉 , 함수를 표현하는 타입을 미리 선언 가능

참고 코드

//* 변수에 미리 함수 타입을 지정
let myFunc4: (arg1: number, arg2: number) => number;
myFunc4 = function (x, y) {
   return x + y;
}; // 미리 변수에 함수 타입을 지정했기에 대입하는 함수식에 타입을 쓰지않아도 된다.

//* 위의 과정을 한줄로 표현
let myFunc5: (arg1: number, arg2: number) => number = (x, y) => {
   return x + y;
};

function myFunc8(x: string, y: string): string; // 함수 타입 선언
function myFunc8(x: number, y: number): number; // 함수 타입 선언

function myFunc8(x: any, y: any) { // 실제 함수 선언
   return x + y;
}
myFunc8(1, 2);

먼저 함수의 타입을 설명하고 나서 코드를 구현하게 되기 때문에, 개발자가 타입을 생각하도록 해준다.

함수 파라미터 안에서 직접 타입을 설정할 때엔 코드 구현과 동시에 타입을 지정했지만,
call signature를 쓰면 타입 지정과 함수 구현을 분리해서 작성할 수 있다.

휴,,머리가 아프니 타입스크립트 함수는 여기까지알아보고

NEXT.JS 로 리프레쉬해보자.

next.js

Next.js는 React 기반의 JavaScript 프레임워크이다.
Next.js를 사용하면 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG), API 라우팅 등의 기능을 쉽게 구현할 수 있다.

React는 클라이언트 측에서 사용자 인터페이스를 구축하기 위한 라이브러리이며, Next.js는 React를 이용하여 서버 측 렌더링을 할 수 있게 도와준다.
서버 사이드 렌더링은 웹 페이지를 브라우저에서 받아와 렌더링하는 과정을 서버에서 처리하여 초기 로딩 속도를 개선한다.
또한, Next.js는 정적 사이트 생성 기능도 제공하여 사전에 페이지를 생성하여 성능을 향상시킬 수 있다.

또한, Next.js는 간단한 파일 시스템 기반의 라우팅을 제공한다. 페이지들을 각각의 파일로 생성하고, 파일 시스템의 구조를 따라 URL 경로를 자동으로 매핑한다. 이를 통해 간단한 코드 구조와 유지 보수가 용이한 장점이 있다.

Next.js는 널리 사용되는 웹 프레임워크로, React와 함께 사용하여 웹 애플리케이션을 빠르고 효율적으로 구축할 수 있다.

여기서 난 라우팅이 어떻게 다른지 알아보겟다.

리액트에서는 react-router-dom 라이브러리를 통해 페이지간 라우팅을 구현했다. 응응!
그러나 넥스트에서는 pages 폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정된다니! 당장 알아보자.

정적 라우팅

react-router-dom 처럼 넥스트에서도 Link 컴포넌트를 사용해 주소를 이동하는법!

이건줄 알았는데 next/Link가

import Link from "next/Link";

export default function App() {
  return (
    <div>
      <h2>Link to 'tomato' Page</h2>
      <Link href="/tomato">
        <a>move to tomato</a>
      </Link>
    </div>
  );
}
//Link 컴포넌트는 next/Link 모듈에서 불러와 사용할 수 있으며 href 속성으로 이동할 경로를 지정

또 링크 컴포넌트는 브라우저의 History API를 지원하여 뒤로가기를 하더라도 이전에 렌더링한 페이지를 불러온다.

따라서 새 페이지를 불러오기 위한 요청을 하지 않아도 되며, 이전 페이지를 다시 컴파일할 필요가 없다는 장점이 있다.