개발중에 일정 공간내에서 글자수가 넘치는 경우, 아래칸까지 공간을 차지하게 되거나 혹은, 해당 공간을 넘어서 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

Base: React, Redux 리엑트에서 많이 사용하는 텍스트에디터 react-quill 라이브러리를 활용해보자. 설치 node설치 후, yarn add react-quill 또는 npm install react-quill 활용 첫번째 시도 import React, { useCallback, useRef, useState, useEffect } from 'react'; import dynamic from 'next/dynamic' const QuillNoSSRWrapper = dynamic(import('react-quill'), { ssr: false, loading: () => Loading ..., }) import "react-quill/dist/quill.snow.css"; import { ..

CODING/React.js 2022. 5. 29. 22:04

github 처음설치 github에서 새로운 레포지토리 생성(readme는 체크하지 말자! 추후 에러발생 가능) git init .gitignore 파일생성(파일내용: node_modules) git add. (저장소 올리기) // git rm --cached ~~ 저장소 올린것 다시 비우기 git status (저장소 상태보기) git commit -m "쓸말" (로컬 저장하기) git remote add origin master 변경된 내용 git에 올리기 1. git add . 2. git status에서 확인 3. git commit -m "메시지" 4. git push origin master 클로닝 하는 방법 git clone https://github.com/react-boilerplate/..

CODING/React.js 2020. 8. 25. 20:26

00:00 body { background-color: #2c3e50; } h1 { color: white; } .clicked { color: #7f8c8d; } .form, .greetings { display: none; } .showing { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .bgImage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; animation: fadeIn 0.5s linear; } const toDoForm = document.querySelector(".js-toDoForm"), ..

CODING/Javascript 2020. 6. 9. 21:01

00:00 body { background-color: #ecf0f1; } h1 { color: #34495e; } .clicked { color: #7f8c8d; } .form, .greetings { display: none; } .showing { display: block; } const form = document.querySelector(".js-form"), input = form.querySelector("input"), greeting = document.querySelector(".js-greetings"); const USER_LS = "currentUser", SHOWING_CN = "showing"; function saveName(text) { localStorage.setIte..

CODING/Javascript 2020. 6. 9. 00:14

node.js 등 설치 yarn ceate react-app hello-react cd hello-react yarn start(cf. npm init react-app) 창 안열리면 강제입력(http://localhost:3000) import React from 'react'; // import: node_modules에서 리액트를 불러옴 webpack--> 합친(bundled) 자바스크립트 파일 --> 번들러 대표적인 번들러: 웹팩, Parcel, browserify 기본 시작파일: src/index.js svg파일: 로고나 아이콘 만들 때 쓰는 이미지 파일 웹팩의 로더라는 기능이 SVG파일이나 CSS파일 등을 불러와서 사용할 수 있게 만든다. babel-loader(자바스크립트 파일 불러와서 ES..

CODING/Javascript 2020. 6. 8. 15:58