TypeScript 공부일지: 계층도 살피기 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️계층도 살피기/** * Unknown 타입 - 모든 */function unknownExam() { let a: unknown = 1; // Up Cast로 가능, 반대로 Down Cast는 불가능 let b: unknown = "hello"; let c: unknown = true; let d: unknown = null; let e: unknown = undefined; let unknownVar: unknown; // let num: number = unknownVar; // let str: string = unknownVar; // let bool: bool..

TypeScript 공부일지: 타입 호환성  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️타입 호환성// 타입은 집합이다// 타입호환성 - 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것// ex) number type --->(x) number literal type// number type

TypeScript 공부일지: void, never  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️voidvoid -> 공허 -> 아무것도 없다.void -> 아무것도 없음을 의미하는 타입// 리턴값 타입 지정 가능function func1(): string { return "hello";}function func2() { console.log("hello");}let a: void;// a = 1;// a = "hello";a = undefined; ❗️nevernever -> 존재하지 않는불가능한 타입// while (true) {}

TypeScript 공부일지: any, unknown  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️any특정 변수의 타입을 우리가 확실히 모를때 사용let anyVar: any = 10;anyVar = "hello";JS처럼 타입 상관없이 아무 값이나 담게 하려면 any type 사용anyVar = true;anyVar = {};anyVar = () => {};anyVar.toUpperCase();anyVar.toFixed();let num: number = 10;num = anyVar; ❗️unknownlet unknownVar: unknown;unknownVar = "";unknownVar = 1;unknownVar = () => {};num = unknownVa..

점 표기법(정적속성) vs 대괄호 표기법(동적속성)    ❗️상황 공부를 하면서 문득 이렇게 작성한 코드를 보고 점 표기법으로 작성을 안하는 이유가 뭐지 하고 의문이 들었다.export default function App() { const [order, setOrder] = useState("createdAt"); const sortedItems = items.sort((a, b) => b[order] - a[order]); /.../ } ❗️공부하고 깨달은 점 점 표기법으로 접근하려면 속성 이름이 고정된 경우에만 사용할 수 있습니다.예를 들어, b.order와 같이 접근하는 경우에는 order가 객체의 정적 속성이어야 합니다. 그런데 지금 코드는 order값이 상태 값으로 동적으로 설정되어..

e.target 속성들    ❗️e.target은 이벤트가 발생한 요소를 나타내는 객체다!이벤트의 종류에 따라 e.target 객체의 속성은 다를 수 있지만, 일반적으로 다음과 같은 속성들이 포함될 수 있습니다:nodeName: 요소의 태그 이름을 나타냅니다.nodeType: 요소의 노드 유형을 나타냅니다.tagName: 요소의 태그 이름을 나타냅니다.value: 입력 요소에서 사용자가 입력한 값(텍스트, 체크 상태, 선택된 옵션 등)을 나타냅니다.name: 입력 요소의 이름을 나타냅니다.type: 입력 요소의 타입을 나타냅니다.checked: 체크 박스나 라디오 버튼의 체크 상태를 나타냅니다.selected: 선택된 옵션 요소인지 여부를 나타냅니다(선택 상태인 경우 true).id: 요소의 고유 식별자..

객체 리터럴 중복 허용   ❗️상황export default function ReviewForm() { const [values, setValues] = useState({ title: "", rating: 0, content: "", imgFile: null, }); const handleChange = (name, value) => { setValues((prevValues) => ({ ...prevValues, [name]: value, })); }; /.../여기서 prevValues에는{ title: "", rating: 0, content: "", imgFile: null,}이 객체 리터럴이 들어갈 거고[nam..

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 메서드만을..