본문 바로가기

코딩

defee 로그인 페이지 & 회원가입 페이지 UI 구현 로그인과 회원가입 UI를 구현했다. 입력창이 자주 쓰이기 때문에 개별 위젯으로 분리하여 재사용성을 높였고, 입력창을 flutter에서 지원하는 입력창이 아니라 본인 프로젝트 방식으로 수정했다. 플러터를 사용하면서 불편한 점이 있는데, margin과 padding을 사용하려면 Container마냥 틀을 만들어서 적용해야 하고 width 내에서 위치를 조정하려할 때, 맘대로 조정이 잘 안되는 것이다.텍스트와 입력창의 비율을 맞춰서 가운데 정렬을 하려고 했으나 자꾸 width값이 줄어든 만큼 위치가 안맞더라.. 다른 기능은 몰라도 이런 UI적인 부분은 학습을 하고 프로젝트를 했어야 했는데, 다른 일 때문에 보류했다가 프로젝트 시작하면서 학습하느라 좀 아쉽게 느껴졌다. 코드도 지금 올리고 싶은데, 지피티로 도움.. 더보기
flutter 헤드라인 페이지 UI 구현 메인페이지인 헤드라인 페이지의 UI를 구현했다. 일단 피그마에 기획한대로 구현은 했는데, 좀 걱정되는 부분이 있다. 블로그 포스트 자체를 iframe으로 화면으로 가져와 보여줄 예정이였는데, 인기포스트나 다른 포스트들의 이미지와 게시글 주제 같은 내용은 어떻게 가져올런지 궁금해졌다. 코드 구조에 대해 찾아보다가 router를 사용하면 공용 위젯을 main.dart에 사용하기 어렵다고 해서 새로 공용 인터페이스인 baseScreen이라는 위젯을 하나 만들어서 appBar와 bottomBar를 추가해주고 body부분만 인자로 받는걸로 만들어줬다.import 'package:defeefront/widgets/footer.dart';import 'package:defeefront/widgets/header.da.. 더보기
flutter 앱 에뮬레이터 설치 기존대로 크롬으로 프로젝트 화면을 확인해봐도 되는데, 이왕 앱개발하는거 에뮬레이터를 사용해서 진짜 폰 화면에 어떻게 나올지 보는게 나을 것 같아 설치하게 되었다. 에뮬레이터를 설치하려면 Android Studio에서 Tools에 SDK Manager를 들어가서 세팅해줘야 한다.SDK Tools에서 안드로이드 에뮬레이터와 인텔 에뮬레이터가 설치되었는지 확인(본인은 설치가 안되어있음)해서 설치가 안되어있으면 설치를 해준다.안드로이드 에뮬레이터와 인텔 에뮬레이터 설치 중중간에 해당 에뮬레이터의 용량과 램을 정하는게 나오는데 기본값 그대로 진행했다. 설치가 끝난 이 후 원하는 디바이스를 선택하고 넘어오면 System Image를 설정하게 되는데, 여기서 설치할 수 있는 옵션을 선택해 설치하라고 한다. 자세힌 모.. 더보기
flutter AppBar, BottomBar 구현 리액트때는 자바스크립트 문법위주로 작성되기 때문에 사용되는 기능들만 알아내서 사용하면 되는데, 플러터는 기능 자체가 너무 많고 방대해서 솔직히 외워서 쓸 수 있을지 모르겠다.제대로 배우지 않아서 지피티로 계속 찾아보며 구현하곤 있는데, dart의 문법이 안익숙해서 그런지 참 어렵네.. import 'package:defeefront/routes.dart';import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { retu.. 더보기
flutter 프로젝트 시작 정글 때 동료들 중 몇 명을 모아서 프로젝트를 시작했다. 재희님이 인원 모아서 플젝하자고 꼬셔가지고 고민하다가 마침 앱 개발도 한번 해보고 싶었고 인원도 모여서 승낙했다.인원은 총 5명으로 백은 재희님과 도현이 2명, 프론트는 본인과 시현, 인우로 3명으로 구성됐다.백엔드는 nest를 사용한다고 하고 프론트엔드는 react native와 flutter중 고민하다가 요새 공고에 flutter가 많이 올라오는 것 같아 flutter로 결정했다. 회의를 통해 정해진 프로젝트 주제는 TIL 피드 앱이다. 요새 개발자들은 어떻게 개발하는지, 혹은 어떤 학습을 하는지 한눈에 보기 좋게 모아놓은 앱이며 뉴스피드처럼 여러 TIL들을 확인할 수 있게 하려고 한다.팀원인 시현이가 피그잼으로 맛깔나게 짜준 유저 플로우이다... 더보기
24.11.03 소프트웨어 품질 관리 소프트웨어 품질 관리는 소프트웨어 제품이 사용자의 요구 사항과 기대에 부합하고, 결함 없이 안정적으로 동작하도록 보장하기 위한 계획, 통제, 보증 활동을 포함한 프로세스이다.소프트웨어 개발 과정의 모든 단계에서 이루어지고 개발 프로세스와 최종 제품의 품질을 모두 관리하는 것이 목표이기 때문에, 이러한 소프트웨어 품질 관리의 목표는 고품질의 소프트웨어를 통해 사용자 만족을 얻고, 유지보수 비용을 절감하거나 시장에서 경쟁력을 유지하는 것이다. 소프트웨어 품질 관리의 중요성소프트웨어 품질 관리는 최종 제품이 사용자가 기대하는 수준의 품질을 유지하고, 비용 효율적으로 개발될 수 있도록 하는 중요한 프로세스이기 때문에 정확한 관리가 필요하다.사용자 만족도: 고품질의 소프트웨어는 사용자 만족도를 높이고, 충성도를 .. 더보기
24.10.31 flutter navigator 몇몇 앱들을 보면 들어가자마자 로그인부터 해야 작동하는 앱들이 있다. 보통은 로그인을 안해도 어플을 켤 수 있지만 개인정보가 필요한 앱의 경우 로그인을 통해 데이터를 넘겨줘야 하기 때문이다.그래서 초기 페이지를 로그인으로 잡아보려고 한다.import 'package:flutter/material.dart';import 'package:practice/pages/login.dart';import 'package:practice/pages/home.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget .. 더보기
24.10.29 flutter 위젯 배치 flutter에서 자주 사용되는 기본 위젯은 4개가 있는데, 글자 위젯, 이미지 위젯, 아이콘 위젯, 박스 위젯이 있다.글자 위젯 (Text Widget)flutter에서 텍스트를 화면에 표시하는 기본 위젯으로,  스타일, 폰트 크기, 색상 등을 설정할 수 있다. Text 위젯을 사용해 작성한다. @override Widget build(BuildContext context) { return const MaterialApp( home: Text("문미새 블로그") ); }  아이콘 위젯 (Icon Widget)flutter의 기본 아이콘 위젯으로, Material Design의 아이콘을 사용할 수 있으며, 아이콘 색상, 크기 등을 설정할 수 있다. Icon 위젯을 사용해 작성한다.. 더보기

티스토리툴바