전체 글129 [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. [Next.js] Server Components 서버컴포넌트를 이용하여 data fetching 방식을 사용할 때의 장점 1. 클라이언트 단에서 돌아가지 않는 데이터베이스 및 api 등의 백엔드 서비스에 접근이 가능하다. 2. 보안 상 노출되면 안되는 키값들을 클라이언트 단에 드러나지 않게 할 수 있다. 3. data fetching 과 렌더링을 동일한 환경에서 수행할 수 있다. 4. 서버에 렌더링 캐싱이 가능하다. 5. 번들링할 자바스크립트 양이 줄어든다. 일반적으로 리액트에선 모든 작업이 클라이언트 단에서 이루어진다. Next.js 는 이러한 컴포넌트들을 서버에서 부분적으로 렌더링되는 페이지로 만들어서 클라이언트에서 모든 것을 부담하지 않아도 되게 개선하였다. 하지만 이 방식은 이렇게 서버단에서 생성된 HTML에 결국 클라이언트 단에서 hydrat.. 2023. 12. 4. [Next.js] SSR, SSG, ISR SSR SSR은 Server Side Rendering 의 약자로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식이다. Next.js 에서 SSG 와 ISR 와 구분되는 이유는 렌더링 되는 시점이다. SSR는 사용자가 요청할 때 마다 페이지를 새롭게 렌더링한다. 따라서 Fetching 해야하는 데이터가 빈번할 때 사용된다. Next.js 12 에서는 이를 getServerSideProps라는 이름의 함수를 통해 값을 SSRPage에 렌더링한 후 클라이언트에 전달한다. export default function SSRPage({ dateTime }: SSRPageProps) { return ( ); } export const getServerSideProps: GetServerSideProps =.. 2023. 12. 4. [Next.js] SSR과 CSR의 차이 SPA 여기서 SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다. MPA 반면 MPA란, Multi Page Application의 약자로, 탭을 이동할때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다. SSR과 CSR 알아보기 SPA는 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달받아서 클라이언트에서 필요한 페이지를 갱신하기 때문에 CSR로 렌더링하고, MPA는 새로운 요청.. 2023. 12. 4. [React Native] Navigation 에서 주로 사용하는 개념 Stack Navigatior Screen Options 화면 이동 애니메이션 Card: 오른쪽에서 왼쪽으로 이동 Modal: 아래에서 위로 이동 Tab Navigatior Screen Oprions (BackBehavior) android 에서 H/W Back Button 눌렀을 때 이동하는 방법 지정 firstRout: 선언상 제일 처음에 있는 탭으로 이동 initialRoute: 최초 지정한 탭으로 이동 order: 탭을 선언한 순서로 이동 stack output history: 이동한 히스토리 역순으로 이동 Nesting Navigatior *** Navigatior 의 Screen dmf Component가 아닌 다른 Navigatior 로 선언하는 것 Presentation 을 다르게 선언하거.. 2023. 7. 29. 이전 1 2 3 4 5 6 7 ··· 22 다음
