connecting dots

함수 오버로딩두 함수를 하나로 만들어주려면 ? --> 기본적인 구조는 같지만 매개변수가 다를 때 오버로딩을 이용해서 두 함수를 하나로 만들어줄 수 있음 'hello world' 출력하는 방법1. 매개변수에 직접적으로 type을 union으로 주는 방법 2. 함수 오버로딩을 이용한 방법 접근 제어자오류 발생--> 타입스크립트에서는 this로 접근하는 속성들을 위한 type을 class body에 넣어줘야 함↓ 1. public어디서나 접근 가능id, title 앞에 아무것도 안 써있으면 기본적으로 public 적용되어 있는 것 2. protected클래스 내, 상속 받은 자식 클래스에서 접근 가능 3. private클래스 내에서만 접근 가능 복잡한 코드 정리하기원래 코드 수정 코드여기서 public은 생략..

예외 처리하기 실습 코드 설명 export interface User { id: string name: string age: number isValid: boolean emails: string[] photo?: Photo} const [users, setUsers] = useState([]) const [message, setMessage] = useState('') useState([]): • useState 훅을 호출하여 초기 상태를 설정 • User[]는 TypeScript에서 제네릭(generic) 타입으로, users 상태가 User 객체들의 배열임을 명시 • []는 초기 상태값으로, 빈 배열을 의미함. 즉, 컴포넌트가 처음 렌더링될 때 users 상태는 빈 배열로 시작함...

원래라면 ....let name = 'apple store'let tv1 = { name: 'noona tv', price: 200, size: '56inch'}let tv2 = { name: 'ultra tv', price: 200, size: '27inch'}let tv3 = { name: 'grand tv', price: 200, size: '36inch'}// and so on ... --> tv가 추가될 때 마다 하나하나 만들어야 된다고 ???? 너무 번거롭고 실수 확률도 너무 높아 ... Class객체의 설계도(like 작업지시서)객체의 속성과 메서드를 정의함TV를 만들 때는 name, price, size 속성이 반드시 필요하다는 것을 명시class TV{ construc..

즉시실행함수(IIFE)익명함수를 ( )로 감싸고 그 전체를 바로 (호출)하는 방식--> 원래 익명함수는 호출할 수 없음 (이름이 없으니까). 이를 가능하게 해주는 방식 ! 세미콜론을 명령 뒤에 안 붙이는 경우에는 위쪽의 명령과 섞이지 말라는 의미로즉시실행함수 앞에 ';'을 붙여줌. 이렇게 하면 오류가 나지 않음  비동기 처리 용어 쉽게 이해하기상황: 빵을 사러 서울에서 1시에 출발 ! 사고 다시 서울로 돌아온 시간 9시 !1. 대기(pending)- 1시부터 9시까지, 출발해서 다시 돌아올 때 까지, 8시간동안의 시간이 대기상태 (기다리고 있는 것)- 가져오고 있는 중 (ing)- 도착했으면 대기 끝 2-1. 이행(fulfilled)- 빵을 잘 사왔으면 '빵을 사러 다녀오다' 미션이 제대로 이행됨 -->..

css와 module.css의 차이점 CSS (Cascading Style Sheets)CSS는 웹 페이지의 스타일을 지정하기 위한 언어입니다. HTML 요소의 레이아웃, 색상, 글꼴 등을 정의하는 데 사용됩니다. 특징  • 전역 범위: 기본적으로 CSS는 전역 범위입니다. 즉, 한 번 정의된 스타일은 전체 문서에서 적용됩니다. • 간단한 사용법: HTML 파일에서 태그를 사용하여 CSS 파일을 포함하면 됩니다. Hello, world!/* styles.css */.example { color: blue; font-size: 20px;}  CSS ModuleCSS Modules는 CSS를 모듈화하여, 각 모듈이 기본적으로 고유한 범위를 가지도록 하는 기법입니다. 이를 통해 CSS의 전역 범위 문제..

리액트에서 불변성이란 ?한 번 값이 설정되면 그 값을 변경할 수 없는 성질사전적 의미: 값이나 상태를 변경할 수 없는 것 자바스크립트를 통한 불변성 의미 살펴보기원시타입: Boolean. String, Number, null, undefined, Symbol (불변성을 가짐 - 값을 변경할 수 없음)참조타입: Object, Array, 함수(불변성을 가지지 않음 - 값을 변경할 수 있음) 메모리에서의 불변성자바스크립트는 원시 타입과 참조 타입을 다르게 저장합니다.  1. 원시 타입: • 원시 타입 값은 Call Stack이라는 메모리 공간에 저장됩니다. • 예: let age = 30; 여기서 age는 Call Stack에 30이라는 값으로 저장됩니다.  2. 참조 타입: • 참조 타입 값은 Heap이라..

구조분해할당이란 ? (ES6)배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식clean code를 위해 ! 1. 객체 구조분해할당 = - 깊게 들어간 객체 구조분해할당 2. 배열 구조분해할당

useState와 UseEffectuseState와 useEffect는 React 훅으로, 각각 상태(state)와 사이드 이펙트(side effect)를 관리하는 데 사용됩니다.1. useStateuseState는 함수 컴포넌트에서 상태를 관리하기 위해 사용됩니다.이는 컴포넌트가 상태를 가지고 있고, 이 상태가 변경될 때 컴포넌트를 다시 렌더링할 수 있게 합니다. 예제import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 상태 변수와 그 상태를 변경하는 함수 return ( Count: {count} setCount(count + 1)}>Incr..