본문 바로가기

분류 전체보기129

[Next.js] Route System - 3) next/route useRouter useRouter() react-router-dom dml useNavigation 기능을 Next.js 에서 next/route useRouter()로 구현할 수 있다. import { useRouter } from 'next/router'; export default function Home() { const router = useRouter(); console.log(router); // ... } pathname: string: 현재 경로로 페이지 경로 이면, basePath 또는 locale 은 포함되지 않는다. query: object: 동적 라우트 매개변수를 포함하는 객체로 구문 분석된 쿼리 문자열 asPath: string: basePath또는 locale 없이 브라우저에 표시되는 경우(q.. 2023. 12. 5.
[Next.js] Route System - 2) next/link - Link Link Next.js 에서도 react-router-dom 처럼 next/link 의 link 를 사용할 수 있다. import Link from 'next/link' function Home() { return ( Home About Us Blog Post ) } export default Home Props Prop Example Type Required href href="/dashboard" String or Object Yes replace replace={false} Boolean - scroll scroll={false} Boolean - prefetch prefetch={false} Boolean - 태그의 속성인 className 이나 target="_blank" 와 같은 것들이 속성으.. 2023. 12. 5.
[Next.js] Route System - 1) pages, app 라우팅 Next.js 에서는 react-router-dom 과 같이 개발자가 직접 라우팅 설정을 하지 않아도 된다. 대신에 hook과 파일 컨벤션을 통해 라우팅을 지원하고 있다. 또한 Next.js는 v13 부터 app 라우팅을 지원하는데 이전에 pages 라우팅 부터 먼저 살펴보자. Next.js pages routing src/pages ├── _app.tsx ├── index.tsx ├── naver.tsx ├── preview.tsx ├── profile │ ├── [name].tsx │ └── index.tsx │ └── phone.tsx └── setting ├── auto-complete.tsx ├── [...search].tsx └── site.tsx Next.js 는 /pages or /src/.. 2023. 12. 5.
[React Native] ios, android 폰트 설정 React Native 프로젝트에 폰트를 설정하는 방법은 두가지가 있다. 첫번째는 ios, android 각 플랫폼이 참조하는 폴더에 직접 파일을 추가해서 설정해주는 방법과, 루트 경로의 폰트 파일을 rnpm 을 통해서 설정하는 방법이다. 판단 후 편한대로 사용하면 될 것 같다. ios, android 폴더에 직접 파일을 추가해서 설정해주는 방법 android 설정 android/app/src/main/assets/fonts 폴더에 폰트 파일 추가 안드로이드 프로젝트 리빌드하면 자동으로 설정된다. $ npx react-native run-android ios 설정 1. xcode 로 ios 폴더 내에서 Fonts 폴더를 만들고 해당 폰트를 넣기 react-native-app └── android └── .. 2023. 12. 4.