몽땅뚝딱 개발자

이 속성은 HTML 요소들의 hover/active, click/tap, cursor, drag 등의 이벤트를 조정할 수 있는 속성이다. 나의 경우 index가 다른 요소들 때문에 문제를 겪었는데, z-index가 높은 요소때문에 그 아래에 있는 요소의 hover 이벤트가 작동하지 않아 해당 옵션을 주었다. ◽ 사용하기 /* none: HTML 요소에 정의된 각종 이벤트(클릭, 상태, 커서 옵션)가 비활성화 된다. */ pointer-events: none; /* auto: 비활성화된 이벤트들이 다시 발생하게(기본 기능으로 원복) 한다. */ pointer-events: auto; /* inherit: 부모 요소로부터 pointer-events값을 상속받는다. */ pointer-events: inher..

컴포넌트가 중첩되어있을 경우, 자식에서 자식으로 props를 사용하여 계속 넘겨야 하기 때문에 데이터 공유가 힘들다. 이 때 Context API를 사용할 수 있다. ◽ Context API 사용하기 1. 변수를 선언한다. import {createContext} from "react"; let TestContext = createContext() // 다른 컴포넌트와 공유할 경우 export를 붙여준다. // export let Context = createContext() 2. 아래와 같이 공유할 컴포넌트를 감싸준다. // 공유할 변수는 여러개 작성할 수 있다. 3. 공유할 컴포넌트를 import 한다. import {TestContext} from "../App"; function Detail(pr..

◽ axios 사용하기 axios는 JSON을 object/array로 변환하는 작업을 자동으로 해준다. axios를 사용하지 않는다면 기본 자바스크립트 문법인 fetch()를 사용하면 되는데 이 경우는 직접 변환해주어야한다. axios.get('URL') .then((res) => { let resArr = [...itemArr, ...res.data] setItem(resArr) }) ◽ props 문법 간결하게 사용하기 [전] function TabContent(props) { return 내용{props.tabIndex} } [후] function TabContent({tabIndex}) { return 내용{tabIndex} } ◽ automatic batching 기능 리액트 18부터 나온 기..

컴포넌트는 페이지에 장착되기도 하고(mount), 업데이트가 되며(update), 필요없으면 제거(unmount)된다. 라이프사이플을 사용하면 중간중간 간섭하고 실행할 수 있다. ◽ useEffect() 사용하기 useEffect()는 HTML 렌더링 이후에 동작한다. 1. 오래걸리는 반복연산 2. 서버에서 데이터를 가져오는 작업 3. 타이머 등은 useEffect안에서 사용하는 것이 좋다. 예제 1. class 문법을 사용하는 기존 방식 class lifeCycle extends React.Component { componentDidMount() { // ... } componentDidUpdate(prevProps, prevState, snapshot) { // ... } componentWillUn..

◽ 설치하기 npm i styled-components ◽ import 하기 import styled from "styled-components"; ◽ 사용하기 예제 1. 버튼 만들어보기 let YellowBtn = styled.button` background: yellow; color: black; padding: 10px; ` function Detail(props) { return ( 버튼 ) } 예제 2. props로 속성 넘겨받기 let YellowBtn = styled.button` background: ${ props => props.bg }; color: black; padding: 10px; ` function Detail(props) { return ( 버튼 ) } 예제 3. 기존 스..

에러 다른 파일은 다 핫스왑이 잘 되는데 이 파일만 그렇게 되지 않았다. 시도해본 것: 1. 인텔리제이 설정에서 Advanced Settings의 Compiler의 저 옵션에 체크박스를 설정한다. 2. 기타 핫스왑이 가능하게하는 모든 인텔리제이 설정을 찾아보고 설정한다. 하지만 다 안됨..! 원인 뭔가 이상해서 빌드해봤는데 경로어쩌구~ 에러가 노출됐다.알고보니 해당 vue 파일들을 import하는 부분에서 소문자 경로로 지정해야하는데 대문자로 적혀있었다. 어제 하루죙일 핫스왑없이 다시 run하면서 힘들게 개발했는데....그래도 해결돼서 다행이다...^^! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 설치하기 npm i react-router-dom@6 ◽ Router 사용하기 📄 index.js 태그로 감싸준다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring ..

◽ Map 사용하기 import 'bootstrap/dist/css/bootstrap.min.css'; import { Navbar, Nav, Container } from "react-bootstrap"; import './App.css'; import img from './img/bg.png' import { useState } from "react"; import itemArr from "./data.js"; function App() { let [item, setItem] = useState(itemArr) return ( React Home Cart { item.map((item, index) => { return }) } ); } function Card(props) { return ( {pr..

◽ 커링(Currying)이란? 함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수이다. 함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야하는데, 이 함수를 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있다. ◽ 예제 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, {Component} from "react"; class ChildComp extends Component { tryPlus(a) { // 200을 항상 고정값으로 보내주기..

마음의 평안..... 행복..😭🌈 그러나 그런 발견을 할 수 있었던 것만으로도, 그리 미덥지 않은 나의 발자취를 더듬을 수 있었다는 것만으로도, 이 책을 내는 의미가 있지 않을까 합니다. - 무라카미 하루키의 『잡문집』 사랑의 행위는 언제나 고백이다, 라고 카위는 썼다. 조용히 문을 닫는 것도 고백이었다. - 니콜 크라우스, 『위대한 집』 굳이 말 할 필요도 없겠지만, 나의 정신은 온갖 잡다한 것들로 이루어져 있습니다. 마음이란 정합적이고 계통적이면서 설명 가능한 성분으로만 만들어진 것이 아닙니다. 나는 그러한 내 정신 안에 있는 세세한, 때로는 통제되지 않는 것들을 긁어모으고, 그것들을 쏟아부어 픽션=이야기를 만들어내고 다시 보강해갑니다. - 무라카미 하루키의 『잡문집』 그 강력함은 예컨대 발자크의 강..