"대출이자계산기 만들어보기"의 어플리케이션 배포 과정을 앞두고 있습니다. 지난 글에서 배포에 필요한 파일들을 준비했습니다. 이번 글에서는 준비한 파일들로 각 스토어에 등록하는 과정을 알아보겠습니다. 앱을 서비스화하기 위해 앱 이름과 스크린샷은 조금씩 변경되었습니다. 지난 글의 앱 이름/이미지와 다를 수 있으니 참고해주세요. *플레이스토어의 개발자 계정을 미리 만들어 주세요.+ 2024.05.29 최근에 알게 된 사실인데 작년 11월을 기준으로 신규 개발자 계정에 한해서 프로덕션 배포 전에 비공개 테스트를 받아야 한다고 합니다.. 20명으로부터 비공개 테스트를 진행해야 한다고 하니 이 부분은 다른 자료들을 참고해 주세요.5-3. 플레이스토어와 앱 스토어에 어플리케이션 배포하기플레이스토어와 앱스토어에 어플리..

어느새 "대출이자계산기 만들어보기" 챕터의 마지막장입니다.이번 장에서는 어플리케이션 배포를 위해 필요한 부분과 배포 과정을 알아보겠습니다.5-1. 앱 출시 준비하기마켓에 앱을 올리기 위해서는 앱 정보(이름, 아이콘 등), 앱 스크린샷등 여러 정보와 자료들이 필요합니다. 앱 이름 바꾸기앱 이름은 간편한 대출이자계산기로 하겠습니다.웹에서 보여지는 타이틀도 동일한 이름으로 바꿔줍니다. Weblayout.tsxexport const metadata: Metadata = { title: "간편한 대출이자계산기", description: "대출이자계산기를 간편하게 사용해 보세요",};declare global { interface Window { Kakao: any; shareChannel: any..

지난 글에 이어 오늘은 자바스크립트 채널을 이용해 웹 함수를 네이티브 앱으로 가져와 사용해보겠습니다.토스트 팝업 적용입력값 체크를 위해 토스트 팝업을 사용해보겠습니다.flutter pub add fluttertoast 웹 뷰 위젯에 토스트 팝업을 추가합니다._openToast() 함수는 메세지(String message)와 팝업 출력 위치(ToastGravity gravity)를 인자값으로 받아 팝업을 출력합니다. lib/widget/webview.dartimport 'dart:convert';import 'package:flutter/material.dart';import 'package:flutter_dotenv/flutter_dotenv.dart';import 'package:fluttertoast..

본 포스팅부터 모바일 서비스 개발편이 시작됩니다. 진행을 위해 Flutter가 필수적으로 설치되어 있어야 하니 Flutter 설치 글을 먼저 확인해 주세요.모바일 개발편부터는 MacOS를 사용합니다.vscodeFlutter 3.16.0Dart 3.2.04-1. 프로젝트 생성vscode를 실행하고 프로젝트를 생성해 보겠습니다.Command + Shift + P 를 눌러 Next Project를 클릭합니다. Application 선택 후 프로젝트를 생성할 경로를 지정합니다. 프로젝트명을 입력합니다. 이때 프로젝트명은 카멜케이스가 아닌 스네이크 케이스를 사용해야 합니다. 프로젝트가 생성되었습니다. Simulator를 실행하고 Command + Shift + D를 눌러 디버그 실행을 클릭합니다. Simulato..

이번 포스팅에서는 지금까지 만든 프로젝트를 실제 웹 서비스로 배포해보겠습니다. Next.js를 배포하는 방법은 여러가지가 있는데, 이번 프로젝트는 Next.js를 개발한 Vercel사의 배포를 사용하겠습니다. 간단한 프로젝트는 Vercel을 이용하면 쉽게 배포할 수 있으며, 호스팅 또한 무료로 제공됩니다.배포 후에는 가비아로 구입한 도메인을 연결해보겠습니다.3-1. 가비아로 도메인 구입하기1. 가비아에 접속해서 상단에 도메인 메뉴를 클릭합니다.calculator라는 도메인은 이미 사용중이기 때문에 사용 가능한 도메인을 입력해보겠습니다. .co.kr, .kr 등 여러 가지가 있지만 co.kr이 보편적으로 많이 사용됩니다. 구매를 원하는 도메인을 검색하고 신청하기를 클릭합니다. 2. 신청 정보를 입력합니다...

웹 서비스 개발 마지막 장입니다.오늘은 카카오톡 공유하기를 통해 계산 결과를 공유해보겠습니다.2-5. 계산 결과 공유하기(with 카카오톡 공유하기)카카오 개발자 설정카카오 개발자센터에 접속해서 애플리케이션을 추가하겠습니다.   앱 키의 JavaScript 키가 카카오톡 공유하기 기능에 사용됩니다. 플랫폼 탭에서 Web 플랫폼을 등록합니다. 두 개의 주소를 등록하는데 로컬(http://localhost:3000)과 프로덕션 주소(https://calculator.codedream.co.kr)입니다.   카카오 SDK 추가환경 변수를 관리하는 .env.local 파일을 추가합니다. 앞서 확인한 JavaScript 키를 추가합니다..env.localNEXT_PUBLIC_KAKAO_KEY=b2f44b1ec8a..

지난 글에 이어 계산 기능 구현하기 바로 들어가보겠습니다.화면에 보이는 계산하기 버튼을 눌러보겠습니다.  ! 가 콘솔에 조회되고 있습니다.다시 코드로 돌아와서 계산기 컴포넌트를 확인해볼까요?  버튼 컴포넌트에 onClick 이벤트로 console.log를 전달했고 정상적으로 실행이 된 것을 알 수 있습니다.이제 이 버튼 컴포넌트를 클릭하면 계산이 될 수 있게 만들어 보겠습니다. 2-4. 계산 기능 구현하기계산하기 버튼 클릭시 아래와 같이 팝업이 뜨며 계산 결과를 확인할 수 있게 할 것인데요. 우선 팝업을 추가해보겠습니다.  아이콘 라이브러리 추가Lucide라는 아이콘 라이브러리를 추가하겠습니다.npm i lucide-react 설치 후에는 사이트에서 원하는 아이콘 클릭 후 Copy JSX로 복사하고 붙여..

지난 글에 이어 오늘은 Next.js로 실제 개발을 해보겠습니다.이번 포스팅은 2번째 챕터인 "Next.js로 웹 서비스 개발하기"입니다. 웹 서비스 개발편은 코드양이 많아 총 3장으로 나누어 작성했습니다. 1장에서는 컴포넌트 생성, 스타일 적용이 주 내용이며 2장에서는 생성한 컴포넌트를 활용해 계산 기능을 구현하게 됩니다. 마지막 3장에서는 카카오톡 공유하기를 통해 계산 결과를 공유해보겠습니다.vscode를 실행하고 생성한 프로젝트를 열어보겠습니다.Next 13 버전부터는 디렉토리가 아래와 같이 생성됩니다. Next 13 버전부터는 앱 라우터 방식으로 app 디렉토리 안에 page.tsx(타입스크립트 미적용시 page.js)를 통해 페이지를 찾아가게 됩니다. 터미널을 실행(Ctrl + Shfit + `..