![]()
props로 함수 전달하기(매개변수x) //부모 컴포넌트 import React from "react"; import Child from "./Child"; const Parent = () => { // props로 전달할 함수 const testFunc = () => { console.log("addArticle 함수 호출"); }; return ; }; export default Parent; // 자식 컴포넌트 import React from "react"; const Child = ({ propsFunc }) => { return ( // 버튼 클릭 시 부모 컴포넌트의 testFunc 함수 호출 Add Article ); }; export default Child; props로 함수 전달하기(매개..
![]()
https://www.framer.com/motion/use-in-view/ useInView | Framer for DevelopersA simple state hook for when an element is within the viewport.www.framer.com https://velog.io/@flashclub/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%97%90-%EB%94%B0%EB%A5%B8-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EA%B5%AC%ED%98%84-feat.-framer-motion 리액트 스크롤에 따른 애니메이션 구현 (feat. framer-motion)frame..
![]()
//렌더링 ; // 스타일 밑 컴포넌트 const PromotionContainer = styled.div` background-color: #4d207a; width: 100%; height: 150px; display: flex; flex-direction: column; justify-content: center; `; const SlideTextContainer = styled(PromotionContainer)` overflow-x: hidden; display: flex; flex-direction: column; `; const SlideText = styled.div` white-space: nowrap; `; const MotionSlideText = ({ direction, text }..
![]()
https://www.hanl.tech/blog/vs-code-react-time-awesome-snippets/
![]()
도메인 구매 아래 링크(가비아)에서 도메인을 구매한다. https://domain.gabia.com/regist/regist_domain 가비아: 대한민국 도메인 점유율 1위대한민국 100만 도메인 등록 업체domain.gabia.com이 때, 도메인 구매 시 기본 기간이 3년으로 설정되어 있지만 할인은 1년치에만 적용되기 때문에 1년으로 선택한다. DNS 설정 위 사진과 같이 변경 후 저장합니다. (아래 복붙)A@76.76.21.21CNAMEwwwcname.vercel-dns.com.도메인을 복사합니다. Vercel 도메인 변경도메인을 변경할 프로젝트를 클릭합니다. Settings > Domains 정상적으로 도메인이 등록되었습니다.이제 3개의 도메인을 통해 접속이 가능합니다. 유의사항만약 도메인 ..
![]()
Vercel 배포 방법 1. github에 레포지토리를 만든다.(Public / Private 모두 가능이기 때문에 소스코드 공유 싫으면 Private로 레포 생성) 2. Vercel 회원가입 및 github 연동 (github으로 회원가입해야 레포지토리가 연동되는지는 모르겠음 웬만하면 깃헙으로 회원가입 ㄱㄱ) 3. Vercel에서 github 레포지토리(repositories) 불러오기(import) 4. Vercel 프로젝트 생성 및 설정 배포 이후 유지보수 1. 깃헙 레포지토리 클론한다. 2.유지보수 작업 후 커밋 3. npm run build 를 통해 재배포 github 호스팅에서 Vercel로 호스팅 서비스 변경 만약 gh-pages 를 이용한 github 호스팅을 이용하는 중이었고 Browse..
![]()
1. public 폴더 아래 background.jpg 이미지를 넣는다 2. 아래 코드 참고하여 배경 이미지를 적용할 DOM에 background-image 속성을 적용한다 const Background = styled.div` height: 100%; background-image: url("./background.jpg"); background-repeat: no-repeat; /* 배경 이미지 반복 설정 */ background-size: cover; /* 배경 이미지 크기 조절 (cover, contain 등) */ background-position: center; /* 배경 이미지 위치 조절 */ `; + 필자는 아래 참고자료를 참고해 경로를 background-image: url("/back..
![]()
https://wildeveloperetrain.tistory.com/146 Javascript Cookie 쿠키 저장, 가져오기, 삭제 함수 쿠키(Cookie) 개념, 본격적으로 코드를 보기 전에 쿠키(Cookie)의 개념부터 간단하게 살펴보면, HTTP 쿠키는 웹 브라우저(web browser)에 저장되는 4KB 크기를 가진 문자열입니다. 기본적으로 HTTP 프로토콜 wildeveloperetrain.tistory.com
