개발일기/리액트 (3) 썸네일형 리스트형 [시행착오] naver map api 를 react 프로젝트에 적용 하면서 겪었던 문제 기록하기 ncloud 를 통해 maps api 사용신청을 한 후, 문서를 확인해보았지만 react 로 적용하는 문서는 발견하지 못했다; 내가 삽질한 내용 위주로 남겨 본다. 1. naver 객체는 어떻게 사용해야 하지? getting started 문서를 보고 가장 먼저 들었던 의문은 "그래서 naver 객체는 어떻게 사용해야 하지?" 였다. window 객체에서 가져오면 된다! const {naver} = window; 2. client_id 맞게 설정했는데?? 왜 에러가 나지?? web service url 에 http://localhost 도 함께 등록해주자! (개발 할때만 추가해주거나, 완료후에는 설정에서 삭제해주는게 좋을 듯 하다~) 최종코드 모습 import React, {useEffect, useRe.. [ant.design] html 페이지에 햄버거 메뉴 추가하기 create-react-app + antd 조합 으로 간단하게 랜딩페이지를 만들고 햄버거 메뉴를 추가해 보았다. import React, {useState} from 'react'; import {MenuUnfoldOutlined, MenuFoldOutlined} from '@ant-design/icons'; import type {MenuProps} from 'antd'; import {Layout, Button, Menu, Typography} from 'antd'; import "./Home.scss"; const {Header, Sider, Content} = Layout; const {Link} = Typography; const items: MenuProps['items'] = [ { labe.. [라우팅] react-router-dom 사용하여 hash router 적용하기 1페이지로 만들었던 리액트 프로젝트에 화면을 하나 추가했다. 라우팅이 필요해졌다. react-router-dom 을 사용해서 간단하게 처리해보자. 먼저 기존 App.tsx 파일을 확인해보자. import React from 'react'; import Summary from "./dungeon/Summary"; import logo from '../diablo4_logo2.png'; import './App.scss'; function App() { return ( ); } export default App; 헤더 아래 메인 컨텐트 1개 있는 구조이다. 이 코드에 router를 적용하기 위한 주요한 작업은 부분을 RouterProvider 로 변경하는 것이다. import React from 'react.. 이전 1 다음
