next에서 이미지를 불러오는 방법을 모아봤다. import CampusImage from "public/landing/first_bg_round_real.svg"; return( ) return() ==> public 경로명 제외해야 함!! import Image from "next/image"; 각 방법 중에 맞는 방법을 선택해서 사용해보자. 3번째는 next에서만 사용할 수 있는 next/image의 Image 태그이다. 다루기 조금 까다롭기 때문에 공식문서를 잘 읽어보고 사용해야 한다. https://nextjs.org/docs/api-reference/next/image next/image | Next.js Enable Image Optimization with the built-in Image..

CODING/React.js 2022. 12. 26. 09:28

자바스크립트 문법 중, 많이 사용하는 배열, 객체배열 관계식을 정리해보았다. **두 배열의 교집합 찾기** const a2 = [1, 2, 3]; const a3 = [1, 2, 3, 4]; console.log(a2.filter(x=> a3.includes(x))); **객체 배열에서 속성 값을 배열로 추출** objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ]; (예 : field `foo`는 array) `[ 1, 3, 5 ]`. function getFields(input, field) { var output = []; for (var i=0; i a.foo); 배열1개에서 중복값 제거 const uniqueArr = du..

CODING/Javascript 2022. 12. 25. 09:10

완전 배끼기보다는 흐름만 훑어보는 게 좋을 듯 하다. ## 1.빌드 npm run build(빌드시 백앤드 서버는 켜있어야 한다!!) 보통 github에서 push하면 cicd에서 관리해서 에러 찾아줌(빌드 테스트) 파일 1메가 넘어가면 react.lazy? 등이용해서 코드스플리팅 어떤게 실질적으로 용량이 큰지 알기 위해서는 npm i @next/bundle-analyzer gzip압축을 하면 용량 줄어듬 위에건 next.config.js에서 수정하고 package.json수정하기 위해서 (배포모드로 변경) --> 윈도우에선 cross-env까지 설치한 다음에 build명령어에 gogo tree shaking 검색하여 줄이는 방법 찾는다. immer는 익스플로어에서 실행안됨 따라서 util/produce..

CODING/etc. 2022. 12. 24. 19:18

크롬 또는 여러 브라우저에서 제공되는 기본 스크롤바 모양을 변경할 수 있다. CSS를 아래와 같이 변경해주면 된다. ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.16); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-track { background-color: transparent; border-radius: 10px; box-shadow: inset 0px 0px 5px white; } border-radius를 주어서 원형 느낌을 주고,..

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

랜딩페이지에서 요소들이 움직이면서 뜨거나, 모달창이 부드럽게 뜨는 등의 애니메이션을 구현할 때 사용한 좋은 라이브러리를 소개한다. 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