이번에는 가장 많이 사용되는 Kakao Map Api 를 통해 지도페이지를 만들어 본다. 우선 kakap developers 페이지에 접속한다. 로그인 후 '내 애플리케이션' 버튼을 누른다. 다은 페이지에서 '애플리케이션 추가하기' 를 누른다. 애플리케이션의 기본 정보를 입력합니다. 그 후 리액트 프로젝트에 카카오맵을 보여줄 kakaoMap.js 페이지를 아래와 같이 생성합니다. import React, { useEffect } from 'react'; import './KakaoMap.css'; let map; // Move map variable outside of component const KakaoMap = () => { useEffect(() => { const loadKakaoMapScrip..

이번에는 지도를 렌더링 하기 위해 react-leaflet 을 설치 후 적용한다. 우선 MapPage 폴더와 MapPage.js를 생성한다. 그 후 해당 페이지로 이동하기 위해 App.js에 react-router-dom을 설치 후 적용한다. 참고: React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기 (tistory.com) React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기 리액트에서 페이지 이동을 하기 위해서는 router를 활용해야한다. rounter를 사용하기 위해서는 npm 으로 react-router-dom 를 먼저 설치해준다 npm i react-router-dom 그 후 이동할 화면을 먼저 생성한다. 처음 cookinghoil.t..

어떤 프로젝트를 하던 폴더구조를 잡는 것은 필수이고, 기본적인 사항이다. 이번에는 React에서 기본적인 폴더구조를 잡는 방법에 대해 간략하게 정리해 보겠다. my-react-app/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── assets/ │ │ ├── images/ │ │ └── css/ │ ├── components/ │ │ ├── App/ │ │ │ ├── App.js │ │ │ └── App.css │ │ ├── Header/ │ │ │ ├── Header.js │ │ │ └── Header.css │ │ └── ... │ ├── pages/ │ │ ├── HomePage/ │ │ │ ├── HomePage.js │ │ │ └─..

이번에는 지난 시간의 소스를 활용하여 첨부한 이미지를 미리보기로 보는 기능을 만들어 보자. 우선 원리는 아래와 같다. 1) 첨부 이미지를 버퍼 (base64) 형식으로 변환 2) base64 데이터를 state에 배열 형태로 저장 3) 저장 된 배열 state를 화면에 뿌려줌 base64 데이터를 저장 할 배열 state를 선언한다. const [imgBase64, setImgBase64] = useState([]); import React, { useState, useEffect } from 'react'; import axios from 'axios'; function FileData() { const [file, setFile] = useState(null);//파일 const [imgBase64,..

이번 시간에는 react - spring 간 파일 데이터 전송을 구현해보자. 우선 파일 데이터를 보낼 FileData.js 를 Screen 폴더 아래 아래와 같이 만들어준다. FileData.js import React from 'react'; function FileData() { } return ( FileData fileData1: Send ); } export default FileData; file 데이터를 저장 할 state를 선언한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; function FileData() { const [file, setFile] = useState(null);//파일 ..

이번에는 지난번에 입력받은 데이터를 spring으로 넘기는 작업을 하겠다. 우선 spring과 통신하기 위해 axios를 설치한다. npm install aixos 그 후 TextData.js에 aixos를 import 하고 Send() 함수 안에서 axios를 아래와 같이 선언한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; function TextData() { const [data1, setData1] = useState(''); const [data2, setData2] = useState(''); const updateData1 = e => setData1(e.target.value); const ..