쿵스보이

1. 부트 스트랩을 사용 하기 위한 react-bootstrap를 install한다. npm install react-bootstrap bootstrap Stylesheets 중요 - 최상단의 루트파일인 src/index.js 또는 App.js 파일에 다음 스타일을 추가해줍니다. import 'bootstrap/dist/css/bootstrap.min.css'; 만약 추가하지 않는다면 부트스트랩의 스타일은 적용되지 않습니다. 아래의 사이트를 찾아가 쓸만한 컴포넌트를 찾아 본다. https://react-bootstrap.netlify.app/getting-started/introduction/ React-Bootstrap The most popular front-end framework, rebuilt ..

1. 리액트에서 URL 값에 따른 View를 보여주는 라우터를 제공. 2. React Router Don 사용 방법. npm i react-router-dom 3. Link 사용법 Link 와 같은 태그를 사용할 경우에도 위와 동일한 결과가 나오겠네? 아니, 사용하면 안 된다. Route를 사용하는 이유는 현재 페이지에서 상태를 유지하면서 바뀐 주소에 따라 바뀐 화면만 보이고 싶을 뿐인데, a태그를 사용할 경우, 상태가 전부 날라가버린다. 또 기존의 렌더링된 컴포넌트를 다 날려버리고 처음부터 렌더링이 진행된다. 위에서 썼던 이 부분을 기억하자. HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해준다.(즉, 페이지 변경으로 인한 깜빡거림이 없다.) 이 부분..

첫번째 사용하는 경우 //useRef 변화는 감지해야 되지만, 렌더링은 하고 싶지 않을때. //useRef 변화는 감지해야 되지만, 렌더링은 하고 싶지 않을때. function RefTest() { const [count,setCount] = useState(0); const countRef = useRef(0); console.log(countRef); console.log("호출되고 있음"); const increaseCountState = () =>{ setCount(count +1); }; const increaseCountRef = () =>{ countRef.current = countRef.current + 1; }; return ( State :{count} Ref :{countRef.cu..

빈배열 일때는 1. 타이머 했다면 타이머 정리, 구독을 했다면 구독 정리, 리스너를 등록 했다면 리스너 정리. 예제) import { useRef, useState,useEffect } from "react"; const UseEffectExample = () => { const [name, setName] = useState(""); const [count, setCount] = useState(0); const handleChangeName = (e) => setName(e.target.value); const handleCountUp = () => setCount(count + 1); // name이 바뀔 때만 실행 useEffect(() => { console.log("name 렌더링!"); co..

create table mvc_board( bId NUMBER(4) PRIMARY KEY, bName VARCHAR2(20), bTitle VARCHAR2(100), bContent VARCHAR2(300), bDate DATE DEFAULT SYSDATE, bHit NUMBER(4) DEFAULT 0, bGroup NUMBER(4), bStep NUMBER(4), bIndent NUMBER(4) ); commit; create sequence mvc_board_seq;

Material theme Material icon theme Prettier bracket pair colorizer Indent-rainbow Auto rename tag CSS PEEK 43 - HTML CSS SUPPORT LIVE SERVER 1. Material Theme 2. Material Icon Theme 3. Prettier - Code formatter 4. Bracket Pair Colorizer 5. Indent Rainbow 6. Auto Rename Tag 7. CSS Peek 8. HTML CSS Support 9. Live Server 10. Markdown Preview (VSCode 기본설치?) 간략히

1.props 와 state 의 차이 - props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 - state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. 위의 값들의 변화는 Rendering 의 대상이 됨 2.Hook 이란? 클래스형 컴포넌트의 복잡함을 극복하고, 좀더 함수형 컴포넌트로 사용 할수 있도록 재사용성을 높임. 2. Hook API 기본 Hook useState useEffect useContext useRef 추가 Hooks useReducer useCallback useMemo useImperativeHandle useLayoutEffect useDebugValue

자바의 경우 new 를 통하여 객체 생성 class Student{ int age; String name; } Student student = new Student(); 객체 기반 언어인 자바스크립트에서는 다양한 방법으로 객체를 생성할 수 있다. 객체 리터럴 1. Object 생성자 함수 2.생성자 함수 3.Object.create 메서드 4. 클래스(ES6) 1. 객체 리터럴 방식(Object Literal) 객체 리터럴은 중괄호 안에 프로퍼티를 정의하여 객체를 생성 var obj = { key: value, ... } : 변수처럼 객체를 생성하는 방식으로, 중괄호 { } 안에 key:value를 쉼표(,)로 구분하여 만든다. 약 중괄호 안에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다. 클래스를 정..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. var people = [ { name: "Mike Smith", family: { mother: "Jane Smith", father: "Harry Smith", sister: "Samantha Smith" }, age: 35 }, { name: "Tom Jones", family: { mother: "Norah Jones", father: "Richard Jones", brother: "Howard Jones" }, age: 25 } ]; for (var {name: n, family: { father: f } } of people) { console.log("Name: ..

1. 기본 설치 라이브러리 -spring boot devtools -lombok -spring web