수박쓰

Form React에서 Form을 만들기 위해서는 일반 HTML Form과 유사한 방식으로 작성하면 다. React Form은 state를 사용하여 입력값을 관리하고, 입력값의 유효성을 검사하거나 전송을 처리할 수 있다. React에서 Form을 만들기 위한 단계 state에 입력값을 저장하기 위한 변수를 만든다. Form 요소를 만든다. 이때, input 요소는 value 속성을 통해 state에 저장된 값을 가져와 출력한다. 입력값이 변경될 때마다, onChange 이벤트를 통해 state를 업데이트한다. Form 요소의 onSibmit 이벤트를 처리하여 입력값의 유효성 검사나 전송을 처리함 fetch() React에서 데이터를 가져오기 위해서는 JavaScript의 fetch() 함수를 사용한다. ..

스케줄링의 개요 CPU 스케줄러는 프로세스가 생성된 후 종료될 때까지 모든 상태 변화를 조정한다. CPU 스케줄러의 작업을 레스토랑 관리자의 역할에 빗대어 이해해 보자 1. 레스토랑 관리자의 스케줄링 주방과 홀이 분뢰된 레스토랑에서는 요리사가 홀 상황을 알기 어려우므로 주문을 받거나 대기자를 관리하는 업무는 레스토랑 관리자가 도맡는다. 레스토랑 관리자는 그 외에도 여러 역할을 담한다. 운영체제에서 이러한 레스토랑 관리자의 역할을 담당하는 것은 CPU 스케줄러이다. 스케줄링은 여러 프로세스의 상황을 고려하여 CPU와 시스템 자원을 어떻게 배정할지 결정하는 일을 말한다. 2. CPU 스케줄링 CPU 스케줄링은 규모에 따라 고수준 스케줄링, 중간 수준 스케줄링, 저수준 스케줄링으로 구분된다. 고수준 스케줄링 ..

onChange란? 사용자가 input, select, textarea 등의 폼 요소에 값을 입력하거나 선택할 때 발생한다. 이 이벤트를 사용하여 사용자 입력에 따라 리액트 컴포넌트의 상태(state)를 업데이트할 수 있다. input 요소에서 onChange 이벤트를 사용하는 방법은 다양하다. 일반적으로 input 요소의 값이 변경될 때마다 이벤트가 발생하며, event.target.value를 통해 변경된 값에 접근할 수 있다. 이를 활용하여 사용자 입력에 따라 리액트 컴포넌트의 상태를 업데이트할 수 있다. import { useState } from 'react'; function InputExample() { const [value, setValue] = useState(''); function ..

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. State Props 유스케이스 뷰에 렌더링돼야 하는 컴포넌의 데이터를 저장하는데 사용 데이터, 이벤 핸들를 자식 컴포넌에 전달하는 데 사용 가변성 상태는 데이터를 보유하고 시간이 지남에 따라 변경될 수 있음 props는 바뀔 수 없음. 한번 설정되면 props를 변경할 수 없음 업데이트 이벤트 핸들러는 일반적으로 state를 업데이트 함 상위 컴포넌트는 하위 컴포넌트에 대한 p..

프로세스란? 운영체제에서 프로세스는 하나의 작업 단위이다. 예) 사용자가 마우스를 더블클릭하여 프로그램을 실행하면 그 프로그램은 프로세스가 된다. 또 실행을 위해 메모리에 올라온 동적인 상태이기도 하다. 프로그램에서 프로세스로의 전환 프로그램과 프로세스의 관계 프로그램이 프로세스가 되었단 것은 운영체제로부터 프로세스 제어 블록(PCB)을 받았다는 의미이다. 프로세스가 종료된다는 것은 해당 프로세스 제어 블록이 폐기된다는 뜻이다. 더보기 프로세스 = 프로그램 + 프로세스 제어 블록 프로그램 = 프로세스 - 프로세스 제어 블록 프로세스의 상태 운영체제에서는 여러 가지의 이유로 프로세스의 상태가 변한다. 프로세스가 네 가지 상태 생성 상태: 프로세스가 메모리에 올라와 실행 준지를 완료한 상태이다. 준비 상태:..

1. map 1-1.map이란? map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수이다. 1-2.문법 - arr.map(callbackFunction(currenValue, index, array), thisArg) 1) callbackFunction : 새로운 배열의 요소를 생성하는 함수로서 다음 세가지 인수를 갖는다. ㆍcurrenVlaue : 현재 배열(arr) 내의 값들을 의미 ㆍindex : 현재 배열 내 값의 인덱스를 의미 ㆍarray : 현재 배열 2) thisArg(선택항목) : callback 함부 내부에서 사용할 this 레퍼런스 를 설정한다. map 함수 사용 예 const numbers = [1, 3, 5..

1. Props(프로퍼티)란? - 상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용 - 프로퍼티는 수정할 수 없다는 특징이 있음(읽기 전용 데이터) - props에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 2. Props(프로퍼티) 사용하기 1. App.js에서 Test.js에 값 전달 2. App.js에서 출력할 글 작성 3. index.js에서 출력 App.js export default function App() { return ( ); } Test.js export default function Test(props) { return ( Hello, This is {props.이름} My MBTI is {props.mbti} My age ..

1. Collection Framework란? 우선 배열을 사용하다보면 여러가지 비효율적인 문제가 발생하는데 그 중에서 가장 큰 문제는 크기가 고정이라는 것이다. 배열의 크기는 생성할 때 결정되며 그 크기를 넘어가게 되면 더이상 데이터를 저장할 수 없고, 또 데이터를 삭제하면 해당 인덱스의 데이터는 비어있어 메모리가 낭비되는 등 여러 문제점들이 발생한다. 이런 문제를 해결하기 위해 사용되는 것이 바로 컬렉셕 프레임워크이다. 컬렉션 프레임워크는 데이터를 저장하고 처리하는 자료구조와 알고리즘 구조화하여 클래스로 구현해 놓은 것으로써, 자바의 인터페이스를 사용하여 구현된다. 컬렉션 프레임워크를 활용하면 객체 지향적이고 재사용성이 높은 코드를 작성할 수 있다. 2. Collection Framework의 주요 ..

React란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. import {createRoot} from "react-dom/client" const rootElement = document.getElementById("root") const root = createRoot(rootElement) root.render( Hi bye ) 이 위의 코드는 리액트로 Hi를 출력하는 코드이다. 'Hi'를 제외하고 모든 문장들은 리액트의 기본 구조이니 외워두도록 하자. import {createRoot} from "react-dom/client" const rootElement = document.getElementById("root") const root = createRoot(r..

Destructing destructing: 배열이나 객체의 속성을 해체하 그 값을 변수에 담을 수 있 하는 ES6 문법 const player = { name: 'Kyle', club: 'None', address: { city: 'La' } } player 안의 내용들을 출력하기 위해서는 console.log(player.address.name, player.address.club, player.address.city) 라는 출력 구문이 필요하다. 하지만 이 코드는 길고 비효율 적이다. 이것을 해결하기 위해 destructing 문법을 사용한다면 출력을 구문을 훨씬 간단하게 사용할 수 있다. const { name, club, address: {city}} = player console.log(nam..