본문 바로가기

분류 전체보기

 (293)
[0]increment decrement button import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { increment, decrement } from "../../features/CommonSliceReducer"; const ReduxNavigate = () => { const count = useSelector((state) => state.common.i); const dispatch = useDispatch(); return ( ReduxNavigate {count} { dispatch(increment()); }} > increment { dispatch(decrement()); }} > decrement ); }; export d..
flex-direction column 설정시 양쪽 위치(즉, 상하)를 변경하고 싶을때 flex-direction 의 column, column-reverse를 사용한다. @media (max-width: 768px) { .flexgap { flex-direction: column; } /* .flexgap:nth-child(1) { flex-direction: column; } .flexgap:nth-child(2) { flex-direction: column-reverse; } */ }
[0]redux toolkit의 slice내에서 navigate쓸수 없을 때 (비동기) https://stackoverflow.com/questions/71582643/how-to-call-navigate-inside-redux-toolkits-actions-in-react-js How to call navigate inside Redux Toolkit's actions in React js I've a simple app built on redux-toolkit. I am dispatching createProduct actions which is working fine. I want to navigate to /products/ page form /products/new page after createProduct action. How... stackoverflow.com 페이지 안에서..
[0]react 스크롤시 해당 위치(id)로 이동하기 : <a href = "#tagname"> ,scrollEvent 1. #n (아이디값으로 해당 페이지 내 위치 도달, html에 전체 스크롤시 부드럽게 적용) import React from "react"; export const AtagId = () => { const content = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only ..
input checkbox react에서 ui변경(html과 다름) input[type="checkbox"] { appearance: none; width: 1.5rem; height: 1.5rem; border: 1.5px solid gainsboro; border-radius: 50%; } input[type="checkbox"]:checked { border-color: transparent; background-repeat: no-repeat; background-color: limegreen; }
[0]클릭시 하단으로 이동 import React from "react"; const ScrollBt = () => { const goScroll = () => { const DocumentSize = document.querySelector(".parent"); window.scrollTo(0, DocumentSize.clientHeight); }; return ( godown here ); }; export default ScrollBt;
[0]특정파일의 크기가 너무 커서 submit시 전송이 안되는 경우 : file의 사이즈에 문제가 있을 경우 Files 배열안의 .size를 활용하여 15mb이상 일경우의 파일크기를 측정할수 있는 예시. const FilesSize = () => { const imageHandleChange = (e) => { const activeFiles = Array.from(e.target.files); let toastShow = false; activeFiles.forEach((el) => { console.log(el.size); if (el.size / 1000000 > 15) { toastShow = true; } }); if (toastShow) { alert("this file is over 15mb"); } }; return ( click ); }; export default FilesSize;
html에서 자주 쓰이는 특수문자, 특수기호, 이모지 코드 표현 문자 < 공백 ' ' (1칸 space) & & " " © ⓒ « ≪ ± ± · · » ≫ -특수기호 ½ ⅓ ⅔ ¼ ¾ ⅛ ⅝ ⅞ ๑ • ิ . • ั ๑ ๑ ۩ ۞ ۩ ๑ ♬ ✿ . ｡ . : * ★ ☆ ε ї з ℡ ❣ · ۰ • ● ○ ● ō ゃ ♥ ♡ ๑ ۩ ﺴ ☞ ☜ ☎ ☏ ♡ ⊙ ◎ ☺ ☻ ✖ ╄ ஐ ﻬ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ▀ ▄ █ ▌▐░ ▒ ▬ ♦ ◊ ◦ ☼ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆ → あ ぃ ￡ ❤＃ ＠ ＆ ＊ ❁ ❀ ✿ ✾ ❃ ✺ ❇ ❈ ❊ ❉ ✱ ✲ ✩ ✫ ✬ ✭ ✮ ✰ ☆ ★ ✪ ¤ ☼ ☀ ☽ ☾ ❤ ♡ ღ ☻ ☺ ❂ ◕ ⊕ ☉ Θ o O ♋ ☯ ㊝ ⊙ ◎◑ ◐ ۰ • ● ▪ ▫ ｡ ﾟ ๑ ☞ ☜ ☂ ♨ ☎..

티스토리툴바