connecting dots

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

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

todo 리스트 만들기 실습input에 할 일 써서 추가버튼 누르면 리스트에 할 일 추가import { useState } from "react";function App() { const [todos, setTodos] = useState([]); const [todoText, setTodoText] = useState("");}const onChangeTodoText = (e) => { setTodoText(e.target.value); // target은 실제로 이벤트가 발생한 요소 = input 태그 // input type="text"는 value 속성을 가지고 있어서 value 속성을 통해 입력된 값을 가져올 수 있음};const onAddTodo = () => { // 새로운 배열 ..

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() { ..

소프트웨어 = 문제를 푸는 도구도메인 = 소프트웨어가 풀어야 할 문제가 정의되는 공간(ex. 비즈니스 시스템의 도메인은 비즈니스) 문제를 충분히 이해하지 못하면 문제를 푸는 도구를 잘 만들 수 없음 비용 효율--> 시스템 구축 비용 + 시스템 운영 비용 환경에 따라 시스템 구축 비용은 크게 변화함 (항상 응용프로그램을 통한 문제해결이 실용적인 것은 아님) 테스트 코드란 ?도메인 지식 흐름 요구사항도메인 영역의 문제에 대한 시스템 영역의 해결책 (위 그림에서 오른쪽에서의 해결책)현재까지는 컴퓨터는 스스로 설계를 결정하지 않기 때문에 코더가 도메인 지식을 컴퓨터에 전달할 때엔 모든 요소들이 명확히 결정될 수 밖에 없음 --> 코더는 충분히 명확한 도메인 지식을 확보해야 함. 그렇지 않은 코더는 지식 흐름 상..

예외 처리하기 실습 코드 설명 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 상태는 빈 배열로 시작함...

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