connecting dots

코드를 작성한다는 것은 ?기계에 명령을 주는 것 --> 목적을 달성하기 위해서명령 --> 순서가 중요 !어떤 목적을 달성하기 위해 명령을 순서대로 나열하여 기계에 전달하는 것 = 알고리즘프로그래밍 = 알고리즘을 여러 개 짜는 것명령어 + 데이터 --> 무언가를 하겠죠 ?예제: 월급을 전송하는 알고리즘을 작성 (은행, 전송 방식, 금액)* ftp = 큰 파일 전송에 특화된 프로토콜   같은 목적을 수행하는 중복된 코드를 함수 (또는 프로시저)로 묶어서 재활용cf. 프로시저: 함수와 비슷하지만 값을 반환하지 않는 특징을 지니고 특정 작업을 수행함  조금 더 맥락을 가지고 복잡도가 높을 때 이걸 낮출 수 있는 방법은 없을까 ? --> 객체지향프로그래밍(OOP)클래스와 인스턴스 속성만 가지고 있음▼메소드도 가짐..

제어 컴포넌트과 비제어 컴포넌트1. 제어 컴포넌트리액트 상태로 입력 값을 관리하며 상태를 업데이트하여 입력 값을 제어함 1. 설명: • 상태(state)가 컴포넌트 내에서 관리됩니다. • 사용자가 입력 필드에 입력하는 모든 변화는 useState로 관리되는 상태를 통해 반영됩니다. • 예제 1에서 value={title}와 onChange 핸들러가 이를 관리합니다.  2. 장점: • 컴포넌트의 상태를 React에서 완전히 제어할 수 있습니다. • 입력 값에 대한 즉각적인 유효성 검사나 다른 로직을 쉽게 추가할 수 있습니다.  3. 단점: • 상태 업데이트가 빈번하게 일어나므로 더 많은 리소스를 소모할 수 있습니다. --> 제어 컴포넌트에서는 value와 onChange를 사용하여 상태를 관리합니다.사용자..

fetch 함수에서 옵션 넣기async function getTodos() { try { // await new Promise(resolve => setTimeout(resolve, 2000)) const res = await fetch( 'https://~~~~', { headers: { 'content-type': 'application/json', apikey: '~~~', username: '~~~' } } // 수강생 전용 정보는 '~~~'로 처리함 fetch('주소', { headers: {}, body: {}. method:..

팩토리함수(Factory Function)객체 데이터(참조형 데이터)를 반환하는 함수function getUser() { return { name: "John", age: 30, };}const user = getUser();console.log(user); // { name: 'John', age: 30 }console.log(getUser()); // { name: 'John', age: 30 }console.log(user.name); // Johnconsole.log(getUser().name); // John// 모든 함수는 호출되면 return으로 반환하는 값을 가지고 있다. 고차함수함수를 인수로 전달하거나(콜백함수) 반환값으로 사용하는 함수function useUser() { ..

함수 오버로딩두 함수를 하나로 만들어주려면 ? --> 기본적인 구조는 같지만 매개변수가 다를 때 오버로딩을 이용해서 두 함수를 하나로 만들어줄 수 있음 '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 상태는 빈 배열로 시작함...

Redux 알아보기- state: 데이터- action: 함수함수도 하나의 데이터이긴 함. 데이터 중 함수는 호출 가능호출을 해서 추가적인 명령을 실행하는 개념 동기 처리는1) 액션을 만들어서 데이터를 어떻게 변경할지 type(액션의 이름)과 payload(매개변수)로 설정한다.2) 필요한 곳에서 디스패치 액션을 호출한다.3) 액션(내부 로직으로)에서 상태를 업데이트할 수 있다.비동기 처리는1) 액션을 만들어서 데이터를 어떻게 변경할지 type(액션의 이름)과 payload(매개변수)로 설정한다.2) 필요한 곳에서 디스패치 액션을 호출한다.3) 액션(내부 로직으로)에서 상태를 업데이트할 수 있다.- fulfilled/rejected (무엇을 의미하는 것인지 등은 파악해야 함)만일 사용자가 버튼을 클릭하는..

타입스크립트 개발환경 구성npm install -g typescript = global로 typescript 설치하겠다 main.ts--> index.html에 연결 --> main.ts를 컴파일해서 main.js 만들어야 함 !주의) 컴파일할 때는 기본적으로 ES3 문법을 사용해서 컴파일하게 설정이 되어있음tsc main.ts  --> watch모드로 main.ts 파일에서 변경된 사항을 자동으로 main.js에 반영tsc main.ts -w  타입 단언(Type assertion)프로그래머가 컴파일러에게 내가 너보다 타입에 대해 더 잘 알고 있고, 나의 주장에 대해 의심하지 말라고 하는 것interface Foo { bar: number; bas: string;}var foo = {} as Foo..