미새문지

로그인과 회원가입 UI를 구현했다. 입력창이 자주 쓰이기 때문에 개별 위젯으로 분리하여 재사용성을 높였고, 입력창을 flutter에서 지원하는 입력창이 아니라 본인 프로젝트 방식으로 수정했다. 플러터를 사용하면서 불편한 점이 있는데, margin과 padding을 사용하려면 Container마냥 틀을 만들어서 적용해야 하고 width 내에서 위치를 조정하려할 때, 맘대로 조정이 잘 안되는 것이다.텍스트와 입력창의 비율을 맞춰서 가운데 정렬을 하려고 했으나 자꾸 width값이 줄어든 만큼 위치가 안맞더라.. 다른 기능은 몰라도 이런 UI적인 부분은 학습을 하고 프로젝트를 했어야 했는데, 다른 일 때문에 보류했다가 프로젝트 시작하면서 학습하느라 좀 아쉽게 느껴졌다. 코드도 지금 올리고 싶은데, 지피티로 도움..

메인페이지인 헤드라인 페이지의 UI를 구현했다. 일단 피그마에 기획한대로 구현은 했는데, 좀 걱정되는 부분이 있다. 블로그 포스트 자체를 iframe으로 화면으로 가져와 보여줄 예정이였는데, 인기포스트나 다른 포스트들의 이미지와 게시글 주제 같은 내용은 어떻게 가져올런지 궁금해졌다. 코드 구조에 대해 찾아보다가 router를 사용하면 공용 위젯을 main.dart에 사용하기 어렵다고 해서 새로 공용 인터페이스인 baseScreen이라는 위젯을 하나 만들어서 appBar와 bottomBar를 추가해주고 body부분만 인자로 받는걸로 만들어줬다.import 'package:defeefront/widgets/footer.dart';import 'package:defeefront/widgets/header.da..

기존대로 크롬으로 프로젝트 화면을 확인해봐도 되는데, 이왕 앱개발하는거 에뮬레이터를 사용해서 진짜 폰 화면에 어떻게 나올지 보는게 나을 것 같아 설치하게 되었다. 에뮬레이터를 설치하려면 Android Studio에서 Tools에 SDK Manager를 들어가서 세팅해줘야 한다.SDK Tools에서 안드로이드 에뮬레이터와 인텔 에뮬레이터가 설치되었는지 확인(본인은 설치가 안되어있음)해서 설치가 안되어있으면 설치를 해준다.안드로이드 에뮬레이터와 인텔 에뮬레이터 설치 중중간에 해당 에뮬레이터의 용량과 램을 정하는게 나오는데 기본값 그대로 진행했다. 설치가 끝난 이 후 원하는 디바이스를 선택하고 넘어오면 System Image를 설정하게 되는데, 여기서 설치할 수 있는 옵션을 선택해 설치하라고 한다. 자세힌 모..

리액트때는 자바스크립트 문법위주로 작성되기 때문에 사용되는 기능들만 알아내서 사용하면 되는데, 플러터는 기능 자체가 너무 많고 방대해서 솔직히 외워서 쓸 수 있을지 모르겠다.제대로 배우지 않아서 지피티로 계속 찾아보며 구현하곤 있는데, 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..

정글 때 동료들 중 몇 명을 모아서 프로젝트를 시작했다. 재희님이 인원 모아서 플젝하자고 꼬셔가지고 고민하다가 마침 앱 개발도 한번 해보고 싶었고 인원도 모여서 승낙했다.인원은 총 5명으로 백은 재희님과 도현이 2명, 프론트는 본인과 시현, 인우로 3명으로 구성됐다.백엔드는 nest를 사용한다고 하고 프론트엔드는 react native와 flutter중 고민하다가 요새 공고에 flutter가 많이 올라오는 것 같아 flutter로 결정했다. 회의를 통해 정해진 프로젝트 주제는 TIL 피드 앱이다. 요새 개발자들은 어떻게 개발하는지, 혹은 어떤 학습을 하는지 한눈에 보기 좋게 모아놓은 앱이며 뉴스피드처럼 여러 TIL들을 확인할 수 있게 하려고 한다.팀원인 시현이가 피그잼으로 맛깔나게 짜준 유저 플로우이다...