connecting dots

React Profiler로 성능 측정하기App.js A.js모든 요소를 하나의 컴포넌트에 코드 설명posts 배열을 순회하며 각 post 객체를 기반으로 리스트 항목()을 생성{posts.map((post) => { return ( {post.title} );})} 1. posts 배열:• posts는 객체 배열입니다. 각 객체는 블로그 포스트와 같은 데이터 항목을 나타내며, id와 title 속성을 가집니다.2. map 메서드:• map 메서드는 배열의 각 요소를 순회하며 콜백 함수에서 반환된 결과로 새로운 배열을 만듭니다.• posts.map((post) => { ... })는 posts 배열의 각 요소에 대해 콜백 함수를 실행합니다.3. 콜백 함수:• post는 post..

엔드포인트네트워크 통신에서 특정 리소스나 서비스를 접근할 수 있는 URL(Uniform Resource Locator)웹 개발에서 엔드포인트는 주로 API(Application Programming Interface)를 통해 서버와 클라이언트가 통신하는 데 사용됨 1. URL:• 엔드포인트는 URL 형태로 표현됩니다. 예: https://api.example.com/users• URL은 프로토콜(https), 도메인(api.example.com), 경로(/users)로 구성됩니다.2. HTTP 메서드:• 엔드포인트는 주로 HTTP 메서드와 함께 사용됩니다.• GET: 리소스를 조회합니다.• POST: 리소스를 생성합니다.• PUT: 리소스를 업데이트합니다.• DELETE: 리소스를 삭제합니다.• 예: G..

코드를 작성한다는 것은 ?기계에 명령을 주는 것 --> 목적을 달성하기 위해서명령 --> 순서가 중요 !어떤 목적을 달성하기 위해 명령을 순서대로 나열하여 기계에 전달하는 것 = 알고리즘프로그래밍 = 알고리즘을 여러 개 짜는 것명령어 + 데이터 --> 무언가를 하겠죠 ?예제: 월급을 전송하는 알고리즘을 작성 (은행, 전송 방식, 금액)* 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. 비즈니스 시스템의 도메인은 비즈니스) 문제를 충분히 이해하지 못하면 문제를 푸는 도구를 잘 만들 수 없음 비용 효율--> 시스템 구축 비용 + 시스템 운영 비용 환경에 따라 시스템 구축 비용은 크게 변화함 (항상 응용프로그램을 통한 문제해결이 실용적인 것은 아님) 테스트 코드란 ?도메인 지식 흐름 요구사항도메인 영역의 문제에 대한 시스템 영역의 해결책 (위 그림에서 오른쪽에서의 해결책)현재까지는 컴퓨터는 스스로 설계를 결정하지 않기 때문에 코더가 도메인 지식을 컴퓨터에 전달할 때엔 모든 요소들이 명확히 결정될 수 밖에 없음 --> 코더는 충분히 명확한 도메인 지식을 확보해야 함. 그렇지 않은 코더는 지식 흐름 상..