react (13) 썸네일형 리스트형 [React] 폰트 적용하기 (.ttf/.otf) 1. 폰트를 다운로드 받습니다. Fontsgeek : Download Thousands Of Cool Free Fonts For Windows And Mac. 1 Style Uncategorized 14 Downloads fontsgeek.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. fonts 폴더를 만들어주고 해당 ttf/otf 파일을 넣어줍니다. 3. index.css에서 해당 폰트를 불러줍니다. @font-face { src: url () } 을 이용하여 해당 폰트를 불러와줍니다. font-swap 속성을 웹 폰트를 적용하는 CSS에 추가하면 해당 CS.. [React] Verification code & SMS code Input - 보안코드 인풋 만들기 1. 코드 길이를 정하여 직사각형을 만들어주고, 보안코드를 정중앙에 배치하기 위해 display flex를 사용하였습니다. import styled from "styled-components"; const CODE_LENGTH = 5; const App = () => { return ( {Array(CODE_LENGTH) .fill(0) .map((v, i) => { return {codes[i]}; })} ); }; const Container = styled.div` display: flex; flex-direction: column; align-items: center; margin: 200px 0; `; const Box = styled.div` display: flex; justify-conte.. [React] CopyToClipboard 구현하기 Copy-To-Clipboard 구현하기 개발을 하다 보면 특정 값을 복사해야 하는 경우가 있는데, 이러한 상황에서 자동으로 복사하는 버튼을 구현할 수 있습니다. 텍스트를 복사하는 방법에는 여러가지가 있지만 그중에서도 Navigator Web API 를 사용하면 복사하는 기능을 쉽게 구현할 수 있습니다. Navigator Navigator 인터페이스는 사용자에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 어플리케이션을 특정 활동에 등록할 때 사용합니다. Navigator 객체는 window.navigator 읽기 전용 속성으로 접근할 수 있습니다 - MDN navigator.clipboard.writeText(text) 장점 1. 간단한 코드로 복사 기능을 구현 할 수 있습.. [Next.js] React와의 차이점 설치하기 npx create-next-app@latest . —typescript React : Library, CSR Next : Framework, SSR React와 다르게 라우팅 등 기본적으로 나오는 것들은 없지만, 지정된 장소에 코드를 작성하면 자동으로 코드를 불러온다. ex) pages폴더안에 원하는 컴포넌트 제목을 작성하면 자동으로 라우팅된다. React처럼 자유로운 수정은 불가능하다. React는 오류페이지를 작성해야하지만, Next는 default page 존재.(수정가능) React : 브라우저가 유저가 보는 모든 UI를 만든다. 브러우저가 js를 가져와서 그 js가 모든 ui를 만든다. html은 비어있는 하나뿐이다. (느린 연결에서 큰 단점이 생김) Next : html이 존재하므로.. React-toastify 가이드 react-toastify 설치하기 npm i react-toastify App ToastContainer 넣고, 스타일 설정해주기. toast 부르는 함수 설정하기 함수 주요 설정 옵션 postion - 위치 지정 ex) position: "top-left", "top-right", "top-center", "bottom-left", "bottom-right", "bottom-center" autoClose - 꺼지는데 걸리는 시간 (ms) ex) autoClose : 1000 hideProgressBar - 진행시간 바 숨김 ex) hideProgressBar : true icon - 아이콘설정 또는 제거 ex) icon: '' closeOnClick - 클릭으로 토스트 제거 ex) closeOnCl.. React GlobalStyle Font 적용하기 제일 먼저 사용할 폰트를 다운받았습니다. 폰트 사용을 위해 index.css에 폰트를 등록해줍니다. 제일 중요한 점은 otf 파일은 format에 'opentype'을 지정해 줘야 합니다. 왜인지 format('otp')를 먹지를 않습니다. 글로벌스타일을 사용하기위해 atoms에 GlobalStyle을 만들어주고, App에 적용해줬습니다. 다음과 같이 적용이 잘 된것을 확인 할 수 있었습니다. React-Router v6 React-Router ? 신규 페이지를 불러오지 않는 상황에서 사용자가 요청한 URL에 따라 해당 URL에 맞는 하나의 페이지를 렌더링해주는 라이브러리입니다. const App = () => { return ( //상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 ); } export default App; useParams :id 와 같이 페이지 별 id값을 받아올 수 있습니다. id를 사용하는 페이지에서 useParams를 사용해줍니다. const {id} = useParams(); useSearchParams ( QueryString ) ?를 사용하며, data?id=1&lang=ko 와 같이 네임과 벨류를 함께 전송해줍니다. const [serchParams, set.. useQuery useQuery ? API연동에 특화된 라이브러리로 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줍니다. 반환 값을 활용하여 성공, 실패 처리가 가능합니다. ( isFetching, isLoading, error, state 등 ) Status isLoading : 현재 데이터 요청 중 isError : 오류 발생 isSuccess : 데이터 요청 성공 data : 요청 성공한 데이터 refetch : 다시 요청을 시작하는 함수 const Ex = () => { const result = useQuery('posts', postData); const { data, error, isLoading } = result; if (isLoading) return Loading...; if (error).. 이전 1 2 다음
