전체 글
-
React 기초 - useState 함수Framework & Library/React 2021. 9. 22. 18:13
useState 함수의 사용 이유 function App() { let number = 1; const add = () => { number++; console.log(number); }; return ( 숫자 : {number} 더하기 ); } export default App; ㆍ 리액트는 일반적인 변수의 변경에는 렌더링이 되지 않는다. 따라서, 화면상에서는 number의 값이 1로 계속 유지된다. function App() { const [number, setNumber] = useState(1); const add = () => { setNumber(number + 1); console.log(number); }; return ( 숫자 : {number} 더하기 ); } export default..
-
React 기초 - 깊은 복사 함수Framework & Library/React 2021. 9. 22. 18:05
깊은 복사 함수의 사용 이유 ㆍ 자식 태그도 다시 렌더링을 해야 하는지 확인하는 연산의 최적화를 위해 사용한다. → 깊은 복사는 레퍼런스만 비교하기 때문에 효율적 spread 연산자 const a = [1, 2, 3]; const b = [...a]; // a의 값을 b 변수에 복사 b.push(4); // b의 값 변경 const c = [0, ...a, 4]; console.log(`a의 값은 ${a}`); // 1, 2, 3 출력 console.log(`b의 값은 ${b}`); // 1, 2, 3, 4 출력 console.log(`c의 값은 ${c}`); // 0, 1, 2, 3, 4 출력 concat 연산자 const a2 = [1, 2, 3]; const b2 = a2.concat(4); con..
-
React 기초 - React란?Framework & Library/React 2021. 9. 22. 17:58
React란? React란? ㆍ React는 데이터 변경을 감지해서 UI가 자동으로 업데이트되도록 하는 프레임워크이다. → Observer 패턴이라고 함 ㆍ 데이터 변경 감지를 위한 엔진이 필요하다. → node.js 서버를 사용 npm과 npx ㆍ npm과 npx는 의존성 관리 도구로, 자바로 비유하자면 maven, gradle과 같은 역할이다. ㆍ npm : 프로젝트 개수만큼 로컬에 다운로드한다. ㆍ npx : 다운로드한 라이브러리를 재사용하며, 해당 라이브러리가 없을 시 다운로드한다. React의 특징 ㆍ JavaScript 문법 안에 HTML 문법 사용이 가능하다. → JSX 문법이라고 함 ㆍ React에서 페이지 전환이란 Body의 내용을 변경하는 것이다. → Single Page Applica..
-
Java GUI 환경에서 작동하는 계산기Projects/Toy Projects 2021. 9. 22. 14:42
프로젝트의 목적 ㆍ GUI 환경에서 작동하는 프로그램의 이해력을 높인다. ㆍ 윈도우 프로그램의 구현 방법을 터득한다. ㆍ 스택 자료구조를 이용하여 우선순위 연산을 구현한다. 프로젝트의 내용 ㆍ 사칙연산이 가능한 계산기를 구현한다. ㆍ 계산기의 추가적인 기능을 구현한다. 프로젝트의 기능 ㆍ 사칙연산의 기능 ㆍ 추가적인 연산(제곱, 루트, 나머지 등)의 기능 ㆍ 우선순위 연산의 기능 ㆍ 수식 지우기 기능 ㆍ 실수형 수식의 표현 기능 윈도우의 설계 Frame의 구현 JFrame frame = new JFrame("★Calculator★"); frame.setPreferredSize(new Dimension(450, 500)); frame.setLocation(250, 250); Container content..