![]()
클래스(Class) 1. 클래스(Class) 이번엔 클래스(Class)에 대해 배워보겠습니다. 클래스란? 데이터와 해당 데이터를 처리하는 메서드(함수)의 모음입니다. TypeScript는 클래스를 선언할 때, 다음 예제와 같이 선언합니다. class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log("start"); } } const bmw = new Car("red"); 2. 접근 제한자(Access Modifier) TypeScript에서는 접근 제한자를 지정해 줄 수 있습니다. 이를 통해 정보 은닉 및 캡슐화를 지원할 수 있습니다. TypeScript에서는 세 가지 주요 접근 제한자..
![]()
함수 (function) 1. 함수 (function) 이번엔 함수에 대해 알아보겠습니다. 함수는 JavaScript와 유사하지만 몇가지 차이가 있습니다. 2. 함수 선언과 정의 1) 선언 및 정의 방법 TypeScript는 다음과 같이 정의할 수 있습니다. // 함수 선언 function add(num1: number, num2: number): number { return num1 + num2; } // 함수 호출 let result = add(10, 20); console.log(result); // 30 2) 선택적 매개변수 TypeScript에서는 함수의 매개변수를 선택적으로 만들 수 있습니다. 매개변수의 이름 뒤에 물음표(?)를 붙여서 정의합니다. // 함수 선언 function hello(n..
![]()
this와 bind 1. this this는 실행 컨텍스트에 따라 동적으로 바뀌며, 함수가 어떻게 호출되는 지에 따라 값이 달라집니다. 주로 메서드 or 콜백 함수 등에서 사용되며, 함수가 어떻게 호출되느냐에 따라 this가 가리키는 대상이 달라집니다. 다음 코드를 보면 user.info( )를 호출할 때, this는 user를 가리킵니다. const user = { name: "Kim", info: function () { console.log(this.name); } }; user.info(); // Kim 2. bind bind 메서드는 함수의 this 값을 설정하여, 새로운 함수를 생성합니다. const user = {name: "Kim"}; function info() { console.log(..
![]()
reduce 함수 1. reduce 함수 reduce 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 누적된 결과 값을 반환하는 함수입니다. reduce는 초기값(Initial Value)과 함께 사용될 수 있습니다. 2. 사용방법 다음 예제를 확인해보겠습니다. let numbers = [1,2,3,4,5,]; let sum = numbers.reduce((result, num) => result + num, 0); console.clear(); console.log(sum); // 15 위 코드에서 reduce는 배열 numbers의 각 요소에 대해 누적된 합계를 계산합니다. 초기값으로 0을 사용하고, 콜백 함수는 현재 요소(num)와 누적된 값(result)을 받아서 더한 후, 새..
![]()
인터페이스 (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); 속..
![]()
생성자 (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...
![]()
기본 타입 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..
![]()
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..
![]()
TypeScript 1. TypeScript 지금부터 TypeScript에 대해 알아봅시다. TypeScript란? Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript에 정적 타입 시스템을 추가한 언어입니다. 모든 JavaScript 코드가 TypeScript 코드로 유효하며, TypeScript는 JavaScript를 그대로 지원합니다. 2. 특징 1) 정적 타입 시스템 변수, 함수, 객체 등에 명시적인 데이터 타입을 지원하며, 이를 통해 코드의 안정성을 높이고 버그를 줄일 수 있습니다. 개발자는 코드를 작성하면서 컴파일 단계에서 타입 오류를 미리 확인할 수 있습니다. 2) 객체 지향 프로그래밍 객체 지향 프로그래밍(OOP)의 개념을 지원합니다. 클래스, 상속, 인터페이스 등..
![]()
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..
![]()
isFallback, getStaticPaths 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. isFallback - isFallback은 Suspense 내에서 현재 자식이 로딩 중인지 여부를 나타내는 불리언(Boolean) 속성입니다. - 터미널에 npm run dev를 입력하여, 실행해보면 상품에 들어갈 때마다 새로 생성되는 것을 알 수 있습니다. - #1. 그것을 자세히 보기 위해, const Post => {...}안에 다음과 같이 추가하고 실행해보겠습니다. → 그러고 실행해보면 다음과 같이 true, false가 나오는 것을 확인할 수 있는데 이것이 로딩 중인지 여부를 나타냅니다. const router = useRouter(); console.log(..
![]()
정적 생성 (Static Generation) 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 정적 생성 - 저번 시간에는 서버사이드 렌더링으로 작업을 해보았으니, 이번엔 정적 생성으로 페이지를 작업해보겠습니다. ※ 정적 생성이란? (바로가기) - #1. index.js 에서 다음과 같이 입력해줍니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.module.css"; import {..
![]()
에러 페이지와 환경 변수 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 에러 페이지 - 이번엔 에러 페이지를 만들어 봅시다. - #1. Gnb.js에 들어가 다음과 같이 입력해줍니다. → Contact 페이지는 만들지 않아서 에러 페이지가 발생하는데, 나오는 페이지는 기본으로 들어가 있는 페이지입니다. import { useRouter } from "next/router"; import { Menu } from "semantic-ui-react"; export default function Gnb() { const router = useRouter(); let activeItem; if (router.pathname === "/") { activeItem = "h..
![]()
0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 로딩 페이지 제작 - 화면이 넘어갈 때, 사용할 로딩 페이지를 만들어보겠습니다. - #1. index.js 에 들어가 다음과 같이 입력해줍니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.module.css"; import { Divider, Header, Loader } from "semantic-ui-react"; export de..
![]()
Dynamic Routes 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) - 사용된 API 1. Dynamic Routes 배우기 전 - 이젠 api를 통해서 상품을 불러오겠습니다. - #1. api 호출을 위해서 VScode 터미널에 npm i axios를 입력하여, 설치해줍니다. - #2. 이제 index.js에 다음과 같이 입력합니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.m..
