728x90
반응형
HTML 코드를 REAT 코드로 변경하기
터미널 -> NPM run build
npm 설치하겠다
npx 설치하고 삭제
import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';
function App() {
let map = null; // 카카오 지도 객체
function initMap(lat, lng) { // 지도 초기화
const mapContainer = document.getElementById('map');
const mapOption = {
center: new window.kakao.maps.LatLng(lat, lng),
level: 3
};
map = new window.kakao.maps.Map(mapContainer, mapOption);
}
// return이 된후 실행된다. 스테이트 값이 변경될때 실행하겟다.
useEffect(()=>{
let lat = 35.1585158999773;
let lng = 126.79600938096;
initMap(lat, lng);
},[]); //deps
return (
<div id="map" style={
{ "width":"500px","height":"400px"}
}></div>
);
}
export default App;<body>
<!-- 지도가 출력될 영역 -->
<div id="map" style="width:500px;height:400px;"></div>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=da146a2a6ff6a54903c1d2a7caecd1c7"></script>
<script>
let map = null; // 카카오 지도 객체
function initMap(lat, lng) { // 지도 초기화
const mapContainer = document.getElementById('map');
const mapOption = {
center: new kakao.maps.LatLng(lat, lng),
level: 3
};
map = new kakao.maps.Map(mapContainer, mapOption);
}
let lat = 35.1585158999773;
let lng = 126.79600938096;
initMap(lat, lng);
</script>
</body>
html 파일을 react 컴포넌트로 사용하려면
스크립트를 index.html에 옮기고
출력될 div를 App return 값에 넣어준다.
jsx style 속성은 객체로 사용되어야 함 style = { { 'width': '500px',,,}}
html 랜더링이 끈난후 스크립트가 동작되어야 해서 userEffect사용
<!--.*--> 주석 모두 찾기 가능
css 적용방법
1 import 'xxx.css'
프로젝트 전체에 사용
a 컴포넌트에 적용해도 전체에 적용
2. import styles from 'xxx.module.css';
클래스 선택자를 이용해서 적용
<h1 className={styles.xxx}>
css 가져올때 import 할땐 src폴더
link rel= ,href 하려면 public
jsp web app-lib에 jar 넣기
728x90
반응형
'스프링' 카테고리의 다른 글
| 초보자도 스프링에서 DB 데이터 접근하는 방법이 있다? (google, naver 개발자도 반한 JPA에 대한 서술 중에서.. (!10만 view 돌파)) (0) | 2023.09.22 |
|---|---|
| 자바4일 sql 1일 (1) | 2023.09.21 |
| 스프링3일차 (0) | 2023.09.20 |
| 스프링2일 (1) | 2023.09.19 |
| 스프링부트1일차 (0) | 2023.09.18 |
