전체보기
-
어느새 "대출이자계산기 만들어보기" 챕터의 마지막장입니다.이번 장에서는 어플리케이션 배포를 위해 필요한 부분과 배포 과정을 알아보겠습니다.진행을 위해서 MacOS 환경과 안드로이드 스튜디오, Xcode가 필수적으로 설치되어야 합니다.5-1. 앱 출시 준비하기마켓에 앱을 올리기 위해서는 앱 정보(이름, 아이콘 등), 앱 스크린샷등 여러 정보와 자료들이 필요합니다. 앱 이름 바꾸기앱 이름은 간편한 대출이자계산기로 하겠습니다.웹에서 보여지는 타이틀도 동일한 이름으로 바꿔줍니다. Weblayout.tsxexport const metadata: Metadata = { title: "간편한 대출이자계산기", description: "대출이자계산기를 간편하게 사용해 보세요",};declare global { i..
[토이프로젝트]대출이자계산기 만들어보기 - 5편 : 플레이스토어와 앱스토어에 어플리케이션 배포하기 2024. 5. 8. -
대산기 :: 초간편 대출이자계산기대출이자계산을 간편하게 이용해 보세요.daesanki.codedream.co.kr최근 청약,대출에 관심이 생겨 대출이자계산기를 직접 만들어봤습니다.개발 과정을 통해 대출금에 대한 납입금이 어떻게 계산되고 어떤 차이가 있는지 알 수 있었습니다. 오늘은 대출 상환 방식들을 소개하고 상환 방식별 대출 상환금액이 어떻게 다른지 알아보겠습니다.대출 상황 방식에는 원리금 균등 분할 상환, 원금 균등 분할 상환, 만기일시 상환으로 크게 3가지가 있습니다. 각 상환 방식의 특징은 다음과 같습니다. 원리금 균등 분할 상환 방식원금과 이자를 함께 갚는 방식원금 균등 방식에 비해 상환하는 이자가 많습니다.원금 균등 분할 상환 방식원금과 이자를 함께 갚는 방식원리금 균등 방식보다 상환하는 이자..
대출이자계산하기, 4억 대출 이자 계산하기 2024. 5. 7. -
지난 글에 이어 오늘은 자바스크립트 채널을 이용해 웹 함수를 네이티브 앱으로 가져와 사용해보겠습니다.토스트 팝업 적용입력값 체크를 위해 토스트 팝업을 사용해보겠습니다.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..
[토이프로젝트]대출이자계산기 만들어보기 - 4편 : Flutter로 모바일 서비스 개발하기 2024. 5. 2. -
본 포스팅부터 모바일 서비스 개발편이 시작됩니다. 진행을 위해 Flutter가 필수적으로 설치되어 있어야 하니 Flutter 설치 글을 먼저 확인해 주세요.모바일 개발편부터는 MacOS를 사용합니다.vscodeFlutter 3.13.94-1. 프로젝트 생성vscode를 실행하고 프로젝트를 생성해 보겠습니다.Command + Shift + P 를 눌러 Next Project를 클릭합니다. Application 선택 후 프로젝트를 생성할 경로를 지정합니다. 프로젝트명을 입력합니다. 이때 프로젝트명은 카멜케이스가 아닌 스네이크 케이스를 사용해야 합니다. 프로젝트가 생성되었습니다. Simulator를 실행하고 Command + Shift + D를 눌러 디버그 실행을 클릭합니다. Simulator는 Xcode 실..
[토이프로젝트]대출이자계산기 만들어보기 - 4편 : Flutter로 모바일 서비스 개발하기 2024. 5. 1. -
최근 Next.js로 만든 대출이자계산기 웹 사이트가 있습니다. 검색 노출을 잘 되게 하기 위해 사이트맵을 제출해봤습니다. 사이트맵을 만들어 구글과 네이버에 제출하는 과정들을 소개합니다.Next 14Vercel사이트맵 만들기사이트맵(Sitemap.xml)은 웹 사이트의 페이지 구조를 검색 엔진에 알려주는데 사용됩니다. 사이트맵을 제출하면 검색 엔진이 웹 사이트의 페이지를 빠르게 찾아 색인화할 수 있고, 이를 통해 검색 결과에 더 많은 페이지가 표시될 수 있습니다.npm 패키지 중 next-sitemap을 통해 sitemap을 쉽게 생성할 수 있습니다. next-sitemap을 설치합니다.npm i next-sitemap 빌드 스크립트에 postbuild를 추가합니다.postbuild: "next-site..
Next-sitemap으로 사이트맵(Sitemap.xml) 제출하기 2024. 4. 29. -
이번 포스팅에서는 지금까지 만든 프로젝트를 실제 웹 서비스로 배포해보겠습니다. Next.js를 배포하는 방법은 여러가지가 있는데, 이번 프로젝트는 Next.js를 개발한 Vercel사의 배포를 사용하겠습니다. 간단한 프로젝트는 Vercel을 이용하면 쉽게 배포할 수 있으며, 호스팅 또한 무료로 제공됩니다.배포 후에는 가비아로 구입한 도메인을 연결해보겠습니다.3-1. 가비아로 도메인 구입하기1. 가비아에 접속해서 상단에 도메인 메뉴를 클릭합니다.calculator라는 도메인은 이미 사용중이기 때문에 사용 가능한 도메인을 입력해보겠습니다. .co.kr, .kr 등 여러 가지가 있지만 co.kr이 보편적으로 많이 사용됩니다. 구매를 원하는 도메인을 검색하고 신청하기를 클릭합니다. 2. 신청 정보를 입력합니다...
[토이프로젝트]대출이자계산기 만들어보기 - 3편 : 웹 배포하기 2024. 4. 27. -
웹 서비스 개발 마지막 장입니다.오늘은 카카오톡 공유하기를 통해 계산 결과를 공유해보겠습니다.2-5. 계산 결과 공유하기(with 카카오톡 공유하기)카카오 개발자 설정카카오 개발자센터에 접속해서 애플리케이션을 추가하겠습니다. 앱 키의 JavaScript 키가 카카오톡 공유하기 기능에 사용됩니다. 플랫폼 탭에서 Web 플랫폼을 등록합니다. 두 개의 주소를 등록하는데 로컬(http://localhost:3000)과 프로덕션 주소(https://calculator.codedream.co.kr)입니다. 카카오 SDK 추가환경 변수를 관리하는 .env.local 파일을 추가합니다. 앞서 확인한 JavaScript 키를 추가합니다..env.localNEXT_PUBLIC_KAKAO_KEY=b2f44b1ec8a..
[토이프로젝트]대출이자계산기 만들어보기 - 2편 : Next.js로 웹 서비스 개발하기 2024. 4. 27. -
지난 글에 이어 계산 기능 구현하기 바로 들어가보겠습니다.화면에 보이는 계산하기 버튼을 눌러보겠습니다. ! 가 콘솔에 조회되고 있습니다.다시 코드로 돌아와서 계산기 컴포넌트를 확인해볼까요? 버튼 컴포넌트에 onClick 이벤트로 console.log를 전달했고 정상적으로 실행이 된 것을 알 수 있습니다.이제 이 버튼 컴포넌트를 클릭하면 계산이 될 수 있게 만들어 보겠습니다. 2-4. 계산 기능 구현하기계산하기 버튼 클릭시 아래와 같이 팝업이 뜨며 계산 결과를 확인할 수 있게 할 것인데요. 우선 팝업을 추가해보겠습니다. 아이콘 라이브러리 추가Lucide라는 아이콘 라이브러리를 추가하겠습니다.npm i lucide-react 설치 후에는 사이트에서 원하는 아이콘 클릭 후 Copy JSX로 복사하고 붙여..
[토이프로젝트]대출이자계산기 만들어보기 - 2편 : Next.js로 웹 서비스 개발하기 2024. 4. 25.