본문 바로가기

전체 글48

[styled-components] props 사용법 총정리!! A. 사용할 Button 컴포넌트 생성 // Button/index.jsx import * as S from "./button.style.js"; export const Button = ({ children, ...props }) => { return ( {children} ); }; // Button/button.style.js interface ButtonProps { width?: string; size?: string; color: string; } export const Button = styled.button` display: flex; width: ${(props) => (props.width ? props.width : "auto")}; align-items: center; justify-.. 2023. 7. 18.

리액트 쿼리 쿼리키를 이용한 검색, 카테고리 기능, 다중 필터 🐸 : 이 글은 아래 그림의 빨간 네모 부분과 같은 상단 nav바, 카테고리나, 검색기능을 구현하기 위해서 리액트 쿼리를 사용한 기록이다. 📌 이글을 이해하기 위해 알아야할 것들 1. react를 할 줄 알아야해요 2. react-query를 사용해여 3. axios를 이용한 통신으로 데이터를 받아오는 가정이에요 아래와 같이 useQuery에서 querykey를 넣는 부분에 두번째 인자부터 값을 넘겨서 querykey안에 있는 정보를 꺼내 쿼리스트링을 통해 서버와 통신할 수 있다. // src/components/main const [currentCategory, setCurrentCategory] = useState(""); const [searchInput, setSearchInput] = useSt.. 2023. 3. 29.

React/Next구글맵Api 사용하는 법 https://developers.google.com/maps?hl=ko Google Maps Platform | Google Developers Google Maps Platform 설명 developers.google.com 먼저 위의 링크로 들어가서 시작하기를 누른다 처음 방문했다면 각종 약관 동의가 나올 수 도있는데 동의하고 넘어간다. 오른쪽 카테고리에서 API를 누른다 카드를 인증하여 넘어간다, 카드를 추가한다고 바로 돈이 나가는 것이 아닌 매월 28,000회의 호출범위 안에서 무료로 사용할 수 있다고 한다, 이외에도 설정으로 통해 과금 범위가 다가오면 알람이나 한도를 설정하여 요금이 청구되지 않게 할 수 있다. 위 사진 처럼 사용자 인증 정보로 들어가서 Maps API Key를 클릭한다. 그러.. 2023. 3. 23.

[postgresql] pqadmin 덤프파일 import/export 하는법 pqAdmin을 통해 export하는 법 원하는 DB에 마우슨 오른쪽 버튼 클릭 -> Backup 버튼을 누르고 아래와같이 생성할 filename과 옵션을 선택해주면 된다. (🐸 : 저는 파일 이름과 options 에서 첫번째 두번째말고는 기본설정으로 놔두었습니다, 찾아보시고 본인에게 필요한 옵션을 추가하면 될 듯합니다) 이렇게 하고 백업 버튼을 누르면 아래와 같이 백업 파일이 생성되게 됩니다, 저는 filename 부분에 문서 루트에 boardDB라는 이름을 지정해주었기 때문에 아래와 같이 문서 폴더안에 생긴것을 확인할 수 있습니다. pqAdmin을 통해 import하는 법 백업한 디비 덤프파일을 import하기 위해서 아래와 같이 아무 테이블도 갖고 있지않은 날것?의 새로운 디비(test_backup.. 2023. 3. 21.

이전 1 2 3 4 5 ··· 12 다음

티스토리툴바