react

목표 리액트로 작성된 프론트단에서 게시글을 작성한 뒤 등록 버튼을 누르면 작성한 데이터들을 서버인 스프링으로 전송한다. 기본설정 commons-fileupload commons-fileupload 1.4 commons-io commons-io 2.11.0 pom.xml에 추가한다. React 1) 입력 전 2) 입력 후 위처럼 게시판 종류, 제목, 내용, 파일들을 입력하고 등록버튼을 통해 스프링에 데이터를 전송할 것이다. React(프론트) 전체 코드 import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form'; import React, {useState} from 'react'; impo..

Maven 설정 com.googlecode.json-simple json-simple 1.1.1 (https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple) React에서 JSON 전송 { axios( { url: '/login', method: 'post', data: [ {email:'test@naver.com',aaa:'aaa222'}, {email:'test2@naver.com',aaa:'aaa333'}], baseURL: 'http://localhost:8080', //withCredentials: true, } ).then(function (response) { console.log(response) console.lo..

목표 Local/Session Storage 사용법을 익히고, Object/Array와 JSON 간 쌍방 형식 변환을 수행한다. Local Storage : 반영구적으로 데이터를 저장함 Session Storage : 휘발성 저장소, 새로고침하거나 브라우져 껏다 켜면 저장시켜놓은 데이터가 사라짐 위와 같이 개발자 모드(F12)에서 Local Storage에 데이터를 저장하고 삭제할 수 있다. Session Storage에 저장하고 싶다면, 위의 localStorate 대신 sesseionStorage로 작성한다. 코드에서 Object/Array 데이터를 JSON 형식으로 Local Storage에 저장하기 function App() { let obj = {name : 'kim'} localStorage...

Redux란? props 없이 state를 공유할 수 있도록 도와주는 라이브러리다. 하나의 js 파일에 state를 보관하고, 모든 컴포넌트들이 state를 직접 꺼내쓸 수 있다. Redux 설치 npm install @reduxjs/toolkit react-redux 터미널에 위 명령어를 실행시킨다. 주의사항 package.json 파일에서 react와 react-dom이 18.1.0 버전 이상이어야 문제없이 설치가 가능하다. 만약 보다 낮으면, 직접 파일 수정하면 된다. Redux 파일 생성 import { configureStore } from "@reduxjs/toolkit"; export default configureStore({ reducer: { } }) state를 보관할 js 파일을 만..

목표 컴포넌트가 전환될 때 또는 특정 태그에 애니메이션을 적용시켜본다. css설정 .start{ opacity:0; } .end{ opacity:1; transition:opacity 0.5s; } opacity는 투명도, transition은 0.5초에 걸쳐 서서히 변하도록 하는 것을 명시한 것이다. 위처럼 애니메이션 동작 전 스타일을 담을 className과 애니메이션 동작 후 스타일을 담을 className을 별도로 만든다. 그리고 transtion 속성을 추가해야한다. 태그에 애니메이션 적용 function TabContent({tab}){ let [fade,setFade]=useState('') useEffect(()=>{ setTimeout(()=>{setFade('end')},100) ret..

npm start 가 정상적으로 동작하지 않으면서 위와 같은 오류 메시지를 남긴다. 이는 이더넷 케이블 구성에서 IP주소가 비공개라 값을 가지고 오지 못하기 때문에 발생하는 문제였다. 해결방법은 2가지다. 1. 유선랜을 뽑고 유선랜을 사용한다. 2. React 프로젝트 폴더에 .env 파일 생성한다. DANGEROUSLY_DISABLE_HOST_CHECK=true 생성하면 잘 동작한다.

목표 Spring Boot와 React간 JSON을 전송해본다. SpringBoot -> React로 JSON 전송하기 @RestController public class HelloController { @PostMapping(value="/api/login", consumes="application/json;") public Member login(@RequestBody HashMap map) { System.out.println(map); Member member=new Member("chaeros","1234","채로스",28); return member; } } React에서 Spring Boot로 /api/login URL을 통해 post방식으로 접속했을 때, 매개변수 HashMap 자료형의 m..

에러코드 Failed to compile. Module not found: Can't resolve 'react-router-dom' (파일경로) App.js에서 다른 자바스크립트 파일에 있는 컴포넌트를 import해서 사용하려고 하는데 계속해서 위와 같은 에러가 발생했다. 가져올 컴포넌트가 저장된 자바스크립트 파일이 다른 폴더에 있어 라우팅이 안 되어 발생하는 문제였다. npm install react-router-dom --save react-router-dom은 브라우저에서 사용되는 리액트 라우터로 위 명령어 사용하여 설치하면 문제가 해결된다.

목표 Front-End로는React, Back-End로는 Spring Boot를 쓰려고한다. 이 때, 둘 사이에서 데이터를 주고 받을 수 있도록 연동시킨다. 연동 과정 1. 스프링 부트 프로젝트 생성 Spring Web Dependency가 추가된 상태로 이클립스로 File->New->Spring Starter Project를 실행한다. 자신의 취향대로 설정하면 된다. 나는 Maven에 Java11을 선택하겠다. Spring Web을 추가하고 Finish 프로젝트를 실행시키고 위와 같은 화면이 콘솔창에 출력되면 프로젝트가 성공적으로 생성된 것이다. localhost:8080 에 접속하면 위와 같은 화면이 출력된다. 다른 화면이 출력되길 원한다면 src->main에 index.html 파일을 생성해주면 된..

목표 서버에 새로고침 없이 데이터를 주고 받을 수 있는 브라우저 기능을 ajax라고 한다. ajax로 get/post를 요청하는 방법 중 axios 라이브러리를 통한 요청방법에 대해 알아본다. 기본설정 및 사용법 1. 라이브러리 설치 npm install axios 터미널에서 프로젝트 폴더 경로로 이동한 후, 위 명령어를 입력해 라이브러리를 설치한다. 2. axios import 및 기본 사용법 import axios from 'axios' function App(){ return ( { axios.get('서버URL/데이터이름.json') .then((result)=>{ console.log(success) }) .catch(()=>{ console.log('fail') }) }}>버튼 ) } axio..