number과 index 모두 넘겨주는 방식을 사용하였다. key는 식별을 위해 필요한 내용이다. console.clear();import React, { useState } from "https://cdn.skypack.dev/react@18";import ReactDOM from "https://cdn.skypack.dev/react-dom@18";const App = () => { const [number, setNumber] = useState(1); const [recordNums, setRecordNums] = useState([]); const increaseNum = () => { setNumber(number + 1); }; const decreaseNum = () => { if (n..

abs(숫자)숫자의 절대값을 계산한다.SELECT ABS(-100)CEILING(숫자), FLOOR(숫자), ROUND(숫자)순서대로 올림, 내림, 반올림으로 계산한다. CELING()은 CEIL()과 동일하다. SELECT CEILING(4.7), FLOOR(4.7), ROUND(4.7); MOD(숫자1, 숫자2) 또는 숫자1 % 숫자2 또는 숫자1 MOD 숫자2숫자1을 숫자2로 나눈 나머지 값을 구한다. SELECT MOD(157,10), 157% 10, 157 MOD 10; RAND()0이상 1미만의 실수를 구한다. 'mSELECT RAND(), FLOOR(1 + (RAND() * (7-1))); SIGN(숫자)숫자가 양수, 0, 음수인지를 구한다. 결과는 1, 0, -1 셋 중에 하나를 반환한다...

useState의 인수로는 사용할 초기값을 넘겨준다. 아무런 값도 없으면 underfined가 나온다. useState의 반환값은 배열이다. 첫번째 원소로 state를 사용할 수 있고, 두 번째 원소인 setState 함수를 사용해 state값을 변경할 수 있다. import {useState} from 'react'const [state, setState] = useState(initialState) 아래는 숫자를 증가시키는 기능을 useState를 이용해서 적용하였다. React는 return값을 비교해서 렌더링이 되기 때문에 자동으로 적용되지 않아 useState를 이용해야만 했다.  숫자 증가 기능console.clear();import React, { useState } from "https:/..

리액트에서 css 사용하기style = {{ }} 안에 내용을 삽입하면 되는데 key:value 형식으로 값을 넣는다. css와 달리 각 요소는 ;가 아니라 쉼표(,)로 구분하고, 값은 따옴표("")로 묶여야 한다.const Square = () => { return ( 정사각형 );};const Circle = () => { return 원;};const App = () => { return ( );};ReactDOM.render(, document.getElementById("root"));  테일윈드 사용하기클래스 이름을 적용하면 테일윈드도 사용 가능하다. const Square = () => { return ( 정사각형 );};

MVC이전에는?웹 개발은 크게 두 가지 방법으로 만드는 것이 가능하다. 하나는 Servlet이고, 또 하나는 JSP이다. Servlet은 자바코드를 사용할 수 있어서 장점(예를 들어 상속같은)이 있지만, HTML 코드를 작성하면 직관성이 떨어진다는 단점이 있다.  그래서 JSP을 통해서 이를 보완할 수 있다. 실제로 재사용을 하지 않는다는 가정 하에는 JSP의 개발 속도는 상당히 빠르다. 하지만 JSP에 모든 코드를 다 집어넣으면 복잡성이 높아지고 보안에도 문제가 발생할 수 있다. 특히 버전업을 하면서 파일 이름을 바꾸게 된다면 사용자들에게 변경된 URL을 매번 알려주어야 한다.  MVC란?MVC는 이를 해결하기 위해 Controller, View, Model을 나누어 개발하는 방식이 사용되기 시작했다...

리액트에서 함수 선언function Component(props){ return {props.hello}} 함수 선언문함수 선언할 때에 가장 일반적인 방법은 아래이다.function add(a,b) { return a + b} 함수 표현식function로 시작해 }로 끝나는 부분이 함수를 정의한 부분이다. 함수 표현식에서 코드의 혼란을 방지 하기 위해 함수의 이름을 생략하는 것이 일반적이다. const sum = function (a,b) { return a + b}sum(10,24) 함수 선언문과 표현식은 호이스팅에서 차이가 있다. 함수 표현식은 호이스팅 되는 시점에 underfined로 초기화된다. 반면에 함수 선언문은 어디서든 에러없이 수행한다.  화살표 함수ES6에서 추가된 함수 생성 방식이다...