몽땅뚝딱 개발자

📄 커스텀 마커 const container = document.getElementById('map') const mainPosition = new window.kakao.maps.LatLng(33.453502, 126.569894) const options = { center: mainPosition, // 지도의 중심 좌표 level: 5, // 지도의 레벨(확대, 축소 정도) } const content = '🌈' const mainOverlay = new window.kakao.maps.CustomOverlay({ position: mainPosition, // 위치 content: content, // 태그 }) const map = new window.kakao.maps.Map(containe..

마커를 넣어보자! 1. 마커 1개 넣어보자 import React, { useEffect } from 'react' import styled from 'styled-components' declare global { interface Window { kakao: any } } const Map = styled.div` width: 100%; height: 300px; ` function MapContainer() { const addMarker = () => { const markerPosition = new window.kakao.maps.LatLng(33.450701, 126.570667) return new window.kakao.maps.Marker({ position: markerPosition..

1. APP KEY를 발급한다. 🔗 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 어플리케이션을 등록한다. 그냥 스터디용으로 등록해줬고, 클릭해서 Javascript key를 가져오면 된다. 3. 도메인을 등록한다. 4. index.html에 넣어준다. 5. 코드를 작성한다. 📄 Map.txs import React, { useEffect } from 'react' import styled from 'styled-components' declare global { interface Wi..

보호되어 있는 글입니다.

◽ ThemeProvider를 사용하는 이유 자주 사용하는 css를 변수로 설정할 수 있다. 📄 styled.d.ts import { ColorTypes, FontSizeTypes } from './theme' import 'styled-component' // d.ts // - 구현부가 아닌 선언부만을 작성하는 용도의 파일로 js 코드로 컴파일 되지 않는다. declare module 'styled-components' { export interface DefaultTheme { colors: ColorTypes fontSize: FontSizeTypes } } 📄 index.tsx import App from './App' import React from 'react' import ReactDOM f..

에러 Compiled with problems: ERROR [eslint] ESLint configuration in .eslintrc.js is invalid: - Property "parser" is the wrong type (expected string/null but got `["@typescript-eslint","import"]`). 원인 나는 이렇게 설정했었다. module.exports = { parser: [ '@typescript-eslint', // @typescript-eslint/parser 'import', // eslint-plugin-import ], } array를 못받는 모양.. 아래처럼 수정해주었다. 제발... 알고쓰자.........!!!!!!!!!!!!! 😭 mod..

◽ Redux란? 자바스크립트 상태관리 라이브러리이다. Vue에는 Vuex가 있다면 React에는 Redux가 있다. 리덕스의 본질은 node.js이다. 컴포넌트 간 state 공유가 쉬워진다. ◽ 설치하기 리덕스는 리액트에서만 사용하는 상태관리 기술이 아니므로, react-redux를 설치해야한다. npm install @reduxjs/toolkit react-redux ◽ Redux의 3가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳(store)에서 가지고 온다. 2. State is read-only 리액트는 setState 메소드를 활용해야만 상태변경이 가능하고, 리덕스에서도 action이라는 객체를 통해서만 상태를 변경할 수 있다. 리덕스는 읽기전용으로, ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

◽ 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용한다. 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려준다. 요소를 사용하면 요소의 캡션(caption)을 정의할 수 있다. 하나의 그룹으로 묶인 요소들을 속성인 disabled를 사용하여 한꺼번에 disabled 처리할 수 있다. 📄 예제 1. Choose your favorite monster Kraken Sasquatch Mothman 📄 예제 2. 학사 관리 로그인 이름 : 학번 : 학과 : 제출하기 출처 : The Field Set element - HTML: HyperText Markup Language | MDN The HTML element is used to group several controls as well as ..