개발조각

Next.js 14 최신버전 이해하기 및 Next.js 사용하기(1)

개발조각 — Tue, 27 Aug 2024 16:45:08 +0900

1. 라이브러리와 프레임워크의 차이

라이브러리 : 코드에 직접 사용하여 원하는 방식으로 동작하게끔 아키텍처를 자유롭게 설계할 수 있다.
- React : UI를 구축하기 위한 대표적인 라이브러리, 개발자가 원하는 방식으로 자유롭게 코드를 작성할 수 있다.
프레임워크 : 특정 규칙과 자동화된 기능을 제공해 코드의 흐름을 프레임워크가 주도한다.
- Next.js : 프레임워크로, 다양한 결정을 대신해 주고 자동화된 기능을 제공한다. 예를 들어, 데이터 페칭을 자동으로 처리해 주기 때문에 개발자는 이 규칙을 따르면서 코드를 작성해야 된다.

요약 : 라이브러리는 사용자가 코드를 주도하고, 프레임워크는 사용자의 코드를 주도합니다.

2. Next.js 라우팅 시스템

Next.js는 두 가지 라우터를 제공한다.

Page Router : Next.js 12까지의 방식이며, `/page`디렉토리 구조를 따른다.
- `pages/index.js`파일은 루트 경로인 `/`에 매핑된다.
App Router : Next.js 13부터 생긴 새로운 방식이며, `/app`디렉토리 구조를 따른다.
- `app/home/page/tsx`파일은 `/home` 경로에 매핑된다.

Next.js 14에서는 기존의 Page Router를 사용하더라도 에러가 발생하지 않으며, 한 번에 모든 것을 마이그레이션 할 필요 없다.

따라서 개발자는 상황에 따라 App Router로 전환하면 된다.

3. 라우팅과 데이터 페칭의 변화

Next.js 14에서는 라우팅과 데이터 페칭 방식이 크게 변경되었다.

라우팅 방식 : Page Router에서 App Router로 변경되었다.
데이터 페칭 방식 : 기존의 `getStaticProps`, `getServerSideProps`, `getStaticPaths` 함수는 더 이상 사용되지 않으며, 이 기능들은 클라이언트 및 서버 컴포넌트 내부에서 보다 명시적으로 처리할 수 있다.

4. 파일 시스템 기반 라우팅

Next.js는 파일 시스템을 통해 URL을 정의한다.

예를 들어, `/about-us`페이지는 `app/about-us/page.tsx`파일로 구성됩니다. 라우팅 경로를 지정하기 위해 파일 시스템에서 페이지를 표현하며, 반드시 `page.tsx`파일로 생성해야 된다.

app/
  └── about-us/
      └── page.tsx  # /about-us 경로에 매핑

5. Next.js의 특별한 파일들

Next.js에서 중요한 역할을 하는 파일들은 다음과 같다.

`page.tsx` : 특정 경로에 대한 페이지를 정의한다.
- 예를 들어, `app/contact/page/tsx`는 `contact`경로에 해당된다.
`layout.tsx` : 페이지의 공통 레이아웃을 정의한다.
- 예를 들어, 모든 페이지에서 공통으로 사용되는 헤더와 푸터를 정의할 수 있다.
`non-found.tsx` : 잘못된 경로로 접근 시 표시될 페이지를 정의한다. 사용자가 존재하지 않는 URL에 접근할 때 표시
- 예를 들어, /aaaa 이와 같이 잘못된 경로를 지정할 경우 나온다.

layout에 대한 설명은 9번에서 자세히 설명예정

6. 렌더링 방식

rendering : react component를 가져와 브라우저가 이해할 수 있는 html로 변환하는 작업이다.

CSR (Client Side Rendering) : 리액트의 기본 렌더링 방식으로, 브라우저에서 자바스크립트를 로드한 후 UI가 빌드된다.
- 단점으로 SEO 최적화에 불리하고, 첫 페이지 로딩 시 빈 화면이 나타날 수 있습니다.
SSR (Server Side Rendering) : Next.js는 서버에서 미리 렌더링된 HTML을 제공한다. 이는 SEO에 유리하며, 사용자에게 빠르게 콘텐츠를 표시할 수 있습니다.

7. "use client"와 hydrate

"use client" : "use client" 명령어를 component 최상단에 적으면 copmponent가 hydrate 된다.
- 이 명령어가 있는 컴포넌트는 서버에서 먼저 렌더링 된 후 클라이언트에서 hydrate 된다.
- 클라이언트 컴포넌트는 상호작용이 가능하며, 서버 컴포넌트는 기본적으로 서버에서만 렌더링 된다.
hydration : 클라이언트 컴포넌트는 서버에서 렌더링 된 HTML을 받아 상호작용 가능하게 만든다. 예를 들어, 서버에서 렌더링 된 버튼이 클라이언트에서 클릭 이벤트를 처리할 수 있도록 변환된다.
(onClick, setState, useState 등을 사용해서 interactive 한 React component로 바꾼다.)

Next.js의 이전버전에는 모든 component가 hydrate가 됐었지만, 이제는 component를 hydrate 할 건지 선택할 수 있다.

component를 hydrate할 건지 선택한다는 점이 장점인 이유

사용자들의 다운로드하여야 하는 JavaScript 코드 양이 줄어든다. 페이지마다 모든 JavaScript 코드를 다운로드하지 않고, interactive 한 client component만 다루는 아주 작은 JavaScript파일을 다운로드 받게 된다.

"use client"는 client에서만 render한다는 의미가 아니다. (client에서도 render 된다는 의미)

모든 component는 backend에서 먼저 render될것이다.

"use client"명령어가 있든 없든 상관없이 client component, server component 모두 backend에서 먼저 server side render로 pre rende 된다.

모든 것을 server side render로 진행한다.
모든 것을 pre render 되어서 HTML로 변환된다.
HTML이 사용자에게 넘어간다.
client components만 hydrate 되고 interactive 하게 된다.
다른 component들은 interactive가 안된다.(interactive 해질 필요가 없기 때문)

요약 : 모든 컴포넌트는 서버에서 먼저 렌더링 되고, "use client"가 선언된 컴포넌트만 클라이언트에서 hydrate 됩니다.

8. 클라이언트와 서버 컴포넌트

클라이언트 컴포넌트 : 상호작용이 필요한 부분에서 사용되며, 반드시 "use client" 지시어를 선언해야 한다.
- 예를 들어, 버튼 클릭 이벤트가 필요한 경우, 이 컴포넌트는 클라이언트 컴포넌트로 정의해야 된다.
서버 컴포넌트 : 기본적으로 모든 컴포넌트는 서버에서 렌더링 된다. "use client"가 없는 컴포넌트는 서버 컴포넌트로 간주되며, 클라이언트 측에서 추가적인 자바스크립트 로딩이 필요하지 않다.
- 예를 들어, 정적인 콘텐츠를 렌더링 할 때 서버 컴포넌트를 사용할 수 있다.

9. Next.js에서의 렌더링 (6, 7, 8 정리 및 요약)

Next.js는 backend에서 application을 pre render 한다. (Next.js는 SSR을 진행한다.)
모든 component를 가져다가 non interactive 한 HTML로 바꾸고 사용자에게 제공한다.
"use client"명령어를 가진 component가 hydrate 된다. (hydrate는 interactive 된다는 것을 의미함)

요약 : Next.js는 서버에서 모든 페이지와 컴포넌트를 먼저 렌더링 하고, 사용자에게 완전한 HTML을 제공한다. 이후 React는 클라이언트 측에서 추가적으로 상호작용을 활성화한다.

"use client" 명령어를 사용하는 이유

모든 것에 hydrate 할 필요 없다. 만약 어떤 것들은 interactive하고 어떤 것들은 interactive하지 않으면, 예를 들어, UI의 일종의 컴포넌트만을 가지고 있다고 하면 hydrate할 필요없다. 즉 interactive 하게 만들어질 필요 없다는 의미이다.

11. 레이아웃 시스템

Next.js는 레이아웃 시스템을 통해 페이지 간의 공통 요소를 효율적으로 관리할 수 있다.

app/
├── about-us/
│   ├── layout.tsx    # about-us 경로 전용 레이아웃, 해당 폴더안에서도 layout 파일 생성 가능
│   └── page.tsx
├── layout.tsx        # 공통 레이아웃
├── not-found.tsx
└── page.tsx

next.js는 상위폴더로 이동하여 레이아웃이 있는지 확인하고 레이아웃이 있는 경우에는 해당 layout파일을 사용하여 하위 항목을 렌더링 한다. 레이아웃은 서로 상쇄되지 않고, 서로 대체하지 않는다.(서로 중첩되는 거다.)

12. 메타데이터 관리

Next.js에서 페이지의 메타데이터를 설정하는 객체이다. 메타데이터는 페이지의 헤더에 표시되며, `title`과 `description`등의 정보를 포함한다.

export const metadata = {
	title: "Next.js",
	description: "Generated by Next.js",
};

위 코드에서 `title`과 `description`은 페이지의 헤더 부분에 반영된다.

주요 특징 및 장점

중첩 가능 : 메타데이터는 레이아웃이 중첩되는 방식과 유사하게 중첩될 수 있지만, 실제로는 중첩되니 않고 병합된다. 즉, 페이지와 레이아웃에서 각각 정의된 메타데이터가 병합되어 최종적으로 사용된다.
제한 사항 : `metadata`는 `page`나 `layout`에서만 설정할 수 있으며, 일반 컴포넌트에서는 사용할 수 없다. 또한, 메타데이터는 서버 컴포넌트에서만 사용할 수 있다.
템플릿 사용 : 메타데이터는 템플릿을 통해 동적으로 설정할 수 있다.

// app/layout.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
	title: { // {}안은 문자열일 수도 있고, 템플릿을 포함하는 객체일 수도 있다.
		template: "%s | Next Movies", // %s는 동적으로 변경되는 타이틀 자리
		default: "Next Movies",       // 기본값
	},
	description: "The best movies on the best framework",
};

// (home)/page.tsx
export const metadata = {
	title: "Home",
};

// about-us/page.tsx
export const metadata = {
	title: "About us",
};

각 페이지에서 title이 어떻게 나오는지

/ : Home | Next Movies
/about-us : About us | Next Movies
/dkdkdk : Next Movies

/about-us로 이동하면 프레임워크가 "About us" 타이틀을 가지고 온다. 이는 next.js가 layout.tsx를 확인하고 `%s`에 About us를 넣은 거다. 그래서 title이 About us | Next Movies가 나온다.

// app / not-found
export const metadata = {
	title: "Not found",
};

이 코드를 추가하면 `/dkdkdk`의 title이 Not found로 나온다.

13. Router Groups

Next.js에서 경로들을 논리적으로 그룹화하여 관리할 수 있게 해 준다. 이를 통해 복잡한 레이아웃 구조를 더 유연하게 구성할 수 있다.

Route Groups의 주요 기능

루트 레이아웃을 사용하지 않고 여러 레이아웃을 선택적으로 사용할 수 있다.
특정 레이아웃을 중첩하지 않으려는 경우, 선택적으로 레이아웃을 적용할 수 있다.

app/
├── (home)/          # Route Group으로 지정된 폴더
│   └── page.tsx     
├── about-us/
│   ├── layout.tsx   
│   └── page.tsx     
├── layout.tsx       
├── not-found.tsx

`home`폴더를 `(home)`으로 묶으면, 이 폴더는 Route Group으로 처리된다. 이렇게 하면 폴더 이름이 URL 경로에 반영되지 않으며, URL에 영향을 주지 않으면서 논리적인 그룹화를 할 수 있다. 예를 들어 `/page.tsx`는 `/home/page.tsx`가 아닌 `/`로 접근하게 된다.

14. 동적 라우팅

Next.js는 대관호(`[]`)를 사용하여 동적 라우팅을 지원한다.

(movies)
	|- movies
		|- [id] 
			|- page.tsx

위 구조에서는 `movies/[id]`경로로 접속할 때 `[id]`부분이 동적으로 할당된다.

예를 들어, `movies/1111`로 접근하면 `[id]`에 `1111`이 들어간다.

이를 확인하기 위해 props를 출력해 보기

export default function MovieDetail(props) {
	console.log(props); // { params: { id: '11111' }, searchParams: {} }
	return <h1>Movie</h1>;
}

이 컴포넌트에서 `props`객체는 다음과 같은 두 가지 주요 요소를 포함합니다.

`params` : 동적 경로 변수, URL의 `[id]`부분에 해당하는 값이 들어간다.
`serchParams` : URL에 포함된 쿼리 문자열이 이 객체에 저장된다.

이 값들은 터미널에서는 출력되지만, 브라우저의 콘솔에서는 출력되지 않는다. 이는 해당 코드가 백엔드에서 실행되기 때문이다. (ssr이라는 의미!)

쿼리 문자열을 포함한 URL 예시

`/movies/11111?regin=kr` : `{ params: { id: '11111' }, searchParams: { regin: 'kr' } }` 으로 출력
`/movies/11111?regin=kr&page=2` : `{ params: { id: '11111' }, searchParams: { regin: 'kr', page: '2' } }` 으로 출력

응용하기

`params` 객체에서 `id`값을 추출하여 사용하는 방법

export default function MovieDetail({
	params: { id },
}: {
	params: { id: string };
}) {
	console.log(id);
	return <h1>Movie {id}</h1>;
}

`/movies/11111`로 접근하면 화면에 "Movie 11111"이 출력된다.

참고 자료 : 노머드코드, 챗GPT(읽어보면서 맞는 내용만 적어두었습니다.)

Privacy Policy

개발조각 — Sun, 19 May 2024 22:23:45 +0900

Privacy Policy

This privacy policy applies to the 개인택시 운행기록 (LPG 전용) app (hereby referred to as "Application") for mobile devices that was created by [Developer/Company name] (hereby referred to as "Service Provider") as [open source/free/freemium/ad-supported/commercial] service. This service is intended for use "AS IS".

Information Collection and Use

The Application collects information when you download and use it. This information may include information such as

Your device's Internet Protocol address (e.g. IP address)
The pages of the Application that you visit, the time and date of your visit, the time spent on those pages
The time spent on the Application
The operating system you use on your mobile device

The Application does not gather precise information about the location of your mobile device.

The Service Provider may use the information you provided to contact you from time to time to provide you with important information, required notices and marketing promotions.

For a better experience, while using the Application, the Service Provider may require you to provide us with certain personally identifiable information[add whatever else you collect here, e.g. users name, address, location, pictures] The information that the Service Provider request will be retained by them and used as described in this privacy policy.

Third Party Access

Only aggregated, anonymized data is periodically transmitted to external services to aid the Service Provider in improving the Application and their service. The Service Provider may share your information with third parties in the ways that are described in this privacy statement.

Please note that the Application utilizes third-party services that have their own Privacy Policy about handling data. Below are the links to the Privacy Policy of the third-party service providers used by the Application:

Google Play Services

The Service Provider may disclose User Provided and Automatically Collected Information:

as required by law, such as to comply with a subpoena, or similar legal process;
when they believe in good faith that disclosure is necessary to protect their rights, protect your safety or the safety of others, investigate fraud, or respond to a government request;
with their trusted services providers who work on their behalf, do not have an independent use of the information we disclose to them, and have agreed to adhere to the rules set forth in this privacy statement.

Opt-Out Rights

You can stop all collection of information by the Application easily by uninstalling it. You may use the standard uninstall processes as may be available as part of your mobile device or via the mobile application marketplace or network.

Data Retention Policy

The Service Provider will retain User Provided data for as long as you use the Application and for a reasonable time thereafter. If you'd like them to delete User Provided Data that you have provided via the Application, please contact them at mjdev0715@gmail.com and they will respond in a reasonable time.

Children

The Service Provider does not use the Application to knowingly solicit data from or market to children under the age of 13.

The Application does not address anyone under the age of 13. The Service Provider does not knowingly collect personally identifiable information from children under 13 years of age. In the case the Service Provider discover that a child under 13 has provided personal information, the Service Provider will immediately delete this from their servers. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact the Service Provider (mjdev0715@gmail.com) so that they will be able to take the necessary actions.

Security

The Service Provider is concerned about safeguarding the confidentiality of your information. The Service Provider provides physical, electronic, and procedural safeguards to protect information the Service Provider processes and maintains.

Changes

This Privacy Policy may be updated from time to time for any reason. The Service Provider will notify you of any changes to the Privacy Policy by updating this page with the new Privacy Policy. You are advised to consult this Privacy Policy regularly for any changes, as continued use is deemed approval of all changes.

This privacy policy is effective as of 2024-05-19

Your Consent

By using the Application, you are consenting to the processing of your information as set forth in this Privacy Policy now and as amended by us.

Contact Us

If you have any questions regarding privacy while using the Application, or have questions about the practices, please contact the Service Provider via email at mjdev0715@gmail.com.

2024 구글개발자 본인 인증 방법

개발조각 — Mon, 6 May 2024 00:33:36 +0900

이전 포스팅을 보셨으면 아시겠지만 구글 개발자 본인인증(신원확인) 부분에서 막혀서 이 부분의 해결방안에 대해 설명해보려 합니다.

(블로그 이리저리 찾아봤는데 정확하게 나온 정보가 없더라고요.)

참고 블로그

https://leehyen.tistory.com/343

[Andorid] 2024 구글개발자 본인인증(신원확인)방법에 대한 고민

작년말부터 google play console에서는 기존 개발자들에게 2024년부터 playstore 이용자들에게 신뢰를 증대시키기 위한 '개발자 본인 인증' 검증을 시작한다고 개발자 본인 인증 확인 기간을 정하는 설문

leehyen.tistory.com

해결 방안

찾아보니, 올해 2024년부터 신규 구글 개발자의 경우 앱을 올리기 전부터 본인 인증을 해야 된다고 합니다.

구글플레이 콘솔에 본인을 인증할 수 있는 문서를 제출해야 되고, 이는 90일 이내에 제출해야되며 두 번 이상 잘못 제출하면 안 됩니다.

두 번 이상 잘못 제출하면 개발자 계정을 막습니다.

(잘 생각하고 제출하셔야 됩니다.)

구글에서 원하는 제출 문서

공과금, 청구서
전기 또는 수도 요금 청구서
신용카드 명세서
은행 명세서
임대 계약서

캡처를 안 찍어서 기억이 잘 안 나는데 대강 이랬던 것 같습니다.

참고 블로그에서는 아래내용도 구글에서 원하는 제출 문서라고 합니다.

법적 이름, 결제 프로필에 사용된 이름, 주소, 생년월일, 정부 발급 신분증 이미지, 주소 증명, 결제 수단이 작성되어 있는 것

결론적으로 말하자면 구글플레이 콘솔에서 원하는 건

등록된 개발자의 이름, 주소, 결제내역, 계좌번호 이렇게 인 것 같습니다.

저는 자취를 안 하는 입장에서 전기 또는 수도 요금 청구서를 못하고,

신용카드 명세서, 은행 명세서는 있긴 한데 이 문서에서 이름, 주소, 계좌번호가 같이 포함되지 않습니다.

그래서 저는 은행 명세서에 추가로 내기로 했고, 은행 명세서 + 주민등록증 + 통장사본 이렇게 제출했습니다.

제출방법

은행 명세서는 제가 신한카드를 사용해서 신한카드 홈페이지에 들어가서 로그인을 하고 은행 명세서를 pdf로 다운로드하였습니다.
1. 금융 관련 사이트는 보안프로그램을 설치하라고 하니 맥보다는 윈도우를 추천합니다.
2. pdf로 다운로드하는 방법은 인쇄버튼을 클릭하시고 프린트 목록에서 "Adobe PDF"를 선택하고 "확인"을 클릭해서 다운로드하시면 됩니다.
주민등록증, 통장사본(저는 신한으로 했습니다.)을 사진을 찍고, pdf로 만듭니다.
1. 노션, 옵시디언을 사용하시면 손쉽게 pdf로 만들 수 있습니다.
구글플레이콘솔에 본인인증문서를 제출할 때 여러 개 문서를 제출할 수 없습니다.(딱 하나의 문서만 제출할 수 있어요.)
그래서 은행 명세서 + 2번에서 만든 주민등록증, 통장사본 pdf 합칩니다.
제출하려 하니 용량초과라서 안된다고 하네요ㅠㅠ 핸드폰사진이 용량이 높다 보니 1.5MB가 넘더라고요...ㅠㅠ
용량 줄여서 다시 제출했습니다.

3번 pdf 합치기 사용한 사이트

https://www.ilovepdf.com/ko/merge_pdf

온라인으로 PDF 파일을 병합하세요. PDF 병합 무료 서비스

여러 PDF 파일을 선택하고 몇 초 이내에 병합하세요. PDF 파일을 온라인으로 무료로 병합하세요.

www.ilovepdf.com

4번 pdf 용량 줄이기

https://www.ilovepdf.com/ko/compress_pdf

온라인으로 PDF 파일을 압축하세요. 같은 품질의 PDF지만 더 작은 크기의 파일

동일한 품질이지만 더 작은 파일 크기를 가진 PDF 파일을 위해 압축하세요. 온라인에서 쉽고 무료로 PDF 파일을 압축하고 최적화하세요.

www.ilovepdf.com

드디어 인증 성공!!!

생각보다 결과가 빨리 나옵니다ㅎㅎ

[React-native CLI] 패키지 이름 바꾸기

개발조각 — Thu, 2 May 2024 15:28:17 +0900

앱을 열심히 만들고 aab로 추출하고 이제 마지막으로 앱을 배포할 단계로 왔다!!

하지만 항상 의도치 않은 부분에서 문제가 발생하는데...

번역 : Google Play에 "com.taxi"가 이미 있으므로 다른 패키지 이름을 사용해야 합니다.

이러한 문제를 해결하기 위해서는 패키지 이름을 교체해 주어야 됩니다.

참고 블로그

https://skyksit.com/programming/react/react-native-change-package-name/

React Native 로 패키지 이름 바꾸기

리액트네이티브의 패키지 이름리액트네이티브는 init 할 때 프로젝트명, 패키지명, 앱이름이 강제로 설정된다

skyksit.com

해결하기

리액트네이티브에서는 프로젝트 생성 시 init을 할 때, 프로젝트명, 패키지명, 앱이름이 강제로 설정이 됩니다.

npx react-native init taxi

이렇게 init을 해주면 아래와 같이 됩니다.

프로젝트명 : taxi
패키지명 : com.taxi
앱이름 : taxi

참고 블로그에서는 "앱을 다 만들고 바꾸려면 정말 골치 아파지니 반드시 초기에 바꾸자"라고 나와 있습니다.

저는 배포하기 전에 이상하걸 발견했으니...ㅎ 다행이라고 생각합니다ㅠ

저는 안드로이드 전용이기 때문에 안드로이드 패키지명만 수정해 주었습니다.

ios 패키지명을 수정해주고 싶다고 참고블로그를 참고하세요.

앱 이름 바꾸기(필수는 아니지만 이김에 변경하면 좋을 것 같아서 변경해요.)

안드로이드, ios 둘 다 이 파일 안에 데이터만 바꾸면 됩니다.

android/app/src/main/res/vallues/strings.xml

<resources>
    <string name="app_name">개인택시 운행기록</string>
</resources>

안드로이드 패키지 명 바꾸기

저는 com.taxi → com.mjyou.taxiservicerecord 이렇게 바꿔주었습니다.

1. android/app/src/main/AndroidManifest.xml 변경하기

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.mjyou.taxiservicerecord">

2. android/app/build.gradle 변경하기

android/app/build.gradle

namespace "com.mjyou.taxiservicerecord"

applicationId "com.mjyou.taxiservicerecord"

3. android/app/main/java/com/ 폴더명 변경하기

저는 com.mjyou.taxiservicerecord임으로 아래와 같이 폴더명을 수정해 주었습니다.

4. android/app/src/main/java/com/java 패키지명 변경

android/app/src/main/java/com/java ~ MainActivity.kt, MainApplication.kt

이 파일에 들어가셔서 수정하시면 됩니다.

package com.mjyou.taxiservicerecord

5. 마지막으로 안드로이드 빌드해 주기

npm run android

빌드 성공하시면 패키지 바꾸기 성공하신 겁니다.

위의 과정을 통해 패키지를 변경해 준 뒤 아래 과정을 다시 해주었습니다.

[React-native CLI] react-native에 Google Firebase Analytics Firebase-Crashlytics 적용

[React-native CLI] 안드로이드 앱 배포를 위한 AAB 추출하기

AAB 제출까지는 잘 마무리되었는데

이제는 구글개발자 본인인증(신원확인)에서 막혔다...

앱 올리는 게 산 넘어 산이다ㅠㅠ

[React-native CLI] 안드로이드 앱 배포를 위한 AAB 추출하기

개발조각 — Tue, 30 Apr 2024 14:10:56 +0900

Android 앱을 배포하기 위해서는 파일 형식으로 만들어주어야 됩니다.

주용 파일 형식으로는 APK(Apk package file)와 AAB(Android App Bundle)가 있습니다.

APK(Apk package file)

Android 앱의 컴파일된 이진형식이며, 모든 리소스와 코드가 포함되어 있습니다.

AAB(Android App Bundle)

APK와 달리 더 작은 형식의 파일로, 리소스와 코드를 모두 포함하지 않습니다.

필요한 리소스만 포함되기 때문에 APK보다 작습니다.(사용자가 다운로드하는 데 필요한 최소한의 리소스만 포함)

그리고 AAB 파일을 Google Play 스토어에서 다운로드할 때 필요한 리소스만 포함되기 때문에 최적화된 형식이며, 이는 앱 크기를 줄이고 다운로드 시간을 단축합니다.

이전에는 APK 파일만 Google Play 스토어에 업로드할 수 있었지만,

현재는 Google Play 스토어에서는 APK보다는 AAB 파일 사용을 권장합니다.

AAB 파일을 업로드할 때 추가적인 최적화 및 배포 기능을 제공합니다.

그래서 저는 AAB로 추출했습니다.

AAB파일로 추출하는 방법에 대해 설명하겠습니다.

참고 블로그

https://ssilook.tistory.com/entry/React-Native-RN-APK-%EC%B6%94%EC%B6%9C%ED%95%98%EA%B8%B0-3%ED%8E%B8AAB-%ED%8C%8C%EC%9D%BC-%EC%83%9D%EC%84%B1

[React Native] RN - APK 추출하기 3편(AAB 파일 생성)

안녕하세요. 이번 시간에는 React Native APK 추출할 때 용량도 줄이고, 구글 콘솔에 업로드를 시킬 수 있는 aab 파일을 생성하는 방법에 대해서 알아보도록 하겠습니다. 키 생성 my-upload-key과 my-key-alia

ssilook.tistory.com

https://velog.io/@dev_jiwon/React-Native-Release-APKAAB-%EC%B6%94%EC%B6%9C%ED%95%98%EA%B8%B0

[React Native] Release APK(AAB) 추출하기

오늘은 Release 모드로 APK 파일을 추출하는 방법에 대해 포스팅해보려 합니다!

velog.io

1. 키 생성

keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

my-upload-key, my-ley-alias을 원하는 이름으로 작성하셔도 되고 이 코드를 그래도 사용하셔도 됩니다.

만약 my-upload-key, my-ley-alias을 원하는 이름으로 작성하고 싶을 경우

keytool -genkey -v -keystore [key-name].keystore -alias [key alias] -keyalg RSA -keysize 2048 -validity 10000

키 저장소 암호 입력:
새 비밀번호 재입력: 당신의 성과 이름은 무엇입니까? [불명]:
개발자 이름 조직 단위의 이름은 무엇입니까? [알 수 없음]:
회사 개발팀 귀하의 조직 이름은 무엇입니까? [알 수 없음]:
회사 이름 귀하의 도시 또는 지역의 이름은 무엇입니까? [불명]:
대한민국 귀하의 주 또는 도 이름은 무엇입니까? [불명]:
이 장치의 두 자리 국가 코드는 무엇입니까? [unknown]:

enter해주시고 국가 코드에 KR을 입력하신뒤 마지막에 yes 입력해주시면 됩니다.

2. 파일 위치 변경하기

키 생성이 끝나시면 my-upload-ley.keystore이라는 파일 하나가 생성됩니다.

이 파일을 꼭 android/app으로 옮겨주세요!!!

3. Gradle 변수 설정

android/gradle.propterties

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD= 키 생성에서 만든 비밀번호 입력
MYAPP_UPLOAD_KEY_PASSWORD= 키 생성에서 만든 비밀번호 입력

android/app/build.gradle

release {
    if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
        storeFile file(MYAPP_UPLOAD_STORE_FILE)
        storePassword MYAPP_UPLOAD_STORE_PASSWORD
        keyAlias MYAPP_UPLOAD_KEY_ALIAS
        keyPassword MYAPP_UPLOAD_KEY_PASSWORD
    }
}

// debug {
//     storeFile file('debug.keystore')
//     storePassword 'android'
//     keyAlias 'androiddebugkey'
//     keyPassword 'android'
// } // 주석처리하기

...

// signingConfig signingConfigs.debug // 주석처리하기
signingConfig signingConfigs.release

참고블로그에서 가져온 이미지 입니다.

4. abb 파일 생성하기

cd android
./gradlew bundleRelease

[React-native CLI] react-native에 Google Firebase Analytics Firebase-Crashlytics 적용

개발조각 — Tue, 30 Apr 2024 13:40:32 +0900

Firebase Analytics와 Firebase Crashlytics를 적용하면 앱의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

Firebase Analytics

사용자의 행동을 추적하고 분석할 수 있습니다.
: 이를 통해 사용자가 앱에서 어떻게 상호 작용하는지 이해하고 사용자 경험을 개선할 수 있습니다.
사용자가 언제 앱을 이탈하는지 식별할 수 있습니다.
: 이를 통해 이탈 지점을 개선하고 사용자 이탈률을 줄일 수 있습니다.
사용자의 관심사와 행동 패턴을 이해할 수 있습니다.
: 이를 통해 개발자는 앱의 타겟 사용자를 더 잘 이해하고 사용자 중심의 기능을 개발할 수 있습니다.

Firebase Crashlytics

앱에서 발생하는 충돌을 모니터링하고 식별합니다.
: 앱이 충돌하거나 중단되면 Crashlytics는 해당 문제를 신속하게 보고하여 신속한 해결을 돕습니다.
앱의 오류를 디버그하고 해결할 수 있습니다.
: Crashlytics는 오류 발생 시 발생한 코드와 함께 오류 보고서를 제공하여 개발자가 문제를 신속하게 식별하고 해결할 수 있도록 돕습니다.

Firebase Analytics와 Firebase Crashlytics는 안정성 및 성능 향상을 위해 안드로이드 및 iOS 앱에 널리 사용되는 인기 있는 도구 중 하나입니다.

참고블로그

https://adjh54.tistory.com/254

[RN] React Native Firebase Analytics + Crashlytics 이해 및 설정 방법 : Andriod

해당 글에서는 React Native에서 Andriod 개발환경에서 Firebase Analytics와 Crashlytics를 이해하고 설정하는 방법에 대해 확인합니다. 1) React Native Firebase React Native Firebase - React Native 애플리케이션에서 Fi

adjh54.tistory.com

Google Firebase Analytics 웹 페이지 설정

firebase 접속

https://firebase.google.com/?hl=ko

Firebase | Google’s Mobile and Web App Development Platform

개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.

firebase.google.com

"시작하기" 클릭
"프로젝트 이름" 작성
"계속" 클릭
프로젝트 생성되면 android 아이콘 클릭
각각의 값 채워 넣기 (Android 패키지 이름, 앱 닉네임(선택사항), 디버그 서명 인증서 SHA-1(선택사항))

5. 디버그 서명 인증서 SHA-1(선택사항) 구성방법

keytool -J-Duser.language=en -list -v -alias androiddebugkey -keystore ./android/app/debug.keystore

해당 명령어를 수행하여 SHA-1 keystore를 발급받는다.
비밀번호는 입력하지 않고 Enter를 누른다.

SHA-1은 터미널에 나옵니다.

이 값을 넣어도 파이어베이스에서는 오류로 나와서 해줄 필요 없을 것 같습니다.

6. 구성파일 다운로드

Download google-services.json을 클릭하시고 이미지와 똑같은 위치에 넣어주시면 됩니다.

React Native Google Analytics 소스코드 내 설정

1. 라이브러리 추가

# @react-native-firebase/app 모듈 설치
$ npm install @react-native-firebase/app

# @react-native-firebase/analytics 모듈 설치
$ npm install @react-native-firebase/analytics

참고블로그에서는 ios 설정 때문에 cd ios/ && pud install을 했지만

저는 안드로이드 전용 앱임으로 cd ios/ && pud install을 안 했습니다.

2. bulid.gradle 설정

androild/bulid.gradle

classpath 'com.google.gms:google-services:4.3.15'

classpath가 보이는 곳에 코드 추가하기

android/app/bulid.gradle

apply plugin: "com.google.gms.google-services"

apply plugin이 보이는 곳에 코드 추가하기

implementation 'com.google.firebase:firebase-analytics'

implementation 보이는 곳에 코드 추가하기

3. 파이어베이스 사이트에서 확인

왼쪽에 Analytics Dashborad 클릭해서 확인

Google Firebase Crashlytics 설치

1. 라이브러리 설치

# @react-native-firebase/app 모듈 설치
$ npm install @react-native-firebase/app

# @react-native-firebase/crashlytics 모듈 설치
$ npm install @react-native-firebase/crashlytics

2. firebase.json 작성

{
  "react-native": {
    "crashlytics_debug_enabled": true
  }
}

firebase.json을 해당 위치에 만들어주시오 코드를 넣어주세요.

3. build.gradle 설정

android/build.gradle

classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.9'

classpath가 보이는 곳에 코드 추가하기

android/app/bulid.gradle

apply plugin: 'com.google.firebase.crashlytics'

apply plugin이 보이는 곳에 코드 추가하기

implementation 'com.google.firebase:firebase-crashlytics'

implementation 보이는 곳에 코드 추가하기

4. 강제로 crash 로그 발생시키고 확인

import crashlytics from '@react-native-firebase/crashlytics';

// 강제로 crash 로그를 발생시켜 확인.
useEffect(() => {
	crashlytics().crash();
}, []);

App.tsx

import React, {useEffect} from 'react';
import crashlytics from '@react-native-firebase/crashlytics';

const App = () => {
  // 강제로 crash 로그를 발생시켜 확인.
  useEffect(() => {
    crashlytics().crash();
  }, []);

  return (
  	...
  );
};

export default App;

작성한 뒤 npm run android 하시면, 화면이 실행되지 않고 꺼지고

파이어베이스에서 Crashlytics에 들어가셔서 확인하시면 crash 된 걸 확인하실 수 있습니다.

이건 제가 여러 번 해서 이렇게 나온 겁니다.

[React-native CLI] android 핸드폰에 wifi로 연결하기

개발조각 — Thu, 28 Mar 2024 01:09:01 +0900

이제 어느 정도 만들었으니 핸드폰에 잘 작동되는지 확인을 해볼까 합니다.

apk나 aab로 만든 뒤 핸드폰에서 확인하는 방법도 있겠지만,

이렇게 되면 수정할 때마다 apk, aab로 만들어서 확인을 해야 되는 현상이 발생하니 다른 방법을 통해 실제 기기에서 확인하는 방법에 대해 알아보도록 합시다!

제목에서도 말했지만 안드로이드 스튜디오에서 Pair new device over Wi-Fi를 통해 제 핸드폰에서 프로젝트를 확인해보려 합니다.

갤럭시폰에서 개발자모드 키기

먼저 갤럭시폰을 준비하시고 아래 블로그를 참고하여 개발자모드 켜야 됩니다.

https://m.blog.naver.com/leemonpai/222976231731

갤럭시 개발자옵션 켜기 개발자모드 usb 디버깅 활성화시키기

" 7번만 누르면 끝! " 안녕하세요. IT 인플루언서 쏠리단미입니다:) 많은 분들이 스마트폰을 ...

blog.naver.com

안드로이드 스튜디오에서 Wi-Fi 설정

참고 블로그

https://velog.io/@bang9dev/wireless-debugging

[RN-CheatSheet] Wireless debugging

선 없는 쾌적한 개발환경, 모바일 개발환경에서 Wireless(wifi) debugging 설정하고 선으로부터 자유로워지자...

velog.io

1. 안드로이드 스튜디오에서 새로운 프로젝트 아무거나 하나 만들기

New Project를 클릭해서 설치하시면 됩니다.

2. 애뮬레이터 클릭하고 와이파이 연결 클릭해서 Pair new devices over Wi-Fi 나오게 하고 qr연결하기

새로운 프로젝트를 설치하셨으면 오른쪽 부분에 아래와 같이 되어 있습니다.

클릭하면 초록불이 들어오고,

또 클릭하면 Pair new devices over Wi-Fi가 나옵니다.

이제 갤럭시 폰으로 연결하시면 됩니다.

qr코드로 기기 페어링 하시면 됩니다.

처음에 이화면이 나왔는데 당황하지 말고 갤럭시 폰을 덜 설정해서 그런 겁니다.

갤럭시 폰에서 개발자 모드 안에 무선 디버깅을 눌러야 됩니다!!!

그런 다음 close하시고 와이파이 버튼을 클릭하고 다시 qr연결하시면 됩니다.

연결에 성공하시면 이와 같은 화면이 나옵니다.

명령어으로 갤럭시 폰에 프로젝트 연결하기

참고블로그

https://velog.io/@carrotdy/React-native-android-%EC%8B%A4%EC%A0%9C-%EA%B8%B0%EA%B8%B0-%EC%97%B0%EA%B2%B0

[React-Native] android 실제 기기 연결

React-native android 실제 기기 연결이 되지않고 emulator로 연결이 된다.1) 가장 먼저 android 기기의 설정탭 -> 개발자 옵션으로 들어가 USB 디버깅을 활성화시킨다.2) 기기가 잘 연결되면 CMD 창에 아래와

velog.io

vscode 터미널에 명령어를 입력하시면 됩니다.

adb devices

빌드 성공~

adb reverse tcp:8081 tcp:8081

npm run android 하기 전에 기존에 사용하고 있는 애뮬레이터를 꺼주어야 됩니다.

이거 꺼줘야지 갤럭시폰에서 실행할 수 있습니다.

npm run android

마지막으로 해주면 실제폰에서 어떻게 보이는지 확인하실 수 있습니다.

허허 이렇게 폰트가 뒤죽박죽 되어있는 현실을 알 수 있습니다.^^;;;

[React-native CLI] RN 안드로이드 아이콘 바꾸기

개발조각 — Wed, 27 Mar 2024 18:02:42 +0900

아이콘을 적용해 보도록 하겠습니다.

아래 블로그를 참고해서 적용해 보았습니다.

참고 블로그

https://velog.io/@dody_/React-Native-%EC%95%B1-%EC%95%84%EC%9D%B4%EC%BD%98-%EB%B0%94%EA%BE%B8%EA%B8%B0

[RN] 앱 아이콘 바꾸기

안녕하세용 도디예용 오늘은 react native 프로젝트의 앱 아이콘을 바꿔봅시당 아이콘 사이즈 받아오기 일단 로고를 몇개 추출해놨습니당 둘중에 뭘 해볼까 이 로고는 1024x1024 사이즈인데, Android에

velog.io

1. 024x1024 사이즈의 로고 아이콘 만들기

저는 피그마로 만들었습니다.

2. Android Asset Studio에서 로고 만들기

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=0.1&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(255%2C%20255%2C%20255)&crop=0&backgroundShape=square&effects=none&name=ic_launcher_round

Android Asset Studio - Launcher icon generator

romannurik.github.io

만든 아이콘을 Android Asset Studio에 드래그해 줍니다.

android/app/src/main/res에 들어가 보면 아래와 같은 되어있습니다.

ic_launcher_round.png
ic_launcher.png

이렇게 되어 있다.

이를 참고하여 Android AssetStudio에서 로고를 만들어주어야 됩니다.

ic_launcher.png 만들기

Padding은 알아서 조절하기
Shape를 Square로 변경하기
Name을 ic_lic_launcher로 변경해 주기
오른쪽 상단에 있는 다운로드 클릭하기

ic_launcher_round.png 만들기

Padding은 알아서 조절하기
Shape를 Circle로 변경하기
Name을 ic_lic_launcher_round로 변경해 주기
오른쪽 상단에 있는 다운로드 클릭하기

3. 로고 적용하기

위에서 만든 로고들을 android/app/src/main/res에 들어가서 똑같은 적용 해주면 됩니다.

[React-native CLI] RN 현재 화면이 어디인지에 따라 상태바 색상 변경하기

개발조각 — Wed, 27 Mar 2024 15:11:05 +0900

이번에는 상태바를 설정해보려 합니다.

일반적인 상태바는 아니고 홈화면일 때는 상태바가 주황색, 홈화면이 아닌 다른 화면일 때에는 상태바가 흰색으로 변하게 해주었습니다.

처음에는 상태바를 App.tsx에 설정하고 싶었지만 App.tsx에 상태바를 설정해 두면

Navigation에 따른 상태바 배경색을 변경할 수 없기 때문에 StackNavigator.tsx에 해주었습니다.

StackNavigator.tsx는 스택내비게이션을 모아둔 곳입니다.

StatusBar 설정

const StackNavigator = () => {
  const Stack = createNativeStackNavigator();

  return (
    <>
      <StatusBar
        backgroundColor={'#fff'}
        barStyle={'dark-content'}
      />
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={BottomTabsNavigator}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Record"
          component={Record}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </>
  );
};

export default StackNavigator;

Fragment로 감싸고 StatusBar를 넣어주면 잘 작동이 됩니다.

상태바 커스텀 참고 블로그

https://velog.io/@ttoottie/RN-Status-Bar%EC%97%90-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%84-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90-9xp185ny

[RN] Status Bar에 스타일을 적용해보자

여러 앱을 사용하다보면 화면 상단의 Status Bar 에 다양한 스타일이 적용되어 있는 경우를 볼 수 있습니다.Status Bar 에 적절한 스타일을 적용하면 현재 화면에서 보여지는 컨텐츠와의 통일감과 자

velog.io

현재 페이지 이름 출력하기

현재 페이지 이름을 출력하기 위해서는 아래코드를 넣어주면 됩니다.

const navigation = useNavigation();

// 현재 화면의 이름을 가져옵니다.
const currentRouteName = navigation.getCurrentRoute().name;

하지만 이렇게 넣어주면 이와 같은 오류가 발생하게 됩니다.

TypeError: Cannot read property 'name' of undefined This error is located at: in StackNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in RecoilRoot_INTERNAL (created by RecoilRoot) in RecoilRoot (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in taxi(RootComponent), js engine: hermes

오류 해결하기

이 오류는 내비게이션 상태 객체가 아직 정의되지 않았기 떄문에 발생하는 오류입니다.

위에 코드만 써주게 되면 navigation.getCurrentRoute() 메서드가 호출될 때 네비게이션 상태가 아직 초기화되지 않았기 때문에 오류가 발생하게 됩니다.

이를 해결하기 위해 네비게이션 이벤트를 구독하여 상태를 업데이트해야 됩니다.

  const navigation = useNavigation();
  const [currentRouteName, setCurrentRouteName] = useState('');

  // 현재 페이지 이름 출력
  useEffect(() => {
    const currentRoute = navigation.addListener('state', () => {
      const {name} = navigation.getCurrentRoute();
      setCurrentRouteName(name);
    });

    return currentRoute;
  }, [navigation]);

이렇게 useEffect를 사용해 줘서 naviation을 의존성배열에 넣어주어 구독해 주면서 상태를 업데이트해주면 됩니다.

최종 코드

// react, react-native
import React, {useEffect, useState} from 'react';
import {StatusBar} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

// components
import BottomTabsNavigator from './BottomTabsNavigator';
import Record from '../screens/Record';

// style
import Theme from '../styles/Theme';

const StackNavigator = () => {
  const Stack = createNativeStackNavigator();
  const navigation = useNavigation();
  const [currentRouteName, setCurrentRouteName] = useState('');

  // 현재 페이지 이름 출력
  useEffect(() => {
    const currentRoute = navigation.addListener('state', () => {
      const {name} = navigation.getCurrentRoute();
      setCurrentRouteName(name);
    });

    return currentRoute;
  }, [navigation]);

  return (
    <>
      <StatusBar
        backgroundColor={
          currentRouteName === 'Home' ? Theme.colors.mainLight : '#fff'
        }
        barStyle={'dark-content'}
      />
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={BottomTabsNavigator}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Record"
          component={Record}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </>
  );
};

export default StackNavigator;

[React-native CLI] RN 차트스크린 구현하기 (월간, 연간)

개발조각 — Tue, 26 Mar 2024 18:25:32 +0900

이번에는 차트페이지를 만들어보려 합니다.

구현할 화면

그래프를 막 그리긴 했지만 대강 이런 디자인으로 구현하고자 합니다.

이 스크린의 기능에 대해 간단하게 설명하자면 작성한 운행일지 기록 데이터의 월간, 연간에 대한 영업금액 차트 화면입니다.

구현 기능

항목을 크게 나누면 탭, 차트, 리스트로 구분되어 있습니다.

탭 : 월간, 연간

월간

년도를 표시하는 달력타이틀이 있음
차트에는 해당 연도에 대한 1월 ~ 12월까지의 영업금액 데이터가 나옴
리스트에는 해당 연도에 대한 1월 ~12월까지에 대한 영업금액 데이터가 역순으로 나옴(최신 데이터가 제일 위에 있음)

연간

년도를 표시하는 달력타이틀이 없음
차트에는 연도별 영업금액 데이터가 나옴
리스트에는 연도별 영업금액 데이터가 역순으로 나옴(최신 데이터가 제일 위에 있음)

월간, 연간

월간, 연간 둘 다 데이터가 없을 경우 차트, 리스트 컴포넌트에 "데이터가 없습니다". 출력

폴더 구조

주요 폴더

components/chaart/~
utils/recordFilterData.ts

구현 코드

screens/Chart.tsx

// react, react-native
import React, {useState} from 'react';

// library
import dayjs from 'dayjs';
import {useRecoilValue} from 'recoil';

// recoil, utils
import {recordState} from '../recoil/atoms';
import {chartMonthData, chartYearData} from '../utils/recordCustomData';

// component
import Tabs from '../components/chart/Tabs';
import CalendarTitle from '../components/chart/CalendarTitle';
import BarChartView from '../components/chart/BarChartView';
import DataList from '../components/chart/DataList';

// style
import {Chart as Style} from '../styles/chart.styles';

const Chart = () => {
  const recordData = useRecoilValue(recordState);
  const currentYear = dayjs().format('YYYY');

  const [selectedTab, setSelectedTab] = useState('month');
  const [selectYear, setSelectYear] = useState(currentYear);

  /*
  *월간*
  선택한 년도의 월간 영업금액 나오기
  [{value: 영업금액, label: '3월'}]
   */
  const monthRecordData = chartMonthData(recordData, selectYear);

  /*
   *연간*
  작성을 시작한 년도부터 연간 영업금액
  [{value: 10, label: 2024년}]
   */
  const yearRecordData = chartYearData(recordData);

  return (
    <>
      <Style.wrap>
        {/* 탭: 월간, 연간 */}
        <Tabs selectedTab={selectedTab} setSelectedTab={setSelectedTab} />

        {/* 월별 달력 */}
        {selectedTab === 'month' ? (
          <CalendarTitle
            currentYear={currentYear}
            selectYear={selectYear}
            setSelectYear={setSelectYear}
          />
        ) : (
          ''
        )}

        {/* 차트 */}
        <BarChartView
          recordData={
            selectedTab === 'month' ? monthRecordData : yearRecordData
          }
        />
      </Style.wrap>

      <Style.line />

      {/* 데이터 리스트 */}
      <DataList
        selectedTab={selectedTab}
        selectYear={selectYear}
        recordData={selectedTab === 'month' ? monthRecordData : yearRecordData}
      />
    </>
  );
};

export default Chart;

탭이 month가 아닐 경우 CalenderTitle은 필요 없기 때문에 탭이 month일 경우에만 CalendarTitle 컴포넌트가 나오게 해 주었습니다.

components/chart/Tabs.tsx

// react, react-native
import React, {Dispatch, SetStateAction} from 'react';

// style
import {Tabs as Style} from '../../styles/chart.styles';

interface PropsType {
  selectedTab: string;
  setSelectedTab: Dispatch<SetStateAction<string>>;
}

const Tabs = ({selectedTab, setSelectedTab}: PropsType) => {
  const handleTabPress = (tab: string) => {
    setSelectedTab(tab);
  };

  return (
    <Style.container>
      <Style.tabButton
        select={selectedTab === 'month'}
        onPress={() => handleTabPress('month')}>
        <Style.tabText select={selectedTab === 'month'}>월간</Style.tabText>
      </Style.tabButton>
      <Style.tabButton
        select={selectedTab === 'year'}
        onPress={() => handleTabPress('year')}>
        <Style.tabText select={selectedTab === 'year'}>연간</Style.tabText>
      </Style.tabButton>
    </Style.container>
  );
};

export default Tabs;

utils/recordFilterData.ts

이 파일은 record데이터를 커스텀할 때 사용하는 폴더입니다.

지금은 chart 스크린에서 사용하는 record 커스텀 데이터 함수만 옮겨두었습니다.

// library
import dayjs from 'dayjs';
import {RecordType} from '../types/types';

// 선택한 년도의 데이터 가져오기
export const selectYearData = (recordData: RecordType[], year: string) => {
  return recordData.filter(data => dayjs(data.date).format('YYYY') === year);
};

// Chart
type ChartDataObjectTypes = {[key: number]: number};

// Chart_월별 데이터 => [{value: 10, label: '1월'}, {}]
export const chartMonthData = (recordData: RecordType[], year: string) => {
  // 월별 영업금액 저장 => {"2": 8, "3": 324248}
  const monthlyOperatingAmount: ChartDataObjectTypes = {};

  selectYearData(recordData, year).forEach(data => {
    const month = dayjs(data.date).month() + 1;

    if (!monthlyOperatingAmount[month]) {
      monthlyOperatingAmount[month] = data.operatingAmount;
    } else {
      monthlyOperatingAmount[month] += data.operatingAmount;
    }
  });

  // monthlyOperatingAmount객체를 BarChart data에 담을 배열로 변환 => {value: 10, label: '1월'}
  return Object.keys(monthlyOperatingAmount).map(month => ({
    value: monthlyOperatingAmount[parseInt(month, 10)],
    label: `${parseInt(month, 10)}월`,
  }));
};

// Chart_년별 데이터 => [{value: 10, label: '1월'}, {}]
export const chartYearData = (recordData: RecordType[]) => {
  // 년별 영업금액 저장 => {"2024": 324256}
  const yearOperatingAmount: ChartDataObjectTypes = {};

  recordData.forEach(data => {
    const yearData = dayjs(data.date).year(); // dayjs로 연도 추출
    if (!yearOperatingAmount[yearData]) {
      yearOperatingAmount[yearData] = data.operatingAmount;
    } else {
      yearOperatingAmount[yearData] += data.operatingAmount;
    }
  });

  // yearOperatingAmount객체를 BarChart data에 담을 배열로 변환 => [{"label": "2024년", "value": 324256}]
  return Object.keys(yearOperatingAmount).map(yearData => ({
    label: `${yearData}년`,
    value: yearOperatingAmount[parseInt(yearData, 10)],
  }));
};

이번 프로젝트에서 react-native-gifted-charts라는 차트라이브러리를 사용했습니다.

이 차트라이브러리에서는 data를 아래와 같은 형식으로 받기 때문에 이 형식에 맞게 커스텀해주었습니다.

const barData = [
    {value: 15, label: '1'}, 
    {value: 30, label: '2'}, 
    {value: 26, label: '3'},
    {value: 40, label: '4'}
];

월간, 연간 데이터 둘 다

1차로 forEach를 사용하여 각 월, 년에 맞는 영업금액의 총합을 객체로 만들고,

2차로 map을 사용하여 차트라이브러리에 맞는 형식의 배열로 만들어주었습니다.

components/chart/CalendarTitle.tsx

import React, {Dispatch, SetStateAction} from 'react';
import {View} from 'react-native';
import {SvgXml} from 'react-native-svg';

// library
import dayjs from 'dayjs';

// assets
import {svg} from '../../assets/svg';

// style
import Theme from '../../styles/Theme';
import {CalendarTitle as Style} from '../../styles/common.styles';

interface PropsType {
  currentYear: string; // 현재 달
  selectYear: string;
  setSelectYear: Dispatch<SetStateAction<string>>;
}

const CalendarTitle = ({currentYear, selectYear, setSelectYear}: PropsType) => {
  // 이전 달력으로 이동
  const onPrevPress = () => {
    const nextYear = dayjs(selectYear).subtract(1, 'year').format('YYYY');
    setSelectYear(nextYear);
  };
  // 다음 달력으로 이동
  const onNextPress = () => {
    const nextYear = dayjs(selectYear).add(1, 'year').format('YYYY');
    setSelectYear(nextYear);
  };
  // 현재 달로 이동
  const onCurrentPress = () => {
    setSelectYear(currentYear);
  };
  return (
    <Style.container>
      <Style.centerWrap>
        {/* 이전달 이동 */}
        <Style.iconButton onPress={onPrevPress}>
          <View>
            <SvgXml xml={svg.prev} />
          </View>
        </Style.iconButton>

        <Style.text>{dayjs(selectYear).format('YYYY년')}</Style.text>

        {/* 다음달 이동 */}
        <Style.iconButton
          onPress={onNextPress}
          disabled={currentYear === selectYear}>
          <View>
            <SvgXml
              xml={svg.next}
              fill={
                currentYear === selectYear
                  ? Theme.colors.grey
                  : Theme.colors.black
              }
            />
          </View>
        </Style.iconButton>
      </Style.centerWrap>

      {/* 현재달 이동 */}
      <Style.iconButton position={true} onPress={onCurrentPress}>
        <View>
          <SvgXml xml={svg.turn} />
        </View>
      </Style.iconButton>
    </Style.container>
  );
};

export default CalendarTitle;

components/chart/BarChartView.tsx

react-native-gifted-charts사용방법은 아래 링크 참고하시면 됩니다.

https://development-piece.tistory.com/455

[React-native CLI] RN에서 그래프 라이브러리 추천 (react-native-gifted-charts 사용방법)

이번 프로젝트에서 꼭 필요한 요소 중 하나인 차트 리액트에서 유명한 차트 라이브러리가 많이 때문에 고민을 했었는데 리액트 네이티브에서는 너무 없어서 설치해 보고 내가 원하는 디자인으

development-piece.tistory.com

// react, react-native
import React from 'react';
import {Dimensions} from 'react-native';
import {BarChart} from 'react-native-gifted-charts';

// style
import Theme from '../../styles/Theme';
import {BarChartView as Style} from '../../styles/chart.styles';

interface PropsType {
  recordData: {value: number; label: string}[];
}
const BarChartView = ({recordData}: PropsType) => {
  const screenWidth = Dimensions.get('window').width; // 핸드폰 너비

  const labelTextStyle = {
    fontSize: 12,
    fontWeight: 500,
    color: `${Theme.colors.darkGrey}`,
  };

  const yAxisTextStyle = {
    fontSize: 12,
    color: `${Theme.colors.darkGrey}`,
  };

  return (
    <Style.wrap center={!recordData.length && true}>
      {/* recordData에 데이터가 없으면 "데이터가 없습니다." 출력하기 */}
      {recordData.length ? (
        <Style.container>
          {/* Bar Chart */}
          <BarChart
            // 기본
            data={recordData}
            width={recordData.length > 10 ? undefined : screenWidth} // 데이터가 적을 때, 많을때 대비해서
            height={160}
            disablePress // 누루기 동작 비활성화
            // bar
            initialSpacing={20} // 초기 간격
            spacing={40} // bar 간격
            barBorderRadius={2}
            barWidth={12} // bar width
            frontColor={Theme.colors.main} // bar 색상
            // x축
            xAxisLabelTextStyle={labelTextStyle}
            xAxisIndicesColor={Theme.colors.grey} // x축 단계별 표시 색상
            xAxisColor={Theme.colors.grey} // x축 색상
            // y축
            yAxisTextStyle={yAxisTextStyle}
            yAxisThickness={0} // 메인 y축
            noOfSections={3} // 가로 회색줄 갯수
            // yAxisLabelTexts={['0', '100', '300', '500']}
          />
        </Style.container>
      ) : (
        <Style.emptyText>데이터가 없습니다.</Style.emptyText>
      )}
    </Style.wrap>
  );
};

export default BarChartView;

BarChart에서 recordData에 데이터 길이에 따라 width값을 설정해 주었습니다.

설정해 준 이유는 recordData가 적어도 화면에 꽉 찬 형태의 차트화면을 만들고 싶기 때문에 설정했습니다.

이렇게 되는 걸 방지하고

이렇게 되길 원해서 따로 설정해 주었습니다.

components/chart/DataList.tsx

// react, react-native
import React from 'react';

// utils
import {numberCommas} from '../../utils/calculate';

// style
import {DataList as Style} from '../../styles/chart.styles';

interface PropsType {
  selectedTab: string;
  selectYear: string;
  recordData: {value: number; label: string}[];
}

const DataList = ({selectedTab, selectYear, recordData}: PropsType) => {
  // [{"label": "2월", "value": 8}, {"label": "3월", "value": 324248}]
  // console.log('DataList페이지: ', recordData);

  return (
    <>
      {/* recordData에 데이터가 없으면 "데이터가 없습니다." 출력하기 */}
      {recordData.length ? (
        <Style.container>
          {recordData.reverse().map(data => (
            <Style.list key={data.label}>
              <Style.title>
                {selectedTab === 'month' ? `${selectYear}년` : ''}
                {data.label}
              </Style.title>
              <Style.text>영업 금액 : {numberCommas(data.value)}원</Style.text>
            </Style.list>
          ))}
        </Style.container>
      ) : (
        <Style.emptyView>
          <Style.emptyText>데이터가 없습니다.</Style.emptyText>
        </Style.emptyView>
      )}
    </>
  );
};

export default DataList;

데이터가 최근데이터가 위에 있고 과거데이터가 아래에 있길 원해서 reverse()를 사용해 주었습니다.

styles/chart.styles.ts

// react, react-native
import {ScrollView, Text, TouchableOpacity, View} from 'react-native';

// library
import styled from 'styled-components';

// style
import Theme from './Theme';

// Chart
export const Chart = {
  wrap: styled(View)`
    padding: 0 16px;
  `,
  line: styled(View)`
    margin-top: 20px;
    width: 100%;
    height: 1px;
    background: ${Theme.colors.grey};
  `,
};

// Tabs
interface TabsType {
  select: boolean;
}

export const Tabs = {
  container: styled(View)`
    ${Theme.common.flexRowCenter}
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 8px;
  `,
  tabButton: styled(TouchableOpacity)<TabsType>`
    ${Theme.common.flexCenter}
    flex: 1;
    height: 40px;
    border-radius: 10px;
    background-color: ${props =>
      props.select ? Theme.colors.main : Theme.colors.lightGrey};
  `,
  tabText: styled(Text)<TabsType>`
    font-family: ${Theme.fonts.medium};
    color: ${props => (props.select ? '#fff' : Theme.colors.darkGrey)};
  `,
};

// BarChartView
interface CenterType {
  center?: boolean;
}
export const BarChartView = {
  wrap: styled(View)<CenterType>`
    height: 230px;
    background: ${Theme.colors.lightGrey};
    border-radius: 10px;

    /* props에 center가 있으면 flexCenter 주기 */
    ${props => props.center && Theme.common.flexCenter}
  `,
  emptyText: styled(Text)`
    ${Theme.fontCommon.base}
    color: ${Theme.colors.darkGrey};
  `,
  container: styled(View)`
    padding: 20px 0;
    margin: 0 16px 0 4px;
    overflow: hidden;
  `,
};

// DataList
export const DataList = {
  emptyView: styled(View)`
    ${Theme.common.flexCenter}
    flex: 1;
  `,
  emptyText: styled(Text)`
    ${Theme.fontCommon.base}
    color: ${Theme.colors.darkGrey};
  `,
  container: styled(ScrollView)`
    padding: 0 16px;
  `,
  list: styled(View)`
    padding: 16px 0;
    border-bottom-width: 1px;
    border-color: ${Theme.colors.grey};
  `,
  title: styled(Text)`
    ${Theme.fontCommon.base}
    font-family: ${Theme.fonts.medium};
    color: ${Theme.colors.mainDeep};
  `,
  text: styled(Text)`
    margin-top: 8px;
    ${Theme.fontCommon.base}
    color: ${Theme.colors.black};
  `,
};