몽땅뚝딱 개발자

글 하나로 적긴 애매하지만 모아두면 소소한 깨달음의 정리... 계속 추가 될 예정....🚂 1. 함수를 넣으면 렌더링 시점에서 함수가 호출되므로 함수형태로 넣어준다. // 이렇게 함수형태로 작성해준다. // 이렇게 적으면 렌더링 시점에 실행된다. 2. 값은 이렇게도 담긴다. import SwiperCore, {Navigation} from "swiper"; const [swiper, setSwiper] = useState(); 3. 기본값을 지정하는 방법은 2가지 - 첫번째 방법: defaultProps를 사용한다. UserInfo.defaultProps = { name: 'empty', age: 0, }; - 두번째 방법: 매개변수에서 지정해준다. function UserInfo({ name = 'em..

◽ !! [undefined, "", 0]일 경우 결과는 false이고 그 외의 결과는 true이다. boolean으로 형변환을 하기 위해 사용한다. if (data != undefined && data != "") { // 실행코드 } // 이와 동일하다. if (!!data) { // 실행코드 } 출처 자바스크립트 (JavaScript) 느낌표 두개 (Double Exclamation Marks) 연산자 (Operator),!! 정리하자면 느낌표 두개(!!) 연산자는 확실한 논리결과를 가지기 위해 사용합니다.예를 들어 정의되지 않은 변수 undefined 값을 가진 내용의 논리 연산 시에도 확실한 true / false를 가지도록 하는게 velog.io 개인적으로 공부한 내용을 정리하는 블로그로 잘못..

◽ useMemo의 형태 useMemo( param1 callbackFn, param2 [의존성 배열] ) const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hook이다. useMemo는 처음에 계산된 결과값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링 되더라도 계속 같은 함수를 호출하지 않고 이전에 이미 계산된 결과 값을 메모리에서 꺼내와서 재사용한다. 렌더링 중에 실행되기 때문에 통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에서 하면 안된다. 예를 들어, 사이드 이펙트(Side Effect)에서 하는 일을 useMemo에 적지 않도록 한다. 첫번째 인자..

📄 커스텀 마커 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..

◽ 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 ..

혼자 build가 되질 않나.. 스타일 순서에 맞춰 정렬되도록 설정했는데 작동이 안되질 않나.. 잘되던게 안되서 작은 스트레스들을 받았지만 미세한 스트레스라 미루고있었는데 이번에 리액트 공부하며 같이 해결했다. 이제 의도대로 잘 동작한다. ◽ Options Reformat code: 코드 서식 재지정 Optimize imports: import문 최적화 Rearrange code: 코드 재정렬 Run code claenup: 코드 정리 실행 Run eslint --fix: eslint --fix 명령어 실행 Run Prettier: 프리티어 실행 Upload to default server: 디폴트 서버에 업로드 Build project: 프로젝트 빌드 (실행/디버그 중에는 트리거되지 않음) 참고 Int..