TypeScript 입문 수업을 마치며 TypeScript는 정적 타입 검사를 제공하여 코드의 품질과 안정성을 향상시키며, 개발 과정에서 오류를 방지할 수 있도록 도와준다. 지금까지 TypeScript의 기본 사항을 배웠다. 하지만 TypeScript는 더 많은 고급 기능을 제공하며, 이를 이용하면 코드를 더욱 강력하고 유연하게 만들 수 있습니다. 인터페이스 제네릭 네임스페이스와 모듈 타입 가드와 타입 단언 맵드 타입과 조건부 타입 유틸리티 타입 타입스크립트와 함께 사용되는 라이브러리 및 프레임워크 이러한 고급 주제들을 통해 TypeScript를 더 깊게 이해하고, 코드의 효율성과 품질을 더욱 향상시킬 수 있다. 앞으로 TypeScript를 학습하며 프로젝트를 더 발전시킬 수 있을 것이다! 참고자료 생활..

TypeScript에서 Type Aliases Type Aliases는 TS에서 기존 타입에 사용자 정의 이름을 부여할 수 있는 방법이다. 코드의 가독성을 높이고 복잡한 타입 구조를 단순화할 수 있다. Type Aliases는 원시 데이터 타입, Array, Tuple, 객체, 함수 등 다양한 타입에 적용할 수 있다. 1. 원시 데이터 타입의 별칭 TS에서 원시 데이터 타입의 별칭을 사용하면 특정 데이터 타입을 명확히 표현할 수 있다. type Age = number; const myAge: Age = 30; 위처럼 age와 같은 숫자를 나타내는 변수를 다룰 때, number 대신 Age라는 별칭을 사용할 수 있다. 2. Array와 Tuple, 객체, 함수에 적용한 사례 Array, Tuple, 객체,..

TypeScript에서 함수의 데이터 타입 TS에서 함수를 사용할 때, 매개변수와 반환 값에 대한 데이터 타입을 지정할 수 있다. 이를 통해 코드의 안정성과 가독성이 높아진다. 예제 1: 매개변수와 반환 값의 데이터 타입 지정 function add(a: number, b: number): number { return a + b; } 위의 함수는 두 개의 숫자를 매개변수로 받고, 두 숫자의 합을 반환한다. 이때 각 매개변수와 반환값에 데이터 타입을 지정해줬다. 예제 2: 선택적 매개변수 사용하기 함수에서 일부 매개변수는 선택적으로 받고 싶을 때, 매개변수 뒤에 '?'를 사용한다. function greet(name: string, greeting?: string): string { if (greeting..

환경변수 & 졸업 현재 강의에서는 주소가 localhost로 하드코딩되어 있다. 그런데 개발할 때 사용하는 api와 실서버 api의 주소가 다를 수 있다. 이런 정보를 애플리케이션의 소스코드에서 떨어트려 별도로 관리해야할 일이 생길 수 있다. 아래 환경변수 관련 문서를 보면 .env.local 파일을 홈디렉토리에 만들고 아래와 같이 애플리케이션이 사용하는 정보를 넣어주면 된다. https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables Configuring: Environment Variables | Next.js Next.js comes with built-in support for environmen..

글 삭제 이번엔 삭제를 구현해보자. Control.tsx 파일에서 onClick 이벤트를 추가해주고 fetch를 작성해주자. 삭제 메소드를 추가하기 위해 option을 따로 설정해주자. 테스트하면 글을 선택하고 삭제버튼을 눌렀을 때 삭제가 됐고 refresh를 하면 삭제가 잘 된 걸 확인할 수 있다. 그럼 삭제한 경우 데이터가 사라진 것이니까 루트로 이동하도록 처리하자. 이를 위해서는 router가 필요하다. 삭제가 끝나면 push해서 루트로 이동하고 서버 컴포넌트들을 다 refresh를 해야하니까 router.refresh도 처리해주자. // /src/app/Control.tsx 'use client'; import Link from 'next/link'; import { useParams, useRo..

글 수정 수정 기능을 구현해보자. 아직 페이지가 없어 404가 뜰 것이다. 우선 /src/app/update/[id]/page.tsx 파일을 만들어 주고 기본 틀만 제공하자. 그런데 수정이란 크게 2가지의 합성이다. Update = Create + Read 따라서 수정을 진행할 때 읽고 만드는 두 가지가 모두 필요하다. 기본적인 UI는 Create에 있는 page.tsx에서 가져오자. 그런데 Update는 원본이 적혀 있어야 하기 때문에 Read 기능도 필요하다. 그런데 Create는 클라이언트 컴포넌트이고 Read는 서버 컴포넌트로 구현되어 있다. 그래서 이걸 그대로 사용할 수는 없다. useEffect와 fetch를 이용해서 데이터를 가져오는 작업이 필요하다. 그리고 가져온 데이터를 form 안에 넣..