개발중에 일정 공간내에서 글자수가 넘치는 경우, 아래칸까지 공간을 차지하게 되거나 혹은, 해당 공간을 넘어서 overflow가 될 수 있다. 이를 방지하기 위해서 글자가 넘치면 넘치는 글자는 생략하고 (...)으로 생략기호를 자동으로 넣어주면 좀 더 깔끔하게 CSS를 꾸밀 수 있다. tailwind에서는 이렇게 입력하면 되는데 width는 반드시 지정해주어야 그 범위 이상 넘어가면 생략할 수 있도록 만든다. overflow-hidden text-ellipsis whitespace-nowrap 위 속성은 일반 css에서는 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 요거다.

CODING/React.js 2022. 12. 22. 16:10

모달창을 열었을 때 모달 바깥 화면을 드래그할 경우 외부 스크롤이 되어 사용자에게 깔끔하지 못한 사용감을 줄 수 있다. document.body 객체를 이용하여 모달창을 열었을 땐 scroll을 없애고, 닫았을 때 다시 scrollbar를 생성시킨다. onModalOpen은 모달창을 켰을때 이벤트 함수이며, onModalClose는 끌때의 이벤트 함수이다. 중복모달을 사용할 경우에는 조금 꼬일 수 있기때문에 고려해서 사용해야 한다. const [modalOpen, setModalOpen] useState(false); const onModalOpen = useCallback(() => { document.body.style.overflow = "hidden"; setModalOpen(true); }, [..

CODING/React.js 2022. 12. 22. 15:59

textarea로 작성된 data를 불러올 때, 글 중간에 URL 링크 삽입시 바로 링크로 연동될 수 있도록 하는 함수입니다. 정규표현식을 통해 http, https, www 등의 프로토콜 여부를 체크한 후에 해당 부분을 a태그로 변형해준다. const parseLinkTextToHTML = (text) => { const regURL = new RegExp("(http|https|ftp|www|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)", "gi"); const regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+.[a-z0-9-]+)", "gi"); return text ?.replace(r..

CODING/React.js 2022. 12. 22. 15:53

가끔 컴포넌트 작동시 특정 이벤트 없이 초기에 데이터를 불러모으기 위해서 firebase 명령을 시행할 때 갑작스럽게 많이 시행되는 경우가 있다. 방심하다가는 firebase에 쿼리 요청이 과다하게 반복되어 하루동안 firebase 사용이 중지될 수 있다. 이를 방지하기 위한 useEffect를 통해 비동기처리 한 번만 실행하는 방법이다. const [data, setData] = useState("") useEffect(() => { async function fetchAndSetUser() { setData([]); setLoading(true); const result = await getUserInformations(userID); setData(result); } fetchAndSetUser()..

CODING/React.js 2022. 12. 21. 22:12

node.js, npm 설치 npx 설치: cmd > npm install npx -g git 설치(git-scm.com) 기본 폴더: cd C:\USER\arthu\documents npx create-react-app 앱 이름 --> 바벨 등 설치 할 필요 없음 node.js 설치 npm, npx 설치 cmd > 'npx create-react-app 앱이름' 생성 그 폴더로 들어가서 npm start yarn.lock파일 삭제 #readme파일 간단하게 설명넣기 #package.json파일 script부분이 중요 "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "r..

CODING/React.js 2020. 6. 12. 22:27

import React from "react"; import PropTypes from "prop-types"; function Food({ name, picture, rating }) { return ( i like {name} {rating}/5.0 ); } const foodILike = [ { id: 1, name: "kimchi", rating: 5, image: "https://djlib.sen.go.kr/djlib/index.do", }, { id: 2, rating: 4.9, name: "samgyup", image: "https://djlib.sen.go.kr/djlib/index.do", }, ]; Food.propTypes = { name: PropTypes.string.isRequi..

CODING/React.js 2020. 6. 12. 22:27