랜딩페이지에서 요소들이 움직이면서 뜨거나, 모달창이 부드럽게 뜨는 등의 애니메이션을 구현할 때 사용한 좋은 라이브러리를 소개한다. 1. Framer-motion 태그를 작성하여서 많은 애니메이션을 구현할 수 있다. Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 공식 홈페이지에서 소개하는 삽입코드 예시 중 하나이다. import { addPropertyControls, ControlType } from "framer" import { motion } from "framer-motion" i..

CODING/React.js 2022. 12. 24. 17:41

올해도 만들었습니다. 파워포인트로 만든 다이어리(학습플래너) 양식입니다. 이 양식은 책으로 제작할 수 있도록 제작되었으며, 년간 계획, 월간 계획, 일간 계획을 짤 수 있도록 구성되어 있습니다. 다이어리 대용으로 사용할 수 있으며, 학습계획을 구체적으로 세워서 목표를 달성함에 용이하도록 구성했습니다. 2023년 다이어리(캘린더) 양식 거시적인 계획을 세울 수 있는 연도별 계획 연간 계획 양식(캘린더) 가장 많이 활용하고 있는 월별 계획 시간대별로 하루하루 계획을 세울 수 있는 일별계획 양식 폰트는 저장 옵션에서 파일에 포함시켜 넣었으니 별도로 다운받을 필요 없습니다. ■ 양식파일 다운로드: ■ 압축파일 비밀번호 확인: 2022.05.17 - [PPT(파워포인트) 관련 Tip] - 문서(양식) 비밀번호 공..

PPT(파워포인트)/PPT 템플릿양식 2022. 12. 22. 16:57

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

2023 소비트렌드 - RABBIT JUMP Redistribution of the Average: 평균실종 Arrival of a New Office Culture: ‘Office Big Bang’ Born Picky, Cherry-sumers Buddies with a Purpose: ‘Index Relationships’ Irresistible! The ‘New Demand Strategy’ Thorough Enjoyment: ‘Digging Momentum’ Jumbly Alpha Generation Unveiling Proactive Technology: 선제적 대응기술 Magic of Real Spaces: 공간력 Peter Pan and the Neverland Syndrome 1. 평균실종..

세상정보/이슈이야기 2022. 12. 19. 14:04

맥북프로를 얼마전에 들여놨다. 16인치, 13인치 고민했으나 그냥 큰걸로 ㄱㄱ 그리고 메모리 16기가, 하드 1TB는 기본적으로 되어야 할 것 같아서 해당 스펙으로 재빠르게 구매했다. 맥OS는 처음써봐서 헤매는 중.. 인터넷에서 초기설정에 필요한 내용을 검색해봐가면서 편의성에 맞게 설정하고 있다. 한영키부터 창 닫는것, 파일 지우는것까지 하나도 윈도우와 똑같은게 없다 ㅠㅠ 그래도 빠르게 적응해봐야겠지? 가장 크게 느낀점은 무엇보다 무겁다는 것이다. 2.1kg인가 한다던데 LG 그램만 사용해와서 그런지 무겁게 느껴진다. 기존 그램에서 파일 옮기는 작업에도 오류가 나고 여러모로 골치아프다. 그리고 부속품은 달랑 노트북 충전기 뿐이라는것. 구매처에서 불쌍하게 보았는지 무선마우스 하나 받은 것 빼고는 아무것도 ..

자기관리/일상생활(데일리) 2022. 12. 16. 17:47

배포시에 자꾸 새로고침하면 root페이지로 이동하는 에러... firebase 설정시 rewrites를 추가해주면 root페이지로 이동하고 그렇지 않으면 404 에러가 난다. SPA관련해서 발생하는 에러라고 하는데 나는 해결방법만 알면 된다. firebase 설정에서 해당 내용을 추가해주었다. firebase.json "hosting": { "public": "out", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "cleanUrls": true, "appAssociation": "AUTO", "rewrites": [ { "source": "/**", "destination": "/index.html", "dynamicLinks": true ..

CODING/etc. 2022. 10. 24. 15:54

무언가를 준비하고 있는 사람은 좀 더 소속감을 느끼고 싶어한다. 소속감의 욕구 친밀감의 본질은 고품질의 연결이다. 고품질의 연결이란 어느정도 접촉이 있을 때 존재하는 역동적이고 살아 있는 조직 을 말한다. 외로움이 만연한 우리 사회는 대체 무엇이 그리 잘못된 것일까? 우선 한 가지 이유는 외로움을 인정하는 것을 수치스럽거나 불명예스러운 일로 받아들이고, 공공연히 친구를 새로 사귀고 싶어 하는 것을 금기시하는 경향이 있다는 것 소셜미디어가 사랑의 관계를 형성할 가능성을 확장시키는 동시에 의미있는 관계 형성을 더 쉽게 회피하도록 해준다.

세상정보/도서리뷰 2022. 10. 11. 16:14

사회심리 - 긍정적 이탈--> 주변에서 파악할 수 있는 좋은 사례를 면밀히 조사하여 퍼뜨리는 것 1. 기준과 관행 파악 선험자 인터뷰, 사회적 증거--> 신뢰형성의 매개 자료의 홍수--> 연관성이 관건 4D단계 1. 문제와 바람직한 결과 정의 2. 일상적 행위 알아내기 3. 조사와 관찰을 거쳐 흔하지 않지만 성공하는 행위와 전략 발견 4. 발견 사항에 근거해 액션 러닝 계획 구상

세상정보/도서리뷰 2022. 9. 30. 17:24

꺼림칙한 문자메시지 무시하세요. 보이스피싱일 확률이 높습니다. 해외직구 잘못 결제된것처럼 속여서 보내네요. 지금까지 두번 왔답니다.

자기관리/일상생활(데일리) 2022. 9. 6. 19:12