글쓰는 개발자

리액트에서 useState 함수를 사용하면 value와 set 함수 두개를 얻을 수 있다. const [value, setValue] = useState('초기화값'); 이때 setValue를 통해 값을 변경하면 value값은 리렌더링 되어 UI에 표시된다. 근데 이 value에 들어간 값이 int나 string 같은 값이 아니라 오브젝트 혹은 array일 경우에는 그 값을 변경하고 set함수를 호출해도 UI에 값이 변경되지 않는다. const [array, setArray] = useState(['a', 'b']);array.push('c');setArray(array); // 여전히 화면에는 a와 b밖에 보이지 않는다. React는 useState로 만들어진 변수들을 계속 감시를 하고 변경을 감지하면..

https://gran007.tistory.com/entry/Reactreact-native-Redux-%EC%89%BD%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-23 [React/react-native] Redux 쉽게 사용하기 (2/3)https://gran007.tistory.com/entry/Reactreact-native-Redux-%EC%89%BD%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-12 [React/react-native] Redux 쉽게 사용하기 (1/2)React의 상태관리는 useState를 사용해 이루어 진다.import { useState } frgran007.tistory.com 리듀서 자동화 ..

React의 상태관리는 useState를 사용해 이루어 진다.import { useState } from 'react';function Home() { const [text, setText] = useState('hello'); return ({text})}하지만 useState를 사용한 상태값의 경우 해당 페이지를 상속하는 페이지까지만 해당 변수를 공유할수 있으며 모든걸 컴포넌트화 시켜서 관리하는 React의 특성상 이러한 변수를 여러개 만들어 아래로 계속해서 변수를 넘기게 되면 개발 복잡도가 기하급수적으로 늘어날 수 밖에 없다. 따라서 페이지 최상단에 몇개의 변수를 등록해 두고 이를 사용하는 곳에서 값이 변경될 때마다 페이지를 리로딩 할수 있도록 redux등의 상태 관리 방식을 개발했다. 유일한 상태..

이번에는 react web을 생성하고 spring boot용 jar 파일을 생성해 실행해 본다. 터미널을 열고 프로젝트의 src/main 폴더에 들어간다. cd src/main 다음 세가지 방법중 한가지를 사용해서 react app을 시작한다. 새로 만드는 앱의 이름은 webapp으로 한다. npx create-react-app webapp npm init react-app webapp yarn create react-app webapp 그러면 src/main/webapp 폴더가 생성된다. webapp 폴더에 들어가서 생성된 react 앱을 다음 명령어를 통해 실행한다. (yarn이 설치되어 있지 않으면 설치해주자) yarn start 그러면 다음과 같이 react app 이 3000 포트로 실행된다 이..

React 프로젝트를 생성해서 spring boot 프로젝트로 배포하는 방법에 대해서 알아보자. 이번 프로젝트에서는 사용자가 생성한 https를 사용하는 spring boot 서버를 생성한다. 1. Spring Boot 프로젝트 생성 IntelliJ를 실행한다. 상단 메뉴의 File - New - Project를 선택해서 새로운 프로젝트를 생성한다. 좌측 프로젝트 종류는 Spring Initializer를 선택하고 next 버튼을 클릭한다. group과 artifact를 원하는 대로 설정하고 type을 Gradel Project로 선택한다. 좌측 메뉴에 web을 선택하고 Spring Web Starter를 선택하고 다음을 선택한다. 프로젝트 이름과 위치를 정하고 Finish 버튼을 선택한다. gradle..

1. 변수 선언하기 ES6 이전에는 var 키워드가 변수 선언을 위한 유일한 방법이었다. ES6이후로 더 나은 기능을 제공하는 몇가지 방법이 추가되었다. 1.1 const 상수는 값을 변경할 수없는 변수다. var로 선언한 변수와 비교해서 보자. var isChangable = true isChangable = false console.log(isChangable) // false 상수값은 변경이 불가하다. 따라서 선언된 값을 변경하려는 시도는 에러가 발생한다. const isNotChangable = true isNotChangable = false 1.2 let 자바 스크립트도 렉시컬 스코프(일정 영역내에 선언되는 변수)를 지원한다. 자바스크립트는 중괄호 { }를 사용해 코드 블록을 만든다. 함수의 ..