나만의 개발 블로그

🙆‍♂️ 1개 값 입력 🚀문자열 입력 a = input() 🚀정수형 입력 a = int(input()) 🙆‍♂️ 띄어쓰기로 구분되는 2개 값 입력 🚀문자열 입력 a,b = input().split() 🚀정수형 입력 a,b = map(int, input().split()) 🙆‍♂️ 여러 개 값을 일차원 배열로 입력 🚀정수형 입력 (띄어쓰기로 구분) arr = list(map(int,input().split())) 🚀정수형 입력 (띄어쓰기로 구분) arr = [] for i in range(n): arr.append(int(input())) n 값도 함께 입력받을 때 사용합니다. 🚀정수형 입력 (엔터로 구분) arr = [int(input()) for _ in range(n)] n값이 엔터 횟수가 되야합니다..

🙆‍♂️버튼 function App() { let [title] = useState(["맛집","영화","카페"]); let [like] = useState(0); return ( 블로그 {title[0]} 👍 {like} 2022/07/07 {title[1]} 👍 2022/07/07 {title[2]} 👍 2022/07/07 ); } 아직 코드에 대한 기능은 구현하진 않았지만 이런 사이트를 구현해봤습니다. 따봉 버튼이 눌린다면 인덱스값이 늘어나도록 하려면 onClick을 사용하면 됩니다. 실제로 HTML에서 인라인으로 자바스크립트를 사용하는 것과 비슷하지만 style 때 처럼 중괄호를 사용하셔야 합니다. 🚀state 변경 이제 함수를 이용해서 state를 변경하면 되는데 그냥 변경할 수 없습니다. st..

🙆‍♂️State State란 변수와 같습니다. 자료를 잠깐 저장하는 기능입니다.' import { useState } from 'react'; state를 사용하기 위해서는 위와같이 import가 되어있어야 합니다. useState를 쳐도 자동완성으로 import 시켜줄 때도 있습니다. function App() { let [a,b] = useState("맛집1"); return ( 블로그 게시글1 {a} 2022/07/07 ); } 이렇게 작성을해보면 이런식으로 페이지가 만들어지는데 useState의 정확한 사용법을 보면 let [a,b] = useState("맛집1"); 이런식으로 useState함수를 사용해서 값을 저장할 수 있습니다. 이때 a에는 state로 보관한 자료인 맛집1이 저장되고 b에..

🙆‍♂️JSX란 JSX는 JavaScript에 XML을 추가 확장한 문법으로 React 프로젝트에서 개발할 때 사용됩니다. 쉽게말하면 JavaScript 안에서 HTML을 쉽게 사용할 수 있게 합니다. 🚀className JSX에서 HTML 처럼 class를 부여하고 CSS를 통해서 스타일을 변경할 수 있습니다. 먼저 css파일을 import 하는 법은 이렇게 간단하게 할 수 있습니다. 계산기 앱 .header{ display: flex; background-color: black; width: 100%; color: white; padding-left: 2em; } class를 부여할 때 HTML에서는 class = "어쩌구" 로 하지만 JSX에서는 className="어쩌구"로 해야합니다. React..

📌React 설치 순서 Node.js 설치 VS Code 설치 프로젝트 생성 간단 React 구조 🙆‍♂️Node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 LTS 버전으로 설치하시면 됩니다. 🙋‍♂️VS Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern ..

🙆‍♂️문제 코드 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({ Key? key }) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Center( child: ElevatedButton( child: Text("Go to ScreenA"), onPressed: ()=>Navigator.push(context, MaterialPageRoute( builder: (context) => ScreenA() ) ), ), )..

🙆‍♂️오류 플러터를 사용하다보면 이렇게 Navigator 에러가 나옵니다. 그 이유는 현재 받아온 context에서 ScreenA를 찾을 수 없기 때문입니다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({ Key? key }) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Center( child: ElevatedButton( child: Text("Go to ScreenA"), onPressed: () { Nav..

🙆‍♂️ 다중 페이지 이동 먼저 코드들을 확인해보겠습니다. 🪐main.dart import 'package:flutter/material.dart'; import 'package:flutter_application_1/ScreenA.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({ Key? key }) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: ScreenA(), ); } } 🪐ScreenA.dart import 'package:flutter/material.dart'; c..

📋글의 순서 Route의 개념 Navigator의 정의 stack 자료 구조 MaterialPageRoute위젯과 context 페이지 이동 기능 구현 실습 🙆‍♂️Route의 개념 Flutter의 Navigator에서 Route가 뜻하는 것은 " 스마트폰에서 보여지는 하나의 페이지나 화면 " 입니다. 🙋‍♂️Navigator의 정의 Navigator란 모든 페이지를 관리하고 스택구조로 Route들을 관리합니다. Navigator 위젯으로 앱 내에 페이지 이동을 할 수 있습니다. Push와 pop 메소드를 통해서 stack을 관리를 합니다. 🤷‍♂️stack 자료구조 Stack 자료 구조는 Last-in First-out 구조입니다. Push 메소들르 통해서 데이터를 상주시킬 수 있고 Pop 메소드를 통..

🙆‍♂️Toast Message Toast message를 사용하기 위해서는 따로 fluttertoast라는 라이브러리를 import 해야합니다. 그렇기 위해서 먼저 pubspec.yaml 파일로 이동을 한 후 cupertino_icons 밑에 fluttertoast : ^3.1.3을 추가합니다. 그리고 main.dart 파일로 돌아와서 상단에 fluttertoast/fluttertoast.dart 파일을 import 해줍니다. Toast Message를 사용하기 전에 환경을 구성해주고 버튼을 누르면 onPressed 함수를 통해서 Toast Message를 사용할 수 있도록 설정할 것입니다. 밑에 flutterToast라는 함수를 만들어서 onPressed에 사용할 수 있습니다. gravity 속성을 ..