connecting dots

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

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 = () => { // 새로운 배열 ..

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

hot module replacement모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거함실행 중인 상태의 코드의 변경 된 부분을 바꿔치기하는 것 copilot said ...Hot Module Replacement(HMR)는 리액트 개발에서 코드가 변경될 때 페이지를 새로 고치지 않고도 변경된 내용을 바로 반영해주는 기능이에요. 이 기능 덕분에 개발자가 코드 수정 후 저장할 때마다 페이지를 새로고침하지 않아도 변경된 내용을 즉시 볼 수 있어요.Vite는 기본적으로 HMR을 지원해요. 추가 설정 없이도 바로 사용할 수 있어요.비유로 설명하기한번 상상해보자. 네가 그림을 그리는 중이라고 생각해보자. HMR이 없다면, 색깔을 조금 바꿀 때마다 종이를 새로 갈아야 하는 상황이..

--> 함수형 컴포넌트와 클래스 컴포넌트는 App.js에서 불러오는 것은 같지만 모양이 다름 !클래스는 복잡하지만 다양한 기능을 제공함. 대표적인 기능이 상태 ! (함수형 컴포넌트는 지원하지 않음) 클래스 컴포넌트함수형 컴포넌트상태지원미지원요즘 거의 안 씀리액트가 함수형 컴포넌트에서도상태를 사용할 수 있는 방법을 만들어줌  - 상태(state)많은 데이터 중에 값이 변하는 것, 앱이 실행하고 나서 상황, 시간의 흐름 등에 따라 값이 변하는 것  --> onIncrement 잘 호출되고 숫자도 올라가는데 화면의 숫자는 여전히 1 ?--> 함수를 호출하는게 없고 마크업 처럼 쓴 것도 호출이 아님. 리액트에게 넘겨주는 것임      버튼 클릭 시 정상적으로 숫자 증가    --> 최근에 들어서는 클래스 컴포넌..

type FooterProps = { message: string color?: 'blue' | 'red' | 'green' | 'yellow" // 또는}type HeaderProps = { title: string size?: 'small' | 'medium' | 'large' color?:'blue' | 'red' | 'green' | 'yellow"}function Header(props: HeaderProps) { return ( {props.title} )}function App() { return ( // 오류 발생, color에는 black이 들어갈 수 없음 ! )}vite: 간단해서 많이 사용↓webp..

컨택스트(context)_this상황에 따라 this가 가리키는 것이 무엇인지 맥락 파악해야 함 1. this는 객체이다2. this가 전역 공간에 있을 때는 전역 공간(window 객체)를 가리킴--> this === window3. 실행 맥락(excute context)으로 this를 연결한다.4. 실행 시 소유자 확인이 안되면 this는 전역 객체에 연결된다. const obj = { id: 1, getId: function () { return this.id; } // this는 obj를 가리키고 있음.};console.log(this.id) // window에 id가 없는 것과 같음console.log(obj.id)console.log(obj.getId())// method를 호출하는..

import / export여러 개의 자바스크립트 파일의 특정한 변수/함수를 가져다 쓰기 위함 script.jsimport sum from './cal.js'// import * as cal from './cal.js' : default없을 때, 다 가져올래, 이름을 줄수 있음// 내가 만든 건 ./로 경로 지정을 해줘야 하지만 node_modules에 있는 것은 경로지정 안해줘도 됨const result = sum(100, 200);// const result = cal.sum(100, 200);console.log(result) cal.jsexport function sum(a, b) { return add(a, b);}export default function div(a, b) { return ..