이번 글부터 게시판 개발 내용을 진행합니다. 현재까지 추가된 API는 다음과 같습니다.[POST] /oauth/kakao : 로그인[POST] /user/join : 회원가입[GET] /user/profile/{userId} : 사용자 정보 조회[GET] /board/list ?page={page} : 게시판 리스트 조회[POST] /board/save : 게시글 저장[PUT] /board/save/{seq} : 게시글 수정[GET] /board/info?seq={seq} : 게시글 내용 조회[DELETE] /board/item/{seq} : 게시글 삭제[POST] /board/like : 좋아요 등록[GET] /board/comment/list?seq={seq} : 게시판 댓글 리스트 조회[POST] ..

이번 글부터 게시판 개발 내용을 진행합니다. 현재까지 추가된 API는 다음과 같습니다.[POST] /oauth/kakao : 로그인[POST] /user/join : 회원가입[GET] /user/profile/{userId} : 사용자 정보 조회 포스팅 내용이 아래 순서대로 진행되고 있으니 이전 글을 확인해 주세요.테이블 설계하기로그인/회원가입 개발하기로그인 API 추가회원가입 API 추가게시판 CRUD 개발하기1. 테이블 생성게시판 기능에 연관된 테이블을 생성하겠습니다. 실제 앱에는 아래 테이블외에 추가된 내용이 더 있습니다. 여기서는 게시판, 게시판 댓글, 게시판 좋아요와 관련된 내용만 소개해보겠습니다.모든 테이블은 회원 번호(USER_NO)를 통해 회원(USERS) 테이블과 연결됩니다. 댓글 테이블..

이번 글에서는 로그인/회원가입 구현을 위해 Flutter 카카오 연동과 API 서버 연결을 해보겠습니다.현재까지 추가된 API는 다음과 같습니다.[POST] /oauth/kakao : 로그인[POST] /user/join : 회원가입개발 환경을 참고해 주세요.Flutter 3.16.5Dart 3.2.31. 카카오 연동하기1-1. 애플리케이션 추가카카오 디벨로퍼스에 접속해 애플리케이션을 추가합니다. 1-2. 앱 키 확인앱 키를 확인하고 .env 파일에 추가합니다.# 카카오 API InfoKAKAO_NATIVE_APP_KEY=네이티크 앱 키KAKAO_JAVASCRIPT_APP_KEY=자바스크립트 앱 키# 농실농실 API# 애뮬레이터에서 로컬 서버에 접속하기 위해서 아이피를 입력합니다.NONGSIL_API_U..

지난 글에서 게시판 만들기에 필요한 테이블들을 설계해봤습니다.이번 글부터 설계한 테이블을 토대로 로그인/회원가입 API를 만들어보겠습니다.개발 환경을 참고해 주세요.Spring Boot 2.7.5Jdk 1.8Gradle1. 인증 시나리오본격적인  개발에 앞서 회원 인증을 어떤 식으로 구현할지 고민했습니다.회원 가입에 필요한 데이터들을 최소화하고 카카오 로그인만 제공하기로 했습니다.(아직 수정된 내용을 배포해보지 않아서 카카오 로그인만 제공할 때 반려가 될지는 모르겠네요) 카카오 로그인을 통해 전달받은 데이터는 카카오 아이디와 프로필 이미지만 사용했습니다. 추가적으로 사용자로부터 닉네임, 도매시장, 법인을 입력받았습니다.처음 생각한 시나리오는 다음과 같습니다. 웹/모바일앱에서 각각 네이티브 방식으로 카카오..

농실농실이라는 농산물 실거래가 어플을 배포하고(출시기 보러가기) 사용자가 조금씩 늘어나면서 추가/보완할 기능을 고민하다가 게시판을 만들기로 결정했습니다. 그리고 드디어 마무리가 되었습니다. 농실농실은 웹/모바일앱 플랫폼을 제공하고 있습니다. 본 포스팅 시리즈를 통해 Flutter를 이용해 개발한 앱의 게시판 기능을 추가한 과정들을 하나씩 소개해보려고 합니다. 운영중인 프로젝트인만큼 전체 코드를 공유하진 못하겠지만 게시판 만들기의 큰 틀은 참고하실 수 있도록 내용을 준비했습니다. 이번 포스팅은 총 3개의 챕터로 기획했습니다.테이블 설계하기로그인/회원가입 개발하기게시판 CRUD 개발하기 개발 환경과 사용한 기술들은 다음과 같습니다.Spring Boot 2.7.5 / Jdk 1.8Flutter 3.16.5 /..

"대출이자계산기 만들어보기"의 어플리케이션 배포 과정을 앞두고 있습니다. 지난 글에서 배포에 필요한 파일들을 준비했습니다. 이번 글에서는 준비한 파일들로 각 스토어에 등록하는 과정을 알아보겠습니다. 앱을 서비스화하기 위해 앱 이름과 스크린샷은 조금씩 변경되었습니다. 지난 글의 앱 이름/이미지와 다를 수 있으니 참고해주세요. *플레이스토어의 개발자 계정을 미리 만들어 주세요.+ 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..