SPA vs MPA 개념, 장단점    ❗️SPA (Single Page Application)란?SPA는 이름 그대로 단일 HTML 페이지로 구성된 웹 애플리케이션입니다. 사용자가 애플리케이션을 처음 로드할 때, 서버로부터 하나의 HTML 페이지를 받아오고 이후의 모든 상호작용은 JavaScript를 통해 이루어집니다.특징:동적 데이터 로딩: 사용자가 페이지 내에서 링크를 클릭하거나 동작을 수행할 때마다 전체 페이지를 다시 로드하지 않고, 필요한 데이터만 서버로부터 받아와서 화면의 일부만 업데이트합니다.빠른 사용자 경험: 전체 페이지를 새로고침하지 않기 때문에 애플리케이션이 빠르고 부드럽게 동작합니다.클라이언트 사이드 라우팅: URL 변경 시 전체 페이지를 다시 로드하지 않고 JavaScript를 통해..

React 모듈 불러오는 방법   ❗️상황지금까지 아래와 같은 코드를 이용해서 사용했었는데import { createContext } from 'react';const MyContext = createContext(null); 다른 강의를 보면서 공부중 아래와 같은 코드를 사용해서 이게 뭐지? 하면서 찾아보았다 import React from 'react';const MyContext = React.createContext(null); ❗️차이점이 두 방법은 기능적으로 동일합니다. React.createContext는 React 모듈의 메서드를 직접 호출하는 방식이고,import { createContext } from 'react'는 ES6 구조 분해 할당을 사용하여 createContext 메서드만을..

타입스크립트 - 리액트 오류해결    ❗️상황리액트 앱 설치- npx create-react-app .Type 선언 패키지 추가- npm i @types/node @types/react @types/react-dom @types/jest부가적인 React를 TypeScript로 적용시킨 후npm run start 했는데 오류가 나옴 ❗️오류이렇게 나옴 이 오류는 프로젝트 종속성이나 설정에 문제가 있을 때 보여질 수 있는 메세지라고 한다. ❗️해결 방법npm과 create-react-app의 버전 호환성으로 인한 충돌이 의심되었고두 가지 모두 최신버전으로 업데이트 해주었다.npm install -g npm@latestnpx create-react-app my-app주의! npx로 설치할 경우 실행 되고 난..

TypeScript 공부일지: 열거형 타입(enumerable type)(enum)   ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️ 열거형 타입 (enumerable type)(enum)// enum 타입// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입// enum은 특별하게 컴파일 결과 사라지지 않음// 0이 관리자인지 일반유저인지 헷갈리는 경우가 있음 이럴때 enum type 사용enum Role { ADMIN = 0, USER = 1, GUEST = 2,}// 0,1,2 지정안해도 위에서부터 자동으로 0,1,2 순으로 지정됨// 만약에 ADMIN을 10으로 할당하면 자동으로 아래로 +1 씩 증가되면서 숫자 지정됨const uset1 = { ..

TypeScript 공부일지: 타입 별칭, 인덱스 시그니쳐  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️ 타입별칭// 타입 별칭 - 타입을 마치 변수처럼 정의해서 사용할 수 있음// 이러한 user가 많아질수록 타입 지정 코드 또한 많아짐type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};let user1: User = { id: 1, name: "은동혁", nickname: "동동이", birth: "1999.04.10", bio: "안녕하세요", location: "한국",};let user2: User = ..

TypeScript 공부일지: 객체  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️ 객체// object// 객체 리터럴 타입let user: { id?: number; name: string;} = { id: 1, name: "은동혁",};let dog: { name: string; color: string;} = { name: "돌돌이", color: "gray",};let config: { readonly apiKey: string;} = { apiKey: "MY API KEY",}; ❗️ 마무리객체 리터럴 타입을 배웠는데 변수마다 이런식으로 지정하면  코드가 길어질 것 같고 뒤로가서 더 공부할수록 가독성이 좋은 코드를 만들 수 있을것같다. 오늘..

TypeScript 공부일지: 배열과 튜플 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️ 배열let numArr: number[] = [1, 2, 3];let strArr: string[] = ["hello", "im", "winter"];let boolArr: Array = [true, false, true];// 배열에 들어가는 요소들의 타입이 다양할 경우let multiArr: (string | number)[] = [1, "hello"];// 다차원 배열의 타입을 정의하는 방법let doubleArr: number[][] = [ [1, 2, 3], [4, 5],]; ❗️ 튜플 // 길이와 타입이 고정된 배열let tup1: [number, number] = ..

TypeScript 공부일지: 원시타입  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 오늘부터는 내가 공부한 내용을 vscode에 작성해보고 포스팅 해보려고 한다 ❗️numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = NaN; ❗️stringlet str1: string = "hello";let str2: string = "hello";let str3: string = `hello`;let str4: str..

TypeScript 접근제한자(public, protected, private, readonly)   타입스크립트에는 접근 제한자(Access modifier)인 public, protected, private를 지원하며, 이를 통해 외부에서 특정 메서드나 프로퍼티에 접근 범위를 지정할 수 있다. ❗️publicpublic은 어디에서나 접근할 수 있으며 생략 가능한 default 값이다.class Greeter { public greet() { console.log("hi!"); }}const g = new Greeter();g.greet(); ❗️protectedprotected는 해당 클래스 혹은 서브클래스의 인스턴스에서만 접근이 가능하다.class Greeter { public greet..