점 표기법(정적속성) 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 메서드만을..

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] = ..