인터페이스 (interface)

인터페이스 (interface) 1. 인터페이스 TypeScript의 인터페이스에 대해 알아봅시다. 인터페이스란? 코드의 구조를 정의하는데 사용되는 도구입니다. 인터페이스를 사용하면, 객체의 형태, 메서드, 속성 등을 명시적으로 정의할 수 있으며, 이를 통해 코드의 가독성을 높이고 유지 보수성을 향상시킬 수 있습니다. 2. 사용방법 처음엔 다음과 같이 입력하여, 정의하여 줍니다. interface User { name: string; age: number; } 그 후 객체를 선언하고 출력해봅시다. interface User { name : string; age : number; } let user : User = { name : 'Kim', age : 30 } console.log(user.age); 속..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 1. 29.
• textsms

생성자 (constructor)

생성자 (constructor) 1. 생성자 (constructor) constructor는 객체를 생성할 때, 호출되는 메서드입니다. 일반적으로 클래스 or 함수를 사용하여 객체를 만들 때, 이 생성자가 호출됩니다. 2. 사용방법 console.clear(); class Person { // 생성자 constructor(name, age) { this.name = name; this.age = age; } // 다른 메서드들도 정의할 수 있음 hello() { console.log(`안녕하세요 ${this.name}입니다. 나이는 ${this.age}살 입니다.`) } } // 객체 생성 const user = new Person("Kim", 20); // 생성자에서 초기화된 속성 확인 console...

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 29.
• textsms

기본 타입

기본 타입 1. 기본 타입 TypeScript에서 기본 타입에 대해 알아봅시다. JavaScript와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용하여 지정합니다. 기본 타입에 대한 내용은 여기로! 1) 문자열 (String) 문자열은 변수명: string로 입력하여, 선언합니다. // 문자열 let car: string = "BMW"; // JavaScipt // let car = "BMW"; 2) 숫자 (number) 숫자는 변수명: number로 입력하여, 선언합니다. // 숫자 let age: number = 30; // JavaScript // let age = 30; 3) 배열 (array) 배열은 변수명: 타입[ ] 또는 Array으로 입력하여, 선언합니다. // 배열(숫자) let..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 1. 26.
• textsms

forEach 메서드

forEach 메서드 1. forEach 메서드 forEach 메서드란? 배열의 각 요소에 대해 주어진 함수를 실행하는 메서드입니다. 반복문을 대신하여 코드를 간결하게 해주고, 배열의 각 요소에 대한 작업을 수행할 때, 편리하게 사용됩니다. 2. forEach 메서드 구조 array.forEach(function(currentValue, index, array) { // currentValue: 현재 반복 중인 요소의 값 // index: 현재 반복 중인 요소의 인덱스 // array: 원본 배열 // 수행 코드 }); 3. 예시 // 배열 생성 var numbers = [1, 2, 3, 4, 5]; // 배열의 각 요소와 인덱스를 출력 numbers.forEach(function (number, ind..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 26.
• textsms

TypeScript

TypeScript 1. TypeScript 지금부터 TypeScript에 대해 알아봅시다. TypeScript란? Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript에 정적 타입 시스템을 추가한 언어입니다. 모든 JavaScript 코드가 TypeScript 코드로 유효하며, TypeScript는 JavaScript를 그대로 지원합니다. 2. 특징 1) 정적 타입 시스템 변수, 함수, 객체 등에 명시적인 데이터 타입을 지원하며, 이를 통해 코드의 안정성을 높이고 버그를 줄일 수 있습니다. 개발자는 코드를 작성하면서 컴파일 단계에서 타입 오류를 미리 확인할 수 있습니다. 2) 객체 지향 프로그래밍 객체 지향 프로그래밍(OOP)의 개념을 지원합니다. 클래스, 상속, 인터페이스 등..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 1. 26.
• textsms

API Routes

API Routes 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 로그인 페이지 - 이번에는 로그인 페이지를 구현해보겠습니다. - #1. pages 폴더 안에 admin.js 파일을 생성 후, 다음과 같이 입력해줍니다. export default function Admin() { return admin; } - #2. Gnb.js 파일에서 다음과 같이 수정해줍니다. → 브라우저에서 실행해보면 제대로 나오는 것을 확인할 수 있습니다. import { useRouter } from "next/router"; import { Menu } from "semantic-ui-react"; export default function Gnb() { const router = u..

• format_list_bulleted Front-End Study/Next.js
• · 2023. 12. 22.
• textsms