Web13 [Next js 15] Oauth 구현 (Naver) Typescript로 네이버 로그인 구현하기기본 세팅Callback URL을 다음과 같은 형식으로 지정해줘야 한다. 또한, .env 파일을 루트 폴더에 생성하여 NAVER_CLIENT_ID, NAVER_CLIENT_SECRET을 지정해줘야 한다. 그리고next-auth.d.ts 파일을 만들어 타입을 관리해줘야 하는데 다음과 같다.// Types/next-auth.d.tsimport NextAuth from "next-auth"import { JWT } from "next-auth/jwt"declare module "next-auth" { /** * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider.. 2025. 3. 26. effective Typescript (7) 매핑된 타입을 사용하여 값을 동기화하기산점도를 그리기 위한 UI 컴포넌트를 작성한다고 해보자. 여기에는 디스플레이와 동작을 제어하기 위한 몇 가지 다른 타입의 속성이 포함된다.interface ScatterProps {// The dataxs: number[];ys: number[];// DisplayxRange: [number, number];yRange: [number, number];color: string;// EventsonClick: (x: number, y: number, index: number) => void;}불필요한 작업을 피하기 위해 필요할 때에만 차트를 다시 그릴 수 있다.데이터나 디스플레이 속성이 변경되면 다시 그려야 하지만, 이벤트 핸들러가 변경되면 다시 그릴 필요가 없다.이런.. 2025. 3. 19. effective Typescript (6) 변경 관련된 오류 방지를 위해 readonly 사용하기다음은 삼각수를 출력하는 코드이다.function printTriangles(n: number) { const nums = []; for (let i = 0; i 이 함수는 배열 안의 숫자들을 모두 합친다. 그런데 계산이 끝나게 되면 원래 배열이 전부 비게 된다.자바스크립트 배열은 내용을 변경할 수 있기 때문에 타입스크립트에서도 역시 오류 없이 통과한다.오류의 범위를 좁히기 위해 arraySum이 배열을 변경하지 않는다는 선언을 한다. readonly 접근자를 사용하면 된다.function arraySum(arr: readonly number[]) { let sum = 0, num; while((num = arr.pop()) !=.. 2025. 3. 18. effective Typescript (5) 동적 데이터에 인덱스 시그니처 사용하기자바스크립트 객체는 문자열 키를 타입의 값에 관계없이 매핑한다.타입스크립트에서는 타입에 '인덱스 시그니처'를 명시하여 유연하게 매핑을 표현할 수 있다.type Rocket = {[property: string]: string}const rocket: Rocket = {name: 'Falcon',variant: 'v1.0',thrust: '4940'}; //정상property: string이 인덱스 시그니처이며 다음 세 가지 의미를 담게 된다.키의 이름: 키의 위치만 표시하는 용도이다. 타입 체커에서는 사용하지 않기 때문에 참고 정보로만 생각해도 된다.키의 타입: string이나 number 또는 symbol의 조합이어야 하지만 보통은 string을 사용한다.값의 타입.. 2025. 3. 17. effective Typescript (4) 타입 공간과 값 공간의 심벌 구분하기타입스크립트의 심벌(symbol)은 타입 공간이나 값 공간 중의 한 곳에 존재한다.심벌은 이름이 같더라도 속하는 공간에 따라 다른 것을 나타낼 수 있기 때문에 혼란스러울 수 있다.interface Cylinder { radius: number; height: number;}const Cylinder = {radius: number, height: number} => ({radius, height});interface Cylinder에서 Cylinder는 타입으로 쓰인다. const Cylinder에서 Cylinder와 이름은 같지만 값으로 쓰이며, 서로 아무런 관련이 없다. 상황에 따라 Cylinder는 값으로 쓰이거나 타입으로 쓰인다.때로는 이런 점이 가끔.. 2025. 3. 16. effective Typescript (3) any 타입 지양하기타입스크립트의 타입시스템은 점진적이고 선택적이다.코드에 타입을 조금씩 추가할 수 있기 때문에 점진적이고 타입체커를 언제든 해제할 수 있기 때문에 선택적이다.이 기능들의 핵심은 any타입이다.let age: number;age = '12'; // 오류, 문자열 형식은 number에 할당할 수 없음age = '12' as any; // OKany 타입에는 타입 안정성이 없다앞선 예제에는 age가 number타입으로 선언됐다. 그러나 as any를 사용하면서 string 타입을 할당하였다. 타입 체커는 선언에 따라 number 타입으로 판단할 것이고 이는 혼란을 불러일으킨다.age += 1 // age = '121'any는 함수 시그니처를 무시한다함수를 작성할 때는 시그니처를 명시해야 한다.. 2025. 3. 14. 이전 1 2 3 다음
