본문 바로가기

전체 글51

[React Native Webview] 웹뷰에서 가상 키보드 노출 유무 감지하기 서비스를 개발할 때 기획상 가상 키보드의 노출 여부에 따라 레이아웃이 변경되어야 하는 상황이 발생할 수 있는데, 이 때 가상 키보드가 노출되어 있는지에 대한 정보를 알아야 구현이 가능하다. 해당 이슈에서는 네이티브에 해당 기능이 있기 때문에 감지 자체는 네이티브에서 하고, 그 데이터를 웹으로 전송하는 방식으로 구현했다.[가상 키보드 노출 예시]React Native먼저, Keyboard 모듈에 이벤트리스너를 생성해 가상 키보드 노출 여부를 웹뷰로 전송(postMessage)한다.iOS의 리스너 타입은 keyboardWillShow, keyboardWillHide이며, AOS는 keyboardDidShow, keyboardDidHide이다.주의할 점은, show와 hide 이벤트가 따로 있으므로 해당하는 .. 2024. 8. 11.
[Next.js] Dynamic Routes(동적 경로) Dynamic Routes 정해지지 않은 동적 데이터를 세그먼트로 사용하려는 경우, 요청 시 채워지거나 빌드 시 미리 렌더링되는 동적 라우팅을 사용할 수 있다. 동적 세그먼트는 이름을 대괄호로 묶어 만들 수 있다. 이 세그먼트는 layout, page, route 및 generateMetadata(메타데이터 함수)에 매개변수로 전달된다. Example(예제) 예를 들어 app/blog/[slug]/page.js에서 [slug]는 동적 세그먼트이며, 아래와 같이 매개변수로 전달된다. type PageTypes = { params: { slug: string } }; const Page = ({ params }: PageTypes) => { return My Post: {params.slug}; }; Gen.. 2023. 9. 26.
[Next.js] Routing Groups(경로 그룹) app 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑되지만, 의도적으로 해당 폴더가 URL 경로에 포함되지 않도록 할 수 있다. Convention(컨벤션) 경로 그룹은 폴더 이름을 괄호로 묶어 생성할 수 있다.(ex: (folderName)) URL 경로에 영향을 주지 않고 경로 구성하기 아래 구조에서 (marketing)과 (shop)은 URL 경로에서 제외된다. URL 경로에서 제외되더라도, 아래 구조처럼 내부에 layout.js 파일을 추가해 서로 다른 레이아웃을 적용할 수 있다. Opting specific segments into a layout(특정 세그먼트를 레이아웃으로 선택하기) 특정 경로를 레이아웃으로 선택하려면 새 경로 그룹(ex: (shop))을 생성하고 동일한 레이아웃을.. 2023. 9. 24.
[SWR] 무한스크롤 구현할 때 useSWRInfinite에서 항상 첫 페이지를 다시 불러오는 문제 문제 React에서 SWR 사용중 무한스크롤을 구현할 때, useSWRInfinite를 써서 구현할 수 있다. 이 때, 네트워트탭을 보면 이상한 점이 보인다.(중간 sentry는 무시) 이미지를 보면 최초 1페이지를 요청 후, 스크롤을 내려 2페이지를 요청할 때, 또 1페이지를 부른다. 그 후 3페이지를 요청할 때도 마찬가지로 1페이지를 다시 요청한다. (왜 그러지..?) 원인 SWR 깃허브의 유사한 이슈들과 공식 문서를 확인 결과, SWR에서는 관련된 옵션을 제공하고 있었다. revalidateFirstPage revalidateFirstPage 옵션은 무한스크롤 요청시마다 첫 페이지의 유효성을 검사할건지를 선택하는 옵션이며, 기본적으로 true로 활성화 되어있다. 예를 들어, 1페이지를 요청 후 2페.. 2023. 9. 16.
[Next.js] Linking and Navigating(라우트 탐색) Next.js에서 라우트 탐색은 Link 컴포넌트를 사용하거나 useRouter Hook을 사용하는 방법이 있다. 링크 컴포넌트(Link Component) Link 컴포넌트는 a 태그를 확장하여 라우트 간 프리페칭(pre-fetching) 및 클라이언트 탐색을 제공하는 내장 컴포넌트이며, 아래와 같이 사용한다. import Link from 'next/link'; export default function Page() { return Dashboard; }Link 컴포넌트에는 href 말고도 replace, scroll, prefetch 프로퍼티를 전달할 수 있다. 해당 라우트 활성화 체크 usePathname hook을 사용하여 현재 라우트가 활성 상태인지 확인할 수 있다. 'u.. 2023. 8. 17.
[Next.js] Pages and Layouts(페이지와 레이아웃) Pages(페이지) 페이지는 각 라우트의 고유 UI이며, React와 같이 컴포넌트를 구성하여 내보내서 사용할 수 있다. 아래 이미지와 같이 앱 루트에 page.ts를 생성하여 /에 엑세스 할 수 있으며, 중첩된 폴더를 구성해 내부에 page.ts를 생성하면 해당 라우트에 엑세스 할 수 있다. page 파일은 .js, .jsx 또는 .tsx 확장자를 사용할 수 있다. Layouts(레이아웃) layout.js 파일은 여러 페이지에 사용될 수 있는 공용 UI를 생성하며, 이 파일은 상태를 보존하며 리렌더링되지 않는다. 최초 앱 루트에 생성할 수 있지만, 라우트와 마찬가지로 하위에 중첩해서 사용할 수 있다. 중첩된 레이아웃의 경우, 하위로 갈수록 우선순위가 높아진다. const DashboardLayout .. 2023. 8. 12.
[Next.js] Defining Routes(라우트 정의) 라우트 생성 Next.js는 폴더 자체가 라우트를 정의하는 파일 시스템 기반 라우터를 사용한다. 각 폴더는 URL 세그먼트 에 매핑되는 라우트를 나타내며, 폴더를 서로 중첩해서 중첩 라우트를 구현할 수 있다. 라우트에 액세스할 수 있도록 page.ts 파일을 사용하며, page.ts는 각 라우트의 루트이다. 위 예시에서 /dashboard/analytics에는 page.ts 파일이 없으므로 엑세스 할 수 없다. UI 생성 각 라우트에 대한 UI를 생성하기 위해 일반적으로 page.ts 파일을 사용하며, 여러 라우트의 공용 UI를 생성하기 위해서는 layout.ts 파일을 사용한다. 예를 들어, Next.js에서 첫 번째 페이지를 만든다고 하면, app 폴더 내부에 page.ts 파일을 생성하고 해당 컴포.. 2023. 8. 11.
[Next.js] Routing Routing(라우팅) 먼저, 라우팅을 이야기할 때 주로 사용되는 용어를 살펴보겠다. Tree(트리) 계층적 자료 구조. 예를 들어 부모 및 자식 컴포넌트가 있는 컴포넌트 구조, 폴더 구조 등이 있음 Subtree(하위 트리) 새로운 기준의 계층에서 시작해 마지막에서 끝나는 트리의 일부 Root(루트) 트리 또는 하위 트리의 첫 번째 노드 Leaf(리프) 세그먼트의 노드 중 자식이 없는 노드(예를 들어, URL 경로의 마지막 세그먼트) URL Segment, URL Path 세그먼트는 슬래시로 구분된 URL 경로의 일부이며, URL Path는 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)이다. App Router(앱 라우터) Next.js 13버전에서는 공용 스타일을 관리하는 레이아웃 파일, 중첩 라.. 2023. 8. 5.
[Next.js] Getting Started - Installation(설치하기) Next.js 공식문서 바로가기 Next.js 설치하기 React의 CRA와 유사하게 간편 설치할 수 있으며, 자동 설치와 수동 설치가 있다. 자동 설치 자동 설치의 경우, 명령어로 설치 후 기본적인 폴더 구조가 자동으로 생성된다. npx create-next-app (프로젝트명) 설치 시 아래와 같은 프롬프트가 표시된다. Would you like to use TypeScript? (타입스크립트 사용 여부) Would you like to use ESLint? (eslint 사용 여부) Would you like to use Tailwind CSS? (테일윈드 사용 여부) Would you like to use `src/` directory? (src 폴더를 사용할지 여부) Would you like .. 2023. 8. 2.
[Next.js] Getting Started Next.js를 시작하며 조금 더 디테일한 구현을 위해, 공식 문서를 학습 목표로 삼아 번역하는 개인 스터디입니다. Next.js ? Next.js는 React의 서버사이드 렌더링 구축을 위한 프레임워크이다. 번들링, 컴파일 등의 도구들을 추상화하고 자동으로 구성하며 애플리케이션 구축에 집중할 수 있게 해준다. 주요 기능 Routing 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터 Rendering 클라이언트/서버 컴포넌트를 사용한 렌더링. 서버의 정적/동적 렌더링을 더욱 최적화할 수 있다 Data Fetching React 컴포넌트의 async/await 지원과 웹 플랫폼과 일치하는 fetch API를 통해 간소화된 데이터 불러오기 가.. 2023. 7. 30.

티스토리툴바