전체 글94 [React/Typescript] styled-components에서 props사용 시 에러 문제상황 interface StyledDivProps { isfocused: boolean; } /* --- style --- */ const SearchBar = styled.div` background-color: ${(props) => props.isfocused ? "white" : "#f2f2f5"}; border: 1px solid ${(props) => (props.isfocused ? "#dddddd" : "#f2f2f5")}; transition: all 0.4s ease; `; const Topbar = () => { // 검색창 css관리용 const [isfocuse, setIsfocuse] = React.useState(false); const onFocus = () => { se.. 2024. 1. 10. [Typescript] 프로젝트 시작하기 타입스크립트로 프로젝트 시작하기 npx create-react-app myApp --template typescript 처음엔 npm init react-app (프로젝트이름) --template typescript 으로 설치를 시도하였으나 타입스크립트가 설치되지 않아 결국 npx로 설치했다 .. 원인은 모르겠다(ㅜㅜ) 아무튼 잘 설치가 되었다면 index나 app파일 확장자가 .tsx로 되어있으며, tsconfig.json(ts파일을 js로 변환)이 디폴트로 들어있는 프로젝트가 설치가 된다! 2024. 1. 9. [React] input type date 아이콘 커스텀 ✨ 구현된 모습 CSS const SearchYM = styled.input` font-family: var(--font-Pretendard-Regular); font-size: 23px; font-weight: bold; border: 0px; &:focus { outline: none; } // 날짜 선택 아이콘 커스텀 &::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator { background: url("/image/icon_DateA.png") center center no-repeat; cursor: pointer; &:hover { background-color: #eeeeee; border-radius: 20px; } } `;.. 2023. 12. 27. [React] 자동 무한 롤링 슬라이드 구현 ✨ 구현된 모습 🙏 도움받은 블로그 React - 무한 롤링 슬라이드(배너) 구현하기 :: 개발 흔적 남기기 (tistory.com) [Javascript] 자동 롤링 배너를 만들어보자! (velog.io) 해당 애니메이션의 명칭이 맞는지 잘 모르겠으나, 구글링 해보니 몇몇분들이 해당 네임을 쓰고있어서 나도 그냥 자동 무한 롤링 슬라이드라고 부르기로 했다(ㅎㅎ) 원리는 간단했으나 @keyframes에 대한 이해가 아직은 부족해서 따라하는 것만으로도 벅차다ㅠ 나의 경우 원본 슬라이드와 복제 슬라이드를 아래 사진과 같이 배치하여 함께 돌아가도록 했다 !! CSS const Silde = styled.div` position: relative; opacity: 0.8; `; const MovieList = s.. 2023. 12. 25. 이전 1 2 3 4 5 ··· 24 다음
