※ 실행화면 ※ One button Two button ※ 사용 기술(언어)※ React, Javascirpt, CSS 1. One button ◈ App JSX import React from "react"; import {useState} from "react"; import "./App.css"; import Modal from "./component/modal"; function App() { const [isModal, setIsModal] = useState(false); const [info, setInfo] = useState('modal 창 테스트 중……'); const onClick = () => { setIsModal(!isModal) } return ( Open the modal! ..

※ 실행화면 ※ 1. 카카오맵 API를 사용하기 위해 API Key 발급 받기 1) 카카오 developer 사이트 접속 (링크) 2) (우측상단)내 애플리케이션 → 애플리케이션 추가 → 양식 입력 하고 저장하기 클릭 3) 앱 키 중에 JavaScript 키를 복사 2. index.html에 head 태그 안 에 API Key 적용 1) 태그 안에 해당 스트립트를 작성하시면 됩니다. +) 앱 키 뒤에 붙은 &libraries=services는 const {kakao} = window 라는 코드와 같은 역할을 합니다. 만약 &libraries=services를 쓰지 않았다면, 카카오맵을 쓸 컴포넌트 안에서 const {kakao} = window를 선언해주시고 맵을 불러오시면 됩니다. 3. 지도를 담을 c..

SPA 에러 발생 원인 github 페이지 내부에서 SPA 기능을 지원해주지 않습니다. 예시로, repository/home으로 구성된 주소에서 /home은 SPA의 path이고 프론트엔드의 주소라는 것을 github내부에서는 인식을 하지 못하기 때문에 404 에러가 발생합니다. 404 에러 해결 방안 여러 가지 해결 방법이 있지만 해당 포스터에서 소개해줄 방법은 404페이지에 index.html의 내용을 붙여 넣는 방법이다. github 내부에서는 404에러가 발생하면 저장소 내부에 404.html이 존재하는지 찾고 존재한다면 해당 페이지를 띄운다. 없는 경우 기본적으로 github 제공하는 404 홈페이지가 뜨게 된다. 이러한 github 내부 로직을 이용하여 github page를 build할때, ..