arr="01012345678" replaceArr = arr.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3"); console.log(replaceArr); //010-1234-5761 반환
프론트엔드
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로 함수 전달하기(매개..
//렌더링 ; // 스타일 밑 컴포넌트 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 }..
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
const Component = () => { const [genderMale, setGenderMale] = useState(null); const [genderFemale, setGenderFemale] = useState(null); ////////// 성별 변경(남자) const ChangeGenderMale = () => { setGenderFemale(false); setGenderMale((prev) => !prev); }; ////////// 성별 변경(여자) const ChangeGenderFemale = () => { setGenderMale(false); setGenderFemale((prev) => !prev); }; return ( 남자 여자 ); }; const GenderBut..
