주니어 개발자 모몽'-' 주니어 개발자 모몽'-'

CSS 의미, 정의 CSS(Cascading Style Sheet) cascading: 위에서 아래로 흐르는 느낌. Style Author Style 우리가 사용하는 CSS 파일 User Style 사용자의 취향에 맞게 브라우저에서 변환한 Style Browser Browser에서 정의한 Style 우선순위: Author > User Style > Browser !important 가장 최우선으로 적용 Selectors(선택자) Universal * (all) type Tag ID #id Class .class state : Attribute [] See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen. CSS 게임으로 알아보기 CSS Diner..

화면설계 - Home Page UI Home Page는 Column을 생성한다. Column안에 Text, Card를 생성한다. Card안에 또 Column을 생성한 후 Image, Text, Row를 생성한다. Row안에 Image List를 넣는다. Flutter Inspector : Flutter 위젯 트리를 시각화하고 탐색하기 위한 도구. 위젯 컨트롤부터 레이아웃까지 모든 항목을 블록으로 사용해 유용하게 사용되는 도구이다. https://docs.flutter.dev/tools/devtools/inspector Using the Flutter inspector Learn how to use the Flutter inspector to explore a Flutter app's widget tree..

화면설계 Tab Page에 네비바가 존재하고, Home Page, SearchPage, Account Page가 있다. 각 메뉴를 클릭하였을 경우 각 페이지로 이동되도록 구현한다. 일단 화면이 이동되는 것만 구현해두고, 각 페이지는 다음에 차근차근 변경할 예정이다. bottomNavigationBar: 하단에 있는 네비게이션 바 bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, // 선택된 네비게이션바 아이템 Index onTap: (index) { // 클릭이벤트 setState(() { _currentIndex = index; // 클릭한 네비게이션바 아이템을 현재 Index로 지정. }); }, items: const [ ..

StatelessWidget 생성 시 자동 import가 안되어 직접 import 기능을 넣어야 하는 번거로움이 있다. 자동 완성 코드를 수정하는 방법이다. Android Studio 왼쪽 상단 탭에서 File > Settings를 들어간다. Editor > > Live Template에 들어간 뒤 Flutter 아래 stless가 있다. Template text를 보면 import가 없는 것을 확인할 수 있다. 맨 위에 아래 코드를 삽입한다. import 'package:flutter/material.dart'; stless 입력 시 자동완성 코드 import 'package:flutter/material.dart'; class $NAME$ extends StatelessWidget { const $N..

화면설계 로그인 했을 경우와 안했을 경우 다른 화면이 뜰 수 있도록 RootPage를 최초페이지로 두고 경우에 따라 Login Page 또는 Tab Page가 나오도록 설정 프로젝트 생성 왼쪽 상단 탭 File > New > New Flutter Project...를 선택하여 프로젝트를 생성한다. SDK 위치 확인하기 SDK 설치방법 2023.04.26 - [Study/소소한 팁] - [Flutter] 플러터 설치 및 환경설정(Windows) [Flutter] 플러터 설치 및 환경설정(Windows) Flutter 설치방법 플러 설치 링크 https://flutter.dev/ Flutter - Build apps for any screen Flutter transforms the entire app de..

에러메세지 Unhandled Exception: Connection refused 오류 원인 API 도메인 주소를 localhost로 사용으로 발생한 오류이다. 안드로이드 애뮬레이터 사용 시 컴퓨터 환경이 아닌 모바일 환경에서 작동중인 것이므로 localhost를 사용하면 접근이 거부되어 오류가 발생한다. 수정방안 ip 주소로 변환해야 한다. // 기존 http://localhost:8080/ // 변경 http://192.168.0.1:8080/ 자신의 ip주소(IPv4 주소)는 cmd에 들어가서 ipconfig (iOS일 경우 ifconfig)명령어를 사용해서 확인할 수 있다.

Flutter Project 시작하기 Scaffold, AppBar flutter Project를 생성하면 최초로 main.dart 코드가 실행된다. Scaffold안에 appBar와 body가 존재한다. appBar는 화면 상단에 있는 파란색 Bar이고, body는 나머지 하얀 화면이다. appBar와 body에 hello world를 입력해서 출력해봤다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @over..

에뮬레이터 실행 안드로이드 스튜디오에서 우측 상단에 있는 Device Manager 아이콘을 클릭한다. 상단에 install이 있을 경우는 설치 후 진행한다. Create device 버튼을 클릭한다. 원하는 하드웨어를 선택한 뒤 Next를 클릭한다. S 다운로드 로고를 클릭하여 다운로드 한다. Accept를 체크한 후 Next를 클릭하고 설치한다. 설치가 완료되면 Finish 버튼을 클릭한다. S옆에 다운로드 아이콘이 사라진 것을 확인할 수 있다. Next 버튼을 클릭한다. Finish 버튼을 클릭한다. 다시 안드로이드 스튜디오 화면의 Device Manager를 보면 하드웨어가 추가된 것을 확인할 수 있다. 재생버튼을 클릭하여 Running Devices에 화면이 뜬 것을 확인한다. Flutter P..