React (4) 썸네일형 리스트형 [시행착오] 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.. [배포] Github pages 이용해여 React 배포하기 리액트를 이용해서 웹 페이지를 만들었으니 배포도 해보자. 여러가지 배포 방법중 github pages를 이용한 배포 방법을 알아보자. 1. 배포하고자 하는 프로젝트에 gh-pages 의존성을 추가해준다. 배포하고자 하는 React 프로젝트에 npm 명령어를 사용해서 gh-pages 를 설치해줬다. npm install --save gh-pages 2. 그다음 package.json scripts 부분에 deploy 명령어를 추가한다. 3. package.json 에 hompage 키도 추가해준다. homepage의 값은 https://계정명.github.io/레포지토리이름 또는 https://조직명.github.io/레포지토리이름 으로 입력해 주면 된다. 4. 배포 명령어 실행하기 아래 배포 명령을 실행.. 이전 1 다음
