개발노트

이번 포스팅은 Flutter에서 이전에 만들었던 DTO JSON 데이터를 받아오기위해 Flutter안에 API서버 호출을 만들어본다.화면 시나리오1. 모든 칵테일을 보여준다. (호출 1)2. 원하는 칵테일을 클릭한다.3. 해당 칵테일의 정보를 보여주는 화면이 나온다. (호출 2)따라서 이렇게 두가지 호출을 만들어 줄 예정호출 1은 메소드 쿼리를 이용하여 FindAll() 로 모든 칵테일을 보여준다.호출 2는 클릭된 칵테일의 식별 ID를 파라미터로 받고 DTO를 이용하여 해당 칵테일 상세정보를 맞춤형으로 만들어서 클라이언트에 데이터를 보내준다.이전 포스팅에서 호출1,2는 만들어졌다.- 이전포스팅: https://mroh1226.tistory.com/223 [2024.06.20] 화면에 필요한 JSON 데이..

현재 타계열사의 요청으로 새로운 프로젝트에 들어가게 되었고, 개인적으로 가장 머리를 많이 써야한다고 생각하는 부분인  DB 설계를 하다보니 여유가 없었던 탓인지 1인개발을 한동안 하지 못 했다.다른 일정들도 있어 얼추 마무리가 된 지금, 저번에 이어 서버와 클라이언트 화면을 마저 연결해본다.API Server와 Flutter간의 연결은 앞에서 많이 해보았지만, 이번에 연결할 부분은,내가 생각했던 화면에 사용될 DTO를 작성하고 호출하는 것으로 여러 시행착오를 몸소 경험하고 완성시키는 것에 큰 의미가 있다고 생각한다.화면 시나리오1. 모든 칵테일을 보여준다. (호출 1)2. 원하는 칵테일을 클릭한다.3. 해당 칵테일의 정보를 보여주는 화면이 나온다. (호출 2)따라서 이렇게 두가지 호출을 만들어 줄 예정호..

API 서버에서 DTO를 작성하여 원하는 JSON 데이터를 만들 수 있게 되었다.전부 넘기는 것보다 효율적으로 데이터를 넘겨야한다.(아래와 같이 보내면 클남.)> GET Request를 2개 만들고 Cocktail만 불러오는 것 하나, Ingredient를 불러오는 것 하나 만들어서 프론트에서 categoryId를 통해 조건부로 나누자  DTO 설계에 좀 더 디테일을 추가하고, 필요한 데이터만 가져올 수 있도록 다듬어보자.그리고 화면 아이디어를 짜보자 배운점:Entity 관계를 설정할 때(@OneToMany, @ManyToOne) @JsonProperty를 사용하면 @JsonIgnore 로 직렬화에 제외된 필드를 추가할 수 있다. 예시) @ManyToOne(fetch = FetchType.LAZY)..

DB - API Server - Client App (MySQL - Spring Boot - Flutter) 연동완료.! 우선 3가지의 연동을 직접 작성하고 눈으로 확인하며, Client Application이 서비스되는 흐름을 조금 더 선명하게 볼 수 있게 되었다. 아직 CI/CD는 구축하지않았지만 앱 완성도를 높이는 것에 집중하고 그다음에 하는 것을 목표로 해야겠다. 이제부터가 내가 생각한 아이디어를 앱에 그려보는 시간이 될 것이라고 생각된다. 필요한 화면을 Flutter로 만들고, 만든 화면에 필요한 데이터를 Spring Boot Conttroller에 추가하며 호출하고, 추가적으로 필요한 데이터가 생기면 칼럼, 테이블 수정,추가 등 MySQL로 관리하면 되겠다. 앞으로 할일 API 서버 보안을 위..

이전에 만들어보았던 Mybatis가 아닌 JPA로 API 서버를 구축하였다. 현재 DB와 연동이 완료된 상태이며, Flutter 소스를 조금 수정하여 http 로 json 데이터를 받아와 UI에 뿌려주면된다. 이번 기회에 http 패키지로 API 서버 통신을 한번 더 구현하였고, 이전 포스팅에서 지금까지 백엔드에 대한 지식이 많이 부족했다라는 것을 알았고 공부하려고한다. Model - Repository - Service - Controller 로 이루어진 구조로 어노테이션을 통해 이부분이 어떤 부분인지를 명시하고 하는 방식들이 새로웠다. Mybatis와 달리 실제 쿼리를 적어 Mapping 하는것이 아니라 메소드로 자동쿼리를 맨들어내 CRUD가 가능했다. 더 공부해서 풀스택 근처라도 가보자. 스프링부트..

1차적으로 스키마를 구성하였다. 칵테일의 정보나 기타 값을 넣는 것에는 챗 GPT의 도움을 받았으며 추후에 정보를 수정할 예정이다. 원래 하고자했던 ERD와 Table 구성으로 한번에 가기 어렵다는것을 알고 있기 때문에 만들고 수정하여 아래와 같이 도달하였다. 아래 그림은 정규화된 인스턴스 값들을 한번에 보여주기위해 JOIN을 사용하였다. 아래 계획된 ERD에서 build -> mixtype 으로 테이블명 변경, 영어이름, Foreign Key 수정 등 몇번의 작업을 거쳐야했다. 이제 스프링부트로 넘어가 API 서버를 구축하고, Flutter http로 json 데이터를 fetch하면 된다. API Server 구축과 Flutter http 패키지 사용을 이번 중점으로 둬야 하기 때문에 DB는 필요에 따..

지금까지 Flutter에 사용했던 NoSQL, Serverless인 Firebase가 아닌, 관게형 데이터베이스와 백엔드 API Server 를 이용하여 Flutter http 패키지를 통해 서버통신을 구현하려고한다. 이번 Home Bar 앱에는 Mybatis, Mapper 가 아닌 ORM 방식을 사용할 예정이다. ORM 인터페이스를 모아둔 JPA를 사용하여 소스를 통해 쿼리를 자동으로 작성하고 데이터 결과를 Object 형식으로 받아오는 형식을 사용하고, 이를 Flutter Http 패키지로 받아오려고한다. 앱 서비스 전반적인 것을 이해하고 구현하기 위해 Firebase는 소셜로그인과같은 편의 기능정도를 사용할 예정이다. DB로는 MS-SQL이 아닌 MySQL을 사용하려고한다. 구성도 해야할 일 1. ..

- 홈 화면 Lottie 애니메이션을 홈화면의 Page마다 추가해주었음 무료만 사용하다보니 선택할 수 있는 애니메이션이 제한적임 Flutter에서 LottieBuilder.network 위젯 사용을 위해 Lottie 애니메이션의 URL이 필요했는데 정확하게 얻는 방법을 알게 됨 원하는 애니메이션을 클릭, 해당 애니메이션을 나의 프로젝트로 이동시킴 Enable Link 스위치 토글을 활성화 시켜 Lottie 애니메이션 링크를 얻음 *주의사항: 무료버전을 사용하는 사람은 최대 10개까지 프로젝트로 이동할 수 있으며, 내 프로젝트에서 지우면 URL이 사라지기 때문에 더이상 불러올 수 없음 - 로그인 화면(로그인 상태관리 추가) 앱 실행 시, 이전 로그인 상태를 알 수 있도록 로직을 추가함(SharedPrefe..

1차적으로 개발한 전체적인 동작화면(사용된 이미지는 랜덤하게 나오는 사이트를 이용) - 구현된 것들 - GoRoute 를 사용하여 Navigator를 구성하였으며, Web에서 URL로 접근 가능하도록함 1. 홈 화면 게스트, 호스트, 등 page들을 넣고 액체느낌으로 페이지 전환되도록 패키지사용 page가 전환되었을 때 축하하는 애니메이션 Lottie가 동작하게끔 로직 작성해봄 2. 칵테일 화면 Hero 위젯을 사용하여 cocktail 정보를 tag로 설정하여 같은 카드가 이동하는 것처럼 일체감을 줌 칵테일 상세화면을 만들고 클릭 했을 때 칵테일 레시피에 필요한 재료와 위스키들을 Riverpod을 통해 가져옴 칵테일 상세페이지의 배경화면 이미지에 블러 효과를 주도록 블러필터를 사용함 당도,바디감, 스파이..

1. 프로젝트명 정하고 생성하기 2. 깃허브 Repository 생성(Private) 3. 내가 고려했던 사항들을 구현 가능하게 해주는 패키지 설치 4. 앱 Theme, Primary Color, DarkMode 등 고려하여 초기 설정 5. GoRouter 로 Web 확장까지 고려하여 Navigator 설정하기 6. MVVM 패턴과 repository 등 상태관리를 위해 Provider, Riverpod 설치 7. Serverless 를 위해 firebase 패키지 설치, 프로젝트 생성