React

리액트 설치 리액트 홈페이지 : https://reactjs.org 다운로드 Node.js Visual Studio Code Node.js Chrome V8 JavaScript 엔진(V8 Engine)으로 빌드된 JavaScript 런타임 자바스크립트를 웹 브라우저 영역 외에 서버, 모바일 애플리케이션, 데스크탑 애플리케이션 등 영역에서 사용 가...

자바스크립트 라이브러리 / 프레임워크 자바스크립트 라이브러리와 프레임워크 필요성 웹 애플리케이션에서 유저 인터페이스 동적 처리 시 각 돔 엘리먼트 작업 필요 `getElementById()`로 찾아와서 이벤트 처리하고 코드 처리 프로젝트 규모가 커지고 다양한 인터페이스를 관리하려면 많은 돔 요소를 관리하고 코드 정리하는 것이 힘든 일 ...

프로젝트 생성 단계 reactWorkspace 폴더 생성 VSCode : 터미널 / 새 터미널 reactWorkspace로 이동 `cd 경로\reactWorkspace` `npx create-react-app 프로젝트명` my-app 폴더로 이동 : `cd my-app` 프로젝트 실행 : `npm start` 실행 종료 : Ctrl + C 함수형 ...

라우팅 (Routing) URL에 따라 해당 화면 출력 가능 (링크) 다른 주소에 다른 화면을 보여주는 것 리액트 라이브러리 자체에 라우팅 기능이 내장되어 있지 않지만 리액터 라우터 라이브러리를 사용하여 쉽게 구현 가능 `react-router-dom` 라이브러리 설치 기존 index.js Route 컴포넌트로 특정 주소에 컴포넌트 연결 Li...

Redux : 리덕스 리액트 state (상태) 관리 라이브러리 가장 많이 사용됨 전역 상태를 관리할 때 매우 효과적 (Context API 사용해서 전역 상태 관리가능) 별도의 라이브러리설치하지 않고 전역 상태 관리 Context를 만들어 한 번에 원하는 값을 받아와서 사용 컴포넌트들 사이에서 동일한 state를 공유해야할 경우 유용 다른 ...

(1) 리액트 + 스프링 연결 테스트 스프링 부트 프로젝트 생성 `@RestController`인 ReactController 생성 리액트 프로젝트 생성 axios로 http://localhost:8080 접속해서 결과 받아서 출력 오류 발생 (CORS 오류) 리액트 3000 포트 사용 스프링 8080 포트 사용하는 다른 사이트(출처) 오류 ...