cbp 프로젝트 진행 (21) 썸네일형 리스트형 [2022.07.30] 로컬 링크로 모바일에서도 사이트 확인하기 노트북과 모바일이 같은 와이파이여야 한다. 1. 터미널에 ipconfig 를 작성한다. 2. 해당 IPv4 주소를 확인한다. 3. IPv4주소:3000 을 모바일에서 들어가서 확인 가능 + 또는 npm start에서 나오는 주소로 들어가도 확인 가능 배포 전 사이트 확인이 가능하여 편리한 방법이다. [2022.07.30] React.lazy사용시 SCSS 스타일 적용 오류 로딩시간을 단축하려 전 게시글과 같이 lazy를 사용하자 scss가 적용이 안되는 오류가 발생 원인 1. scss의 다른 파일에서 같은 클래스의 스타일이 적용되었기 때문에 해당 jsx의 scss에서는 따로 지정해주지 않음 해결1. 해당 scss에서도 스타일을 정확하게 기재하여 스타일을 적용시킴 원인2. 다른 사람의 작업 파일 중 jsx의 state가 변하면서 클래스가 변하고 기존 클래스와 변경 클래스의 스타일 파일은 globalStyle에 공용으로 지정되어 사용됨 . =>상위 클래스의 스타일이 해당 jsx에서만 지정이 되어있었기 때문에, 상위부터 클래스 스타일이 적용되지 않아 하위 클래스 스타일도 적용안된던것 해결2. 해당 scss파일에만 적용되었던 클래스 스타일을 globalStyle로 옮겨주어 전역적.. [2022.07.30]사이트 느린 로딩 해결하기(React.memo + React.lazy) 사이트가 로딩시 오래 걸리는 문제를 해결하고 싶었음 (방법1+방법2를 같이 사용하여 로딩시간 단축 해결) 방법1: React.memo 이용하기 ▼ map이 사용되는 jsx에 마지막 export에 아래 코드와 같이 React.memo를 추가한다. export default React.memo(ZetaMap); 방법2 (App.js) (1) import 시켜주기 import { Suspense } from 'react'; (2) 기존 페이지 컴포넌트 import방식을 아래와 같이 const 컴포넌트명=React.lazy(()=>import('경로')); 로 변경한다. const Login = React.lazy(() => import('./pages/login')); (3) Routes를 로 감싸준다. 로딩.. [2022.07.24] 특정 요소가 화면에 스크롤 되면 나타나게 하기(점점 오른쪽으로 커지게 loding처럼 효과) ci.jsx파일 현재 화면에 요소가 스크롤시 나타나면 점점 커지게 효과를 주고 싶었음 (로딩처럼 왼쪽 기준고정, 점점 width가 커져보이는 효과) const updateScroll = () => { const valueTop=ztColRef.current.getBoundingClientRect().top; const viewHeight=window.innerHeight; console.log('valueTop',valueTop); console.log('window.innerHeight',viewHeight); if(viewHeight>valueTop){ ztColRef.current.className='ztColStGr ztColStGrOn'; }else{ ztColRef.current.classNa.. [2022.07.25] BreadCrumb 브레드크럼 만들기 오류1: link를 이용해서 연결하자 오류가 뜸 (app.jsx에서 만들어진 route안에 route로 중복들어가져서인지 오류가 났다.) 해결: useNavigate 를 사용하여 해결함 오류2: 현재 페이지에 글씨 색을 변경하고 싶었으나 조건문에서 오류가 생김 해결: props로 해당 조건에 맞는 값을 전달받아 addClass되게 설정 오류3: 1,2,3depth중 필요없는 값을 props에 쓰지 않아도 이미 태그가 만들어져서 자리를 차지함, before로 준 이미지까지 같이 보이는 오류가 생김 해결: 삼항연산자를 통해 undefined일 경우 display 스타일을 설정함 + 조건오류에서 {twoDepth} x=>twoDepth o 로 변경하여 해결 ▼ 전체 BreadCrumb.jsx의 코드 impor.. [2022.07.23] 모달창 만들기 1. footer에서 "개인정보처리방침, 고객센터" 를 누르면 모달창이 뜨게 설정을 해놓았는데 클릭시 아래 검은 배경이 깔리고, 모달창 밑에 검은 배경을 누르면 모달창을 끄게 하고 싶었다. 기존 ftModal위에 ftDim(검은배경역할)을 형제로 두고, 그 위에 ftModalContain 을 부모로 감쌌다. 그 후 각각 스타일을 적용하고, onclick을 설정함 ▼ 원래 기존 코드에서 추가 작성한 jsx 코드 (개인정보처리방침 코드 /고객센터도 같은 형식으로 작성함) const [ftModal, setFtModal] = useState(false); const [ftsModal, setFtsModal] = useState(false); function FtModal(){ return( {setFtModa.. [2022.07.20] 클릭시 해당영역 top기준으로 이동하기 설정 오류 zeta>index.jsx 파일 오류: 아래와 같이 작성하자 큰 화면에선 문제가 없다가 화면을 줄이자 인증서, 상장을 각각 누르자 top으로 안 가지고 상장이 조금 낮게 올라감 원인: ref값을 각각 설정하고 주자 왼쪽 고정되어 있던 탭버튼 기준으로 scrollTop이 잡힘. import React from 'react'; import {useState, useEffect} from 'react'; import certiUrl from './../../db/certificateList.json'; import awardUrl from './../../db/awardList.json'; import './../../styles/zeta/index.scss'; import AOS from 'aos'; imp.. [2022.07.20] 최종 정리- 해당 영역 스크롤시 왼쪽 메뉴 글씨 색 변경 설정(2) [2022.07.18] 해당 영역 스크롤시 왼쪽 메뉴 글씨 색 변경 설정(1)에 이어서 수정된 부분 1안 : 스크롤position을 숫자로 넣음 오류: 이렇게 설정시 콘텐츠가 추가되거나 반응형때 스크롤위치가 변경되면 오류가 생길 수 있음 import React from 'react'; import {useState, useEffect} from 'react'; import ztHistoryDt from './../../db/historyList.json'; import './../../styles/zeta/zetaHistory.scss'; import AOS from 'aos'; import 'aos/dist/aos.css'; const ZetaHistory = () => { const [ztHisDt,.. 이전 1 2 3 다음
