분류 전체보기 (37) 썸네일형 리스트형 Zustand 사용 전역 상태 관리 패키지 1. src/stores/storeButton.jsx 생성 import { create } from "zustand"; const useButtonStore = create((set) => ({ count: 0, selectedButton: null, setSelectedButton: (button) => set({ selectedButton: button }), incrementCount: () => set((state) => ({ count: state.count + 1 })), removeCoutn: () => set({ count: 0 }), })); export default useButtonStore; - 오브젝트 형태의 전역 상태 useButtonStore은 변수와 함.. Axios로 서버에 http 요청 보내기 1. axios를 설치한 후 import한다. npm i axios import axios from "axios"; 2. 버튼에 event handler를 등록하고, 그 안에서 axios로 http 요청을 보낸다. // event handler const handleAdd = async () => { await axios.post("https://react-todo-server-donghwan.koyeb.app/add", { task, }); const result = await axios.get( "https://react-todo-server-donghwan.koyeb.app/get" ); console.log(result); setTodos(result.data); inputRef.current.v.. useRef 사용법 uesRef는 component의 entire lifetime동안 지속되는 object를 생성한다. (component의 unmount까지 유지된다.) 하지만 obejct의 current 속성을 이용해 변수의 값에 접근할 수 있다. useRef로 생성된 object는 state와 다르게 component의 re-render시에도 변하지 않는다. (re-render에 영향을 받지 않는다.) import { useState,useRef } from "react"; export default function MyComponent_19_1(){ const [count,SetCount] = useState(0) const countRef = useRef(0) let countVar = 0 const increme.. 구조분해할당을 이용한 배열 swap (Distructing assignment) - arr[1]과 arr[2]의 순서를 arr[2]와 arr[1]로 바꾼다 - arr의 0번째, 2번째, 3번째 원소를 집어 순서를 2, 0, 3으로 바꾼다. Array map과 filter 함수 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map((x) => x * 2); console.log(map1); // Expected output: Array [2, 8, 18, 32] JSX에서의 사용 예 {toDos.map((toDo, index) => ( {toDo} ✕ ))} ↑ array 요소들을 li element로 바꾸어 반환한다. (React는 li element 배열을 인식해 브라우저에 li들의 나열로 표시한다.) map 함수의 두 번째 인자는 index를 나타낸다. 배열의 각 li .. 비동기 처리 (2) - Promise 이후에 실행될 함수의 자리를 표시하는 Callback과 다르게 Promise는 생성자로 만든 Promise 객체 안의 내용을 바로 실행한다. 이 내용을 execute function이라 한다. const promise = new Promise((resolve, reject) => { // 비동기로 처리할 내용 resolve({ name: "SSS" }); reject(new Error("NETWORK ERROR")); }); console.log(promise); Promise의 state는 pending, fulfilled, rejected가 있으며 fulfilled인 경우 결과(data)를 resolve에, rejected인 경우 reject에 넣은 Promise 객체를 반환한다. setTimeOut.. 비동기 처리 (1) - Callback Javascript는 코드를 동기적으로 처리한다. 따라서 서버로부터 데이터를 받는 등 시간이 걸리는 코드는 뒤에 실행된다. 하지만 뒤에 실행되는 코드가 그 데이터와 관련이 있다면 적절하지 못한 결과가 나올 수 있다. function getData() { setTimeout(() => { console.log("Fetch API......"); return "213123121"; }, 2000); } let data = getData(); console.log(data); ↑ return이 늦게되고 data를 출력하는 코드가 먼저 실행되어 undefined가 출력된다. 이를 해결하기 위해 사용되는 것이 Callback Function이다. function getData(id, par, callback) {.. MySQL 기본 용어 Relation(Table) cardinality: tuple의 개수 degree(차수): 전체 attribute의 개수 Keys - Primary Key(PK): tuple을 대표할 수 있는 key (학번, id, ...) - null 값을 가질 수 없다. - Forien Key(FK): 현재 table에서 다른 table(부모 table)의 기본키를 참조할 때 해당 속성은 현재 table(자식 table)의 Forien Key가 된다. - 부모 table에 없는 값이 있을 수 있기 때문에 null 값을 가질 수 있다. 문법 select from where Example Query 1. emp table에서 2. job 속성의 값이 SALES인 tuple은 제외 3. job이 같은 값끼리 grou.. 이전 1 2 3 4 5 다음
