낭만 개발자 고포고

[react/javascript] 리액트+tailwindcss+twin.macro # 리액트 설치 npx create-react-app my-app # emotion / tailwind / twin.macro 설치 npm i @emotion/css @emotion/react @emotion/styled npm i -D tailwindcss postcss autoprefixer npm i twin.macro npx tailwindcss init -p # ./tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,jsx}"], theme: { extend: {},..

[react/javascript] 태블릿/모바일 구분하기 #사이트 https://www.npmjs.com/package/react-responsive #설치 npm i react-responsive --legacy-peer-deps #정의 import React from 'react'; import { isTablet } from 'react-device-detect'; import { useMediaQuery } from 'react-responsive'; const Mobile= ({ children }) => { const isMobile = useMediaQuery({ query: '(max-width: 767px)', }); return {isMobile && children}; }; const..

[react/javascript] 모바일 orientation (가로/세로) 상태 받아오기 #사이트 https://www.npmjs.com/package/react-screen-orientation react-screen-orientation Display Components based on screen orientation. Latest version: 0.0.4, last published: 3 years ago. Start using react-screen-orientation in your project by running `npm i react-screen-orientation`. There is 1 other project in the npm registry using react-s www.n..

[react/javascript] 디바이스 / 브라우져 체크하기 https://www.npmjs.com/package/react-device-detect react-device-detect Detect device type and render your component according to it. Latest version: 2.2.2, last published: 7 months ago. Start using react-device-detect in your project by running `npm i react-device-detect`. There are 762 other projects in the npm registry usin www.npmjs.com 손쉽게 체크가능 #설치 npm inst..

[react/vscode] Reactjs code snippets 사용법 및 추천 사용하면 작업 효율을 가득 늘릴수 있다, #추천 rfce Snippets Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key. TriggerContent rcc→class component skeleton rrc→class component skeleton with react-redux connect rrdc→class component skeleton with react-redux connect and dispatch rccp→class component skeleton with prop types af..

[random/js] javascript random 난수 생성하기 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive } #random #랜덤 #rand #난수 #javascript

[javascript/html] 이미지 시퀀스 플레이어 개선 버전(pre load 등)(드래그버전, 휠버전 포함) https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/ Let's Make One of Those Fancy Scrolling Animations Used on Apple Product Pages | CSS-Tricks Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into view, ..

[javascript/html] 자리수 만큼 남는 공간을 0으로 채우기(자리수 맞추기) https://blogpack.tistory.com/600 자리수 만큼 남는 공간을 0으로 채우기 숫자를 웹상에 문자로 표현을 할 때 자리수만큼 앞에 0을 채워야 하는 경우가 있습니다. 예를들어 년-월-일 날짜의 경우 "2020-05-09" 와 같은 표시를 하는 경우 월과 일 앞에 0을 채워서 자리수를 10 blogpack.tistory.com 위 블로그에서 아주 잘 구성해둔 글이 있어 가져와서 공유합니다. progressbar 구현 중에 잘 사용하였다 //숫자 프로토타입으로 입력 길이만큼 앞에 0을 채운 문자열 반환 Number.prototype.fillZero = function(width){ let n = Str..

[javascript/html] 자식 태그가 부모보다 투명도 높게 설정하기(opacity) 기본적으로는 opacity를 통하여 투명도를 설정하면, 자식또한 투명도가 동일하게적용되어 자식객체의 투명도를 수정할 수 없다 # rgba를 통하여 background-color를 설정하면 이런 문제를 해결 할 수 있다. #opacity #div #html #rgba

[javascript/html] videojs 비디오 custom progress bar 구현 이징(애니메이션)을 넣어서 표현하려고하였으나, 자연스럽게되긴하지만, 딜레이가 발생하여 정확한 프로그래스 표현에 한계가있어서 이징없이 구현하였다, 포스팅 요청시 이징 구현한 애니메이션 포함된 프로그래스바도 포스팅하겠다 #html 특별한 코드가 없다, relative와 absolute를 이용하여 bar와 value를 겹치게하였고, width를 %로 프로그래스바 구현 #javascript 이전에 포스팅한 timeupdate 이벤트를 활용하여, 연산된 값 적용 var player = videojs("myPlayer", { sources: [{ src: "/resources/1.mp4", type: "video/mp4"..