Ted's Codding study

HTTP 프로토콜의 역할과 중요성 설명.

Ted93 — Thu, 11 Jul 2024 12:33:09 +0900

1. HTTP 프로토콜 개요

"HTTP (HyperText Transfer Protocol)"
웹 상에서 클라이언트와 서버 간의 통신을 위한 규약
요청(Request)과 응답(Response)의 형식으로 데이터를 교환

2. HTTP 요청과 응답 구조

메서드(Method): 작업의 종류를 지정 (예: GET, POST, PUT, DELETE)
URL: 요청 대상 리소스의 위치를 지정
헤더(Headers): 요청의 메타데이터를 포함 (예: 인증 정보, 콘텐츠 유형)
본문(Body): POST, PUT 요청에서 데이터를 포함 가능

상태 코드(Status Code): 요청의 처리 결과를 나타냄 (예: 200 OK, 404 Not Found, 500 Internal Server Error)
헤더(Headers): 응답의 메타데이터를 포함 (예: 콘텐츠 유형, 캐시 제어)
본문(Body): 요청에 대한 실제 데이터를 포함 (예: HTML, JSON)

3 HTTP의 중요성

표준화된 통신: 모든 웹 클라이언트와 서버가 동일한 방식으로 통신 가능능
인터넷의 기초: 웹 페이지, API, 웹 애플리케이션 등 다양한 웹 서비스의 기반
확장성: HTTP/2, HTTP/3 등 지속적인 발전을 통해 성능과 보안이 향상

4. HTTP 요청 예시

4-1) HTTP 요청

{
  "method": "GET",
  "url": "<https://jsonplaceholdertypicodecom/posts/1>",
  "headers": {
    "Accept": "application/json"
  }
}

메소드(Method): GET은 서버로부터 데이터를 요청하는 메소드
URL: 리소스의 위치를 나타냄 여기서는 첫 번째 게시글의 정보를 요청
헤더(Headers): 클라이언트가 JSON 형식의 응답을 원한다고 서버에 알림 (Accept: application/json)

4-2) 서버 응답

{
  "statusCode": 200,
  "headers": {
    "Content-Type": "application/json"
  },
  "body": {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\\nsuscipit recusandae consequuntur expedita et cum\\nreprehenderit molestiae ut ut quas totam\\nnostrum rerum est autem sunt rem eveniet architecto"
  }
}

상태 코드(StatusCode): 200 OK는 요청이 성공적으로 처리되었음을 나타냄
헤더(Headers): 응답 데이터의 형식이 JSON임을 나타냄 (Content-Type: application/json)
본문(Body): 요청된 게시글의 정보를 JSON 형식으로 포함 여기에는 사용자 ID, 게시글 ID, 제목, 내용 등이 포함

4-3) fetch() 응답 객체의 속성들

fetch() 함수를 사용하면 Promise를 반환하며, 이 Promise는 응답 객체(Response)로 이어짐 이 객체는 다음과 같은 속성을 포함
ok: 응답 상태 코드가 200-299 범위인 경우 true를 반환 요청이 성공적으로 완료되었음을 나타냄
status: HTTP 상태 코드를 나타내는 정수 값 (예: 200, 404)
statusText: HTTP 상태 코드에 대한 텍스트 메시지 (예: "OK", "Not Found")
headers: 응답 헤더들을 다루는 Headers 객체 헤더를 검색하고 접근하는 데 사용
url: 응답이 온 URL
redirected: 요청이 리다이렉트되었는지 여부를 나타냄
type: 응답의 유형을 나타냄 (예: "basic", "cors")
body: 읽을 수 있는 스트림으로서, 응답의 본문을 제공 해당 스트림은 json(), text(), blob(), formData() 등의 메소드를 사용하여 데이터로 변환 가능

4-4) Axios 응답 객체의 속성들

Axios를 사용하면 응답 객체는 다음과 같은 속성을 포함
data: 서버로부터 반환된 실제 데이터 설정에 따라 자동으로 JSON으로 파싱 가능
status: HTTP 상태 코드
statusText: HTTP 상태 코드에 대한 설명 문자열
headers: 서버에서 응답으로 보낸 HTTP 헤더들
config: 요청에 사용된 Axios의 설정 객체
request: 요청을 보낼 때 사용된 XMLHttpRequest 객체 (브라우저 환경에서만 해당)

HTTP.

Ted93 — Wed, 10 Jul 2024 19:30:45 +0900

1. 클라이언트-서버 모델 개요

정의

사용자와 상호작용하는 장치 또는 애플리케이션
보통 웹 브라우저(예: Chrome, Firefox, Safari 등)를 의미

역할

사용자가 입력한 명령을 서버로 보내고
서버에서 받은 데이터를 사용자에게 표시

정의

클라이언트의 요청을 처리하고 응답을 제공하는 장치 또는 애플리케이션
웹 서버, 데이터베이스 서버 등이 포함

역할

클라이언트로부터 요청을 받아 이를 처리하고 결과를 반환

2. 클라이언트-서버 상호작용 예시

2-1) 사용자가 웹 브라우저에서 URL을 입력

브라우저가 URL을 통해 서버에 접속하기 위해 HTTP 요청을 준비

2-2) 클라이언트(브라우저)가 서버에 HTTP 요청 전송

HTTP 요청은 클라이언트의 요구사항을 담고 있음 (예: 특정 웹 페이지를 요청)

2-3) 서버가 요청을 처리하고, 결과(HTML, CSS, JS 등)를 클라이언트에 응답

서버는 요청받은 작업을 수행하고, 결과 데이터를 HTTP 응답으로 클라이언트에게 전달

2-4) 클라이언트는 응답 받은 데이터를 사용자에게 표시

클라이언트는 받은 데이터를 렌더링하여 사용자에게 보여줌

3. 클라이언트-서버 아키텍처의 장점

확장성

서버는 동시에 여러 클라이언트의 요청을 처리 가능

유연성

클라이언트와 서버는 서로 다른 플랫폼에서 동작 가능

보안성

데이터는 중앙 서버에서 관리되고 제어
클라이언트는 민감한 데이터를 직접 다루지 않음

비동기 처리 프로그래밍(asynchronous).

Ted93 — Tue, 9 Jul 2024 15:34:40 +0900

1. 정의

코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 것
프로그램의 메인 흐름과 병렬적으로 작업 할 수 있는 프로그래밍 방식
작업이 완료되면 결과를 받을 수 있음

2. 특징

응답성 향상
사용자의 응답이 블로킹되지 않고, 긴 작업이 백그라운드에서 수행
별도의 스레드 또는 이벤트 루프를 이용하여 동작하기 때문에, 작업이 완료될 때까지 대기하지 않고 수행

3. 비동기 처리 장단점

장점

병렬 처리와 효율성
응답성 향상

단점

복잡성 증가
디버깅 어려움

4. jsonplaceholder

가짜 REST API 서비스
실제 데이터를 사용하지 않고도 HTTP 요청을 테스트할 수 있는 가상의 데이터를 제공
무료 사용 가능 간단한 테스트 및 프로토타이핑을 위해 사용되는 가짜 온라인 REST API
사용자 데이터나 게시물 데이터를 요청하는 데 사용 가능 https://jsonplaceholder.typicode.com/users

동기 처리 프로그래밍(synchronous).

Ted93 — Mon, 8 Jul 2024 18:14:19 +0900

1. 정의

코드가 순차적으로 실행되는 것을 의미
한 작업이 완료될 때까지 다음 작업은 대기(시작하지 X)

2. 특징

순차적 실행: 코드의 흐름 예측이 용이
간단성 & 예측성: 프로그램의 이해가 쉽고, 디버깅이 상대적으로 용이

3. 블로킹(Blocking) 연산의 이해

정의

프로그래밍의 진행을 막고, 해당 연산이 완료될 때까지 실행하지 못하도록 하는 것

블로킹의 구성요소

대기 시간, 리소스 관리, 응용 프로그램의 응답성

function performCalculation(): number {
  // 시간 지연을 위한 계산식
  let sum = 0;
  for (let i = 0; i < 9999999000; i++) {
    sum += i;
  }
  return sum; // 계산 결과 반환
}

function performAnotherCalculation(): number {
  // 시간 지연을 위한 계산식
  let product = 1;
  for (let i = 1; i < 100; i++) {
    product *= i;
  }
  return product; // 계산 결과 반환
}

// 동기적 처리를 수행하는 함수
function syncFunc() {
  console.log('첫 번째 작업 시작');
  let result = performCalculation(); // 시간이 오래 걸리는 작업
  console.log(`첫 번째 작업 완료: ${result}`);

  console.log('두 번째 작업 시작');
  let anotherResult = performAnotherCalculation();
  console.log(`두 번째 작업 완료: ${anotherResult}`);
}

syncFunc();
// 첫 번째 작업 시작
// 첫 번째 작업 완료: 49999989990068890000
// 두 번째 작업 시작
// 두 번째 작업 완료: 9.33262154439441e+155

4. 동기 프로그래밍의 장단점

장점

간단성, 명확성
디버깅 용이

단점

응답성 저하, 코드의 활용(사용)도가 저하

제네릭, 클래스, 배열 메서드를 활용한 회원 관리 프로그램 구현.

Ted93 — Sun, 7 Jul 2024 19:27:10 +0900

1. 회원 정보

name(이름), age(나이), active(활성 상태)의 속성을 가짐
active 속성은 기본값으로 true값을 가짐(회원이 기본적으로 활성 상태)

2. 회원 관리 프로그램

회원을 추가(addMember)
회원을 검색(findMember)
회원을 제거(removeMember)
활성화된 회원만 필터링(filterActiveMember)

3. 기능 추가

Member 클래스 확장

Member 클래스를 상속받는 VIPMember 클래스를 정의
rewardPoints(보상점수) 속성을 가짐
생성자를 통해 초기화 가능 (Member 클래스의 속성은 super())

회원 나이 평균 계산하기

Membership 클래스에 getAverageAge 메서드를 추가
현재 목록에 있는 모든 회원들의 나이 평균을 계산하여 반환

비활성 회원 검색 기능을 추가

Membership 클래스에 filterInactiveMembers 메서드를 추가
활성 상태가 아닌(active 속성값이 false) 회원들만 필터링하여 반환

class Member {
  constructor(
    public name: string,
    public age: number,
    public active: boolean = true,
  ) {}
}

class Membership<T extends Member> {
  private members: T[] = [];

  addMember(member: T) {
    this.members.push(member);
  }
  findMember(name: string): T | undefined {
    return this.members.find((member) => member.name === name);
  }
  removeMember(name: string): void {
    const index = this.members.findIndex((member) => member.name === name);
    if (index !== -1) {
      this.members.splice(index, 1);
    }
  }

  filterActiveMembers(): T[] {
    return this.members.filter((member) => member.active);
  }
}

//! MemberShip 클래스 사용 예시
let membership = new Membership<Member>();

let memberA = new Member('테드', 30);
membership.addMember(memberA);
membership.addMember(new Member('챨리', 29));
membership.addMember(new Member('마이클', 22));
membership.addMember(new Member('마커스', 25, false));

console.log(membership.findMember('챨리')); // Member { name: '챨리', age: 29, active: true }
console.log(membership.findMember('헤일리')); // undefined

let activeMembers = membership.filterActiveMembers();
console.log(activeMembers);
// [
// Member { name: '테드', age: 30, active: true },
// Member { name: '챨리', age: 29, active: true },
// Member { name: '마이클', age: 22, active: true }
// ]

membership.removeMember('챨리');
console.log(membership.findMember('챨리')); // undefined

유니온 타입과 제네릭

Ted93 — Sat, 6 Jul 2024 15:05:03 +0900

1. 유니온 타입

여러 타입 중 하나가 될 수 있는 값을 의미

function unionGeneric<T extends string | number>(value: T) {
  if (typeof value === 'string') {
    return value.toLowerCase();
  }
  return value; // string | number
}

const result1 = unionGeneric('STring');
const result2 = unionGeneric(1000);
console.log(result1, result2); // string 1000

2. 제네릭 유틸리티 타입

타입스크립트에 내장된 일련의 제네릭 타입
기존 타입을 변환하거나 조작하는데 사용

2-1) Partial: 모든 속성을 선택적으로 만들어줌

형태: Partial<T>

interface User {
  name: string;
  age: number;
}

사용자 데이터 예시 사용자의 초기 데이터 지정 | 사용자 데이터 입력(생성)

const users: { [key: number]: User } = {
  1: { name: '테드', age: 30 },
  2: { name: '챨리', age: 29 },
};

위의 사용자 데이터를 업데이트하는 함수 구현 사용자의 id(key)값을 사용하여 name 또는 age의 값을 업데이트(수정)

function updateUser(id: number, changes: Partial<User>) {
  const user = users[id]; // User 타입의 객체

  if (!user) {
    console.log(`User with id ${id} not found`);
  }
  //   변경 사항 적용
  //   : 스프레드 연산자를 사용하여 해당 유저의 전체 데이터를 불러와
  //   : changes 객체에 담긴 속성의 값을 새로고침(업데이트)
  //   - 객체의 경우 키의 값이 중복되는 경우 뒤의 속성값으로 업데이트
  users[id] = { ...user, ...changes };
}

updateUser(1, { name: 'TED' });
updateUser(2, { age: 34 });
updateUser(3, { name: 'Micheal', age: 55 }); // User with id 3 not found
console.log(users[1]); // { name: 'TED', age: 30 }
console.log(users[2]); // { name: '챨리', age: 34 }
console.log(users[3]); // { name: 'Micheal', age: 55 }
// 없던 인덱스에 정보를 넣어서 새로운 객체가 생성 되었음
users[4] = { name: '안녕', age: 5 };
console.log(users[4]);

2-2) Readonly: 모든 속성을 읽기 전용 속성을 변경

형태: Readonly<T>

interface Human {
  name: string;
  age: number;
}

let user: Readonly<Human> = {
  // 값의 변경을 허락하지 않는 문법
  name: '테드',
  age: 30,
};

user.name = 'Ted'; // Error - 읽기 전용 속성이므로 'name'에 할당할 수 없습니다.

유니온 타입과 제네릭 함수 작성 예시 문자열 배열과 숫자 배열 중 하나를 입력받아 배열의 첫 번째 요소를 반환하는 제네릭 함수 구현

function getFirstElement<T extends string[] | number[]>(
  array: T,
): string | number {
  if (typeof array[0] === 'string') {
    return array[0] as string;
  }
  return array[0] as number;
}

const firstString = getFirstElement(['apple', 'banana', 'orange']);
const firstNumber = getFirstElement([1, 2, 3]);
console.log(firstString); // apple
console.log(firstNumber); // 1

https://short-echidna-b16.notion.site/c349f83739854f50be314d562be409b2?pvs=4

유니온 타입과 제네릭 | Notion

short-echidna-b16.notion.site

제네릭의 제약 조건

Ted93 — Fri, 5 Jul 2024 19:54:45 +0900

1. 제네릭의 제약 조건

1-1) 제약 조건(Constraints)

타입 매개변수가 특정 조건을 만족해야 한다는 것을 명시하는 방법
제네릭 타입의 사용 범위를 제한, 특정 속성이나 메서드에 접근 가능

1-2) 제네릭 제약조건의 예시

interface Lengthwise {
  // length 속성을 가지는 인터페이스
  length: number;
}

제약 조건 사용을 위해 T라는 제네릭 타입이 Lengthwise 인터페이스를, 확장(상속)해야 함
length 속성을 포함하는 어떠한 객체든지 인자로 전달 가능

function constraints<T extends Lengthwise>(arg: T): T {
  // T는 객체 타입(length 속성을 반드시 가지는)
  console.log(arg.length);
  // arg 매개변수는 반드시 .length 속성이 포함되어 있음
  return arg;
}

arg 매개변수는 반드시 length 속성을 가지기 때문에 자동완성 기능에도 제공이 됨

let variable = constraints({
  length: 10,
  // length 속성을 가진 객체
  // +) 추가로 기타 속성 명시가 가능 >> 확장!
  value: 3,
  addedOption: '안녕하세요',
});

console.log(variable); // { length: 10, value: 3, addedOption: '안녕하세요' }

1-3) 최소한의 속성을 가진 객체 찾기

객체 형태의 타입을 따로 속성만 뽑아 유니온 타입으로 만들어주는 연산자
모든 키의 이름을 유니온 타입으로 반환

type Type = {
  name: string;
  age: number;
};

type Union = keyof Type;
// Union = name | age;

함수 사용 예시

interface Index {
  [key: string]: number;
}

function findMin<T extends Index, K extends keyof T>(array: T[], key: K) {
  // array 배열 내에서 최소 값을 가진 객체를 찾기
  return array.reduce((min, item) => {
    return item[key] < min[key] ? item : min;
  }, array[0]);
}
// 함수 사용 예시
const result = findMin([{ a: 20 }, { b: 15 }, { a: 30 }, { a: 10 }], 'a');
console.log(result); // { a: 10 }

2. 조건부 타입

타입 매개변수에 대한 조건 표현식을 기반으로 타입을 결정하는 방식
if문과 유사한 역할

type Check<T> = T extends string ? 'String' : 'Not a String';

type Type1 = Check<string>; // String;
type Type2 = Check<number>; // Not a String

function checkType<T>(value: T): Check<T> {
  return typeof value === 'string'
    ? ('String' as Check<T>)
    : ('Not a String' as Check<T>);
}

console.log(checkType<string>('안녕하세요')); // String
console.log(checkType<number>(500)); // Not a String

2-1) 타입 단언

타입스크립트에게 개발자가 특정 값의 타입임을 알고 있음을 전달
컴파일러가 타입을 정확하게 추론하지 못하는 경우
개발자가 구체적인 타입을 프로그램에게 전달

someValue를 boolean 값으로 변환하는 경우
해당 값의 길이가 측정되지 않아 undefined로 출력
undefined: 길이 측정은 문자열일 경우에만 사용 가능

let someValue: any = 'this is a string';
let strLength: number = (someValue as string).length;
console.log(strLength); // 16

someValue = true;
strLength = (someValue as string).length;
console.log(strLength); // undefined

2-2) 타입 제한 예시

조건부 타입 명시와 타입 단언을 사용

type IsNumber<T> = T extends number ? number : string;

숫자 타입인 경우에는 그 숫자의 제곱근
숫자가 아닌 경우에는 Not a number 문자열을 반환

function processValue<T>(value: T): IsNumber<T> {
  if (typeof value === 'number') {
    return Math.sqrt(value) as IsNumber<T>;
  }
  return 'Not a Number' as IsNumber<T>;
}

console.log(processValue(9)); // 3
console.log(processValue('hello')); // Not a Number

https://short-echidna-b16.notion.site/f6cfdb9019f44687bb0203cb9bda57ae?pvs=4

제네릭의 제약 조건 | Notion

short-echidna-b16.notion.site

제네릭(Generic)

Ted93 — Thu, 4 Jul 2024 12:05:35 +0900

1. 제네릭 정의

재사용 가능한 컴포넌트(코드 단위)를 만드는데 사용
컴포넌트가 처리할 데이터 타입을 미리 지정하지 않고
해당 컴포넌트를 사용하는 시점에서 원하는 데이터 타입 지정 가능

2. 제네릭의 필요성

코드 중복을 줄임, 재사용 가능한 컴포넌트 생성
다양한 타입을 처리하는 함수나 클래스 생성 가능
타입 안정성 보장
- '컴파일' 시점에 타입을 체크
- '런타임'에서 발생할 수 있는 에러를 방지

컴파일(Compile)

소스코드를 작성하고 편집하는 과정

런타임(Runtime)

컴파일 과정을 마친 프로그램이 사용자에 의해 실행되어 동작되어지는 때

3. 제네릭 기본 문법

사용할 컴포넌트(변수, 함수, 클래스 등)의 이름뒤에 꺽쇠괄호(<>) 안에 타입 변수를 넣는 것
함수나 클래스 등에서 사용할 타입을 명시
임의의 키워드를 사용하여 명시, 일반적으로 대문자 알파벳 하나를 사용 (T: Type)
해당 타입 변수는 컴포넌트 내에서 실제 데이터 타입의 자리를 대신

function generic<T>(arg: T): T {
  // T(Type)는 타입 변수 (단일 타입 변수)
  // : 해당 타입 변수는 입력 인수의 타입을 T로 지정
  // , 함수의 반환 타입을 T로 지정
  return arg;
}

let stringOutput = generic<string>('안녕하세요');
// let stringOutput = generic('안녕하세요'); // <string>은 생략 가능

let stringOutput2 = generic<string>(500); // Error
// 'number' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다.

let numberOutput = generic<number>(500);
// let numberOutput = generic<number>(500); // <number>는 생략 가능

let numberOutput2 = generic<number>('반갑습니다'); // Error
// 'string' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니다.

console.log(stringOutput); // 안녕하세요
console.log(numberOutput); // 500

4. 여러 제네릭 타입 변수 지정

여러 개의 독립적인 타입을 처리해야 할 때 여러 타입 변수를 활용

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

let pairOutput = pair('안녕', 5);
// let pairOutput2 = pair<string, number>(5, '안녕'); // - Error
console.log(pairOutput);

제네릭 타입을 사용했을때, 처음 사진에는 unknown 타입으로

그리고 “” (빈 값)을 넣었을 때는 타입이 string으로

숫자 5를 넣었을 때는 number 타입으로 된다

5. 제네릭을 사용하는 컴포넌트들 예시

5-1) 제네릭 함수

function genericFunc<T>(args: T[]): T[] {
  console.log('배열의 길이:', args.length);
  return args;
}

let resultFunc = genericFunc<boolean>([true, false, false]);
console.log(`함수의 반환값: ${resultFunc}`);
// 배열의 길이: 3
// 함수의 반환값: true,false,false

5-2) 제네릭 인터페이스

타입 매개변수<T>를 가지는 인터페이스

interface IGeneric<T> {
  (arg: T): T; // 객체의 메서드 인터페이스 명시
}

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: IGeneric<number> = identity;
console.log(identity(5)); // 5
console.log(identity('안녕')); // 안녕
console.log(myIdentity(5)); // 5

5-3) 제네릭 클래스

타입 매개변수<T>를 가지는 클래스
다양한 타입의 속성이나 메소드를 지정 가능

class GenericClass<T> {
  value: T;
  add: (x: T, y: T) => T;
  constructor(value: T, addFunction: (x: T, y: T) => T) {
    this.value = value;
    this.add = addFunction;
  }
}

let myGenericNumber = new GenericClass<number>(0, function (x, y) {
  return x + y;
});
let myGenericString = new GenericClass<string>('', function (x, y) {
  return `${x}, ${y}`;
});

console.log(myGenericNumber.add(5, 3)); // 8
console.log(myGenericString.add('테', '드')); // 테, 드

6. 제네릭 예제

문제 1: 제네릭 함수 작성

reverseArray 제네릭 함수 작성

function reverseArray<T>(array: T[]): T[] {
  let reverseArr = array.reverse();
  return reverseArr;
}

let stringArr = reverseArray<string>(['a', 'b', 'c']);
console.log(stringArr); // [ 'c', 'b', 'a' ]

let numberArr = reverseArray<number>([1, 2, 3]);
console.log(numberArr); // [ 3, 2, 1 ]

문제 2: 제네릭 인터페이스 정의

KeyValue라는 제네릭 인터페이스를 정의
인터페이스는 key와 value라는 두 개의 속성을 가지며, 각각의 타입은 제네릭으로 지정

interface KeyValue<K, V> {
  key: K;
  value: V;
}

let keyValue: KeyValue<string, number> = {
  key: '테드',
  value: 5,
};

let anotherKeyValue: KeyValue<boolean, number> = {
  key: true,
  value: 55,
};

문제 3: 제네릭을 사용한 고차함수 구현

mapArray라는 제네릭 고차함수 작성
배열과 배열의 각 요소를 변환하는 콜백함수를 매개변수로 전달
변환된 요소로 구성된 새 배열을 반환

function mapArray<T, U>(array: T[], callback: (item: T) => U): U[] {
  // T타입의 요소를 가진 배열이 map으로 전체 순회
  // 해당 타입에 따라 기능 구현 후 U타입의 배열로 반환
  return array.map(callback);
}

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = mapArray<number, number>(numbers, (x) => x * 2);
console.log(doubledNumbers); // [ 2, 4, 6, 8, 10 ]

let strings = ['a', 'b', 'c'];
let uppercasedStrings = mapArray<string, string>(strings, (x) =>
  x.toUpperCase(),
);
console.log(uppercasedStrings); // [ 'A', 'B', 'C' ]

https://short-echidna-b16.notion.site/Generic-a38258bc662843948f630ae7e9f099be?pvs=4

제네릭(Generic) | Notion

short-echidna-b16.notion.site

팩토리 패턴(Factory Pattern)

Ted93 — Wed, 3 Jul 2024 18:11:02 +0900

객체 지향 프로그래밍에서 자주 사용되는 디자인 패턴 중 하나
객체의 생성을 캡슐화하여 클라이언트 코드가 생성되는 객체의 구체적인 타입에 의존하지 않도록 하는 것
코드의 유연성을 높이고, 변경에 대한 영향을 최소화 가능

1. 팩토리 패턴의 주요 구성 요소

1-1) Product

생성될 객체들의 공통 인터페이스
팩토리는 이 인터페이스를 구현하는 다양한 객체들을 생성 가능

1-2) ConcreteProduct

Product 인터페이스를 구현하는 구체적인 클래스들

1-3) Creator

Product 객체를 생성하는 메서드(factoryMethod)를 선언하는 인터페이스

1-4) ConcreteCreator

Creator 인터페이스를 구현하며, factoryMethod를 오버라이딩하여 ConcreteProduct 인스턴스를 생성

2. 팩토리 패턴의 장점

2-1) 결합도 감소

클라이언트 코드가 구체적인 클래스를 몰라도 객체를 생성 가능, 시스템의 결합도를 낮춤

2-2) 코드 유연성

새로운 ConcreteProduct 클래스를 추가하더라도 기존 코드를 변경하지 않고 확장 가능

2-3) 재사용성 향상

동일한 방법으로 다양한 객체를 재사용 가능

3. TypeScript에서의 팩토리 패턴 구현 예제

interface Component {
  render(): void;
}

// Button 구현
class Button implements Component {
  render(): void {
    console.log('버튼이 렌더링 됩니다');
  }
}

// Checkbox 구현
class Checkbox implements Component {
  render(): void {
    console.log('체크박스가 렌더링됩니다.');
  }
}

// Component Factory
class ComponentFactory {
  static createComponent(type: string): Component {
    switch (type) {
      case 'button':
        return new Button();
      case 'checkbox':
        return new Checkbox();
      default:
        throw new Error('유효하지 않은 컴포넌트 타입입니다');
    }
  }
}

// 클라이언트 코드
const button = ComponentFactory.createComponent('button');
button.render();
const checkbox = ComponentFactory.createComponent('checkbox');
checkbox.render();

4. 팩토리 패턴으로 결제 구현 예제

여러 타입의 결제 방식을 처리할 수 있는 결제 시스템을 설계
다양한 결제 서비스(예: 신용 카드, 페이팔, 은행 이체 등)를 처리 , 클라이언트 코드는 구체적인 결제 방식의 클래스를 몰라도 결제를 진행 가능

요구사항

다양한 결제 방식 지원 신용 카드, 페이팔, 은행 이체 등 다양한 결제 방법을 지원
결제 방식 쉽게 추가 가능 새로운 결제 방식을 추가할 때 기존 코드를 수정하지 않고 확장 가능
결제 방식에 따른 처리 캡슐화 각 결제 방식에 따른 처리 로직은 해당 결제 클래스 내부에서 완결

팩토리 패턴 구성 요소

PaymentMethod (Interface) 모든 결제 방식이 구현해야 하는 인터페이스, 주로 결제를 실행하는 메소드를 포함
ConcretePaymentMethods PaymentMethod 인터페이스를 구현하는 구체적인 결제 방식 클래스
PaymentFactory 결제 방식 객체를 생성하는 팩토리 클래스

구현 코드

결제 방법 인터페이스

interface PaymentMethod {
  pay(amount: number): void;
}

신용 카드 결제 구현

class CreditCard implements PaymentMethod {
  pay(amount: number): void {
    console.log(`Paid ${amount} using credit card`);
  }
}

페이팔 결제 구현

class PayPal implements PaymentMethod {
  pay(amount: number): void {
    console.log(`Paid ${amount} using paypal`);
  }
}

은행 이체 결제 구현

class BankTransfer implements PaymentMethod {
  pay(amount: number): void {
    console.log(`Paid ${amount} using bank transfer`);
  }
}

결제 방법 팩토리

class PaymentFactory {
  static createPaymentMethod(method: string): PaymentMethod {
    switch (method) {
      case 'creditCard':
        return new CreditCard();
      case 'paypal':
        return new PayPal();
      case 'bankTransfer':
        return new BankTransfer();
      default:
        throw new Error('지원하지 않는 결제 방식입니다.');
    }
  }
}

클라이언트 코드

const paymentMethod = PaymentFactory.createPaymentMethod('paypal');
paymentMethod.pay(100); // Paid 100 using paypal

const anotherPaymentMethod = PaymentFactory.createPaymentMethod('creditCard');
anotherPaymentMethod.pay(200); // Paid 200 using credit card

https://short-echidna-b16.notion.site/Factory-Pattern-6078afebf8634075a69ada72674152aa?pvs=4

팩토리 패턴(Factory Pattern) | Notion

short-echidna-b16.notion.site

싱글톤 패턴

Ted93 — Tue, 2 Jul 2024 11:29:41 +0900

특정 클래스의 인스턴스가 프로그램 내에서 오직 하나만 존재하도록 보장하는 디자인 패턴
주로 자원을 공유해야 하는 상황에서 유용
일관된 상태를 유지하고 싶을 때 적합

데이터베이스 연결이나 로그 파일 핸들러와 같이 시스템 전체에서
단 하나만 있어야 하는 리소스를 관리할 때 사용

1. 싱글톤 패턴의 구현 방법

1-1) 생성자를 비공개로 설정

클래스의 외부에서 new 키워드를 사용하여 인스턴스를 생성할 수 없도록 설정

1-2) 클래스 내부에서 인스턴스 생성

클래스 자체가 자신의 유일한 인스턴스를 생성하고 관리

1-3) 전역 접근점 제공

인스턴스에 접근할 수 있는 정적 메소드(보통 getInstance라고 명명)를 제공
필요할 때 인스턴스를 생성하고, 이미 인스턴스가 존재하면 기존 인스턴스를 반환

2. TypeScript에서의 싱글톤 패턴 구현 예제

로거 기능을 싱글톤으로 구현
로거는 애플리케이션의 다양한 부분에서 메시지를 로깅하는 데 사용
Logger 클래스는 자신의 유일한 인스턴스를 관리하며, 이 인스턴스에 대한 전역 접근점을 제공
getInstance 메소드는 인스턴스가 아직 생성되지 않았다면 새로 생성하고, 이미 존재한다면 기존 인스턴스를 반환
Logger 클래스의 모든 사용자가 동일한 인스턴스를 공유

// LogLevel 타입 정의
type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'fatal';

// Logger 클래스 정의
class Logger {
  private static instance: Logger;
  private logLevel: LogLevel = 'info';
  private logs: string[] = [];

  // 외부에서 직접적인 인스턴스 생성을 불가능하게 설정
  private constructor() {}

  public static getInstance(): Logger {
    // Logger.instance는 정적메서드 호출 방식임
    if (!Logger.instance) {
      Logger.instance = new Logger();
    }
    return Logger.instance;
  }

  public setLogLevel(level: LogLevel): void {
    this.logLevel = level;
  }
  public log(message: string, level: LogLevel = 'info'): void {
    const levels: LogLevel[] = ['debug', 'info', 'warn', 'error', 'fatal'];

    // 입력된 로그 레벨이 현재 설정된 로그 레벨 이상일 때만 로그를 기록
    if (levels.indexOf(level) >= levels.indexOf(this.logLevel)) {
      const timestamp = new Date().toISOString();
      const formattedMsg = `[${timestamp}] [${level}]: ${message}`;

      this.logs.push(formattedMsg);
      console.log(formattedMsg);
    }
  }

  public printLogHistory(): void {
    console.log('-----전체 히스토리 출력-----');
    console.log(this.logs.join('\\n'));
  }
}
const logger = Logger.getInstance();
logger.setLogLevel('debug'); // 로그 레벨을 debug로 설정
logger.log('이것은 디버그 메세지입니다.', 'debug');
logger.log('이것은 정보출력 메세지입니다.', 'info');

logger.printLogHistory();

const anotherLogger = Logger.getInstance();
anotherLogger.printLogHistory();

로거(Logger)

소프트웨어의 실행 중에 발생하는 이벤트를 기록하는 도구
개발자나 시스템 관리자가 소프트웨어의 상태를 실시간으로 모니터링하거나, 나중에 문제를 진단할 수 있는 기록을 남기는 것이 가능
주로 디버깅, 오류 추적, 시스템 상태 모니터링, 보안 감사 등 다양한 목적으로 사용

https://short-echidna-b16.notion.site/7be8178ee46d44948abac9b6762c98c9?pvs=4

싱글톤 패턴 | Notion

short-echidna-b16.notion.site

디자인 패턴이란?

Ted93 — Mon, 1 Jul 2024 08:14:51 +0900

소프트웨어 디자인에서 자주 발생하는 문제들을 해결하기 위한 잘 정립된 해결책
패턴들은 개발 과정을 보다 효율적으로 생성하게 함
코드의 재사용성, 유지보수성, 커뮤니케이션의 효율성을 증가

1. 싱글톤 패턴(Singleton Pattern)

목적

클래스의 인스턴스가 하나만 생성
어디서든 그 인스턴스에 접근할 수 있도록 하는 패턴
사용 예: 데이터베이스 연결, 로거 설정 등

class Singleton {
  private static instance: Singleton;

  private constructor() {
    // 생성자는 private으로 선언하여 외부에서 인스턴스를 생성 X
  }

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

2. 팩토리 패턴(Factory Pattern)

목적

객체의 생성 과정을 캡슐화
클라이언트가 구체적인 클래스에 의존하지 않도록 하는 패턴
사용 예: 다양한 타입의 객체를 생성할 때

interface Product {
  operate(): void;
}

class ConcreteProductA implements Product {
  operate() {
    console.log('Product A is operating');
  }
}

class ConcreteProductB implements Product {
  operate() {
    console.log('Product B is operating');
  }
}

class Factory {
  public static createProduct(type: 'A' | 'B'): Product {
    if (type === 'A') {
      return new ConcreteProductA();
    } else {
      return new ConcreteProductB();
    }
  }
}

https://short-echidna-b16.notion.site/0848bbfaafab42d3a8a49b8b65c492e2?pvs=4

디자인 패턴이란? | Notion

short-echidna-b16.notion.site

퀴즈 - 직원 관리 시스템

Ted93 — Sun, 30 Jun 2024 10:35:30 +0900

Employee 기본 클래스 생성

class Employee {
  // 속성: name (문자열)과 id (숫자)
  // 생성자를 사용하여 초기화
  // 메서드: displayInfo() 메서드 - 직원의 정보를 출력
}

정답

class Employee {
  constructor(
    public name: string,
    public id: number,
  ) {}
  displayInfo() {
    console.log(`Name: ${this.name}, Id: ${this.id}`);
  }
}

Manager 클래스 생성

Employee 클래스를 확장

class Manager extends Employee {
  // 추가 속성: subordinates (Employee 배열)
  // 부모 클래스의 생성자를 호출
  // 메서드: addSubordinate(employee: Employee) 메서드 - 하위 직원을 목록에 추가  
  // 메서드: listSubordinates() - 모든 하위 직원의 정보를 출력  
}

정답

class Manager extends Employee {
  private subordinates: Employee[] = [];
  constructor(name: string, id: number) {
    super(name, id);
  }
  addSubordinate(employee: Employee) {
    this.subordinates.push(employee);
  }
  listSubordinates(): void {
    console.log(`Manager: ${this.name}`);
    this.subordinates.forEach((emp) => emp.displayInfo());
  }
}

사용 및 출력

const managerA = new Manager('테드', 1);
const emp1 = new Employee('찰리', 2);
const emp2 = new Employee('마이클', 3);

managerA.addSubordinate(emp1);
managerA.addSubordinate(emp2);
managerA.listSubordinates();
// Manager: 테드
// Name: 찰리, Id: 2
// Name: 브라운, Id: 3

https://short-echidna-b16.notion.site/126f533e69834acb8cc50831e0a10729?pvs=4

퀴즈 - 직원 관리 시스템 | Notion

short-echidna-b16.notion.site

Static 키워드

Ted93 — Sat, 29 Jun 2024 17:30:31 +0900

1. 정적(Static) 메소드와 프로퍼티

1-1) 정의

클래스 인스턴스가 아닌 클래스 자체에 바인딩된 메소드와 프로퍼티
인스턴스 없이도 클래스 이름을 통해 직접 접근하고 호출 가능

1-2) 바인딩(binding)

프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위
주의 사항
- static 멤버(메소드와 속성)는 인스턴스와 독립적이기 때문에
- static 메소드 내에서는 this 키워드를 사용하여 접근 할 수 X
- 인스턴스별로 데이터를 유지할 필요가 없는 공통 기능 및 데이터에 적합

1-3) 사용방법

static 키워드를 사용하여 정의'

class Circle {
  static pi: number = 3.14;

  static calculateArea(radius: number): number {
    // 정적 메서드와 속성 호출 방법
    // - 클래스명.속성
    // - 클래스명.메서드()
    return Circle.pi * radius * radius;
  }
}

console.log(Circle.pi); // 3.14
console.log(Circle.calculateArea(5)); // 78.5
console.log(Circle.calculateArea(10)); // 314

2. 접근자(Getter / Setter)

2-1) 정의

getter: 클래스의 특정 프로퍼티 값을 읽을 때 사용되는 메소드
setter: 클래스의 특정 프로퍼티 값을 설정할 때 사용되는 메소드
getter와 setter가 필요한 이유는 아래 코드로 설명

class Person {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }
}
let person1 = new Person('테드');
// 아래 코드는 name앞에 private을 public으로 수정해야만 사용 가능
// console.log(person1.name); // 테드
// person1.name = '찰리';
// console.log(person1.name); // 찰리

2-2) 사용 방법

get과 set 키워드를 사용하여 정의
속성 값의 유효성 검사, 계산된 프로퍼티 등에 사용
데이터를 보다 안전하게 관리
복잡한 로직을 캡슐화 → 클래스 외부에는 간단한 인터페이스만 제공 가능

class Employee {
  private _fullName: string = '';

  // private 멤버 변수에 접근하여 반환하는 getter
  get getFullName(): string {
    return this._fullName;
  }

  // private 멤버 변수에 접근하여 설정하는 setter
  set setFullName(newName: string) {
    if (newName.length > 0) {
      this._fullName = newName;
    } else {
      console.log('Error: name cannot be empty');
    }
  }
}

// 접근자 메서드는 () 소괄호 없이 사용 가능
let emp1 = new Employee();
emp1.setFullName = 'Ted'; // setter에 대한 사용법
let name = emp1.getFullName; // getter에 대한 사용법
console.log(name); // Ted

https://short-echidna-b16.notion.site/Static-8649eb0a675b40008c48709e89c8d32a?pvs=4

Static 키워드 | Notion

short-echidna-b16.notion.site

추상 클래스와 추상 메서드

Ted93 — Fri, 28 Jun 2024 10:48:23 +0900

1. 추상 클래스와 추상 메서드

1-1) 정의

추상 클래스: 인스턴스화 할 수 없고, 하나 이상의 추상 메서드를 포함할 수 있는 클래스
공통의 기능을 정의, 상속을 통해서 해당 기능을 구현하도록 강제하는 틀을 제공
abstract 키워드를 사용하여 정의

1-2) 추상 메서드

구체적인 구현이 없이 선언만 된 메서드
메서드의 구현이란 로직이 작성되는 부분(중괄호)
파생되는 클래스가 반드시 구현해야 하는 메서드의 틀을 제공
추상 클래스 내에서 abstract 키워드를 사용하여 선언

1-3) 추상 클래스 / 추상 메서드 예제

동물 추상 클래스

abstract class Animal {
  // 추상클래스 내에서는 반드시 한 개 이상의 추상 메서드가 정의되어야 함
  // : 그 외에는 다른 일반 메서드와 일반 멤버 변수 정의도 가능
  // 추상 메서드 정의
  // : 중괄호의 로직 구현부가 존재하지 X
  abstract makeSound(): void;

  move() {
    console.log('moving~~~');
  }
}

추상 클래스를 상속한 Dog 클래스

class Dog extends Animal {} // Error - 내용은 아래 사진

추상 클래스를 상속받은 클래스에서는 반드시 추상 메서드를 구현!!
메서드의 로직 {}중괄호를 작성해야 함!!

class Dog extends Animal {
  makeSound(): void {
    console.log('멍멍');
  }
}

const myDog = new Dog();
myDog.makeSound();
myDog.move();

2. 인터페이스 구현(Implementing Interfaces)

2-1) 정의

메서드와 속성의 시그니처를 정의하는 구조체
클래스가 특정 기능을 구현하도록 강제, 다형성을 지원

2-2) 구현 방법

interface 키워드를 사용하여 정의
implements 키워드를 사용하여 해당 클래스가 정의된 인터페이스를 구현함을 선언

2-3) 인터페이스 예제

인터페이스명도 대괄호 시작
I인터페이스명으로 사용

interface IAnimal {
  name: string;
  makeSound(): void;
}

implements 키워드를 사용하여 Cat 클래스가 정의된 인터페이스를 구현

class Cat implements IAnimal{} // Error - 내용은 아래 사진

'Cat' 클래스가 'IAnimal' 인터페이스를 잘못 구현합니다.
'Cat' 형식에 'IAnimal' 형식의 name, makeSound 속성이 없습니다.

class Cat implements IAnimal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  makeSound(): void {
    console.log('냐옹~~');
  }
}

let myCat = new Cat('야옹이');
myCat.makeSound(); // 냐옹~~

3. 추상클래스와 인터페이스의 차이점

추상클래스는 클래스의 '이다(is - a)'관계를 나타냄
상속 받는 하위 클래스가 부모 클래스의 특정 종류로 간주
EX) '동물' 추상 클래스를 상속받는 '개', '고양이' 클래스

인터페이스는 클래스가 '할 수 있는(has - a)'관계를 나타냄
해당 기능을 할 수 있음에 중점
EX) '비행 가능' 인터페이스를 구현하는 '새'와 '비행기' 클래스

공통점: 확장성과 유지보수성

https://short-echidna-b16.notion.site/88db492529e5495cab988b5239480a9b?pvs=4

추상 클래스와 추상 메서드 | Notion

short-echidna-b16.notion.site

상속(Inheritance)

Ted93 — Thu, 27 Jun 2024 12:24:32 +0900

1. 상속

1-1) 상속의 정의

한 클래스(부모 클래스)의 속성과 메서드를
다른 클래스(자식 클래스)가 받아 사용할 수 있는 기능
코드의 재사용성을 증가, 유지보수성 개선

1-2) 구현 방법

extends(확장) 키워드를 사용하여 상속을 구현
자식 클래스는 부모 클래스의 모든 public과 protected 멤버를 상속받음.

1-3) 상속의 관계

부모 클래스(슈퍼 클래스, 상위 클래스): 기능과 메서드를 제공
자식 클래스(서브 클래스, 하위 클래스): 기능과 메서드를 전달받음

1-4) 상속 예제

동물 클래스를 정의

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m`);
  }
}

Animal 클래스를 상속받는 Dog 클래스 정의

// Dog 클래스 - 자식 클래스
class Dog extends Animal {
  // name: string

  constructor(name: string) {
    // super 메서드
    // 부모 클래스의 생성자를 호출 (반드시!)
    super(name);
  }
  bark() {
    console.log('멍멍!!!');
  }

  // move(distance: number = 0) {
  //   console.log(`${this.name} moved ${distance}m`);
  // }
  // Animal 클래스에서 상속받은 메서드
}

let dog1 = new Dog('푸들');
dog1.move(10); // 푸들 moved 10m
dog1.bark(); // 멍멍!!!
console.log(dog1.name); // 푸들

2. 메서드 오버라이딩(Overriding)

자식 클래스에서 부모 클래스의 메서드를 재정의
기존의 메서드를 자식 클래스에 맞게 변경하여 사용

2-1) 구현 방법

자식 클래스에서 부모 클래스와 동일한 이름의 메서드를 선언하여 오버라이딩
필요에 따라 super 키워드를 사용하여 부모 클래스의 메서드 호출 가능

2-2) 오버라이딩 예제

Animal 부모 클래스를 상속받는 Bird 자식 클래스

class Bird extends Animal {
  constructor(name: string) {
    super(name);
  }
  move(distance: number = 5) {
    console.log('~~~Flying~~~');
    super.move(distance);
  }
}

const bird = new Bird('짹짹이');
bird.move(); // ~~~Flying~~~
             // 짹짹이 moved 5m
						 
const bird2 = new Animal('깍깍이');
bird2.move(); // 깍깍이 moved 0m

상속받은 기능을 해당 (자식)클래스에 맞게 재정의
하나의 기능을 여러 이름이 아닌 하나의 이름으로 묶어서 설정 가능

https://short-echidna-b16.notion.site/Inheritance-9ccd648334474fff9bd5f0f8a40ebf2c?pvs=4

상속(Inheritance) | Notion

short-echidna-b16.notion.site

접근제한자(접근제어자, Access Modifiers)

Ted93 — Wed, 26 Jun 2024 19:55:02 +0900

캡슐화

클래스의 내부 데이터를 외부에서 직접 접근하는 것을 제한, 데이터의 안정성을 보장하는 방식

1. 접근제한자의 정의

클래스의 내부 데이터를 외부에서 직접 접근하는 것을 제한하여
사용자의 코드 흐름에 맞게 데이터를 처리하는 방식

2. 접근제한자의 종류(3가지)

1. public

어디서든 접근 가능(기본값 - 생략 시)
기본적으로 모든 멤버가 가지고 있는 접근 제한자
프로그램의 어느 곳에서나 접근 가능
접근 제한자가 명시되지 않은 멤버는 모두 public으로 설정

2. private

해당 클래스 내부에서만 접근 가능
클래스 외부에서 private한 멤버에 접근할 경우 오류

3. protected

해당 클래스 및 상속받은 하위 클래스에서만 접근 가능
기본적으로 하위 클래스는 상위 클래스의 멤버에 접근 가능하지만
만약 해당 멤버가 private이라면 접근 X

3. 접근제한자 사용 목적

클래스의 내부 구현을 숨기거나, 특정 멤버의 접근을 제한할 때 사용 안정성과 유지보수성을 높이기 위함

// Employee 클래스 정의
class Employee {
  // 멤버 변수 정의(접근 제한자)
  public name: string; // 이름
  private salary: number; // 급여
  protected department: string; // 해당 클래스 | 하위 클래스에서만 접근 가능

  constructor(name: string, salary: number, department: string) {
    this.name = name;
    this.salary = salary;
    this.department = department;
  }

  public displayInfo(): void {
    console.log(
      `이름: ${this.name} / 부서: ${this.department} / 급여: ${this.salary}`,
    );
    console.log(`보너스: ${this.calculateBonus()}`);
  }

  private calculateBonus(): number {
    return this.salary * 0.1;
  }
}

// Employee 클래스 사용 예제(인스턴스화)
let emp1 = new Employee('테드', 50000, 'IT');
console.log(emp1.name); // 테드
console.log(emp1.salary); // Error
// 'salary' 속성은 private이며 'Employee' 클래스 내에서만 액세스할 수 있습니다.
console.log(emp1.department); // Error
// 'department' 속성은 보호된 속성이며 'Employee' 클래스 및 해당 하위 클래스 내에서만 액세스할 수 있습니다.
emp1.displayInfo(); // 이름: 테드 / 부서: IT / 급여: 50000
										// 보너스: 5000
emp1.calculateBonus(); // Error
// 'calculateBonus' 속성은 private이며 'Employee' 클래스 내에서만 액세스할 수 있습니다.

4. 생성자의 경우 멤버 선언 외에도 생성자의 매개변수 앞에 접근 제한자 명시 가능

해당 매개변수는 같은 이름의 속성(멤버 변수)으로 선언,
해당 매개변수의 인자는 암묵적으로 인스턴스에 할당
위의 User 클래스와 동일

class User {
  public id: string;
  private password: string;

  constructor(id: string, password: string) {
    this.id = id;
    this.password = password;
  }
}

class User2 {
  constructor(
    public id: string,
    private password: string,
  ) {}
}

// User와 User2는 완전 동일한 코드

let user1 = new User('qwe123', 'qwert123');
console.log(user1.id); // qwe123
// console.log(user1.password); // Error

let user2 = new User('ted123', 'tedfriend123'); // ted123
console.log(user2.id);
// console.log(user2.password); // Error

5. 연습문제

문제1

Car 클래스 생성
클래스는 model과 year 두 개의 멤버 변수
매개변수로 두 개의 멤버 변수를 받는 생성자 생성
매개변수에 접근 제한자를 사용하여 변수 선언과 생성자의 초기화를 결합하여 표시
getModelAndYear라는 메서드 포함
"This car is a {model} from {year}."를 출력

클래스 생성 후
car1 인스턴스 생성
model은 '아이오닉5' year은 '2024'로 설정
car1 인스턴스의 getModelAndYear 메서드를 호출

정답

// Car 클래스 생성
class Car {
  // public model: string;
  // public year: number;
  // constructor(model: string, year: number) {
  //   this.model = model;
  //   this.year = year;
  // }
  constructor(
    public model: string,
    public year: number,
  ) {}

  getModelAndYear() {
    console.log(`This car is a ${this.model} from ${this.year}.`);
  }
}

// car1 인스턴스 생성
let car1 = new Car('아이오닉5', 2024);
car1.getModelAndYear(); // This car is a 아이오닉5 from 2024.

문제2

은행 계좌 클래스 생성 예제
요구 사항
BankAccount 클래스 완성 후 메서드 적절히 사용해보기

class BankAccount {
  // - accountNumber(계좌 번호), balance(잔액) 속성은 외부에서 직접 접근할 수 없는 속성
  // - 생성자: 계좌 번호와 초기 잔액을 매개변수로 받아 객체를 초기화
  //           초기 잔액은 선택적으로 처리(기본값 0)
  // - 메서드
  // 1. deposit(amount: number): 입금액을 받아 잔액을 증가
  // 2. withdraw(amount: number): 출금액을 받아 잔액을 감소
  //                      잔액보다 많은 금액을 출금할 수 X - 출금액이 잔고를 초과하였습니다
  // 3. getBalance(): 현재 잔액을 반환
  // 4. getAccountNumber(): 계좌번호를 반환
}

// let accountA = new BankAccount('123-456');

정답

class BankAccount {
  constructor(
    private accountNumber: string,
    private balance: number = 0,
  ) {}
  deposit(amount: number) {
    this.balance += amount;
    console.log(`입금액 ${amount}, 현재 잔액 ${this.balance}`);
  }
  withdraw(amount: number) {
    if (this.balance >= amount) {
      this.balance -= amount;
      console.log(`출금액 ${amount}, 현재 잔액 ${this.balance}`);
    } else console.log('출금액이 잔고를 초과하였습니다');
  }
  getBalance() {
    return this.balance;
  }
  getAccountNumber() {
    return this.accountNumber;
  }
}

let accountA = new BankAccount('123-456');
console.log(accountA.getBalance()); // 0
accountA.deposit(30000); // 입금액 30000, 현재 잔액 30000
accountA.deposit(90000); // 입금액 90000, 현재 잔액 120000
accountA.withdraw(100000); // 출금액 100000, 현재 잔액 20000
console.log(accountA.getBalance()); // 20000
accountA.withdraw(50000); // 출금액이 잔고를 초과하였습니다
console.log(accountA.getBalance()); // 20000
console.log(accountA.getAccountNumber()); // 123-456

https://short-echidna-b16.notion.site/Access-Modifiers-b2e0ff3b65c64ca99c24cd7c23d25dba?pvs=4

접근제한자(접근제어자, Access Modifiers) | Notion

short-echidna-b16.notion.site

생성자(Constructor)

Ted93 — Tue, 25 Jun 2024 15:48:17 +0900

1. 생성자

1-1) 생성자 함수의 정의

클래스의 인스턴스가 생성될 때 자동으로 호출되는 특별한 메서드
인스턴스의 초기화(초기 상태 설정)
속성(프로퍼티)의 초기값 설정

1-2) 생성자 함수 사용법

constructor 키워드를 사용하여 클래스 내부에 정의
인자를 받아서 클래스의 프로퍼티를 초기화

1-3) 특징

클래스는 단 하나의 생성자만 가질 수 있다.
반환값X 함수, 자신을 new 키워드와 함께 호출하는 대상(클래스)의 새로운 인스턴스를 암시적으로 반환
필수적인 요소 X, 생성자가 없는 경우 자동으로 빈 생성자를 추가

2. '사람' 클래스 정의

class Person {
  // 멤버 변수 (속성, 프로퍼티)
  name: string;
  age: number;

  // 생성자 함수
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 메서드
  describe(): string {
    return `${this.name} is ${this.age} years old`;
  }
}

클래스를 통해 객체를 생성하는 경우
new 키워드와 클래스의 생성자를 통해 인스턴스화
기본 생략된 생성자가 아닌 사용자 정의 생성자를 작성하는 경우, 해당 생성자의 매개변수에 맞춰 인자를 전달해야 함!

let person1 = new Person('테드', 30);
console.log(person1.name); // 테드
console.log(person1.describe()); // 테드 is 30 years old

let person2 = new Person('테드친구', 25);
console.log(person2.name); // 테드친구
console.log(person2.describe()); // 테드친구 is 25 years old

3. 빈 생성자

클래스 생성자를 통해 클래스의 인스턴스가 생성될 때 실행될 로직을 정의
매개변수와 반환값이 없는 함수와 유사

function example() {
  console.log('함수 실행 시 출력됩니다.');
}
example(); // 함수 실행 시 출력됩니다.

class Dog {
  constructor() {
    console.log('멍멍!!!');
  }
}
let dog1 = new Dog(); // "멍멍!!!""

class Dog2 {
  constructor(barkingSound: string) {
    console.log(barkingSound);
  }
}
let dog2 = new Dog2('멍멍멍!!!'); // 멍멍멍!!!

4. 클래스의 속성의 활용

4-1) 속성 기본값

함수의 기본 인자와 유사한 개념
클래스 속성에도 생성자로 초기화 시키기 전에 기본값 제공이 가능

4-2) 읽기 전용 속성

readonly 키워드를 사용하여 읽기 전용 속성 정의
속성 선언 또는 생성자 외의 장소에서 해당 속성에 값 할당 불가

class Triangle {
	// 4-1) 속성 기본값
  // width: number;
  // constructor() {
  //   this.width = 3;
  // }
  // 위에 코드는 아래 width: number = 3; 과 완전히 일치
  width: number = 3;

// 4-2) 읽기 전용 속성
  readonly height: number;
  constructor(height: number) {
    this.height = height;
  }
}

let triangle = new Triangle(5);
console.log(triangle.height); // 5

triangle.width = 4;
triangle.height = 4; // - Error: 읽기 전용 속성
console.log(triangle); // 4

5. this 키워드

클래스의 현재 인스턴스를 참조하는 키워드
클래스의 멤버변수나 메서드에 접근할 때 사용

class Human {
  // 속성
  age: number;
  intervalId: number;

  constructor() {
    this.age = 0;

    this.intervalId = setInterval(() => {
      this.age++;
      console.log(this.age);
    }, 5000);
  }

  stopAging() {
    clearInterval(this.intervalId);
  }
}

let a = new Human();
console.log(a.age);
setTimeout(() => {
  a.stopAging();
}, 15000);

메서드나 생성자 내에서는 클래스의 멤버에 접근할 때 this를 사용
화살표함수의 경우 해당 함수 내에서 this를 만들어내지 못하기 때문에
해당 함수가 선언된 범위의 this를 찾아서 사용
코드의 논리 이해가 필수적

https://short-echidna-b16.notion.site/Constructor-65725d26697544ca846fb336ebaaee3a?pvs=4

생성자(Constructor) | Notion

short-echidna-b16.notion.site

격파르타 [SQLD] 챌린지 후기

Ted93 — Mon, 24 Jun 2024 16:37:38 +0900

격파르타에 참여한 이유

정보처리기사 필기를 공부하던중 SQL에 대한 부분이 어렵기도 하고 학습을 해야하기도 해서 이왕 자격증 공부하는 김에 SQLD도 같이 준비하면 되겠다 생각했습니다. 유튜브에 무료 좋은 강의들도 많지만, 실제 실습을 해보면서 학습하는 것을 좋아해서 실습도 하는 강의를 찾아보다가 환급 챌린지가 있길래 의지가 약한 저로써는 괜찮은 것 같아서 참여하였습니다.

실제로 SQLD 공부하면서 정보처리기사 필기부분에서 SQL에서도 고득점을 받았고 SQLD 까지 두개의 자격증을 함께 취득 하였습니다~~

격파르타에서 좋았던 점

저는 주로 모든 필기나 학습을 노션을 이용하는데, 노션을 이용한 자료가 우선 제일 좋았습니다.

정리가 너무 깔끔하게 되어 있어서, 챕터별로 학습하기가 유용했습니다.

그리고 매 파트마다 연습문제가 있어서 바로바로 복습하기가 유용했던 점이 참 좋았습니다.

강사님 강의도 자격증에 맞게 불필요한 내용없이 자격증에 필요한 내용 위주로 강의해주신 점이 좋았습니다.

격파르타에서 아쉬웠던 점

기출문제 해설이 너무 예전 버전이고, 기출문제 해설해주시는분이랑 강사님이랑 다른점이 아쉬웠습니다.

기출문제 해설이나 예상문제에 대한 강의부분이 추가되면 더욱 좋을 것 같습니다.

문제가 적고 아쉬워서 개인적으로 노랭이책을 사서 학습했는데 노랭이책도 상당히 도움이 되었습니다

격파르타는 이런 분들께 추천하고 싶어요!

아예 기초가 없는 분, 노베이스이신분이 들으시면 좋을 것 같습니다

저는 자격증 공부에 맞게..? 이론 부분에서 많은 점수를 획득하고

어려운 문제는 많이 틀려서 아래처럼 점수를 받은 것 같습니다.

그리고 디스코드를 이용한 커뮤니티가 있어요. 저는 많이 활용하지는 않았지만,

디스코드에 추천 유튜브 영상이라던지, 다른 사람들이 질문하고 답변한 내용들이 많아서

혼자 공부하시는분들에게 많은 도움이 될 것 같아요.

대부분 SQLD 공부 준비하시면서 궁금하신 내용들이 다 비슷비슷할텐데 그런 내용들이 이미 많이 올라와 있으니

검색에 소비하는 시간을 많이 줄일 수 있을 것 같습니다.

클래스(Class)

Ted93 — Mon, 24 Jun 2024 11:08:12 +0900

1. 클래스(Class)

1-1) 클래스 정의

'객체'를 생성하기 위한 템플릿 또는 설계도
데이터와 해당 데이터를 조작하는 코드를 함께 캡슐화

1-2) 클래스 특징

캡슐화: 데이터(속성)와 데이터를 처리하는 함수(메서드)를 하나로 묶는 것
추상화: 복잡한 세부사항X, 필수적인 부분만을 강조하는 것
상속: 한 클래스의 속성과 메서드를 다른 클래스가 상속받을 수 있는 것
다형성: 하나의 인터페이스를 통해 다른 클래스의 객체(인스턴스)를 다룰 수 있는 것

2. 객체(Object)

2-1) 객체 정의

'클래스'에 의해서 생성된 인스턴스(instance)
실제 프로그램에서 사용되는 데이터와 기능의 집합체

2-2) 객체 특징

상태와 행동: 객체는 속성(상태)과 메서드(행동)를 갖는 것
독립성: 각 객체는 독립적인 성격을 가지며 다른 객체와 상호 작용 가능

3. 클래스 사용법

클래스 '정의' & 객체 '생성'

3-1) 클래스 정의

class 키워드를 사용하여 정의
클래스명은 대문자로 시작 (UpperCamelCase 사용)

3-2) 클래스의 기본 구조

class ClassName {  
    속성(상태): (멤버) 변수, 클래스의 상태 저장
    메서드(행동): 함수, 클래스의 동작을 정의

    --- 메서드 종류 ---
    - 인스턴스 메서드
    : 일반적인 메서드, 클래스의 인스턴스를 통해 호출, 해당 객체의 속성에 접근 가능
    - 정적 메서드
    : 클래스 자체에 속하는 메서드, 인스턴스 없이 클래스명을 사용하여 호출

    --- 인스턴스(instance) ---
    : 클래스를 통해 생성된 객체
    : 실제로 생성된 객체이자 '컴퓨터 메모리에 할당된 객체'
}

4. 객체 VS 클래스 VS 인스턴스

4-1) 객체

서로 많은 데이터를 하나로 묶어서 표현한 것
현실 세계의 사물이나 개념을 프로그램 내에서 표현한 것
EX) 웹 페이지에서 작성할 '게시글'
- 게시글 번호, 작성자, 제목, 내용, 작성일자, 수정일자,,, 등 데이터(속성)
- 위 데이터(속성)를 처리하는 기능(게시글 생성, 수정 등등) 기능(메서드, 행동)

4-2) 클래스

객체를 만드는 도구
클래스를 정의하면 해당 클래스에 속한 객체들이 가져야 할 속성과 메서드를 명시
붕어빵(객체) & 붕어빵 틀(클래스) 같은 클래스로 만든 객체라도 각각의 객체는 서로 다른 값을 가짐

4-3) 인스턴스

클래스에 의해 생성되어 '메모리에 할당'된 객체
클래스로부터 객체를 생성하는 과정을 '인스턴스화'라고 부름
붕어빵틀 클래스로 만든 붕어빵은 객체(object)
붕어빵은 붕어빵 틀로 만든 인스턴스(instance)
객체 == 인스턴스

5. 클래스 '정의' / 객체 '생성' 예제

'책' 클래스
! 느낌표 연산자는, 컴파일러에게 무조건 값이 있을것이라고 알려줌

class Book {
  // --- 속성 ---
  // : 멤버 변수로 정의
  // : 클래스에 속하는 변수
  title!: string;
  author! : string;
  
  // --- 메서드 ---
  // : 클래스 내부에서 정의된 함수
  // : 객체의 행동을 나타냄
  // : 클래스의 인스턴스를 통해 호출

  // 클래스의 메서드(함수)는 선언적 함수 사용 X
  // 함수명으로 바로 구현
  describe() : string{
    return `${this.title} is written by ${this.author}`
  }
}

6. 객체 생성

클래스의 인스턴스는 new 키워드를 사용하여 생성
new 클래스명();
()는 클래스의 생성자 함수를 호출
기본적으로 클래스에는 반드시 하나 이상의 생성자가 존재
명시하지 않을 경우 매개변수가 없는 빈 생성자가 생략
new 키워드를 사용하여 인스턴스를 생성 생성된 인스턴스를 변수에 할당하여 사용

let myBook1 = new Book();
let myBook2 = new Book();

생성된 인스턴스로 Book 클래스에 정의된 멤버변수와 메서드에 접근 . 연산자를 사용하여 접근

console.log(myBook1.title);
console.log(myBook1.describe());
console.log(myBook2.describe());

클래스를 통해 인스턴스 생성 시
생성자를 통해 클래스의 멤버 변수를 초기화
해당 멤버 변수를 초기화 하지 않은 경우 undefined로 인식
다음 글에서 생성자에 대해 학습

https://short-echidna-b16.notion.site/Class-1d7627c57835472c9b6b7cadcd175eb3?pvs=4

클래스(Class) | Notion

short-echidna-b16.notion.site

객체 지향 프로그래밍(Object Oriented Programming, OOP)

Ted93 — Sun, 23 Jun 2024 19:29:07 +0900

프로그램을 객체들의 집합으로 보는 패러다임(구조)

각 객체들은 서로 메시지를 전달하며 상호 작용

1. 객체

상태와 행동을 가지는 모든 것
상태는 속성(attribute), 행동은 메서드(method)로 표현

2. '객체 지향 프로그래밍'의 주요 개념

2-1) 클래스(Class)와 객체(Object)

클래스

공통적 성질을 가진 대상들을 정의한 것
데이터(속성)와 메서드(행동, 동작)을 포함
ex) (요리) 레시피 필요한 재료(데이터, 속성)와 조리방법(메서드, 동작) 포함

객체

클래스에 의해서(정의된 대로) 생성된 실체(데이터)
클래스에 의해 생성되어 클래스에서 정의한 행동을 수행 가능
ex) 요리된 팬케이크 레시피를 바탕으로 실제로 완성된 팬케이크, 실제로 존재

2-2) 캡슐화

객체의 속성과 행동(메서드)을 하나로 묶는 것
외부에서 직접 접근 X, 대신 메서드(행동)를 통해서만 접근 가능

2-3) 상속

하나의 클래스가 다른 클래스의 특성과 기능을 이어받는 것
코드의 재사용성을 높이고, 중복을 줄이는 것이 가능

2-4) 다형성

하나의 인터페이스나 클래스가 여러 형태로 동작하는 것
메서드 오버로딩과 오버라이딩을 통해 실현

2-5) 추상화

복잡한 시스템을 단순화시키는 프로세스
사용자가 세부 구현 내용을 몰라도 시스템을 쉽게 사용 가능하도록 설계

3. 객체 지향 프로그래밍의 장점

3-1) 재사용성

클래스를 정의하면 그 클래스의 객체(인스턴스)를 여러 개 생성 가능
코드의 재사용성이 증가, 개발 시간과 비용 단축

3-2) 유지보수성

클래스는 코드를 논리적인 단위로 분할
가독성을 향상, 유지보수 용이

3-3) 신뢰성

캡슐화, 상속, 다형성 등의 객제 지향 원칙은 개발자가 신뢰성 높은 코드를 작성하는 데 도움

3-4) 확장성

상속을 이용하면 기존 클래스를 확장하여 새로운 기능을 쉽게 추가 가능

https://short-echidna-b16.notion.site/Object-Oriented-Programming-OOP-ebf516447e4945b6ac7e612105e29172?pvs=4

객체 지향 프로그래밍(Object Oriented Programming, OOP) | Notion

short-echidna-b16.notion.site

퀴즈 - 타입스크립트로 TODO 리스트 구현

Ted93 — Sun, 23 Jun 2024 11:22:52 +0900

요구 사항

Todo 항목의 인터페이스 정의(ITodoItem)
Todo 항목은 id(number), task(string), completed(boolean)
Todo 리스트를 관리할 수 있는 함수 구현
1. addTodo: 새로운 Todo 항목을 추가
2. completeTodo: Todo 항목의 completed 상태를 true로 변경
3. deleteTodo: Todo 항목을 삭제 각 함수는 Todo 항목 배열을 입력받고, 변경된 배열을 반환
4. editTodo: Todo 항목의 task를 편집 - 전체 배열 / 수정하고자하는 요소의 id / 새롭게 작성될 task 내용
5. clearCompleted: 완료된 모든 Todo 항목을 삭제 - 전체 배열
6. getAllTodos: 모든 Todo 항목을 조회 - 전체 배열
7. filterTodos: 특정 상태의 Todo 항목을 필터링 - 전체 배열 / 완료 상태(true/false)
8. toggleTodo: Todo 항목의 completed 상태를 토글 - 전체 배열 / 토글할 항목의 id

정답 - 이것만이 정답이 아닙니다~ 다양한 방법으로 구현이 가능합니다

interface ITodoItem {
  id: number;
  task: string;
  completed: boolean;
}
let todos: ITodoItem[] = [];
function addTodo(task: string): ITodoItem[] {
  const newTodo: ITodoItem = {
    id: Math.max(0, ...todos.map((t) => t.id)) + 1,
    // ['a', 'b', 'c']
    // >> [1, 2, 3]
    task: task,
    completed: false,
  };
  todos.push(newTodo);
  return todos;
}

function completedTodo(id: number): ITodoItem[] {
  return (todos = todos.map((todo) =>
    todo.id === id ? { ...todo, completed: true } : todo,
  ));
}

function deleteTodo(id: number): ITodoItem[] {
  return (todos = todos.filter((todo) => todo.id !== id));
}

function editTodo(id: number, task: string): ITodoItem[] {
  return (todos = todos.map((todo) =>
    todo.id === id ? { ...todo, task: task } : todo,
  ));
}

function clearCompleted(completed: boolean): ITodoItem[] {
  return (todos = todos.filter((todo) => todo.completed === false));
}

function getAllTodos(): void {
  console.log(todos);
}

function filterTodos(completed: boolean): void {
  console.log(todos.filter((todo) => todo.completed === completed));
}

function toggleTodo(id: number): ITodoItem[] {
  return (todos = todos.map((todo) =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo,
  ));
}

addTodo('타입스크립트 복습하기');
addTodo('자바스크립트 복습하기');
addTodo('HTML/CSS 복습하기');
getAllTodos(); // 호출
completedTodo(1);
completedTodo(2);
getAllTodos(); // 호출
deleteTodo(2);
getAllTodos(); // 호출
filterTodos(true);
filterTodos(false);
getAllTodos(); // 호출
toggleTodo(1);
getAllTodos(); // 호출
toggleTodo(1);
getAllTodos(); // 호출

https://short-echidna-b16.notion.site/TODO-c074fee98d5843d6881d6b8b5cf8e783?pvs=4

퀴즈 - 타입스크립트로 TODO 리스트 구현 | Notion

요구 사항

short-echidna-b16.notion.site

타입 가드

Ted93 — Sat, 22 Jun 2024 23:55:15 +0900

1. 타입 가드의 정의 및 사용법

특정 범위 내에서 변수의 타입을 보다 구체적인 타입으로 좁히기 위해 사용하는 식(expression)
컴파일러는 해당 범위 내에서 변수가 가질 수 있는 타입을 더 명확하게 인식
타입 관련 에러를 예방
타입에 특화된 속성이나 메소드를 안전하게 사용 가능

function isNumber(x: any): x is number {
  return typeof x === 'number';
}
function double(x: any) {
  if (isNumber(x)) {
    console.log(x * 2);
  } else {
    console.log('Not a Number');
  }
}

double(5); // 10
double('5'); // Not a Number

2. is 키워드와 타입 가드 함수 작성 방법

is 키워드를 사용하여 타입 가드 함수를 정의 가능 특정 타입이 맞는지를 검사하고, 그 결과를 불리언(boolean) 값으로 반환
is 키워드를 사용 타입스크립트 컴파일러는 이 함수가 참(true)을 반환할 경우 해당 변수를 특정 타입으로 간주

// Bird 인터페이스 정의
interface Bird {
  fly: () => void;
  layEggs: () => void;
}

// Fish 인터페이스 정의
interface Fish {
  swim: () => void;
  layEggs: () => void;
}

// 타입 가드 함수 정의: 입력된 pet이 Fish 타입인지 확인
function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

// Fish 타입의 객체 생성
const pet1: Fish = {
  swim: () => console.log('물고기가 헤엄칩니다.'),
  layEggs: () => console.log('물고기가 알을 낳습니다.'),
};

// Bird 타입의 객체 생성
const pet2: Bird = {
  fly: () => console.log('새가 하늘을 날고 있습니다.'),
  layEggs: () => console.log('새가 알을 낳습니다.'),
};

// 타입에 따라 적절한 메서드를 호출하는 함수
function checkPet(pet: Fish | Bird) {
  if (isFish(pet)) {
    pet.swim();
  } else {
    pet.fly();
  }
}

// checkPet 함수를 사용하여 pet1과 pet2에 대해 메서드 호출
checkPet(pet1); // 물고기가 헤엄칩니다.
checkPet(pet2); // 새가 하늘을 날고 있습니다.

https://short-echidna-b16.notion.site/71bac5fffcd9474bafbe155fa1ebcd62?pvs=4

타입 가드 | Notion

short-echidna-b16.notion.site

as 키워드 (assertion)

Ted93 — Sat, 22 Jun 2024 19:09:08 +0900

1. 타입 단언의 개념

개발자가 타입스크립트 컴파일러보다 해당 값의 타입을 더 잘 알고 있음을 명시적으로 선언하는 방법
컴파일러에게 "이 변수의 타입을 내가 지정한 타입으로 간주해라"라고 지시
타입 체크 과정에서 강제로 타입을 지정하는 것이므로 주의해서 사용

2. as 키워드를 사용하여 타입 단언하기

주로 as 키워드를 사용하여 타입 단언
JSX와 함께 사용될 때 충돌을 피하기 위해 추천되는 방식
사용 예제

let someValue: any = 'this is a string';
someValue = false;
// ? someValue를 string으로 단언
let length: number = (someValue as string).length;

3. 실제 프로젝트에서의 타입 단언 사용

HTML 코드

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="myButton">클릭해주세요!</button>
  <script src="main.js"></script>
</body>

</html>

main.ts 파일이란 파일명을 사용한다면
tsc main.ts를 이용하여 main.js 파일로 바꿔줘야
HTML에서 script 태그로 인식할 수 있음

3-1) DOM API 사용 시 타입 단언을 활용하여 HTMLElement 조작

예제: HTMLButtonElement로 단언하기

// 버튼 요소 가져오기
const button = document.getElementById('myButton');
// button이 null이 아니라고 가정하고 HTMLButtonElement로 단언
if (button) {
  (button as HTMLButtonElement).disabled = true;
}

+) HTML 요소의 타입

HTMLElement 타입

각각의 HTML 요소 타입 정의
HTMLInputElement
HTMLSelectElement
HTMLFormElement
HTMLUlElement ... 등이 있다

3-2) 주의사항

타입 단언은 컴파일러를 속이는 행위일 수 있으므로, 실제 타입과 단언한 타입이 일치하지 않는 경우 런타임 오류가 발생 가능
타입 단언을 사용할 때는 해당 요소의 실제 타입을 확실히 알고 사용 권장

3-3) 서버로부터 받아온 데이터에 대한 명시

JSON을 파싱하고, 결과를 User 타입으로 단언

// JSON 문자열
  const jsonString = '{"name" : "테드", "age" : 30}';
  interface IUser {
    name: string;
    age: number;
  }
  // JSON을 파싱하고, 결과를 User 타입으로 단언
  const userData = JSON.parse(jsonString) as IUser;
  console.log(userData.name);
  console.log(userData.age);

3-4) 이벤트 객체에 대한 타입 단언

이벤트 핸들러 내에서 이벤트 객체의 타입을 단언하여 추가적인 속성에 접근 가능

 document.getElementById('myButton2')!.addEventListener('click', (event) => {
    // MouseEvent
    // KeyboardEvent
    // FocusEvent
    const mouseEvent = event as MouseEvent;
    console.log(mouseEvent.clientX, mouseEvent.clientY);
  });

"non-null assertion operator" (null이 아님을 단언하는 연산자 - “ ! ” 느낌표 기호를 사용)
표현식의 결과값이 null 또는 undefined가 아님을 컴파일러에게 알려주는 역할
타입스크립트가 기본적으로 엄격한 null 검사를 수행하기 때문에, null 가능성을 명시적으로 제거해야 할 때 유용

https://short-echidna-b16.notion.site/as-assertion-19d027bca396475f8962f6f513e1e64d?pvs=4

as 키워드 (assertion) | Notion

short-echidna-b16.notion.site

인터페이스 (interface)

Ted93 — Fri, 21 Jun 2024 20:46:11 +0900

1. 인터페이스 정의

객체 구조를 정의하는 타입스크립트의 기능 / 함수 타입 정의 시에도 사용
객체가 어떤 프로퍼티와 메서드를 가져야 하는지 명시 컴파일 시간에 타입 체킹을 위해 사용되는 개념
코드의 가독성과 유지 보수성을 향상
다양한 구현체에 동일한 인터페이스를 적용하여 일관성과 재사용성을 제공

1-1) 그 동안 써왔던 타입 속성 예시

type UserType = {
  name: string;
  age: number;
};

type AdminUserType = UserType & { admin: boolean };
type manyType = number | string | boolean;

1-2) 인터페이스 명시

interface 키워드를 사용하여 명시
인터페이스명은 대문자로 시작
type 속성의 선택적 프로퍼티(옵셔널)와 읽기 전용 프로퍼티 지정 가능

interface IUser {
  // 객체의 속성
  name?: string;
  readonly age: number;
  // 객체의 메서드
  greet(): void;
}
let employee: IUser = {
  name: '테드',
  age: 30,
  greet() {
    console.log('Hello');
  },
};

2. 인터페이스의 역할

타입 체킹: 개발자가 의도한 대로 코드 작동 가능
코드 가독성 향상
코드 재사용 촉진
확장 가능성 기본 인터페이스를 확장(상속)하여 멤버를 추가하거나 재정의 가능

3. 클래스에서 인터페이스 구현

클래스는 implements 키워드를 사용하여 인터페이스를 구현

interface IPerson {
  name: string;
  greet(): void;
}

// Student 클래스 사용 예시
class Student implements IPerson {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const student = new Student('테드');
student.greet(); // Hello, my name is 테드

4. 확장된 인터페이스

extends 키워드를 사용하여 확장
도형을 정의하는 인터페이스

interface Shape {
  color: string;
  lineWidth: number;
}

사각형을 정의하는 인터페이스 도형의 인터페이스를 상속받음(Shape이 가진 모든 정의를 가짐)

interface Square extends Shape {
  // color: string;
  // lineWidth: number;
  sideLength: number;
}

공통된 속성을 가진 인터페이스를 여러 번 정의하지 않아도 되기 때문에 코드 중복을 줄임

5. 인터페이스(interface) VS 타입 별칭(type)

5-1) 인터페이스

확장 가능성 (Extendability)

여러 다른 인터페이스와 클래스에서 확장 가능
객체 지향 프로그래밍의 상속 개념과 유사

+) 타입 별칭은 '&'연산자를 사용하여 확장 가능

병합 선언 (Declaration Merging)

동일한 이름을 가진 인터페이스가 여러 번 선언되면 TypeScript는 이를 하나의 인터페이스로 병합
타입 별칭은 불가능한 기능

interface Shape {
  color: string;
  lineWidth: number;
}
interface Shape {
  name: string;
}

위에 코드는 아래 코드로 병합된다

interface Shape {
  color: string;
  lineWidth: number;
  name: string;
}

구조적 타이핑 (Structural Typing)

TypeScript는 구조적 타이핑을 사용, 인터페이스는 해당 구조를 만족하는 모든 객체를 타입으로 인정

5-2) 타입 별칭

유연성 (Flexibility)

타입 별칭은 객체 타입뿐만 아니라 원시 타입, 유니온 타입, 튜플 등을 포함한 모든 타입을 별칭으로 지정 가능

+) 인터페이스는 객체의 구조만 정의할 수 있기 때문에 원시 타입이나 유니온 타입, 튜플 타입 등을 직접적으로 표현 X

인터페이스는 객체 구조를 정의하는 데 사용됨
원시 타입이나 유니온 타입, 튜플 타입은 인터페이스로 정의할 수 없음
다음과 같은 코드는 불가능

interface Id = number | string; // Error

단일 선언 (Single Declaration)

타입 별칭은 단일 선언만 가능, 동일한 이름을 가진 타입을 다시 선언할 수 X
이름 충돌을 방지

리터럴 타입 (Literal Types)

리터럴 타입과 결합하여 특정 값 집합을 타입으로 정의 가능

type Status = 'success' | 'error' | 'loading';
function printStatus(status: Status): void {
  console.log(`Status is ${status}`);
}
printStatus('success'); // Status is success
printStatus('pending'); // Error

인터페이스의 한계 예시 - 리터럴 타입을 정의할 수 없음

interface IStatus ='success' | 'error' | 'loading';//Error

6. 인터페이스 예시: 확장 가능한 사용자 정보 관리 시스템

interface User {
  id: number;
  name: string;
}

interface Admin extends User {
  permissions: string[]; // 수정 허가, 삭제 허가 등등
}
interface Guest extends User {
  visitDate: Date;
}

const admin1: Admin = {
  id: 1,
  name: '테드',
  permissions: ['update', 'delete'],
};
const guest1: Guest = {
  id: 2,
  name: '테드친구',
  visitDate: new Date(),
};

7. 타입 별칭 예시: 복합 타입을 사용하는 API 응답 처리

type ApiResponse = SuccessResponse | ErrorResponse;
type SuccessResponse = {
  status: 'success';
  data: any;
};
type ErrorResponse = {
  status: 'error';
  error: string;
};

const response: ApiResponse = {
  status: 'success',
  data: {
    message: '성공적으로 작동되었습니다',
  },
};

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('Data:', response.data);
  } else {
    console.log('Error:', response.error);
  }
}

handleResponse(response);
// Data: { message: '성공적으로 작동되었습니다' }

https://short-echidna-b16.notion.site/interface-6268270a598e4e39ac78880957dd5b45?pvs=4

인터페이스 (interface) | Notion

short-echidna-b16.notion.site

API 응답 처리 함수 구현 with TypeScript

Ted93 — Thu, 20 Jun 2024 12:35:05 +0900

1. 상태 및 데이터 타입 정의

사용자 정보를 처리하는 API 응답 처리
사용자 정보를 나타내는 타입과 API 응답 타입을 정의

type User = {
  id: number;
  name: string;
  email: string;
};

type ApiResponse = {
  status: 'loading' | 'success' | 'error';
  data?: User;
  message?: string; // 성공 또는 에러 메시지 출력
};

2. API 응답 처리 함수 구현

API 응답에 따라 다른 작업을 수행하는 함수를 구현
ApiResponse 타입의 객체를 매개변수로 받아 그 상태에 따라 적절한 로그를 출력하고, 필요한 작업을 수행

function processApiResponse(response: ApiResponse) {
  switch (response.status) {
    case 'loading':
      console.log('데이터가 현재 로딩중입니다.');
      break;
    case 'success':
      if (response.data) {
        console.log('데이터가 성공적으로 전달되었습니다.', response.data);
        displayUserData(response.data);
      } else {
        console.log('데이터 전달은 성공했지만 데이터를 찾을 수 없습니다');
      }
      break;
    case 'error':
      console.log('에러가 발생하였습니다.');
      break;
  }
}

function displayUserData(user: User) {
  console.log(`User ID : ${user.id}`);
  console.log(`User NAME : ${user.name}`);
  console.log(`User EMAIL : ${user.email}`);
}

3. 함수 사용 예

API에서 사용자 데이터를 요청하고 그 응답을 processApiResponse 함수를 통해 처리
데이터 요청을 시뮬레이션하는 예제

function fetchDataFromAPI(): ApiResponse {
  return {
    status: 'success',
    data: {
      id: 1,
      name: '테드',
      email: 'ted@ted.com',
    },
    message: '데이터가 성공적으로 전달되었습니다.',
  };
}

API 응답 처리

const response = fetchDataFromAPI();
processApiResponse(response);

https://short-echidna-b16.notion.site/API-with-TypeScript-adce5a084e354d52a7bbe18471374cc4?pvs=4

API 응답 처리 함수 구현 with TypeScript | Notion

1. 상태 및 데이터 타입 정의

short-echidna-b16.notion.site

타입스크립트 함수

Ted93 — Wed, 19 Jun 2024 15:25:36 +0900

1. 함수의 선언과 호출

매개변수와 반환 값에 타입 지정 가능
기본 함수 선언

function greet(name: string): string {
  return `Hello, ${name}`;
}

화살표 함수: 타입 속성으로 명시하여 첨부

type ArrowGreetType = (name: string) => string;
const arrowGreet: ArrowGreetType = (name) => `Hello ${name}`;
console.log(arrowGreet('테드'));
console.log(arrowGreet(1)); // - Error
// 'number' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다.

2. 선택적 매개변수와 기본 매개변수

선택적 매개변수
- 함수 호출 시 생략 가능, 매개변수를 선택적으로 허용
- 변수명 뒤에 ? 작성
기본 매개변수
- 매개변수에 기본값을 할당
- 선택적 매개변수로 매개변수가 전달되지 않은 경우 해당 기본값을 할당
- 매개변수명 = '기본값'

function select(name?: string, greeting: string = 'hi') {
  if (name) {
    console.log(`${greeting}, ${name}`);
  } else {
    console.log(`${greeting}, guest`);
  }
}

// name 생략, greeting 기본값 설정
select(); // hi, guest

// 인자를 1개 전달하는 경우: name의 값으로 지정
select('hello'); // hi, hello
select('테드'); // hi, 테드

// name은 '테드', greeting은 'hello'로 지정
select('테드', 'hello'); // hello, 테드

2-1) 선택적 매개변수와 기본 매개변수의 차이

두가지 모두 함수 호출 시 생략 가능
선택적 매개변수는 생략된 경우: undefined로 처리
기본 매개변수는 생략된 경우: 지정된 기본 값을 사용

2-2) 주의사항

선택적 매개변수는 반드시 필수 매개변수 뒤에 작성
기본 매개변수는 필수 매개변수와 선택적 매개변수 양쪽에 작성 가능
기본 매개변수가 필수 매개변수 앞에 작성된 경우 - 기본 매개변수를 생략하려면 반드시 undefined를 전달

  select(undefined, '안녕'); // 안녕, guest

3. Rest 매개변수

함수에 여러 개의 매개변수를 그룹화하여 배열로 전달하는 기능
함수에 가변적인 수의 인자를 안전하고 효율적으로 처리하도록 하는 기능
...연산자를 매개변수 앞에 사용하여 정의

function sum(...numbers: number[]) {
  return numbers.reduce((a, b) => a + b);
}
const r1 = sum(1, 2, 3, 4, 5);
console.log(r1); // 15
const r2 = sum(11, 22, 33, 44, 55);
console.log(r2); // 165
const r3 = sum(10, 20, 30);
console.log(r3); // 60

첫 번째 인자는 name의 변수에 두 번째 인자부터는 names 배열에 할당

function greetEveryone(name: string, age: number, ...names: string[]) {
  return names.map((name) => `Hello ${name}`).join(', ');
}
console.log(greetEveryone('테드', 30, 'a', 'b', 'c', '안녕', '테드친구'));
// Hello a, Hello b, Hello c, Hello 안녕, Hello 테드친구

Rest 매개변수 주의사항
- 항상 마지막에 위치
- 타입 명시를 주의

4. 함수의 '오버로딩'

같은 이름의 함수에 대해 여러 매개변수의 타입과 반환 타입을 정의하는 기능

특징

함수는 '하나 이상의 타입 시그니처'를 가질 수 있다.
function 함수명()
함수는 '단 하나의 구현'을 가질 수 있다.
{}

기본 문법

함수 선언부는 여러 개가 될 수 있지만, 구현은 하나만 있어야 한다.
함수의 선언부: 중괄호 이전의 함수명, 매개변수 지정
함수의 구현부: 중괄호와 중괄호 내의 코드

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  } else if (typeof a === 'string' && typeof b === 'string') {
    return a.concat(b);
  }
  throw new Error('Invalid arguments');
}
console.log(add(1, 2)); // 3
console.log(add('테', '드')); // 테드

함수의 오버로딩의 사용

함수에 대한 다양한 타입의 매개변수를 제공할 수 있도록 지정
+ 타입 안정성 유지

https://short-echidna-b16.notion.site/1aa57d4189d644d2b24c818f4db5c3d3?pvs=4

타입스크립트 함수 | Notion

1. 함수의 선언과 호출

short-echidna-b16.notion.site

객체 타입 - 덕 타이핑(duck typing)

Ted93 — Tue, 18 Jun 2024 19:25:00 +0900

1. 객체 '리터럴’

실제 객체 데이터 정의
구분자로 쉼표(,)만 사용 가능
객체 이름은 소문자로 시작

객체 '리터럴'은 객체를 정의하고 각 속성에 값을 할당

type UserType = {
  name: '테드';
  height: number;
};

const user: UserType = {
  name: '테드',
  height: 177,
};

console.log(user.name);
user.name = '테드친구'; // Error - '"테드친구"' 형식은 '"테드"' 형식에 할당할 수 없습니다.

2. 구조적 타이핑

객체의 타입을 그 구조나 멤버에 의해서 결정하는 방식
객체의 형태가 같다면, 같은 타입으로 간주

덕 타이핑(duck typing)

객체의 실제 타입보다는 객체가 가진 속성과 메서드가 어떤 타입에 맞느냐가 중요
"만약 어떤 것이 오리처럼 걷고, 오리처럼 꽥꽥거린다면, 그것은 오리일 것이다" 라는 철학에서 이름이 유래

type Person = {
  name: string;
  age: number;
};

function greet(person: Person): void {
  console.log(`Name: ${person.name}, / Age: ${person.age}`);
}

Person 타입이 명시적으로 구현되지 않은 객체 생성

const p1 = {
  name: '테드',
  age: 50,
};
const p2 = {
  name: '테드친구',
  age: 100,
};
const p3 = {
  name: '테드친구2',
  age: 150,
};

greet 함수 호출 : 인자로 Person 타입의 데이터가 전달
Person과 구조가 같기 때문에 Person으로 취급

greet(p1);

구조적 타이핑에 의해 Person으로 취급: hobby 속성을 무시한 채로 Person으로 인식

greet(p2);

Person 타입 속성의 구조와 일치하지 않음(age 속성 누락)

greet(p3); // Error - 에러 내용은 아래 사진 참고

3. 중첩된 객체 타입

객체 내부에 또 다른 객체를 포함하는 형태
복잡한 데이터를 조직화하고 관리하기 용이
사용자의 프로필과 주소 정보를 포함하는 중첩된 객체 타입 정의

type Address = {
  street: string;
  city: string;
  zipCode: string;
};

type UserProfile = {
  username: string;
  email: string;
  address: Address;
};

let userA: UserProfile = {
  username: '테드',
  email: '테드@테드.com',
  address: {
    street: '123 St',
    city: 'Busan',
    zipCode: '12345',
  },
};

console.log(userA.username);
console.log(userA.address.city);

중첩된 객체 속성을 옵셔널 하는 경우

type UserProfile = {
  username: string;
  email: string;
  address?: Address; // address 뒤에 ? 물음표 연산자를 사용하면
};

해당 객체를 생략하는 경우를 대비하여 아래 사진처럼 오류가 발생

오류를 방지하기 위해서 조건문 사용

function isAddress(user: UserProfile) {
  if (userA.address) {
    console.log(userA.address.city);
  }
}

isAddress(userA);

4. 인덱스 서명

객체의 모든 속성에 대해 타입을 정의하지 않고
키와 값의 타입만을 정의하여 객체의 구조를 유연하게 지정하는 방법
객체의 속성에 동적으로 접근할 수 있는 기능

장점

유연성: 정해진 속성 이름 없이 다양한 속성을 객체에 추가 가능
동적 데이터 처리: 런타임에 키와 값을 결정 가능

type UserRecord = {
  // name: string; - 일반적인 객체 속성 타입 명시
  // [propertyName: indexType]: valueType;
  // [key: string]: type,
  [key: string]: string | boolean;
};

let user1: UserRecord = {
  name: '테드',
  // UserRecord 타입은 속성명이 문자열 속성값도
  // , 반드시 문자열인 다양한 속성을 지정 가능
  age: '20',
  isStudent: false,
  // height: 177, // Error - 'number' 형식은 'string' 형식에 할당할 수 없습니다.
};

user1.email = 'qwe123';
console.log(user1); // { name: '테드', age: '20', isStudent: false, email: 'qwe123' }

https://short-echidna-b16.notion.site/cd79a9aeeca847e3824dd8aec4c84fce?pvs=4

객체 타입 | Notion

1. 객체 '리터럴’

short-echidna-b16.notion.site

리터럴 타입 (Literal)

Ted93 — Mon, 17 Jun 2024 18:51:02 +0900

1. 리터럴 타입의 정의

특정 값만을 가질 수 있는 타입을 정의할 때 사용 특정
문자열, 숫자 또는 불리언 값을 정확히 지정하는 타입
특정 값으로 제한된 타입
해당 값만을 가지는 상수 또는 해당 값을 타입으로 지정한 변수
다른 값을 할당하려고 하면 타입 에러가 발생

변수를 const로 선언하고 직접 리터럴 값을 할당(초기화)
해당 값을 자동으로 리터럴 값으로 유추

let letString = 'hello';
letString = 'hi';

const constString = 'hello';
constString = 'hi'; // Error - 상수이므로 'constString'에 할당할 수 없습니다.
const constNumber = 10;
const constBool = true;

변수에 타입 명시를 리터럴 값으로 명시

let exactString: 'hello' = 'hello';
exactString = 'hi'; // - Error - '"hi"' 형식은 '"hello"' 형식에 할당할 수 없습니다.
let exactNumber = 1;
let exactBool = false;

2. 리터럴 타입 활용

주로 type 키워드와 함께 사용
유니언 타입과 함께 사용하여 다양한 값을 표현함과 동시에 제한 가능
변수나 매개변수가 특정 값들 중 하나만을 가질 수 있도록 제한

Directions 타입 속성의 경우
string 타입의 네 가지 특정 리터럴 타입중 하나만을 가지는 타입

type Directions = 'up' | 'bottom' | 'left' | 'right';
let moveUp: Directions = 'up';
moveUp = '위'; // - Error - '"위"' 형식은 'Directions' 형식에 할당할 수 없습니다.

함수 인자로서의 리터럴 타입 지정으로 함수 인자를 특정 값으로 제한

function setAlignment(align: 'left' | 'right' | 'center'): void {}

리터럴 타입은 숫자, 문자열, 불리언 등 원시 타입과 결합하여 다양하게 사용 가능
숫자 데이터는 모든 자료를 입력 가능
문자열 데이터는 'yes' 또는 'no'만 가능

type Literal = number | 'yes' | 'no';
let gameState: Literal = 'yes';
gameState = 'yes';
gameState = 'no';
gameState = 3;
gameState = 31232132142142;
gameState = '안녕'; // - Error - '"안녕"' 형식은 'Literal' 형식에 할당할 수 없습니다.

리터럴 타입의 활용 로직
구체적인 값을 강제 | 특정 값들만 허용하는 로직 설계에 유용
코드의 의도를 명확하게 표현 > 오류 감소, 자동완성 및 리팩토링에 용이
리터럴 타입의 한계성
고정된 값에만 제한되기 때문에 유연성이 떨어짐

https://short-echidna-b16.notion.site/Literal-d358d24a8f144fe6926436527ec030d2?pvs=4

리터럴 타입 (Literal) | Notion

1. 리터럴 타입의 정의

short-echidna-b16.notion.site

Intersection 타입

Ted93 — Sun, 16 Jun 2024 19:00:47 +0900

1. Intersection 타입이란?

여러 타입을 하나로 결합하여 모든 타입의 기능을 갖춘, 단일 타입을 생성하는 방법
여러 타입을 모두 만족하는 하나의 타입
AND 연산자 (A 그리고 B) - & 기호를 사용하여 구현

2. Intersection 타입 사용

type IntersectionType = Type1 & Type2 & Type3;

type Employee = {
  name: string;
  startDate: Date;
};

type Manager = {
  name: string;
  startDate: Date;
  group: string; // 부서명
};

위에 코드에서 name과 startDate가 중복이 됨
아래 처럼 Intersection 타입을 활용할 수 있음

 type Manager = Employee & { group: string };

  let managerA: Manager = {
    name: '테드',
    startDate: new Date(),
    group: 'developer',
  };

3. 인터섹션 타입의 특징

3-1) 타입 결합

여러 타입의 속성을 결합하여 새로운 타입을 생성
코드의 재사용성과 복잡한 타입의 조합 가능

3-2) 유연성과 정확성

필요한 모든 타입의 속성을 조합
유연하면서도 정확한 타입 정의 가능

4. 인터섹션 타입 예시

type Admin = {
  isAdmin: boolean;
};

// 일반 사용자
type User = {
  id: string;
  password: string;
};

// 관리 사용자
type AdminUser = User & Admin;

function createAdminUser(user: User): AdminUser {
  return { ...user, isAdmin: true };
  // 스프레드 연산자를 사용하는 새로운 객체 생성
}

let newAdminUser: User = {
  id: 'qwe123',
  password: 'qwe123!',
};
let adminUser1 = createAdminUser(newAdminUser);
console.log(adminUser1); // { id: 'qwe123', password: 'qwe123!', isAdmin: true }

문제1

기본 Intersection 타입 생성
Person 타입과 ContactDetails 타입을 결합하여 Employee 타입을 생성
Employee 타입은 Person의 모든 속성(name, age)과 ContactDetails의 모든 속성(email, phone)을 포함

정답

type Person = { name: string; age: number };
type ContactDetails = { email: string; phone: string };
type Employee = Person & ContactDetails;
let employee1: Employee = {
  name: '테드',
  age: 99,
  email: 'ted@ted.com',
  phone: '010-1234-5678',
};

문제 2

함수 반환 타입으로 Intersection 사용
Vehicle 타입과 Engine 타입을 결합하여 Car 타입 생성
createCar 함수를 구현하여, 주어진 Vehicle과 Engine 정보를 받아 Car 객체를 반환하도록 구현

정답

type Vehicle = {
  make: string;
  model: string;
};
type Engine = {
  engineType: string;
  horsepower: number;
};
type Car = Vehicle & Engine;

function createCar(vehicle: Vehicle, engine: Engine): Car {
  return { ...vehicle, ...engine };
}

let v1: Vehicle = {
  make: 'Kia',
  model: 'K5',
};
let engine: Engine = {
  engineType: 'hybrid',
  horsepower: 100,
};

const newCar = createCar(v1, engine);
console.log(newCar);
// { make: 'Kia', model: 'K5', engineType: 'hybrid', horsepower: 100 }

문제 3

복잡한 Intersection 타입 활용

TeamMember 타입과 Project 타입을 결합하여 TeamMemberWithProject 타입을 생성
해당 타입을 사용해 assignProjectToTeamMember 함수를 구현
함수는 TeamMember 객체와 Project 정보를 받아서, 이를 결합한 TeamMemberWithProject 객체를 반환

정답

type TeamMember = {
  memberId: string;
  name: string;
};

type Project = {
  projectId: string;
  projectName: string;
};
type TeamMemberWithProject = TeamMember & Project;
function assignProjectToTeamMember(
  teamMember: TeamMember,
  project: Project,
): TeamMemberWithProject {
  return { ...teamMember, ...project };
}

https://short-echidna-b16.notion.site/Intersection-46e8435b73d34a86b4aca4a004938a67?pvs=4

Intersection 타입 | Notion

1. Intersection 타입이란?

short-echidna-b16.notion.site

Union 타입

Ted93 — Sat, 15 Jun 2024 10:10:58 +0900

1. union 타입이란?

여러 타입 중 하나가 될 수 있는 값을 나타내는 방법
값에 허용된 타입을 두 개 이상으로 지정
OR 연산자 (A 또는 B)
| 기호를 사용하여 표현

2. union 타입의 사용

변수, 함수의 매개변수, 반환값 등에서 모두 사용 가능
타입의 유연성을 제공
무분별한 any 사용을 방지

3. union 타입의 예시(사용방법)

  type Any = string | number | boolean | string[];
  let value: Any = '문자';
  value = 123;
  value = true;
  value = ['1', '2'];
  // value = {}; // Error - '{}' 형식은 'Any' 형식에 할당할 수 없습니다.

타입 별칭의 예시

관리자 계정 Admin

type Admin = {
  id: string | number;
  password: number;
};

사용자 계정 User

type User = {
  id: string | number;
  name: string;
};
type Person = Admin | User;

타입 별칭의 union 타입의 경우 - 중복되지 않은 타입 속성은 옵셔널(?)과 동일
즉 아래 Person은 위에 type Person = Admin | User; 코드와 동일함

type Person = {
  id: string | number;
  password?: number;
  name?: string;
};

4. union 타입의 특징

4-1) 공통 필드 접근

union의 모든 멤버가 공유하는 속성에만 직접적으로 접근 가능

4-2) 타입 가드 사용

특정 타입에만 존재하는 속성이나 메서드에 접근하기 위해서는 타입 가드를 사용 타입 가드 - 조건문을 통해 타입을 좁혀나가는 방식

4-3) 유연성과 안정성

다양한 타입의 사용을 가능하게 하는 유연성을 제공, 타입 가드를 적극적으로 사용하여 코드의 안정성을 향상

5. union 타입 실습

문제 1

나이가 입력될 때
숫자 : 소수점 자리가 없도록 지정하여 문자열로 반환(toFixed()) 문자 : 그대로 반환

정답

type Union = number | string;
function getAge(age: Union) {
  if (typeof age === 'string') {
      return age;
    }
  if (typeof age === 'number') {
    age = age.toFixed();
    return age;
  }
}

console.log(getAge(12.345)); // 12
console.log(getAge('15살')); // 15살

참고, 타입스크립트는 자동 완성 기능을 정말 잘 제공해주는데,
type age가 string인 부분에서는 문자열 메서드를 자동완성으로 제공하고

number 타입 조건 안에서는 number 타입의 메서드를 자동완성으로 제공한다

문제2

Union 타입을 사용한 변수 선언
string, number, boolean 중 하나의 타입을 가질 수 있는 MixedType 변수를 선언하고,
각 타입에 해당하는 값을 할당하는 예시 코드를 작성

정답

type MixedType = string | number | boolean;
let example1: MixedType;
example1 = '123';
example1 = 123;
example1 = true;
// example1 = []; - Error

문제3

함수 매개변수에 Union 타입 적용
number와 string 타입 중 하나를 매개변수로 받아,
해당 값이 number일 경우 숫자를 2배로 증가시키고,
string일 경우 그대로 반환하는 함수 doubleOrNothing을 작성

정답

function doubleOrNothing(input: number | string): void {
  if (typeof input === 'number') {
    console.log(input * 2);
  }
  if (typeof input === 'string') {
    console.log(input);
  }
}
doubleOrNothing(10); // 20
doubleOrNothing('hello'); // hello

문제4

Union 타입과 타입 가드를 활용한 고급 예제
Admin과 User 타입 명시

Admin은 id (number 타입)와 isAdmin (boolean 타입) 속성을,
User는 id (number 타입)와 username (string 타입) 속성 포함

두 타입의 유니온 타입을 사용하여 Person 타입을 선언하고,
id, isAdmin, username 중 적절한 속성을 가진 객체를 생성

Person 타입의 객체를 매개변수로 받아 Admin인지 User인지를 구분해 출력하는 함수 identifyPerson을 작성

정답

type Admin = { id: number; isAdmin: boolean };
type User = { id: number; username: string };
type PersonType = Admin | User;
function identifyPerson(person: PersonType) {
  if ('isAdmin' in person) {
    return console.log('Admin입니다');
  }
  if ('username' in person) {
    return console.log('User입니다');
  }
}
const adminPerson: PersonType = { id: 1, isAdmin: true };
const userPerson: PersonType = { id: 2, username: 'typescriptUser' };

identifyPerson(adminPerson); // Admin입니다
identifyPerson(userPerson); // User입니다

문제5

실제 프로젝트에서의 Union 활용 실제 서버와의 통신에 있어 다양한 형태의 응답을 처리하는 방법

사용자 정보가 있는 경우 : { name: string, email: string }
사용자 정보가 없는 경우 : { error: string }

정답

type Success = {
  name: string;
  email: string;
};
type Fail = {
  error: string;
};
type UserResponse = Success | Fail;
function handleResponse(response: UserResponse) {
  // in 연산자
  // : 객체의 속성이 존재하면 true, 없으면 false를 반환
  if ('error' in response) {
    console.error(response.error);
  } else {
    console.log(`${response.name}, ${response.email}`);
  }
}
handleResponse({ name: '테드', email: 'ted@ted.com' }); // 테드, ted@ted.com
handleResponse({ error: 'User not found' }); // User not found

https://short-echidna-b16.notion.site/Union-fa61e27c275243c78f67bac7980ab998?pvs=4

Union 타입 | Notion

short-echidna-b16.notion.site

타입 어노테이션(Type Annotation)

Ted93 — Fri, 14 Jun 2024 17:57:06 +0900

1. 타입 어노테이션(Type Annotation)

변수, 함수의 매개변수, 함수의 반환값 등에 사용
해당 식별자(변수명)의 타입을 명시적으로 선언
보통 식별자 뒤에 콜론을 사용하여 직접 명시

let number;
let anyNumber: any;
// any 타입의 변수로 명시하지 않은 경우 값을 할당할 때마다 해당 값의 타입의 변수로 재지정

변수에 초기화가 되는 경우

  number = 123.456;
  anyNumber = 123.789;
  console.log(number.toFixed(2)); // 사용 가능
  console.log(anyNumber.toFixed(2)); // 사용 가능

  number = '전화번호';
  anyNumber = '전화번호';
  // console.log(number.toFixed(2)); // Error
  // 'toFixed' 속성이 'string' 형식에 없습니다.

2. 타입 별칭 (Type Alias)

새로운 타입 이름을 생성하여 기존 타입을 참조할 수 있게 하는 기능
코드의 가독성과 재사용성을 향상
타입 별칭은 대문자로 시작!
기본 사용 방법
- type 키워드를 사용하여 정의
- type 타입별칭 = 타입; (콜론이 아닌 =(할당 연산자)를 사용)

1. 변수 타입 별칭

변수의 경우 별칭 사용을 거의 하지 X

type Text = string;
let message: Text = '텍스트 메시지'; // 가능은 하지만 별칭 대신 string 사용 권장
let message2: Text = '텍스트 메시지2'; // 가능은 하지만 별칭 대신 string 사용 권장

2. 객체 타입 별칭

타입 별칭 내에서도 선택적 프로퍼티와 읽기 전용 속성 사용 가능
타입 별칭 명 지정 시 '데이터 변수명+Type'을 주로 사용

type UserType = {
name: string;
height: number;
};
const user1: UserType = {
name: '테드',
height: 177,
};
const user2: UserType = {
name: '테드친구',
height: 167,
};

3. 함수 타입 별칭

User 타입인 매개변수를 받아 boolean 타입의 반환값을 생성하는 함수

type User = {
  id: string;
  name: string;
};
type ValidateUserType = (user: User) => boolean;

함수 사용 예제
사용가 입력되었을 때
사용자의 아이디가 null인 경우(입력하지 않은 경우) false
사용자의 아이디가 입력된 경우 true

const isValidUser: ValidateUserType = (user) => user.id !== '';

let userA: User = {
  id: 'qwe',
  name: '테드',
};
let userB: User = {
  id: '',
  name: '테드친구',
};
console.log(isValidUser(userA)); // true
console.log(isValidUser(userB)); // false

void 타입 사용 예시

  type VoidReturnType = (x: number) => void;
  const add: VoidReturnType = (x) => console.log(x + x);
  add(2); // 4

3. 함수 타입 별칭 예제

1. 함수 타입 별칭 정의

type GreetFunction = (name: string) => string;

2. 위의 타입 별칭을 사용하는 함수 구현

const greet: GreetFunction = (name) => {
	return `Hello, ${name}`;
};

3. 일반 선언적 함수에서 타입 명시 - 타입 별칭 사용 불가능

function greet2(name: string): string {
  return `Hello, ${name}`;
}

연습 문제

문제 1 - 타입 어노테이션 사용

변수 age를 선언하고 숫자 타입으로 어노테이션을 지정
변수 isStudent를 선언하고 불리언 타입으로 어노테이션을 지정
위 두 변수에 적절한 값을 할당하고, 콘솔에 출력

정답

let age: number;
let isStudent: boolean;
age = 30;
isStudent = true;
console.log(`Age: ${age}, isStudent: ${isStudent}`); // Age: 30, isStudent: true

문제 2 - 타입 별칭 사용

ProductType이라는 타입 별칭을 생성
객체, id (문자열 타입), name (문자열 타입), price (숫자 타입) 속성 포함
ProductType 타입을 사용하여 product라는 이름의 변수를 선언하고, 적절한 값을 할당
product 객체의 내용을 콘솔에 출력

정답

type ProductType = {
  id: string;
  name: string;
  price: number;
};
const product: ProductType = {
  id: 'd2',
  name: '모션 데스크',
  price: 800000,
};
console.log(product); // { id: 'd2', name: '모션 데스크', price: 800000 }
console.log(`${product.id}, ${product.name}, ${product.price}`);
// d2, 모션 데스크, 800000

https://short-echidna-b16.notion.site/Type-Annotation-a76fc7eb5b734e228591340906090c38?pvs=4

타입 어노테이션(Type Annotation) | Notion

short-echidna-b16.notion.site

타입스크립트의 객체 타입

Ted93 — Thu, 13 Jun 2024 21:01:47 +0900

1. 객체 타입 지정(명시)

객체 타입 정의 시 {}(중괄호)를 사용하여 표현
객체 타입의 경우 타입끼리의 구분 시 세미콜론(;) 사용을 권장!

객체 타입 정의와 객체의 차이점

콜론의 우변에는 값 대신 해당 속성값의 타입을 명시(지정)
구분자로 콤마(,) 뿐만 아니라 세미콜론(;)도 사용 가능

객체 타입 명시

변수 명 뒤에 콜론을 사용하여 명시
콜론 뒤 중괄호를 사용
객체 타입 예시

const user: { name: string; age: number } = {
  name: '테드',
  age: 50,
  height: 169, // Error - 객체의 경우 타입으로 명시되지 않은 속성은 정의할 수 없음
};

+) 객체의 경우 타입으로 명시된 값은 반드시 정의되어 있어야 함! 만약 위 코드에서 age를 주석 처리를 한다면 아래와 같은 에러가 발생

2. 객체의 선택 속성(선택적 프로퍼티)

속성명 뒤에 물음표(?)를 붙여 해당 속성이 존재하지 않을 수도 있음을 표현
객체 타입에 지정된 형식 그대로를 객체로 작성
>>> BUT! 선택적으로 값을 생략하고 싶은 경우 선택적 프로퍼티를 사용

const nameAndBirthday: {
  name: string;
  birthday?: number;
} = {
  name: '테드',
  birthday: 818,
};

3. 읽기 전용 속성

속성명 앞에 readonly 키워드를 사용하여 해당 속성의 재할당을 금지
해당 키워드가 붙은 속성은 const 키워드를 이용한 변수 정의와 유사
객체의 속성값에 접근하는 방법 - 점 연산자를 사용하여 접근
readonly 키워드 작성 시 속성명과 띄어쓰기 작성 필수

const readonlyName: {
  readonly name: string;
  age: number;
} = {
  name: '테드',
  age: 30,
};

readonlyName.name = '테드 블루'; // Error - 에러 메세지는 아래 사진 참고
console.log(readonlyName.name);

readonlyName.age = 29;
console.log(readonlyName.age);

4. 연습문제

문제1

다음 객체 타입을 정의하고, 해당 타입을 가진 객체를 하나 생성 person: 객체는 name(문자열), age(숫자), hobby(문자열, 선택적) 속성을 가져야 한다.

정답

const person: { name: string; age: number; hobby?: string } = {
  name: '테드',
  age: 30,
  hobby: '코딩',
};

문제2

readonly를 사용하여 car 객체 타입을 정의하고, model(읽기 전용, 문자열)과 year(숫자) 속성을 포함하는 객체를 생성 model 속성에 다른 값을 할당하려고 할 때 발생하는 오류를 설명

정답

const car: { readonly model: string; year: number } = {
  model: 'Sonata',
  year: 2024,
};
car.model = 'Hyundai'; // Error - model은 readonly 속성임

https://short-echidna-b16.notion.site/d23d0a17ca1e4c2abc8fcfa4dee68d95?pvs=4

타입스크립트의 객체 타입 | Notion

short-echidna-b16.notion.site

타입 (Type)

Ted93 — Wed, 12 Jun 2024 22:50:00 +0900

타입스크립트의 타입 명시 방법

(타입 명시는) 필수 사항 X
프로그램의 안정성과 가독성을 높이는 중요한 역할

타입 어노테이션(Type Annotation, 타입 주석)

변수명 뒤에 콜론을 이용하여 JS 코드에 타입을 정의하는 방식

타입

1. 기본타입(원시 타입: string, number, boolean 등)

변수명 뒤에 콜론을 첨부하고 타입을 명시
typeof 연산자를 사용했을 때 나타나는 변환값과 동일한 이름으로 명시
String, Number, Boolean과 같이 대문자로 시작하는 타입 또한 동일한 방법으로 명시
위의 형태는 JS의 '특수 내장 타입'
소문자 형태의 타입 사용을 권장

let name: string = '테드';
// 권장) 변수명: 타입명
let height: number = 177;
let isStudent: boolean = false;

2. Array 배열

순서가 있는 요소의 모음을 나타내는 자료구조
변수명 뒤에 콜론을 사용하여 타입명을 명시, 타입명 뒤에 배열을 나타내는 []를 첨부
제네릭 타입: Array<타입명>

let list1: string[] = ['1', '2', '3'];
let list2: Array<number> = [1, 2, 3];

3. Tuple 튜플

고정된 수의 요소 타입 & 순서가 있는 타입
원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의
명시된 개수 만큼만 원소를 지정 가능
배열과의 차이점: 튜플의 경우 Array<> 제네릭 타입 지정 방식 X
타입을 지정할 때: 원소의 타입을 순서대로 작성

  let nameAndHeight: [string, number] = ['테드', 177];
  // nameAndHeight = [177, '테드']; // Error - 'string' 형식은 'number' 형식에 할당할 수 없습니다.
  // nameAndHeight = ['테드', 177, 1]; // Error - '[string, number, number]' 형식은 '[string, number]' 형식에 할당할 수 없습니다. 소스에 3개 요소가 있지만, 대상에서 2개만 허용합니다.
  nameAndHeight.push(1); // push는 가능
  console.log(nameAndHeight);

4. void 타입

아무런 값이 없다
주로 함수에서 반환 값이 없거나 return이 있더라도 반환하는 값이 없을 때 사용되는 타입
함수의 타입 정의
파라미터(매개변수)와 반환값(return값) 정의가 가능: TS의 경우 파라미터의 타입을 명시하지 않으면 오류가 발생
함수의 반환값 정의는 파라미터를 정의하는 ()소괄호 뒤에, 콜론을 붙여 정의

function voidType(parameter: number): void {
  console.log('반환값이 없는 함수');
  // return parameter; // Error - 'number' 형식은 'void' 형식에 할당할 수 없습니다.
  return; // 해당 return문이 없어도 void 형식이 가능
}

console.log(voidType(3)); // 반환값이 없는 함수 - undefined 지정

5. null & undefined

JS와 달리 TS에서 null과 undefined의 경우 각각의 값만을 가짐
null과 undefined에 자기 자신의 타입 그리고 void 타입 외의 타입에 할당하는 경우 에러 발생
JS → null과 undefined 변수에 다른 타입의 값이 할당 가능
TS → null 타입의 변수에는 'null' 값만!
undefined 타입의 변수에는 'undefined' 값만!

타입 어노테이션을 통해 null | undefined로 명시하는 경우에만!

null과 undefined의 값은 모든 타입의 하위 타입이기 때문에, 모든 타입에 할당 가능
그러나, strict 모드에서 타입 검사를 실시하면 각각의 타입에만 값 할당이 가능

let ufType: undefined = undefined;
// ufType = 3; // Error - '3' 형식은 'undefined' 형식에 할당할 수 없습니다.
// ufType = true; // Error - 'true' 형식은 'undefined' 형식에 할당할 수 없습니다.

let nullType: null = null;
// nullType = '널 타입'; // Error - '"널 타입"' 형식은 'null' 형식에 할당할 수 없습니다.

let nullNumber: number = 1;
// nullNumber = null; // Error - 'null' 형식은 'number' 형식에 할당할 수 없습니다.

6. any

모든 타입에 대해서 허용하는 타입
타입 검사 오류가 발생하는 것을 방지
모든 타입과 호환 가능 → TS를 JS처럼 사용
any타입의 경우 사전에 타입 오류를 계산할 수 X → 예상치 못한 에러 발생 가능성이 높음 (사용 X)

let anyType: any = 3;
anyType = '문자';
anyType = true;
anyType = [];
anyType = {};

7. never

절대 발생하지 않는 값의 타입
함수가 예외를 발생시키거나 끝나지 않을 때 사용

function error(message: string): never {
  throw new Error(message);
}

error('!에러발생!');

8. bigint (es2020)

큰 정수를 다루기 위한 원시 타입
Bigint 함수를 사용하여 bigint 값을 생성

const oneHundred: bigint = BigInt(100);

현재 "compilerOptions” 옵션에 "target": "es2016”이어서, 오류가 남 사용하기 위해서는 → (lib 컴파일 옵션을 'es2020' 이상으로 변경해야 함) 필요 시 변경

9. symbol

전역적으로 고유한 참조값을 생성하는데 사용하는 타입
유일하고 변경 불가능한 값으로 생성
Symbol() 함수로 생성

10. Quiz

문제 1 : 기본 타입 정의하기

username은 문자열, userAge는 숫자, isSubscribed는 불리언 값으로 타입을 정의

정답

let username: string = '테드';
let userAge: number = 22;
let isSubscribed: boolean = true;

문제 2: 배열 타입 정의하기

문자열 배열 fruits와 숫자 배열 numbers를 정의

정답

let fruits: string[] = ['사과', '바나나'];
let numbers: Array<number> = [1, 2, 3];

문제 3: 튜플 타입 정의하기

이름과 나이를 요소로 하는 튜플 person을 정의

정답

let person: [string, number] = ['테드', 22];

문제 4: void 타입을 사용하는 함수 정의하기

아무런 값을 반환하지 않고, 매개변수로 받은 메시지를 콘솔에 출력하는 함수 printMessage를 정의

정답

function printMessage(message: string): void {
  console.log(message);
}

https://short-echidna-b16.notion.site/Type-f379c7aac7f349cdbf09a90215606a6f?pvs=4

타입 (Type) | Notion

short-echidna-b16.notion.site

JS/TS의 코드 퀄리티 향상과 스타일 유지를 위한 도구

Ted93 — Tue, 11 Jun 2024 16:40:21 +0900

플러그인(확장) 기능만 사용

ESLint

1. 정의 및 목적

자바스크립트 코드의 문제를 식별하고 보고하기 위한 도구
정적 분석 도구의 한 형태로, 코드 실행 전에 코드를 검사하여 일반적인 실수, 버그, 스타일 오류, 또는 안티패턴을 찾음

2. 기능

규칙 기반 시스템: ESLint는 수많은 규칙을 제공하며, 사용자는 이 규칙들을 켜거나 끌 수 있고, 규칙의 엄격함을 조정
플러그인과 확장성: ESLint는 React, Vue, TypeScript 등 다양한 프레임워크와 라이브러리를 지원하기 위해 플러그인을 사용
커스터마이징: 프로젝트의 필요에 맞게 규칙을 추가하거나 수정하여 사용자 정의 규칙 생성 가능
자동 수정: 일부 규칙 위반에 대해 ESLint는 자동으로 코드를 수정할 수 있는 옵션을 제공

Prettier

1. 정의 및 목적

코드 포맷터로, 코드의 기능성에 영향을 주지 않으면서 일관된 스타일을 적용하여 코드를 더 읽기 쉽고 일관적으로 작동하게 하는 도구

2. 기능

지원 언어: JavaScript, TypeScript, CSS, HTML, JSON 등 다양한 언어와 파일 형식 지원
강제 스타일: Prettier는 스타일에 관한 옵션이 제한적이므로 개발자 간의 스타일 논쟁 축소 단, Prettier가 제시하는 스타일 강제 적용
통합: 대부분의 코드 에디터와 IDE에 플러그인 형태로 쉽게 통합할 수 있으며, 저장 시 자동으로 포맷을 적용하도록 설정 가능

3. ESLint와 Prettier 함께 사용하기

ESLint와 Prettier는 서로 다른 목적으로 사용되지만, 함께 사용하면 코드의 품질과 일관성을 동시에 관리 가능
ESLint는 코드 품질과 문제점을 중점으로, Prettier는 코드 스타일을 일관되게 유지
eslint-plugin-prettier와 eslint-config-prettier를 통해 충돌 없이 통합 가능

ESLint & Prettier 환경 설정

타입스크립트 설치된 프로젝트 기준

npm init -y
npm install typescript --save-dev
npx tsc --init

1. 프로젝트의 루트 디렉터리에서 필요한 패키지를 설치

한 줄에 작성해야 함

npm install --save-dev eslint @typescript-eslint/parser 
@typescript-eslint/eslint-plugin prettier 
eslint-config-prettier eslint-plugin-prettier

2. ESLint 설정 파일 생성 및 설정

프로젝트 루트 디렉터리에 .eslintrc.js 파일 생성 : 아래 내용 추가

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
env: {
  browser: true, // 브라우저 환경 설정
  node: true, // Node.js 환경 설정
  es2021: true, // ES2021 전역 변수 사용 가능
},
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
  },
};

3. Prettier 설정 파일 생성 및 설정

프로젝트 루트 디렉터리에 .prettierrc 파일 생성 : 아래 내용 추가

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 200,
  "endOfLine": "auto"
}

4. ESLint와 Prettier를 통합하기 위한 설정

4-1) .eslintignore 파일 생성

ESLint가 무시할 파일과 디렉토리를 지정

node_modules
dist

4-2) Prettier 통합

.prettierignore 파일 생성, 무시할 파일과 디렉토리를 지정

node_modules
dist

5. VSCode 설정 (선택 사항)

Visual Studio Code 사용 시, ESLint와 Prettier를 자동으로 실행하도록 설정
VSCode의 설정 파일(.vscode/settings.json)에 다음 설정 추가

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

6. package.json에 스크립트 추가

package.json 파일에 ESLint와 Prettier 실행 스크립트를 추가

{
  "scripts": {
    "lint": "eslint src/**/*.{ts,tsx}",
    "format": "prettier --write 'src/**/*.{ts,tsx,js,json}'"
  }
}

7. 프로젝트 구조에 따른 실행

src 디렉토리에 있는 TypeScript 파일을 검사하고 포맷팅하는 명령어
ESLint 실행

npm run lint

Prettier 실행

npm run format

8. prettier 만 설정

8-1) Prettier를 개발 의존성으로 설치

npm install --save-dev prettier

8-2) Prettier 설정 파일 생성

프로젝트 루트 디렉터리에 .prettierrc 파일을 생성하고 원하는 설정을 추가

8-3) Prettier 무시 파일 생성

프로젝트 루트 디렉터리에 .prettierignore 파일을 생성

8-4) 스크립트 추가

package.json 파일에 Prettier를 실행할 수 있는 스크립트를 추가

{
  "scripts": {
    "format": "prettier --write \\"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\\""
  }
}

8-5) prettier 실행

터미널 또는 명령 프롬프트에서 아래 명령어를 실행하여 코드를 포맷

npm run format

8-6) VSCode와 연동

VSCode 확장 프로그램 설치
VSCode의 설정 파일(settings.json)에 다음 내용을 추가

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

https://short-echidna-b16.notion.site/JS-TS-a87e84f1cbf94e2b9543063d29a09412?pvs=4

JS/TS의 코드 퀄리티 향상과 스타일 유지를 위한 도구 | Notion

short-echidna-b16.notion.site

ts-node, export 키워드

Ted93 — Mon, 10 Jun 2024 09:11:53 +0900

typescript

JS의 슈퍼셋 >> TS 파일을 JS 파일로 변환해야만 코드 실행 가능
tsc로 TS 코드를 JS로 변환(컴파일)
node로 변환시킨 JS 코드를 실행
- TS 코드 수정 시 계속하여 JS 코드로 변환을 진행
매번 tsc fileName 후 node fileName을 실행 시키는 것이 번거로움
npm install -g ts-node 설치 후

ts-node 명령어를 통해 코드 컴파일과 실행을 동시 진행 가능
ts-node 명령어의 경우 JS 파일이 생성되지 X
ts-node fileName 으로 실행

js 파일에서는 message()가 오류가 없음, 런타임환경에서 오류 발생

ts 파일에서는 실행전에 오류를 발생시켜서 실수를 방지해줌

export 키워드

// export const tmp = '';
{
  let message;
}

1. export 키워드가 없는 경우

export 키워드가 없으면, c_scope.ts 파일은 여전히 모듈로 간주되지만, 명시적으로 내보내는 변수가 없으므로 message 변수가 전역 스코프와 충돌 가능성 발생

TypeScript 파일과 JavaScript 파일 모두 전역 스코프에 message 변수를 선언
message 변수가 전역 스코프에서 중복 선언되어 충돌이 발생

2. export가 있는 경우

typeScript 파일에서 export 키워드를 사용하면, 해당 파일은 모듈로 인식 tmp와 message 변수는 typescript.ts 모듈의 스코프 내에 존재

각 파일이 독립적인 스코프를 가짐
message 변수가 export되지 않았기 때문에, 해당 변수는 a_typeScript.ts 파일 내에서만 유효, 다른 파일의 message 변수와 충돌하지 않음

https://short-echidna-b16.notion.site/ts-node-export-d3173395ddaf46ef9741ff6d2a4ab77c?pvs=4

ts-node, export 키워드 | Notion

short-echidna-b16.notion.site

타입스크립트 프로젝트 디렉토리 구조

Ted93 — Sun, 9 Jun 2024 20:04:51 +0900

1. src(source)

소스 코드를 저장
모든 타입스크립트 파일(.ts)을 해당 폴더 내에 작성

2. node_modules

프로젝트에서 사용하는 모든 NPM 패키지를 저장

3. package.json

프로젝트의 메타데이터와 사용하는 npm 패키지의 목록을 저장

name: 프로젝트의 이름

version: 프로젝트의 현재 버전

description: 프로젝트에 대한 간단한 설명

main: 프로젝트의 엔트리 포인트 이 파일은 프로젝트를 시작할 때 Node.js가 처음으로 실행하는 파일

scripts: 프로젝트에서 사용할 스크립트를 정의하는 곳 (EX) 테스트를 실행하거나
프로젝트를 빌드하는 등의 커맨드를 정의할 수 있음

dependencies: 프로젝트에서 사용하는 패키지의 목록과 버전 정보
이 패키지들은 프로젝트의 실행에 필요한 패키지

devDependencies: 프로젝트의 개발에만 필요한 패키지의 목록과 버전 정보
이 패키지들은 테스팅, 빌드, 문서 생성 등의 개발 작업에 사용

4. tsconfig.json

타입스크립트 컴파일러의 설정을 저장

compilerOptions: 컴파일러 옵션을 설정하는 객체 이 객체에는 여러 하위 옵션이 있음

target: 컴파일된 코드가 실행될 ECMAScript 버전을 지정 (EX) "ES5", "ES2015" 등을 지정할 수 있음

module: 사용할 모듈 시스템을 지정 (EX) "CommonJS", "ES2015", "AMD" 등을 지정할 수 있음

outDir: 컴파일된 자바스크립트 파일이 위치할 디렉토리를 지정

strict: 모든 엄격한 타입-체킹 옵션을 활성화

esModuleInterop: ES 모듈과의 상호 운용성을 활성화

include: 컴파일에 포함될 파일 또는 디렉토리의 리스트

exclude: 컴파일에서 제외될 파일 또는 디렉토리의 리스트

5. dist

컴파일된 자바스크립트 파일(.js)를 저장
타입스크립트 컴파일러를 실행하면 src 폴더의 ts파일들이 해당 폴더로 컴파일되어 이동

6. .gitignore

git에 업로드 시키지 않을 내용을 관리하는 파일
일반적으로 JS/TS/React 프로젝트 업로드 시, node_modules 폴더는 gitignore로 명시하는 것을 권장
package.json에 명시된 내용을 npm install 명령어를 사용하는 경우 해당 프로젝트에 설치(node_modules를 포함)
.gitignore 파일에 아래의 명령어 첨부하면 해당 폴더가 무시 됨

node_modules/
*/node_modules

https://short-echidna-b16.notion.site/582f6aeca8cf43b38f25e6e000a920ba?pvs=4

타입스크립트 프로젝트 디렉토리 구조 | Notion

short-echidna-b16.notion.site

타입스크립트 환경설정

Ted93 — Sat, 8 Jun 2024 14:50:34 +0900

1. Node.js 설치 전 삭제

JavaScript의 '런타임(JS의 프로그램들을 실행할 수 있는 환경)' 환경

TS는 JS의 슈퍼셋이기 때문에 'Node.js'환경에서 동작

where node > 설치된 경로를 알려줌

윈도우(Windows)

1) 윈도우 키 > 프로그램 추가/제거 > Node.js 검색 후 삭제

2) 아래 경로에 해당하는 디렉터리 삭제

윈도우 키 + r (실행 창)
윈도우 키 > 파일 탐색기 C:\Program Files\Nodejs C:\Program Files (x86)\Nodejs
C:\사용자\User\AppData\Roaming\npm C:\Users\User\AppData\Roaming\npm
C:\사용자\ITPS\AppData\Roaming\npm C:\Users\ITPS\AppData\Roaming\npm

3) 삭제 됬는지 확인 - cmd 입력(명령 프롬프트 실행)

node -v npm -v
(내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. - 삭제 완료)

맥(MacOS)

1) Homebrew를 사용하여 Node 제거하는 방법

응용 프로그램 > 유틸리티 폴더 > 터미널 실행 brew uninstall --force node

2) 터미널 실행

node -v npm -v
(내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. - 삭제 완료)

2. Node.js 설치

JavaScript의 '런타임(JS의 프로그램들을 실행할 수 있는 환경)' 환경

TS는 JS의 슈퍼셋이기 때문에 'Node.js'환경에서 동작 :공식 웹 사이트(구글 > node.js 검색)

https://nodejs.org/en

LTS(Long Term Support) 버전 설치를 권장(안정적) : 파일 탐색기 > 다운로드 > 다운로드 된 node.js 실행

설치 완료 여부 확인

윈도우 키 + r > cmd(명령 프롬프트 창)
node -v / npm -v

Windows에서 npm 실행이 되지 않을 경우

(Node.js 시 npm이 자동 설치)

윈도우 키 > 시스템 환경 변수 편집

시스템 속성 > 고급 > 우측 하단의 환경 변수 클릭

(아래)사용자 변수에서 변수 Path 더블 클릭

'사용자 이름'에 대한 사용자 변수 설정
파일 탐색기 > c드라이브 > 사용자(Users) > 자신의 컴퓨터 이름(ITPS) > AppData > Roaming > npm 경로를 복사

(npm 폴더가 존재하지 않을 경우 생성 후 경로 복사) : C:\Users\ITPS\AppData\Roaming\npm

(아래)시스템 변수 Path 설정 파일 탐색기 > c드라이브 > Program Files > nodejs 경로를 복사

복사한 경로를 Path 변수란에 새로 만들기 클릭 > 경로 삽입 (삽입 시 마지막에 \\(원화)기호 첨부) C:\\Program Files\\nodejs\\

환경 변수 편집 후에는 컴퓨터 자체 '다시 시작'을 권장 <<<<<

위에 명령어가 잘 나오면 설정 완료(Node.js 시 npm이 자동 설치)

3. npm이란?

NPM(Node Package Manager)은 Node.js의 기본 패키지 관리 도구
NPM을 이용하면 자바스크립트의 라이브러리를 쉽게 설치하고
관리 프로젝트의 의존성을 관리, 작은 스트립트 실행 등의 기능을 제공

Node.js 설치 시 NPM은 자동 설치
npm 설치 확인 명령어: npm -v

3-1) npm init

새로운 Node.js 프로젝트를 시작, 기본값으로 package.json 파일을 생성
-y 옵션 추가 (npm init -y) 질문 없이 기본값으로 package.json 파일을 생성

package name: 프로젝트의 이름을 입력/ 기본값은 현재 디렉터리의 이름

version: 패키지의 시작 버전을 입력/ 기본값은 1.0.0

description: 프로젝트의 간단한 설명을 입력

entry point: 프로젝트의 메인 파일을 지정/ 기본값은 index.js

test command: 테스트를 실행할 때 사용할 명령어를 입력

git repository: 프로젝트의 Git 저장소 URL을 입력

keywords: 프로젝트를 설명하는 키워드를 쉼표로 구분하여 입력

author: 패키지의 저자 정보를 입력

license: 사용할 라이센스를 입력/ 기본값은 ISC

3-2) npm install

package.json 파일에 명시된 모든 의존성을 설치: 특정 패키지 설치 방법
npm install 패키지명
-D | --save-dev 옵션 추가 → 개발 의존성으로 패키지를 설치

3-3) npm uninstall

패키지를 제거
특정 패키지 제거 방법 → npm uninstall 패키지명

4. 타입스크립트 설치 (npm 사용, -g 옵션을 사용)

타입스크립트를 사용하기 위해 전역 또는 로컬 환경에 타입스크립트를 설치
전역 설치(global한 설치 / -g 옵션 추가) → 개발자의 컴퓨터 전체에 기능 추가
프로젝트 별 설치(개발 의존성) → 개발자가 현재 사용하고 있는 프로젝트 내에 기능 추가
git bash를 사용 (vscode 내에서 터미널 열기: ctrl + shift + `) -> D_TypeScript 폴더로 이동
git bash 환경에서 하위 폴더 이동
- cd 폴더 경로
- cd D_TypeScript

npm install -g typescript (어느 경로에서든지 설치 가능)
npm install --save-dev typescript

타입스크립트 설치 확인 명령어 → tsc -v (Version 5.4.2)

5. tsc란?

tsc(TypeScript Compiler)
타입스크립트(.ts) 파일을 자바스크립트(.js) 파일로 변환하는 도구
브라우저와 Node.js가 타입스크립트를 직접 실행할 수 없기 때문에 tsc로 코드 변환이 필수

tsc 컴파일 명령어

tsc 파일명.ts
위 명령어를 실행하면 같은 이름의 .js 파일이 생성
해당 .js파일은 원래 타입스크립트 코드에서 타입 정보가 제거된 상태

tsc의 옵션

일반적으로 tsconfig.json 파일에 정의
tsc가 해당 파일을 참조하여 컴파일을 수행

target : 컴파일된 js 버전을 지정

module : 사용할 모듈 시스템을 지정

strict : 모든 엄격한 타입체크 옵션을 활성화

outDir : 컴파일된 파일이 위치할 디렉토리를 지정

6. 타입스크립트 패키지 설치

npm을 사용하여 타입스크립트 패키지 설치

프로젝트 디렉토리 생성
프로젝트의 모든 파일과 폴더를 포함

6-1) 원하는 위치에서 터미널 오픈

mkdir 프로젝트명 : make directory - 프로젝트 디렉토리 생성
cd 프로젝트명 : 생성한 디렉토리로 이동
cd 명령어 : 사용자가 현재 위치하는 디렉토리(폴더)를 변경할 때 사용

특정 디렉토리로 이동
cd 전체_디렉토리_경로

홈 디렉토리로 이동
cd | cd ~

상위 디렉토리로 이동
cd ..

이전 디렉토리로 이동
cd -

C:\\프론트엔드-테드\\frontend
mkdir D_TypeScript
cd D_TypeScript

6-2) npm 초기화

새로운 Node.js 프로젝트 시작, npm init -y 명령어를 통해 기본값으로 package.json 파일을 생성
package.json 파일
- Node.js 프로젝트의 메타데이터를 담고 있는 파일
- 프로젝트의 이름, 버전, 설명, 저자, 라이선스 등의 정보를 저장
- 프로젝트에서 사용하는 패키지 목록과 버전 정보를 관리
- 프로젝트의 시작점을 지정 | 스크립트의 정의 등에 대한 기능을 수행
해당 프로젝트를 새롭게 재설치하려는 경우 해당 디렉토리의 package.json을 삭제하고 다시 npm init -y 진행

6-3) npm을 이용하여 '타입스크립트 패키지' 설치

npm install typescript --save-dev
프로젝트 디렉토리 내에서 타입스크립트를 설치
해당 명령은 타입스크립트 프로젝트의 개발 의존성으로 추가
(devDependecies에 추가) : 배포 시에는 포함되지 X

+) devDependecies: 개발 과정에서만 필요한 패키지들의 목록(-D)

+) dependencies: 프로젝트 실행에 필요한 패키지들의 목록(-S)

npm install -g typescript
시스템 전체에서 타입스크립트를 사용
컴퓨터의 어느 위치에서든 타입스크립트 컴파일러(tsc)를 사용 가능 (설치되어 있는 경우 업데이트로 설치)

6-4) tsconfig.json 생성

타입스크립트 프로젝트의 설정을 저장하는 파일
타입스크립트 컴파일러가 프로젝트를 컴파일하는 방법을 지정
예) 출력 디렉토리 위치, 사용할 모듈 시스템, 지원하는 ESMAScript 버전 등을 관리
npx tsc --init

6-5) tsconfig.json 기본 구성

해당 컴파일러 옵션은 주석을 해제하여 사용 가능
(프로젝트의 특성 | 각 회사의 규정에 따라 적용 가능)

compilerOptions : 컴파일러에 대한 다양한 설정을 포함

target : 컴파일된 JavaScript의 ECMAScript 버전을 지정(ES5, ES6)

module : 모듈 시스템을 지정

strict : 모든 엄격한 타입 체킹 옵션을 활성화(true/ 비활성화 - false)

outDir : 컴파일된 파일이 위치할 디렉토리를 지정

esModuleIntrop : CommonJS 모듈을 ES6 모듈처럼 가져오기를 허용

https://short-echidna-b16.notion.site/69f6179d15fd41abb470210f10b632be?pvs=4

타입스크립트 환경설정 | Notion

short-echidna-b16.notion.site

타입스크립트 정의

Ted93 — Fri, 7 Jun 2024 09:22:43 +0900

1. 타입스크립트란?

자바스크립트(JavaScript)를 기반으로 하는 오픈 소스 프로그래밍 언어 (Microsoft에서 개발과 유지를 담당)
JS의 상위 집합인 언어(확장, superset)
- JS의 모든 기능을 포함
- 정적 타입 기능을 추가하여 JS의 단점을 보완한 언어
타입스크립트가 자바스크립트의 모든 기능을 포함하고 있으며, 그 위에 추가적인 기능을 더하고 있다는 것을 의미

2. 타입스크립트의 필요성(도입 배경)

에러의 사전 방지
자바스크립트는 동적 타입 언어, 변수의 타입이 실행 시점에 결정(런타임)
'컴파일' 시점에서 오류를 발생하여 에러 실행을 방지
코드 가이드 및 자동 완성(개발 생산성 향상)

3. 동적 타입(JS) VS 정적 타입(TS)

동적 타입(JS)

실행 시점 타입 결정
변수의 타입이 코드가 실행될 때 결정, 유연한 타입 변환을 지원

정적 타입(TS)

컴파일 시점 타입 결정
코드 작성 단계에서 변수의 타입을 명시해야 함, 타입 오류가 있을 경우 컴파일 과정에서 발견
오류 발생을 사전에 방지, 개발 도구에서의 자동 완성을 제공

4. 타입스크립트 장단점

장점

정적 타입 체킹
개발 도구의 효율성
객체 지향 프로그래밍 지원

단점

학습 곡선 존재
개발 시간이 증가
라이브러리의 타입 정의

https://short-echidna-b16.notion.site/6b551c4c9de54f89adffad0abafafe4c?pvs=4

타입스크립트 정의 | Notion

short-echidna-b16.notion.site

정규표현식 - RegExp

Ted93 — Thu, 6 Jun 2024 16:28:47 +0900

JavaScript에서의 정규표현식은 RegExp 객체를 통해 다양한 방식으로 활용 가능
RegExp 생성자와 주요 메서드들(test(), exec(), match(), search(), replace(), split())의 사용
이를 통해 문자열 검색, 검증, 수정 및 분할 작업을 효과적으로 수행 가능

1. RegExp 생성자

RegExp 객체는 두 가지 방법으로 생성 가능
리터럴 방식과 생성자 함수를 이용하는 방식

1) 리터럴 방식

const regex = /pattern/flags;

2) 생성자 함수

const regex = new RegExp("pattern", "flags");

3) pattern: 정규표현식의 패턴 부분

4) flags: 검색 옵션

g : 전역 검색
i : 대소문자 구분 없이 검색
m : 여러 줄 검색
u : 유니코드; 패턴을 유니코드 코드 포인트의 시퀀스로 취급
s : dotAll 모드; . 특수 문자가 줄바꿈 문자도 매치

2. RegExp 메서드

1) test()

문자열이 정규표현식과 매치되는지 여부를 확인
반환값: true 또는 false

const regex = /hello/i;
console.log(regex.test('Hello World')); // true

2) exec()

정규표현식과 매치되는 정보를 찾아 배열로 반환
반환값: 매치된 정보의 배열 또는 null

const regex2 = /a(b)c/;
const result2 = regex2.exec('abc');
console.log(result2); // [ 'abc', 'b', index: 0, input: 'abc', groups: undefined ]
console.log(result2.index); // 0
console.log(result2.input); // abc

3. String 메서드

1) match()

문자열에서 정규표현식과 매치되는 부분을 찾기
반환값: 매치된 결과의 배열 또는 null

const text3 = 'Hello World';
const matches3 = text3.match(/hello/i);
console.log(matches3); // [ 'Hello', index: 0, input: 'Hello World', groups: undefined ]
console.log(matches3[0]); // Hello

2) search()

문자열에서 정규표현식과 매치되는 부분의 인덱스를 반환
반환값: 인덱스(찾지 못하면 -1)

// const text3 = 'Hello World'; // 위에 있던 코드
console.log(text3.search(/world/i)); // 6

3) replace()

정규표현식과 매치되는 부분을 다른 문자열로 대체
반환값: 새로운 문자열

// const text3 = 'Hello World'; // 위에 있던 코드
console.log(text3.replace(/world/i, 'JavaScript')); // Hello JavaScript

4) split()

정규표현식을 구분자로 사용하여 문자열을 배열로 분할
반환값: 분할된 문자열의 배열

const text4 = 'apple,     banana, cherry';
const result4 = text4.split(/,\\s*/);
console.log(result4); // [ 'apple', 'banana', 'cherry' ]

https://short-echidna-b16.notion.site/RegExp-31d4099072dc43eca30d77682697e14c?pvs=4

정규표현식 - RegExp | Notion

JavaScript에서의 정규표현식은 RegExp 객체를 통해 다양한 방식으로 활용 가능

short-echidna-b16.notion.site

정규표현식 - 비밀번호 복잡성 검증 예제

Ted93 — Wed, 5 Jun 2024 22:18:20 +0900

1. 비밀번호 복잡성 검증

비밀번호 정책을 강화하기 위해, 대문자, 소문자, 숫자, 특수 문자가 각각 최소 하나씩 포함되어야 하며, 전체 길이가 8자 이상

정규표현식 : /^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[^\da-zA-Z]).{8,}$/

function validatePassword(password) {
  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{8,}$/;
  console.log(regex.test(password));
}
validatePassword('Password123!'); // true
validatePassword('password123!'); // false
validatePassword('Password123'); // false
validatePassword('Password!'); // false

^(?=.[a-z])

어떠한 문자든지 여러개 작성
반드시 최소 한개의 소문자를 포함해서 작성

(?=.*[A-Z])

위와 동일하지만 최소 한 개의 대문자를 포함하여 작성

(?=.*\d)

위와 동일하지만 최소 한 개의 숫자를 포함하여 작성

(?=.*[^\da-zA-Z])

숫자, 영문자(대, 소문자)를 제외한 문자 중(즉, 특수기호를 의미) 한 개를 반드시 포함
최소 한 개 이상의 특수기호를 포함하여 작성

.{8,}$

총 길이가 최소 8자 이상

2. 비밀번호 복잡성 검증

비밀번호 6-10자 이내 대문자, 소문자, 숫자가 각각 최소 하나씩 포함

정규표현식 : /^(?=.[a-z])(?=.[A-Z])(?=.*\d).{6,10}$/

function validatePassword2(password) {
  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).{6,10}$/;
  console.log(regex.test(password));
}
validatePassword2('Pass12'); // true
validatePassword2('P1assWd2'); // true
validatePassword2('Pass1'); // false - 길이 부족
validatePassword2('Pass1231234'); // false - 길이 초과
validatePassword2('pass1231234'); // false - 길이 초과 & 대문자 사용 X

(?=.[a-z])

문자열 내에 최소 한 개의 소문자가 포함

(?=.[A-Z])

문자열 내에 최소 한 개의 대문자가 포함

(?=.*\d)

문자열 내에 최소 한 개의 숫자가 포함

.{6,10}

전체 길이가 최소 6자리에서 최대 10자리

https://short-echidna-b16.notion.site/d001a63d66564a2191bce9793ebab711?pvs=4

정규표현식 - 비밀번호 복잡성 검증 예제 | Notion

1. 비밀번호 복잡성 검증

short-echidna-b16.notion.site

정규표현식 고급 패턴 매칭

Ted93 — Wed, 5 Jun 2024 12:54:17 +0900

1. 패턴 매칭

1) 캡처 그룹 (abc)

캡처 그룹은 괄호로 묶인 부분 패턴을 매치, 해당 결과를 저장하여 나중에 참조 할 수 있도록 함
매칭된 데이터를 추출하거나 후방 참조와 함께 사용될 때 유용

예제: 이름 분리하기

const myName = 'Ted Blue';
const regexName = /(\\w+) (\\w+)/;
const matchName = myName.match(regexName);
console.log(matchName);
console.log(matchName[1]);
console.log(matchName[2]);

2) 비캡처 그룹 (?:abc)

비캡처 그룹은 괄호로 묶인 부분 패턴을 매치
매치 결과를 저장하지 않아 후방 참조에 사용 불가
그룹화는 필요하지만, 데이터 저장은 필요 없을 때 사용

예제: 선택적 표현 매칭

http:// 또는 https:// 선택적으로 매치하지만 저장하지 않는 경우

const url = '<https://www.example.com>';
const regexUrl = /(?:https?:\\/\\/)?(www\\.\\w+\\.\\w+)/;
const matchUrl = url.match(regexUrl); // 일치할 경우 해당 표현식의 배열 형태로 값 반환
console.log(matchUrl);
console.log(matchUrl[1]); // www.example.com

match로 반환되는 배열 값
- 0번째 인덱스 - 정규식과 일치하는 전체 문자열이 저장
- 1번째 인덱스부터 캡쳐 그룹과 일치하는 문자열이 저장

2. 긍정 및 부정의 전방탐색(lookahead)

패턴의 일부를 확인하지만 그 부분을 결과에 포함하지 X
전방탐색을 활용하면 특정 조건을 만족하는 위치에서만 매칭을 수행 가능

1) 긍정 전방탐색 (?=...)

긍정 전방탐색은 특정 패턴 뒤에 지정한 패턴이 존재해야 매치되는 구조
특정 문자 뒤에 원하는 문자가 오는 경우에만 매치를 진행

예제: 비밀번호 유효성 검사

비밀번호에서 최소 하나의 숫자를 포함하는 경우를 검사하는 예

const password = 'Password123';
const regexPassword = /(?=.*\\d).*/;
// .: 모든 문자열(줄바꿈을 제외한) - 숫자, 한글, 영어, 특수기호, 공백
// * : 0개 이상
// 즉 위에 정규식은 => 어느 위치든 비밀번호에 숫자가 하나 이상 포함
const isValid = regexPassword.test(password);
console.log(isValid); // true

2) 부정 전방탐색 (?!...)

부정 전방탐색은 특정 패턴 뒤에 지정한 패턴이 존재하지 않아야 매치되는 구조
특정 문자 뒤에 원하지 않는 문자가 오지 않는 경우에만 매치를 진행

예제: 금지된 단어 제외

문자열 내에서 특정 금지된 단어를 제외한 다른 단어와 매치하는 예

const text = 'apple pie';
const regexNoText = /\\b(?!apple\\b)\\w+/;
// const regexNoText = /\\b(?!apple\\b)\\w+/g; // ['pie']
const matches = text.match(regexNoText);
console.log(matches);

+) 정규 표현식을 나타내는 // 기호 뒤의 g는 검색 옵션
global 전역 검색
모든 검색 결과를 배열로 반환

https://short-echidna-b16.notion.site/6b7fe3d059b8407e81795ae4cd1b95e6?pvs=4

정규표현식 고급 패턴 매칭 | Notion

1. 패턴 매칭

short-echidna-b16.notion.site

정규표현식 - 실습 간단한 패턴 만들기

Ted93 — Tue, 4 Jun 2024 16:58:19 +0900

1. 이메일 주소 검증

이메일 주소가 유효한지 확인

정규표현식 : /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/

function validateEmail(email) {
  const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,6}$/;
  console.log(regex.test(email));
}

validateEmail('ted@gmail.com'); // true
validateEmail('tedgmail.com'); // false

정규표현식을 하나씩 자세히 보면

^[a-zA-Z0-9._-]+

^ 뒤의 문자로 시작
[소문자, 대문자, 숫자, 마침표, 언더스코어, 하이픈] 중 하나
+ 1개 이상 작성

@

앞의 문자들 뒤에 @ 기호 첨부

^[a-zA-Z0-9._-]+ 위의 설명과 동일한 내용

\.[a-zA-Z]{2,6}

도메인의 TLD(최상위 도메인)는 마침표.으로 시작
알파벳(대문자, 소문자 모두 가능) 2~6개로 첨부

2. 전화번호 포맷 매칭

다양한 전화번호 포맷을 매칭하기 위한 정규표현식

정규표현식 : /^(\+\d{1,3}\s?)?($\d{3}$|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$/

function validateNumber(number) {
  const regex = /^(\\+\\d{1,3}\\s?)?(\\(\\d{3}\\)|\\d{3})[\\s.-]?\\d{3}[\\s.-]?\\d{4}$/;
  console.log(regex.test(number));
}

validateNumber('+82 123-456-7890'); // true
validateNumber('123-456-7890'); // true
validateNumber('(123)-456-7890'); // true
validateNumber('1234567890'); // true

정규표현식을 하나씩 자세히 보면

^(\+\d{1,3}\s?)?

+ 플러스 기호로 시작
숫자가 1개 3개 사이로 작성
/s - space(공백)가 없거나 최대 한번만
전체 국제번호 표기가 없거나 최대 한번만 작성

($\d{3}$|\d{3})

\( - 열리는 소괄호 리터럴 문자
\d{3} - 숫자 3자리 작성
\) - 닫히는 소괄호 리터럴 문자
| - OR(또는)
\d{3} - 숫자 3자리 작성

[\s.-]?

공백, 마침표, 하이픈 중 하나를 택 [abc]

\d{3}[\s.-]?

위에 설명 참고

\d{4}$

정규표현식의 끝은 숫자 4자리
※ \d의 d는 decimal 10진수(숫자)를 의미

3. URL 인식

URL을 인식하기 위한 정규표현식은 다음과 같습니다.

정규표현식 : /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-])\/?$/

function validateURL(url) {
  const regex = /^(https?:\\/\\/)?([\\da-z.-]+)\\.([a-z.]{2,6})([\\/\\w .-]*)*\\/?$/;
  console.log(regex.test(url));
}

validateURL('<https://naver.com>');
validateURL('<http://naver.com>');
validateURL('naver.com');
validateURL('<http://naver.com/path/to/>');

정규표현식을 하나씩 자세히 보면

^(https?:\/\/)?

\/\/ 는 더블유가 아니고 \ / \ / 슬래시 기호를 사용하기 위함임
https:// 또는 http://로 시작하는 것이 선택적

([\da-z.-]+)

\d는 [0-9]와 같은 표현임
숫자, 알파벳(소문자), 점, 하이픈 구성이 1개 이상

\.([a-z.]{2,6})

리터럴 문자 마침표(.) 뒤에 알파벳(소문자)와 점 중에 2 ~ 6개 사이의 작성

([\/\w .-])

\w는 [a-zA-Z0-9_]와 같은 표현임
리터럴 문자 슬래시(/) 또는 (알파벳, 숫자, 언더스코어) 또는 공백 또는 마침표 또는 하이픈(-)이 0회 이상 작성

\/?$

URL의 종료는 /로 종료를 허용
리터럴 슬래시가 없거나 최대 하나만 작성

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/778f30f6dc2746c9961791b94e5ded3a?pvs=4

정규표현식 - 실습 간단한 패턴 만들기 | Notion

이메일 주소 검증

short-echidna-b16.notion.site

정규표현식 개요 - Regular Expression

Ted93 — Mon, 3 Jun 2024 10:52:37 +0900

정규표현식의 정의

정규표현식은 문자열을 처리할 때 사용하는 문법
복잡한 문자열 패턴을 정의하고 검색, 대체, 추출 작업을 수행하는 역할

+) 역사

정규표현식은 1950년대 후반 수학자 스티븐 클레이니에 의해 처음 소개
이후 UNIX 운영 체제의 텍스트 처리 도구들에서 사용
JavaScript에서는 1990년대 후반부터 정규표현식 지원 시작

1. 기본 용도 & 응용 분야

검색(Search): 특정 패턴이나 조건에 맞는 문자열을 찾기
검증(Validation): 이메일 주소, 전화번호 등 입력된 데이터의 형식이 올바른지 확인
분리(Splitting): 문자열을 특정 패턴을 기준으로 여러 부분으로 나누기
대체(Replacement): 문자열 내의 특정 패턴을 찾아 다른 문자열로 대체

+) 응용 분야

웹 개발: 폼 데이터 검증, URL 파싱 등 데이터 분석: 로그 파일에서 정보 추출, 데이터 정제 등 소프트웨어 개발: 소스 코드에서 패턴 검색 및 수정 네트워킹: 프로토콜 메시지 분석 및 검증

+) JavaScript에서 정규표현식을 사용하는 이유

유연성: JavaScript는 웹 브라우저와 서버(Node.js) 양쪽 모두에서 실행 , 정규표현식을 이용해 다양한 문자열 처리 작업을 유연하게 수행 가능
효율성: 복잡한 문자열 검사를 코드 몇 줄로 간단하게 처리 , 개발 시간과 비용 절감
표준화: ECMAScript 표준의 일부로 정규표현식이 포함 , JavaScript 환경에서의 호환성과 예측 가능성 보장

2. 단점

주석이나 공백 허용 X
여러가지 기호를 혼합 사용
가독성이 좋지 않음

정규표현식 기본 문법 및 패턴

1. 정규식 구성

슬래쉬( / ) 문자 두개 사이로 정규식 기호가 들어가는 형태

2. 메타 문자와 리터럴 문자

1) 메타 문자 : 정규표현식 내에서 특별한 의미를 가지는 문자

. :어떤 하나의 문자와 일치(줄바꿈 문자 제외)
\d: 숫자와 일치 [0-9]와 동일
\D: 숫자가 아닌 모든 문자와 일치 [^0-9]와 동일
\w: 단어 문자(알파벳, 숫자, 밑줄)와 일치 [a-zA-Z0-9_]와 동일
\W: 단어 문자가 아닌 모든 문자와 일치 [^a-zA-Z0-9_]와 동일
\s: 모든 공백 문자(스페이스, 탭, 줄바꿈 등)와 일치
\S: 공백이 아닌 모든 문자와 일치
\특수기호: 특수기호 \* \^ \& \! \? ...등

2) 리터럴 문자 : 메타문자로 활용되는 알파벳을 실제의 문자로 활용하고 싶은 경우 \(백슬래시)를 사용

\.: .(마침표) 문자 그 자체를 의미

3. 문자 클래스

문자 클래스는 특정 문자 중 하나를 매치
문자 클래스는 특정 문자 집합 중 하나와 일치시키고 싶을 때 사용합니다
[ ] 대괄호: 괄호 안의 문자들 중 하나 / -하이픈을 사용하여 범위 지정 가능

[abc]: 'a', 'b', 또는 'c'와 일치
[^abc]: 'a', 'b', 'c'를 제외한 모든 문자와 일치
[a-z]: 모든 소문자와 일치
[A-Z]: 모든 대문자와 일치
[0-9]: 모든 숫자와 일치
[a-zA-Z]: 모든 알파벳 문자와 일치

^문자열 : 특정 문자열로 시작 (시작점) - /^www/
문자열$ : 특정 문자열로 끝남 (종착점) - /com$/

+) 문자 클래스를 사용하면 특정 범위의 문자를 쉽게 지정 가능 : [a-z]는 소문자 알파벳 중 하나와 일치

4. 수량자

수량자는 바로 앞의 요소가 몇 번 나타나는지 지정

{n}
바로 앞의 요소가 정확히 n번 작성
예: a{3}는 "aaa"와 일치

{n,}
바로 앞의 요소가 n번 이상 작성
예: a{2,}는 "aa", "aaa", "aaaa", 등과 일치

{n,m}
바로 앞의 요소가 최소 n번, 최대 m번 작성
예: a{2,4}는 "aa", "aaa", "aaaa"와 일치

+
바로 앞의 요소가 1번 이상 작성 (최소 한개 또는 여러개)
예: a+는 "a", "aa", "aaa", 등과 일치

*
바로 앞의 요소가 0번 이상 작성
예: a*는 "", "a", "aa", "aaa", 등과 일치

?
바로 앞의 요소가 0번 또는 1번 작성
예: a?는 "", "a"와 일치

5. 위치를 지정하는 앵커

앵커는 문자열 내의 특정 위치를 지정

\b
단어 경계와 일치 단어와 공백 또는 문자열의 시작/끝 사이의 위치
예: \ba\는 "a cat"에서 'a '와 일치

\B
단어 경계가 아닌 위치와 일치
예: \Ba\는 "an apple"에서 'a'와 일치

https://short-echidna-b16.notion.site/Regular-Expression-802a4734e3d8499c8f689c54fa13a44f?pvs=4

정규표현식 개요 - Regular Expression | Notion

short-echidna-b16.notion.site

로컬 스토리지 Todo 예제 - 정답

Ted93 — Sun, 2 Jun 2024 22:00:40 +0900

로컬 스토리지를 활용한 Todo 예제 정답입니다.

절대 제가 작성한 코드가 무조건 적인 정답은 아니며, 여러분의 생각과 다르다면 그것이 정답일 것입니다~~

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo List Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="text" id="todoInput" placeholder="Add new task..." aria-label="New task input">
        <button onclick="addTodo()">Add Task</button>
        <ul id="todoList"></ul>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS 코드

body {
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  width: 500px;
}

input[type='text'] {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #5cb85c;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #4cae4c;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  background: #eee;
  margin-top: 8px;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button.deleteBtn {
  background-color: #d9534f;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  color: white;
  cursor: pointer;
  width: 80px;
  min-width: 60px;
}

button.deleteBtn:hover {
  background-color: #c9302c;
}

#error {
  color: red;
  text-align: center;
}
.hidden {
  visibility: hidden;
}

전체 JS 코드

let todos = [];

document.addEventListener('DOMContentLoaded', () => {
  todos = JSON.parse(localStorage.getItem('todos')) || [];
  renderTodos(todos);
});

function addTodo() {
  const input = document.getElementById('todoInput');
  const newTodo = input.value.trim();
  if (newTodo) {
    todos.push(newTodo);
    localStorage.setItem('todos', JSON.stringify(todos));
    renderTodos(todos);
    input.value = '';
  }
}

function renderTodos() {
  const list = document.getElementById('todoList');
  list.innerHTML = '';

  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.textContent = todo;

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.onclick = () => removeTodo(index);

    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
}

function removeTodo(index) {
  todos.splice(index, 1);
  localStorage.setItem('todos', JSON.stringify(todos));
  renderTodos(todos);
}

1. 할 일 목록을 저장할 빈 배열을 선언

let todos = [];

2. DOMContentLoaded 이벤트가 발생하면, 즉 문서 로딩이 완료되면 함수들을 실행

☝ 로직
1. 기존에 todos에서 로컬스토리지에 저장된 값이 있다면 꺼내오고 없다면 빈 배열을 할당
2. 렌더링 함수를 호출 (밑에서 구현 예정)

document.addEventListener('DOMContentLoaded', () => {
  todos = JSON.parse(localStorage.getItem('todos')) || [];
  renderTodos(todos);
});

3. 할 일을 추가하는 함수

☝ 로직
1. addTodo 함수 구현
2. input을 가져오고, 새로운 투두에 그 인풋의 값을 넣어줌
3. 만약 새로운 투두가 있다면, 투두리스트에 추가해주고
4. 로컬 스토리지에도 추가해줌
5. 렌더링 함수를 호출하고, 인풋의 값은 비워줌

function addTodo() {
  const input = document.getElementById('todoInput');
  const newTodo = input.value.trim();
  if (newTodo) {
    todos.push(newTodo);
    localStorage.setItem('todos', JSON.stringify(todos));
    renderTodos(todos);
    input.value = '';
  }
}

4. 할 일 목록을 렌더링하는 함수

☝ 로직
1. list를 가져오고, list의 HTML을 빈 값으로 할당
2. todos배열을 순회하면서, li 요소를 생성
3. li 요소의 값은 todo로 채워줌
4. delete 버튼을 생성하고 값은 Delete로 채워줌
5. delete 버튼을 클릭했을 때 removeTodo 함수를 호출
6. removeTodo 함수는 (밑에서 구현 예정)
7. li 요소의 자식으로 버튼을 추가하고
8. list의 자식으로 li를 추가

function renderTodos() {
  const list = document.getElementById('todoList');
  list.innerHTML = '';

  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.textContent = todo;

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.onclick = () => removeTodo(index);

    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
}

5. 할 일을 삭제하는 함수

☝ 로직
1. index를 인자로 받아옴
2. 배열의 메소드를 호출해서 인자로 넣어준 index를 삭제
3. 로컬 스토리지에도 업데이트
4. 렌더링 함수를 호출

function removeTodo(index) {
  todos.splice(index, 1);
  localStorage.setItem('todos', JSON.stringify(todos));
  renderTodos(todos);
}

6. 다른 버전으로 리팩토링

데모 웹사이트

깃허브

기존 코드에서 달라진 부분 위주로 주석으로 설명 첨부

JS 코드

let toDos = [];

document.addEventListener('DOMContentLoaded', () => {
  toDos = JSON.parse(localStorage.getItem('toDos')) || [];
  const list = document.getElementById('todoList');
  // 버튼에 하나하나 이벤트 리스너 다는 것을 피하고
  // list 하나에만 이벤트 리스너를 설계
  list.addEventListener('click', (e) => {
    const btnId = e.target.dataset.btnId;
    console.log(btnId);
    if (btnId) {
      removeTodo(btnId);
    }
  });
  renderPage(toDos);
});

// 엔터 키로도 addTodo가 작동하도록 설계
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    addTodo();
  }
});

function addTodo() {
  const input = document.getElementById('todoInput');
  let newTodo = input.value.trim();
  const p = document.getElementById('error');
  if (newTodo) {
    const data = JSON.parse(localStorage.getItem('toDos'));
    if (data && data.includes(newTodo)) {
      // 기존에 이미 존재하는 todo가 있는지 확인
      // 존재한다면 에러 메세지를 출력해줌
      p.classList.remove('hidden');
      renderPage(toDos);
      return;
    }
    p.classList.add('hidden');
    toDos.push(newTodo);
    localStorage.setItem('toDos', JSON.stringify(toDos));
    renderPage(toDos);
    input.value = '';
  }
}

function renderPage(toDos) {
  const list = document.getElementById('todoList');
  list.innerHTML = '';
  toDos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.innerText = todo;
    const deleteBtn = document.createElement('button');
    deleteBtn.innerText = 'Delete';
    // 원하는 버튼을 삭제하기 위해서 dataset을 설정
    deleteBtn.dataset.btnId = index;
    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
}

// 기존 index 대신에 btnId를 인자로 전달
function removeTodo(btnId) {
  toDos.splice(btnId, 1);
  localStorage.setItem('toDos', JSON.stringify(toDos));
  renderPage(toDos);
}

https://short-echidna-b16.notion.site/Todo-0495232881534a55957e0c3e1aa9afc7?pvs=4

로컬 스토리지 Todo 예제 - 정답 | Notion

로컬 스토리지를 활용한 Todo 예제 정답입니다.

short-echidna-b16.notion.site

로컬 스토리지 Todo 예제

Ted93 — Sun, 2 Jun 2024 10:52:36 +0900

해당 페이지는 연습용으로 질문만 있고 정답은 다음 글에서 공개합니다

HTML 코드와 CSS 코드를 복붙한 후 main.js를 생성해서 아래 설명대로 한번 작성해보세요!

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo List Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="text" id="todoInput" placeholder="Add new task..." aria-label="New task input">
        <button onclick="addTodo()">Add Task</button>
        <ul id="todoList"></ul>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS 코드

body {
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  width: 500px;
}

input[type='text'] {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #5cb85c;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #4cae4c;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  background: #eee;
  margin-top: 8px;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button.deleteBtn {
  background-color: #d9534f;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  color: white;
  cursor: pointer;
  width: 80px;
  min-width: 60px;
}

button.deleteBtn:hover {
  background-color: #c9302c;
}

#error {
  color: red;
  text-align: center;
}
.hidden {
  visibility: hidden;
}

1. 할 일 목록을 저장할 빈 배열을 선언

let todos = [];

2. DOMContentLoaded 이벤트가 발생하면, 즉 문서 로딩이 완료되면 함수들을 실행

☝ 로직
1. 기존에 todos에서 로컬스토리지에 저장된 값이 있다면 꺼내오고 없다면 빈 배열을 할당
2. 렌더링 함수를 호출 (밑에서 구현 예정)

3. 할 일을 추가하는 함수

☝ 로직
1. addTodo 함수 구현
2. input을 가져오고, 새로운 투두에 그 인풋의 값을 넣어줌
3. 만약 새로운 투두가 있다면, 투두리스트에 추가해주고
4. 로컬 스토리지에도 추가해줌
5. 렌더링 함수를 호출하고, 인풋의 값은 비워줌

4. 할 일 목록을 렌더링하는 함수

☝ 로직
1. list를 가져오고, list의 HTML을 빈 값으로 할당
2. todos배열을 순회하면서, li 요소를 생성
3. li 요소의 값은 todo로 채워줌
4. delete 버튼을 생성하고 값은 Delete로 채워줌
5. delete 버튼을 클릭했을 때 removeTodo 함수를 호출
6. removeTodo 함수는 (밑에서 구현 예정)
7. li 요소의 자식으로 버튼을 추가하고
8. list의 자식으로 li를 추가

5. 할 일을 삭제하는 함수

☝ 로직
1. index를 인자로 받아옴
2. 배열의 메소드를 호출해서 인자로 넣어준 index를 삭제
3. 로컬 스토리지에도 업데이트
4. 렌더링 함수를 호출

https://short-echidna-b16.notion.site/Todo-23b6602b8fe44956a57fc234c81d8fe1?pvs=4

로컬 스토리지 Todo 예제 | Notion

해당 페이지는 연습용으로 질문만 있고 정답은 다음 글에서 공개합니다

short-echidna-b16.notion.site

로컬 스토리지2 (Local Storage)

Ted93 — Sat, 1 Jun 2024 10:06:14 +0900

1. localStorage.getItem(key)의 기본 사용법

localStorage.getItem 메소드는 지정된 키에 해당하는 값을 로컬 스토리지에서 검색하여 반환
- 키에 해당하는 데이터가 없으면 null을 반환
- 해당 메소드는 데이터를 조회할 때 사용되며, 매우 간단하고 직관적인 API를 제공
'key'는 데이터에 접근하기 위해 사용되는 식별자
- 해당 식별자를 통해 저장된 값을 검색 가능

// localStorage.setItem('username', '테드');
// localStorage.setItem('key', 'value'); 
// 앞선 예제에서 넣었던 setItem 목록

let value = localStorage.getItem('key');
console.log(value);

let username = localStorage.getItem('username');
console.log(username);

2. 복잡한 데이터 타입 처리

로컬 스토리지는 기본적으로 문자열 데이터만을 저장
객체와 같은 복잡한 데이터 타입을 조회할 때는 문자열에서 다시 해당 타입으로 변환하는 과정이 필요
JSON.parse() 메소드를 사용
현재 로컬 스토리지의 상태

let storedData = localStorage.getItem('사용자정보');
let userInfo = JSON.parse(storedData);
console.log(userInfo);
console.log(userInfo.name);
console.log(userInfo.age);

3. 주의 사항

1) null 처리

localStorage.getItem이 null을 반환할 경우를 대비하여, 데이터를 사용하기 전에 이를 확인하고 적절히 처리

2) 보안

저장된 데이터는 사이트 간 스크립팅(XSS) 공격에 노출될 수 있으므로, 외부 입력을 직접 저장하거나 조회할 때는 주의가 필요

4. JS 로컬 스토리지 데이터 삭제

개별 데이터 항목을 삭제하거나 저장된 모든 데이터를 한 번에 삭제 가능

1) localStorage.removeItem(key) 사용법

localStorage.removeItem 메소드는 지정된 키에 해당하는 항목을 로컬 스토리지에서 삭제
특정 키를 사용하여 로컬 스토리지에서 단일 데이터 항목을 제거할 때 사용
localStorage.removeItem('key');
- 'key'는 삭제하고자 하는 데이터의 식별자

localStorage.removeItem('username');

2) localStorage.clear() 전체 삭제 사용법

localStorage.clear() 메소드는 로컬 스토리지 내의 모든 데이터를 삭제
로컬 스토리지를 완전히 초기화할 때 유용, 특정 애플리케이션에서 사용자의 설정을 리셋하거나 개인 정보 보호를 위해 데이터를 클리어할 때 사용

localStorage.clear();

https://short-echidna-b16.notion.site/2-Local-Storage-f3a822c34d534ff7b3db186ab6e6a190?pvs=4

로컬 스토리지2 (Local Storage) | Notion

short-echidna-b16.notion.site

로컬 스토리지 (Local Storage)

Ted93 — Fri, 31 May 2024 14:49:34 +0900

1. 로컬 스토리지의 정의

웹 브라우저가 제공하는 저장 공간

사용자의 컴퓨터에 영구적으로 데이터를 저장 가능
HTML5 웹 스토리지 사양의 일부로 도입, 쿠키의 한계를 극복하고 더 큰 저장 용량과 더 나은 보안을 제공
로컬 스토리지를 통해 저장된 데이터는 서버에 자동으로 전송되지 않으며, 웹 페이지가 로컬 데이터를 직접 제어 가능

2. 로컬 스토리지의 용도

1) 사용자 경험 개선

로컬 스토리지는 사용자의 기본 설정, 테마 선택, 언어 설정 등을 저장하여 , 다음 방문 때 웹사이트가 이 설정들을 기억하도록 지정

2) 상태 유지

웹 어플리케이션에서 사용자의 세션 정보나 로그인 상태를 관리할 수 있어, 브라우저를 종료 후 재접속했을 때도 이전 상태를 유지 가능

3) 오프라인 데이터 저장

네트워크 연결이 끊겨도 접근 가능한 정보를 저장함으로써, 오프라인 기능을 제공하는 애플리케이션에서 활용

4) 성능 향상

서버 요청 없이 로컬에서 데이터를 빠르게 불러올 수 있어, 웹 애플리케이션의 반응 속도와 효율성을 향상

3. 로컬 스토리지의 장점

1) 대용량 저장

로컬 스토리지는 약 5MB의 데이터를 저장 가능
쿠키의 4KB 제한에 비해 훨씬 큰 용량을 제공

2) 간단한 API

로컬 스토리지는 간단한 setItem, getItem, removeItem, clear 등의 메소드를 제공 , 데이터의 저장 및 관리를 쉽게 가능

3) 서버 부하 감소

데이터를 서버가 아닌 클라이언트에 저장, 서버로의 요청이 줄어들어 서버 부하가 감소

4) 영구 저장

로컬 스토리지에 저장된 데이터는 브라우저 세션 간에도 유지 , 사용자가 명시적으로 삭제하지 않는 한 계속 보존

5) 보안성

데이터가 클라이언트 측에만 저장되고 HTTP 요청을 통해 서버에 전송 X, 쿠키에 비해 보안성 높음

4. JS 로컬 스토리지 데이터 저장

로컬 스토리지는 웹 브라우저가 제공하는 데이터 저장 공간
사용자가 브라우저를 닫아도 저장된 데이터가 유지
localStorage 객체를 통해 간단하게 데이터를 저장하고, 조회 가능

1) localStorage.setItem(key, value) 사용법

localStorage.setItem 메소드는 로컬 스토리지에 데이터를 저장하는 데 사용
- 두 개의 매개변수를 받으며
- 첫 번째 매개변수는 데이터에 접근할 때 사용할 키(key)
- 두 번째 매개변수는 저장할 데이터의 값(value)

2) 데이터 저장하기

localStorage.setItem('key', 'value');
localStorage.setItem('key2', 'value2');

'key'는 데이터에 접근하기 위한 식별자
'value'는 해당 키에 저장할 값
저장된 데이터는 브라우저 세션 간에 유지, 사용자가 브라우저를 닫았다가 다시 열어도 데이터를 잃지 X

3) 예제: 사용자 이름 저장하기

아래 코드는 'username'이라는 키에 'John Doe'라는 값을 로컬 스토리지에 저장
해당 데이터는 이후에 localStorage.getItem('username')을 호출하여 언제든지 접근 가능

localStorage.setItem('username', '테드');

4) 데이터 유형과 직렬화

로컬 스토리지는 기본적으로 문자열 데이터만 저장 가능
객체나 배열 같은 복잡한 데이터 유형을 저장하려면, 이를 문자열 형태로 직렬화
JavaScript에서는 JSON.stringify() 메소드를 사용하여 객체를 문자열로 변환 가능

let userInfo = {
  name: '테드',
  age: 30,
};

localStorage.setItem('사용자정보', JSON.stringify(userInfo));

5) 보안 및 사용 제한

로컬 스토리지에 저장된 데이터는 HTTPS를 사용하지 않는 경우 탈취될 위험 가능성 존재 O
크로스-사이트 스크립팅(XSS) 공격에 취약할 수 있으므로, 사용자 입력을 직접 저장하기 전에 적절히 검증하고 소독하는 것이 중요

https://short-echidna-b16.notion.site/Local-Storage-c2c390ceba4744ee95b2d4395ba9e21e?pvs=4

로컬 스토리지 (Local Storage) | Notion

short-echidna-b16.notion.site

JS 웹 스토리지 개요

Ted93 — Thu, 30 May 2024 19:50:13 +0900

1. Client-side Storage란?

클라이언트 측 저장소로서 웹 브라우저를 통해 사용자의 컴퓨터나 모바일 장치에 직접 데이터를 저장하는 기술
서버 대신 사용자의 로컬 환경(브라우저 자체)에 데이터를 보관함으로써 더 빠르고 효율적인 데이터 접근을 가능

2. Client-side Storage의 특징

퍼포먼스 개선: 서버와의 통신 필요성을 줄여, 응답 시간과 성능이 향상
오프라인 액세스: 네트워크 연결이 없어도 데이터에 접근 가능
사용자 경험 개선: 개인 설정이나 이전 상태를 저장하여, 사용자에게 맞춤화된 경험을 제공

3. 클라이언트 사이드 스토리지의 용도

세션 관리: 로그인 상태, 사용자 프로필 설정, 테마 선택 등의 사용자 세션 정보를 저장
양식 데이터 저장: 사용자가 양식을 입력하는 도중 페이지를 실수로 벗어나더라도, 이미 입력된 정보를 저장
쇼핑 카트 데이터 유지: 쇼핑 사이트에서 사용자가 카트에 추가한 항목을 유지
게임 상태 저장: 게임 진행 상태를 로컬에 저장해, 다음 접속 때 이전의 진행 상태를 유지 가능

4. 클라이언트 사이드 스토리지의 종류

1) 쿠키 (Cookies)

특징: 작은 텍스트 파일로, 서버가 사용자의 브라우저에 데이터를 저장하도록 요청할 때
저장 용량: 약 4KB
수명: 만료 날짜 설정 가능
서버와의 통신: 모든 HTTP 요청과 함께 서버로 전송됨(네트워크 대역폭을 사용)
보안: 쉽게 접근 및 변조 가능하므로 보안 측면에서 취약
사용 예: 세션 관리, 사용자 추적, 개인화 설정에 활용

2) 웹 스토리지 (Web Storage)

2-1) 로컬 스토리지 (LocalStorage)

특징: 브라우저 세션 간에도 데이터를 저장할 수 있으며, 사용자가 직접 삭제하지 않는 한 데이터가 유지
저장 용량: 최대 5MB
수명: 데이터는 브라우저 세션이 종료되어도 유지됨
서버와의 통신: 데이터는 클라이언트 측에만 저장되며, 요청 시 서버로 전송되지 않음
보안: HTTPS 사용 시 외부 접근 방지 가능하지만 XSS 공격에 취약할 수 있음
사용 예: 대량의 데이터 저장, 사용자 설정 저장

2-2) 세션 스토리지 (SessionStorage)

특징: 브라우저 세션 동안만 데이터를 저장하며, 탭을 닫으면 데이터가 삭제
저장 용량: 최대 5MB
수명: 탭 또는 윈도우가 닫힐 때까지만 데이터 유지
서버와의 통신: 로컬 스토리지와 마찬가지로 클라이언트 측에만 저장
보안: 로컬 스토리지와 유사하나, 탭이 닫히면 데이터가 삭제되어 임시 정보 저장에 적합
사용 예: 임시 정보의 저장(예: 한 세션 동안의 폼 입력 데이터)

3) 캐시 (Cache)

특징: 웹 페이지나 애플리케이션의 자원(이미지, 스크립트 파일, 스타일시트 등)을 로컬에 저장해 빠른 로딩을 도모
용도: 자주 사용되는 리소스의 재요청을 줄여, 로딩 시간을 단축하고 네트워크 트래픽을 감소

5. 시나리오 기반 사용 추천

쿠키: 사용자 인증 토큰 등의 작은 데이터와 서버와의 지속적인 상태 유지가 필요한 정보를 저장할 때 사용
로컬 스토리지: 사용자의 설정이나 큰 양의 데이터를 장기간 저장할 필요가 있을 때 이용
세션 스토리지: 쇼핑 카트의 내용물 또는 한 페이지 내 세션 동안 필요한 정보를 저장할 때 사용

https://short-echidna-b16.notion.site/JS-a3668c269ad7436b9cff01d70a96bcc5?pvs=4

JS 웹 스토리지 개요 | Notion

short-echidna-b16.notion.site

방문자 수 카운트 - 쿠키활용

Ted93 — Wed, 29 May 2024 15:15:02 +0900

HTML 코드

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Todo List Application</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="app">
    <h1>방문자 수 카운터</h1>
    <p>이 페이지의 방문자 수: <span id="visitCount">0</span></p>
  </div>

  <script src="main.js"></script>
</body>

</html>

CSS 코드

body, html {
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.app {
  background: white;
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

JS 코드

document.addEventListener('DOMContentLoaded', () => {
  const visitCountElement = document.getElementById('visitCount');

  //& 방문 횟수를 업데이트하는 함수 정의
  function updateVisitCount() {
    let visits = getCookie('visits');
    visits = visits ? parseInt(visits) + 1 : 1;

    setCookie('visits', visits, 365);
    visitCountElement.textContent = visits;

    //& 쿠키 설정 함수 정의
    function setCookie(name, value, days) {
      let expires = '';
      if (days) {
        const date = new Date();
        date.setTime(date.getTime() + 365 * 24 * 60 * 60 * 1000);
        expires = 'expires=' + date.toUTCString();
      }

      document.cookie = name + '=' + value + ';' + expires + ';path=/';
    }

    //& 쿠키 가져오는 함수 정의
    function getCookie(name) {
      let nameEQ = name + '=';

      let ca = document.cookie.split(';');
      console.log(ca);
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        console.log(c);
        if (c.indexOf(nameEQ) === 0) {
          console.log(nameEQ.length);
          console.log(c.length);
          return c.substring(nameEQ.length, c.length);
        }
      }

      return null;
    }
  }
  updateVisitCount();
});

  기본 로직
모든 요소는 DOMContentLoaded 이벤트 안에 구현
방문 횟수를 업데이트 하는 함수를 정의
쿠키를 설정하는 함수를 정의
쿠키를 가져오는 함수를 정의
방문 횟수를 업데이트하는 함수를 호출

방문 횟수를 업데이트 하는 함수를 정의

'visits'라는 이름의 쿠키 값을 가져옴 → 쿠키 값이 있으면 1을 증가, 없으면 1로 설정
setCookie 함수를 호출해서 (만들 예정), 쿠키 visits를 업데이트하고 유효기간은 임의로 1년으로 설정
HTML 요소에 방문 횟수를 표시해줌

document.addEventListener('DOMContentLoaded', () => {
  const visitCountElement = document.getElementById('visitCount');

  // 방문 횟수를 업데이트하는 함수 정의
  function updateVisitCount() {
    let visits = getCookie('visits');
    visits = visits ? parseInt(visits) + 1 : 1;

    setCookie('visits', visits, 365);
    visitCountElement.textContent = visits;
});

쿠키 설정 함수 정의

쿠키의 만료 문자열을 초기화
만료일이 주어진 경우에 현재 날짜와 시간을 가져와서 만료일 뒤로 expires 날짜 설정
expires와 쿠기값 변경에 대해서는 앞의 글 https://ted93.tistory.com/entry/쿠키2-Cookie 참고

// updateVisitCount 함수 끝나는 곳 아래에 작성
// 쿠키 설정 함수 정의
function setCookie(name, value, days) {
  let expires = '';
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = 'expires=' + date.toUTCString();
  }
  document.cookie = name + '=' + value + ';' + expires + ';path=/';
}

쿠키 가져오는 함수 정의

아래 코드는 아래 사진과 함께 예를 들어서 설명

// setCookie함수 끝나는 곳 아래에 작성
// 쿠키 가져오는 함수 정의
function getCookie(name) {
  let nameEQ = name + '=';

  let ca = document.cookie.split(';');
  console.log(ca);
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i].trim();
	  if (c.indexOf(nameEQ) === 0) {
      console.log(nameEQ.length);
      console.log(c.length);
      return c.substring(nameEQ.length, c.length);
    }
  }

  return null;
}

페이지가 처음 로드 되었을 때 콘솔에 찍어보면 아래 사진과 같이 나오고

updateVisitCount() 함수 의 내용 중 visits = visits ? parseInt(visits) + 1 : 1; 이 부분에 의해서

방문자 수의 카운트는 1로 된다
그리고 한번 더 새로고침을 하게 될 경우의 콘솔 창은 아래와 같이 나오고

위에서 우리가 호출할 때 사용할 파라미터인 visits를 넣어보면 c.indexOf(nameEQ) === 0 를 만족하게 되고
substring에 의해서 “visits=” 다음에 나올 숫자를 리턴하게 된다
updateVisitCount 함수에 의해서 숫자가 있기 때문에 +1 한 숫자로 setCookie에 의해서 업데이트가 될 것이고
visitCountElement.textContent = visits; 에 의해서 HTML에도 업데이트가 될 것이다.

https://short-echidna-b16.notion.site/614fe0fd33744daa92cf005febfb03e7?pvs=4

방문자 수 카운트 - 쿠키활용 | Notion

HTML 코드

short-echidna-b16.notion.site

쿠키2 (Cookie)

Ted93 — Tue, 28 May 2024 09:37:14 +0900

1. 쿠키 접근 및 읽기

이 속성은 쿠키를 세미콜론(;)으로 구분된 이름=값 쌍의 문자열로 반환
특정 쿠키의 값을 읽기 위해서는 해당 문자열을 파싱

2. 쿠키 값을 가져오는 방법

document.cookie에서 반환된 문자열을 분석
특정 쿠키의 이름을 찾아 그 값을 추출

쿠키 문자열 분리 :document.cookie로부터 반환된 문자열을 세미콜론을 기준으로 분리하여 개별 쿠키를 배열로 변환
쿠키 파싱 : 각 쿠키 문자열을 = 기호를 사용하여 이름과 값으로 분리
값 추출 : 특정 이름을 가진 쿠키의 값을 찾기
사용 예제: 사용자의 'username' 쿠키 값을 검색하고 콘솔에 출력

// document.cookie = 'username= tedBlue1; path=/;'; // 앞선 예제에서 추가 했었음
document.cookie = 'age=100; path=/;';

function getCookieValue(cookieName) {
  let cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i];
    let parts = cookie.split('=');
    let name = parts[0].trim();
    if (name === cookieName) {
      return parts[1] || '';
    }
  }
  return '';
}

let username = getCookieValue('username');
let age = getCookieValue('age');
// : 쿠키를 가져올 때 내용 값이 없는 경우 null을 반환

if (username && age) {
  console.log(`username은 ${username}`);
  console.log(`age는 ${age}`);
} else {
  console.log('해당 쿠키를 찾을 수 없습니다.');
}

3. JS 쿠키 수정 및 삭제: 쿠키 값 변경 및 만료시켜 삭제하기

1) 쿠키 값 변경

쿠키의 값을 변경하는 것은 실질적으로 새로운 값을 가진 쿠키를 같은 이름으로 다시 설정
document.cookie를 사용하여 쿠키를 설정할 때 동일한 쿠키 이름에 다른 값을 지정하면 기존의 쿠키 값이 변경
쿠키의 이름, 새로운 값을, 그리고 만료일을 인자로 받아 쿠키를
새로운 만료 기간과 함께 쿠키를 설정하면 기존의 값을 덮어쓰고, 새로운 값과 만료일을 적용 가능

function updateCookie(name, value, daysToExpire = 1) {
  let date = new Date();
  date.setTime(date.getTime() + daysToExpire * (24 + 9) * 60 * 60 * 1000);
  let expires = `expires= ${date.toUTCString()}`;
  document.cookie = `${name} = ${value}; path=/; ${expires};`;
}

updateCookie('age', '500');
updateCookie('username', 'blueTed', 7);

코드 작성일 기준(2024년5월27일 오전 8시22분) 하루 뒤에 age가 만료되고(인자의 default 값이 1임)
1주일 뒤에 username이 만료됨(인자를 7로 전달)

2) 쿠키 만료시켜 삭제하기

쿠키를 삭제하는 공식적인 방법 X
만료 날짜를 과거로 설정하여 브라우저가 쿠키를 더 이상 유효하지 않은 것으로 처리 가능

function deleteCookie(name) {
  document.cookie = `${name}=; expires=Fri, 26 May 2024 00:00:00 GMT; path=/;`;
}

deleteCookie('age');

https://short-echidna-b16.notion.site/2-Cookie-09010051ea8f4dcc8a922608cab32cc2?pvs=4

쿠키2 (Cookie) | Notion

short-echidna-b16.notion.site