Front 96

타입 가져오기, 내보내기

ts 가져오기, 내보내기타입스크립트에서는 import와 export 키워드를 사용하여 모듈을 가져오고 내보낼 수 있습니다.// export.tsinterface User { name: string; age: number; role: boolean;}export function introduce(user: User) { return `${user.name}는 ${user.age}살이며, 관리자인가요? ${user.role ? '네' : '아니요'}`;}// import.tsimport { introduce } from './export';const userA = { name: '김가을', age: 2, role: false,};const userB = { name..

Front/TypeScript 2024.07.18

타입 제너릭

제너릭 (Generics)제너릭은 타입을 파라미터로 전달하여 타입 안정성을 확보하는 방법입니다.함수interface Obj { x: number;}type Arr = [number, number];function toArray(a: string, b: string): string[];function toArray(a: number, b: number): number[];function toArray(a: boolean, b: boolean): boolean[];function toArray(a: Obj, b: Obj): Obj[];function toArray(a: Arr, b: Arr): Arr[];function toArray(a: any, b: any) { return [a, b];}co..

Front/TypeScript 2024.07.18

타입 별칭, this, 오버로딩, 클래스

타입 별칭 (Type Aliases)타입 별칭은 새로운 타입을 정의하는 용도로 사용됩니다. 타입 별칭은 기존 타입을 참조하여 새로운 타입을 정의할 수 있습니다.type User = | { name: string; age: number; role: boolean; } | [string, number, boolean];const user1: User = { name: '김가을', age: 2, role: false,};const user2: User = ['김겨울', 22, true];명시적 this인터페이스를 사용하여 클래스의 메서드 체이닝을 구현할 수 있습니다. 이때 인터페이스에 명시적 this를 사용하여 메서드 체이닝을..

Front/TypeScript 2024.07.18

타입 인터페이스 (Interface)

인터페이스 (Interface)인터페이스란 객체 데이터의 타입을 지정하는 용도로 사용되는 문법입니다. 인터페이스는 객체의 구조를 정의하는 형태로 사용되며, 객체의 타입을 지정하는 역할을 합니다.// 인터페이스 정의 (대문자로 시작)interface User { name: string; age: number; isAdult: boolean;}const user1: User = { name: '김겨울', age: 22, isAdult: true,};const user2: User = { name: '김가을', age: 2, // `isAdult` 프로퍼티가 누락되어 타입 오류가 발생합니다. // isAdult: false,};위 코드에서 user2 객체는..

Front/TypeScript 2024.07.18

타입 추론, 할당, 단언, 가드

타입 추론 (Type Inference)최대한 타입을 적게 명시하여 코드를 간결하게 작성하는 것이 좋음타입 추론이란 TypeScript가 자동으로 타입을 추론하는 것변수나 함수의 타입을 명시하지 않아도 타입을 추론하여 사용let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론str = 123; // Error: Type '123' is not assignable to type 'string'01. 변수 추론초기화된 변수let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론let num = 123;let bool = true;기본값이 설정된 매개변수// a와 b의 타입을 명시하지 않아도 타입스크립트가 number 타입으로 추론function add(a: n..

Front/TypeScript 2024.07.18

타입 종류 (TypeScript Types)

타입 종류 (TypeScript Types)01. 타입 종류- 문자let str: string = '문자열'let str: string;let name: string = '김가을';let hello: string = `안녕하세요. ${blue}님`;- 숫자let num: number = 123let num: number; // undefinednum = 123; // 123console.log(num);let integer: number = 6;let float: number = 3.14;let hex: number = 0xf00d;let infinity: number = Infinity;let nan: number = NaN;- 불리언let bool: boolean = truelet bool: bool..

Front/TypeScript 2024.07.18

javascript 배우기

- JS 목차js 핵심요약https://odada.me/334  변수 (Variable)https://odada.me/335데이터 (Data)https://odada.me/232연산자 (Operator)https://odada.me/233구문 (Statement)https://odada.me/235  node.js, npmhttps://odada.me/246모듈 (Module)https://odada.me/266함수 (Function)https://odada.me/236클래스 (Class)https://odada.me/247  표준내장객체 객체 - 문자열(String)https://odada.me/261표준내장객체 객체 - 숫자(Number), 수학(Math)https://odada.me/262표준내장객..

Front/JavaScript 2024.07.07

이벤트(Events) - javascript 기본

Javascript EventEvent란?Event는 웹 페이지에서 발생하는 모든 일을 의미한다.사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 마우스를 움직이는 등의 모든 행위를 의미한다.이벤트는 브라우저에서 발생하는 것이기 때문에 브라우저에서만 사용할 수 있다.간단한 예제버튼을 클릭하면 target의 글자색이 빨간색으로 바뀌는 예제를 만들어보겠습니다.change colorHelloconst button = document.querySelector('button');const target = document.querySelector('#target');button.addEventListener('click', () => { target.style.color = 'red';});Event 종류HT..

Front/JavaScript 2024.07.06

DOM - javascript 기본

DOM(Document Object Model)JS HTML DOM : https://www.w3schools.com/js/js_htmldom.asp1. DOM이란?DOM은 HTML 문서를 객체로 표현한 것으로,자바스크립트를 이용해 HTML 문서를 제어할 수 있게 해준다.const h1El = document.querySelector('h1');console.log(h1El.textContent);2. Node vs Element(요소)Node(노드) : HTML 요소, 텍스트, 주석 등 모든 것을 의미한다.Element(요소) : HTML 요소를 의미한다.Node는 Element의 상위 개념이다. 1 text1 2 text2const container ..

Front/JavaScript 2024.07.06

비동기(Async) - javascript 기본

동기(Synchronous)와 비동기(Asynchronous)01. 개요- 동기 처리동기 처리란, 작업을 순차적으로 처리하는 것을 말한다.자바스크립트 코드는 기본적으로 동기적으로 처리된다.동기적으로 처리되는 코드는 위에서부터 아래로 순차적으로 실행되며, 어떤 작업이 끝나야 다음 작업을 수행할 수 있다.하지만, 동기적으로 처리되는 코드는 작업이 끝날 때까지 다른 작업을 수행할 수 없다는 단점이 있다.은행에서 번호 순서대로 업무를 처리하는 것, 순차적으로 처리되는 것console.log('은행 1번 번호표 업무 시작');console.log('은행 1번 번호표 업무 끝');console.log('은행 2번 번호표 업무 시작');console.log('은행 2번 번호표 업무 끝');- 비동기 처리비동기 처리란..

Front/JavaScript 2024.07.06
티스토리 친구하기