개발(Development)273 [리액트 next.js 테이블 에러] Expected server HTML to contain a matching <tr> in <table> # Next.js에서 React로 table 생성시 에러 해결 방법 - 문제 현상 Next.js 환경에서 React로 생성시, 아래와 같은 에러가 발생할 수 있다. Expected server HTML to contain a matching in . Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. There was an error while hy.. 2024. 1. 17. [React Native] ScrollView 수평(Horizontal) 스크롤 구현 방법 # 리액트 네이티브에서 Scroll View 수평 스크롤 구현 방법 1. 수평 스크롤 구현 방법 ScrollView 컴포넌트의 `horizontal` 속성을 true로 설정하면 된다. (그냥 속성을 표시만 하면 true가 된다) 2. 스크롤바 감추는 방법 혹시 수평 스크롤바가 생긴다면, `showsHorizontalScrollIndicator`을 false로 설정하여 숨길 수 있다. export function HorizontalScrollView() { return ( {/* ... */} ); } 2024. 1. 14. [리액트 네이티브] Image에 외부URL / 로컬이미지파일 설정 방법 # React Native의 Image 컴포넌트에 외부URL 및 로컬파일 적용 방법 1. 로컬 이미지 파일 적용 방법 source 에 require("상대경로") 메서드 반환값을 세팅해주면 된다. 2. 외부 이미지 URL 적용 방법 source 에 { uri: "외부 이미지 URL" } 객체를 세팅해주면 된다. 2024. 1. 12. [리액트 네이티브] Pressable 이벤트 버블링 막기(stopPropagation) # React Native에서 이벤트 버블링 막는 방법 Pressable 컴포넌트의 onPress 이벤트 핸들러 호출시, 이벤트가 더 이상 전달(이벤트 버블링) 되지 않도록 하려면 콜백함수의 인자로 들어온 event의 event.stopPropagation() 메서드를 호출해주면 된다. event의 Typescript 타입은 GestureResponderEvent 로 세팅해주면 된다. export default function RecipeItem({ recipe }: Props) { const pressButton = (event: GestureResponderEvent) => { event.stopPropagation(); // ... }; return ( {/* ... code ... */} ); } 2024. 1. 12. [리액트 네이티브] Text에 borderRadius 적용 안될 때 해결방법 # React Native 에서 Text에 borderRadius 적용 방법 - 문제 현상 리액트 네이티브에서 Text 컴포넌트에 borderRadius가 적용되지 않는 현상이 있었다. - 해결 방법 Text를 View로 감싸주고, View에 borderRadius 를 적용해주면 된다. export default function RadiusText() { return ( // Text를 View로 감싸준다 카레유 ); } const styles = StyleSheet.create({ // View에 borderRadius 를 적용한다. textContainer: { borderRadius: 30, padding: 20 }, textContent: { fontSize: 12 } }); 2024. 1. 12. [리액트 네이티브] ScrollView에서 flexDirection: row 좌우 수평 정렬 및 flexWrap 줄바꿈 적용 방법 # React Native - ScrollView 좌우배치 및 줄바꿈 적용 방법 - 문제 현상 리액트 네이티브에서 ScrollView의 스타일로 flexDirection: row를 적용해도 내부 요소들이 좌우로 수평 정렬되지 않는 현상이 있었다. - 해결 방법 ScrollView 내부에 중간 View를 만들어 flexDirection: row 를 적용하면, View 내부에 자식 요소들은 수평 정렬이 가능해진다. 줄바꿈까지 적용하려면 중간 View에 flexWrap: wrap 을 적용해주면 된다. export default function ItemList() { const itemList = getItemList(); return ( {/* 중간 컨테이너 View를 넣어줘야 함 */} {itemList.m.. 2024. 1. 12. [Next.js 13] head 태그 - title 및 meta 데이터 추가/수정 방법(Metadata API) # Next.js 13 - 메타 데이터 추가/수정 방법 (Metadata API) 검색최적화(SEO)를 위해서는 HTML페이지의 태그에 메타 데이터를 잘 정의해주어야 한다. 그러나 직접 루트 레이아웃(`/app/layout.js`) 파일의 html 태그에 head 태그를 삽입하고 수정해서는 안 된다. 공식 문서에도 다음과 같이 쓰여있다. (not에 볼드체 처리가 되어 있다.) "You should not manually add tags such as and to root layouts. Instead, you should use the Metadata API." 따라서 Next.js가 제공하는 MetaData API를 이용해 meta data를 추가 정의해야 한다. MetaData API를 이용하면 Ne.. 2023. 8. 29. [Next.js 13] layout.js: 레이아웃 기본 정리 # Next.js 13 - 레이아웃(layout.js)란? Next.js 13부터 도입된 layout.js 파일은 여러 페이지(page.js) 들에 공통적으로 적용되는 UI를 정의하는 컴포넌트이다. layout.js는 하위의 page.js 및 layout.js 를 자식(children)으로 감싸서 화면을 렌더링 한다. 따라서 여러 레이아웃을 만들어 두고, 부모-자식 레이아웃 구조로 중첩하여 적용하는 방식도 가능하다. 또한 레이아웃(Layout)에 정의된 UI와 상태 값들은, (경로 이동-Navigation 등이 발생하더라도) 계속해서 유지되며 재렌더링 되지 않고 재활용된다. # layout.js(레이아웃) 정의 방법 layout.js 를 정의하는 방법은 다음과 같다. /app 디렉터리, 혹은 그 내부의 .. 2023. 8. 29. [Next.js 13] page.js : 페이지 컴포넌트 기본 정리 # Next.js13 - Page.js 컴포넌트란? page.js 는 Next.js에서 App Router를 위해 제공하는 React 컴포넌트 파일이다. 따라서 파일명을 바꾸면 안된다. 타입스크립트의 .tsx는 가능하다. page.js 컴포넌트는 크게 아래의 두 가지 역할을 수행한다. Routable 브라우저에서 접속 가능하게 만든다. page.js 파일이 속해있는 폴더명을 브라우저에서 접속 할 수 있는 경로(url segment)로 만든다. UI 현재 접속한 화면의 UI를 만든다. 결과적으로 JSX를 리턴하는 React 컴포넌트이다. # Page.js 사용 방법 (라우트 정의) page.js 를 통해 라우트(접속 경로 및 화면 UI)를 정의하는 방법은 다음과 같다. /app 디렉터리 내부에 폴더를 만든.. 2023. 8. 29. 이전 1 2 3 4 ··· 31 다음
