만자의 개발일지

기존의 Node.js + ejs/html 을 사용하는 경우 서버에서 일일이 파일을 라우팅 해줘야했다면 리액트와 Node.js를 같이 사용하게 되면 라우팅은 리액트단에서 처리해 줄 수 있습니다. 그러면 서버에서는 리액트에서 빌드된 파일 하나만 라우팅 해주면 되고, DB 입출력 코드만 구현해주면 됩니다. 간단한 예제를 통해 알아보도록 하겠습니다. Node.js는 깔려있다는 가정하에 진행하도록 하겠습니다. Node.js 프로젝트 생성 우선 Node.js 프로젝트를 생성해줍니다. IDE는 웹스톰을 사용하도록 하겠습니다. New Project -> 프로젝트 이름 지정 -> Create 버튼을 눌러 프로젝트를 생성해줍니다. 그 다음 터미널을 열어 express 프레임워크를 설치하기 위해 다음과 같이 명령어를 입력해..

리액트를 하다보면 터미널에서 무수한 eslint 에러 코드를 볼때가 있을것이다. App.js 파일에 다음과 같은 주석문을 추가해준다. /* eslint-disable */

State State는 리액트에서 앱의 유동적인 데이터를 다루기 위해 있는 객체입니다. 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState() 라는 리액트 함수를 사용하여 State라는 저장공간에 담아 사용합니다. State를 사용하는 이유 State는 변경되면 자동으로 재렌더링 된다. (변수는 변경되어도 자동 재렌더링이 안됨) State 동작 원리 import {useState} from 'react'; let [state, setState] = useState('State'); // ES6 destructuring React 라이브러리에 있는 useState()함수를 통해 state를 사용할 수 있습니다. useState()를 실행시키면 초기값으로 설정해 놓은 sta..

Creac React App 리액트 웹 개발환경 셋팅 Node.js 최신 버전 설치 웹스톰 최신 버전 설치 웹스톰에서 터미널을 열고 아래와 같은 코드를 입력해줍니다. npm install -g create-react-app npx create-react-app -g 옵션은 패키지를 전역으로 설치하겠다는 의미입니다.