개발/Web and Frontend5 LLM 기반 추천 시스템 프론트엔드 Home.tsx Home 화면// pages/Home.tsx import React, { useState, useEffect } from "react";import SearchBar from "../components/SearchBar";import MovieCard from "../components/MovieCard";import UserSearchBar from "../components/UserSearchBar";import { useNavigate } from 'react-router-dom';import styles from './Home.module.css'const API_URL = import.meta.env.VITE_API_URL;interface Movie { movieId: .. 2025. 4. 25. Typescript Function 타입스크립트 코리아 가이드 (링크)를 보고 따라쓰면서 공부하는 중이다. 타입스크립트 함수 function add(x: number, y: number): number { return x + y;}let myAdd = function(x: number, y: number): number { return x + y }; JavaScript에서는 모든 매개변수가 선택적이고, 사용자는 적합하다고 생각하면 그대로 둘 수 있습니다. 그렇게 둔다면 그 값은 undefined가 됩니다. TypeScript에서도 선택적 매개변수를 원한다면 매개변수 이름 끝에 ? 를 붙임으로써 해결할 수 있습니다. 그 예시로 성을 선택적 매개변수로 하는 경우를 들어보겠습니다: function buildName(firstName:.. 2025. 3. 31. Typescript Interface 데이터 타입과 마찬가지로 타입스크립트 코리아 가이드라인 (링크)에 있는 내용을 익히고자 따라 쓴 내용이다. 타입스크립트 인터페이스 기초 인터페이스 (Basic Interface)interface LabeledValue { label: string;}function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label);}let myObj = {size: 10, label: "Size 10 Object"};printLabel(myObj); 선택적 프로퍼티 (Optional Properties)interface SquareConfig { color?: string; width?: number;}function cr.. 2025. 3. 31. Typescript Data Types 타입스크립트 코리아 가이드라인 (링크)에 있는 내용을 익히고자 따라 쓴 내용이다. 타입스크립트 데이터 타입 bool 불리언true / falselet isDone: boolean = false; number 숫자 float 숫자. 16진수, 10진수 리터럴에 더불어, ECMAScript 2015에 소개된 2진수, 8진수 리터럴도 지원let decimal: number = 6;let hex: number = 0xf00d;let binary: number = 0b1010;let octal: number = 0o744; string 문자열JavaScript처럼 TypeScript도 큰따옴표 (")나 작은따옴표 (')를 문자열 데이터를 감싸는데 사용합니다.// 기본 사용법 let color: string = ".. 2025. 3. 31. Typescript 기초 Javascript 웹 페이지에서 동적 동작을 수행할 때 쓰는 언어동일 연산자나 데이터 타입 등에서 여러가지 문제가 있다고 알고 있다. Typescript자바스크립트와 다르게 타입스크립트는 정적인 타입 검사를 수행한다. JS대신 TS를 고른 이유는 다음과 같다.이전 회사에서 타입 관련 에러가 발생하는걸 보았고,내가 공부하여 적용할 LangChain이나 LLM 같은 경우도 Pydantic으로 미리 데이터 타입을 설정하고 가는걸 보고 안전성을 위해데이터 타입을 미리 정해놓는게 좋겠다 싶어서다. 처음 배울 때는 주피터 노트북처럼 즉각적으로 확인하는게 좋은거 같아서 TS playground를 이용했다. Interface 인터페이스 interface Person { firstName: string; .. 2025. 3. 31. 이전 1 다음