분류 전체보기 (115) 썸네일형 리스트형 [CSS] Image 반응형 1:1 비율로 맞추기 이미지를 반응형의 1:1 비율로 맞추기 위해서는 position: 'relative', width: '100%', paddingBottom: '100%', overflow: 'hidden'가 적용된 div 태그로 이미지를 감싸준다. 이후 img 태그에 position: absolute, width:100%, height:100%를 적용해주면 이미지를 반응형의 1:1비율로 맞춰줄 수 있다. img { cursor: pointer; position: absolute; width: 100%; height: 100%; } [React] 모달 창 닫힐때 Animation 주기 모달창이 닫힐 때 에니메이션을 주기 위해 우선 모달창을 제어하는 state를 제외하고 에니메이션을 제어 할 state를 하나 더 만들어주었다. const [animationOn, setAnimationOn] = useState(false) 이후 닫기 버튼 클릭 시 animationOn을 true로 바꿔주고, setTimeout을 사용하여 0.5초 후 animationOn과 modalOpen을 false로 바꿔주면 된다. setAnimationOn(true) setTimeout(() => { setAnimationOn(false) setModalOpen(false) }, 500) animationOn이 true로 설정되어 있을 때, 아래와 같이 에니메이션 css를 적용해주어 효과를 입힐 수 있었다.ㅁ $.. [React] 모달 영역 외부 클릭시 모달 닫기 const [modalOpen, setModalOpen] = useState(false) const el = useRef() useEffect(() => { window.addEventListener('click', handleCloseModal) return () => { window.removeEventListener('click', handleCloseModal) } }, [modalOpen]) const handleCloseModal = (e: MouseEvent) => { if (modalOpen && e.target !== el.current) { setModalOpen(false) } } //모달 모달 영역의 엘리먼트를 지정해주기 위해서는 useRef를 사용한다. useRef를 사용해 모달 .. [React] React-router-dom v6 params 사용 및 뒤로가기 React-router-dom v6 에서는 import React from 'react' import Index from '../pages/Works' import SearchPortfolio from '../pages/Works/components/SearchPortfolio' const Works = { name: 'works', path: '/works', element: , children: [{path: ':id', element: }] } export default Works 위와 같이 useRoutes를 사용하여 params를 지정해줄 때 {params.id ? ( ) : query.type === 'weplanet' ? ( ) : query.type === 'client' ? ( ) : (.. [React] html 태그가 적용된 상태로 텍스트 나타내기 admin에서 편집기를 사용해서 글을 작성하면 사용자 페이지에서 해당 내용을 받아와 나타내야 했다. 물론 이미지 파일 또한 첨부가 가능해야 했고, 편집기에서 이미지를 업로드 했을 시 사용자 페이지에서 이미지가 아닌 태그가 텍스트로 나타나는 현상이 발생했다. 이를 해결하기 위해 dangerouslySetInnerHTML 를 사용했다. 위와 같이 __html의 값으로 태그를 적용할 내용을 넣어주면 해당 div 안에서 태그가 적용된 상태로 텍스트를 나타낼 수 있다. [CSS] Safari에서 font-family가 명조체로 적용되는 Issue font-family: 'Pretendard', 'Apple SD Gothic Neo', Sans-serif; 다음과 같이 Pretendard가 적용되지 않았을 때 다음 폰트를 지정해주면 해결할 수 있다. [React] Enter 입력시 Event 발생시키기 ID, Password를 입력한 뒤 Enter키를 눌렀을 때 로그인이 되게 하는 기능을 구현하기 위해 onKeyPress 함수를 썼다. onKeyPress 안에 키를 눌렀을 때 실행할 함수를 넣어주면 된다. onKeyPress = e => { if (e.key === 'Enter') { this.handleLogin() } } 위와 같이 입력된 키가 Enter일때 로그인이 되게끔 구현해줄 수 있었다. [React] ERESOLVE unable to resolve dependency tree 에러 react-simple-image-viewer를 설치하는 중 아래와 같은 에러가 발생했다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: baro-web-v2@1.0.0 npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! react@"^16.6.3" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.0" from react-simple-image-viewer@1.2.1.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음 목록 더보기