짱구

들어가기 앞서... 무조건 Expanded 와 Flexible 은 Row 와 Column 위젯 안에서만 사용이 가능하는 것을 알고 있어야 한다. 개발 초보자자들은 아무데나 Expanded 와 Flexible 을 사용해서 에러를 만들어낸다고 하니 주의하자! 주의 깊게 봐야하는 점... Expㅁnded 와 Flexible 은 무조건!! Row 와 Column 위젯안에서만 사용해라! 본문으로... Expanded 는 최대한으로 남아있는 사이즈를 차지해라라는 뜻이다. Expanded 를 추가해보자! import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(..

들어가기 앞서... 이전 게시글에는 CrossAxisAlignment인 반대축 정렬 테스트를 하기 위해서 Row 위젯 위에 width 과 height 를 MediaQeury 를 사용해서 휴대폰 사이즈 크기로 넓혀 테스트를 진행하였다. 하지만 MainAxisSize 만 있으면 그럴 필요가 없다. 본문으로... width , heigth 코드를 제거하고 MainAxisSize 코드를 적용해보자! import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) {..

들어가기 앞서... 가끔 가다 플러터 3.0이상을 쓰다보면 에러가 뜨는 현상이 있다. 그럴때는 flutter 의 버전을 다운그레이드 해주거나 캐쉬를 클린 해주도록 하자! 나는 IOS 시뮬레이터는 실행이 되지만, 프로젝트가 Run 이 안되는 이슈가 있어서 이 게시글을 작성했다. 본문으로... 1. 다운 그레이드 하는 방법 터미널을 켜서 우선 flutter 의 위치를 찾는다. hitang@hitangui-MacBookPro ~/Documents/libraries/flutter 나같은 경우에는 Documents/libraries 폴더 안에 flutter 에대한 것을 저장해놓았다. 그리고 난다음 git checkout 원하는 버전 을 입력하면 된다. // 2.8.1로 버전 변경 git checkout 2.8.1..

들어가기 앞서... 저번 게시글에는 SafeArea 를 사용했고 이번에는 Ios 시뮬레이터를 통해 MainAxisAlignment 를 사용해보겠다 우리가 저번에는 center 만 사용해봤는데, 전부 다 사용해볼것이다. 본문으로... MainAxixAlignment 주축 정렬이다. MainAxixAlignment.start -> 기본 default 이다. 처음부터 시작한다. MainAxixAlignment.end -> 끝에서 시작한다. MainAxixAlignment.center -> 가운데부터 시작한다. MainAxixAlignment.spaceBetween -> 위젯과 위젯의 사이가 동일하게 배치된다. MainAxixAlignment.spaceEvenly -> 위젯을 같은 간격으로 배치하지만 끝과 끝에..

들어가기 앞서... 우리가 만든 스크린 관련된 위젯들을 main.dart 파일에 작성을 하면 코드가 너무 길어지니깐 새로운 폴더를 만들어서 스크린 관련된 위젯들을 따로 관리하겠다! 본문으로... 1. 스크린 위젯을 관리하기 위한 폴더를 하나 만들어 준다! 새로 생긴 screen 폴더에 같은 방법으로 이번에는 FIle 버튼 을러 home_screen.dart 파일을 만들자! 복붙을 해주면! 처음에는 StatelessWidget 을 불러 오지 못해서 빨간줄이 뜰텐데, 위에 밑에 문구를 import 해주면 문제 없다! import 'package:flutter/material.dart'; 그리고 main.dart 를 가보면 매운 간결해진 코드를 볼수 있다! HomeScreen() 에러는 해결 방법은 밑에 같이..

들어가기 앞서... 스플래쉬란 앱의 초기 접속이나, 로딩 화면이 나올때 나오는 페이지라고 볼수 있다. 보통 모든 앱들은 스플래시 스크린이 존재한다. 목표 설정 Asset 추가하기(이미지 ) StatelessWidget 생성(위젯을 만드는 방법을 알것임) Column 위젯 (기본으로 제공해줌) CircularProgressIndicator 위젯 (기본으로 제공해줌) Image 위젯 (이미지를 띄우기 위함) 본문으로... 우선 이미지를 다운을 받고 사용하려고 하는 프로젝트에 붙여넣기를 해준다. 1. 기존에 동영상 강의에서 제공해주는 깃 주소해서 이미지 파일인 asset 만 복사한다. 2. 사용할 프로젝트 열고 오른쪽 마우스 Paste 클릭 그러면 asset 폴더가 잘 붙여진걸 확인 할 수 있다. 그럼, 이제..

들어가기 앞서... 이전에 플러터 ios 시뮬레이터와 android 시뮬레이터 개발 환경 구축을 진행완료했다. 이제는 프로젝트를 새로생성해서 HelloWorld 를 출력해볼 예정이다. 처음으로 플러터 프로젝트를 진행하는것이기에 가볍게 정의도 살펴볼 예정이다. 본문으로... 1. Android Studio 를 실행 해서 flutter New Project 를 생성해주자! New Flutter Project를 클릭하자! 클릭하게 되면 바로 하나의 창이 뜨게 되는데, 왼쪽에는 언어에 대한 옵션이 나오고 오른쪽 상단에 Flutter SDK path 는 말그대로 플러터의 SDK 의 경로를 설정해둔곳을 나타낸다. 이 부분은 또 새로운 프로젝트를 생성해도 변경할 필요가 없다. Next 클릭하자 위에서 부터 차례대로 ..

플러터 공부를 시작해보겠다. 플러터는 dart 언어를 사용 하는 것을 알아두자! 플러터를 웹에서 간단하게 할수 있도록 웹페이지 하나를 소개해주겠다. https://dartpad.dev 에 접속하면 바로 Dart 언어를 사용해 코드를 실행해볼 수 있다. 문법은 자바스크립트 문법이랑 매우 유사하고, 자주 에러가 생성되는 부분은 코드 마지막에 ; (세미콜론)을 안붙이면 무조건 에러가 출력된다. void main() { // variable var name = '코드팩토리'; print(name); name = 'zh'; print(name); // interger int number = 1; print(number); int number2 = 12; print(number2); int number3 = -20..

이전 회사에서 쇼핑몰 프로젝트를 진행하다 페이지 렌더링될때 브라우저가 보여주기 전에 데이터 페칭을 하기 위해, useEffect 이 아닌 useLayoutEffect 를 사용한 경험이 있다. 과연 이게 맞는 방법인가를 생각하다. useEffect와 useLayoutEffect 의 차이점을 알면 그 사용법을 정확하게 알 수 있을 것 같다. 우선 useEffect 와 useLayoutEffect 의 코드를 보겠습니다. useEffect useEffect(()=> { effect return () => { cleanup } },[input]) useLayoutEffect useLayoutEffect(()=> { effect return(()=> { cleanup }) },[input]) 리액트 공식 독에도 u..

타입스크립트를 들어가기전 제일 기초인 타입을 알아야합니다. 기본 타입의 종류 1. Number 타입 예시 👉 1, 3.1, -100 설명 👉 1 은 소수점이 없는 양수의 숫자이며, 3.1 은 소수점을 가진 숫자이고, -100 은 음수인 숫자입니다. 결론 👉 이 모든 값들은 숫자 타입(number)입니다. 2. String 타입 예시 👉 '1', "2", `3` 설명 👉 string 타입은 작은 따옴표, 큰 따옴표, 백틱과 같은 세가지 방법으로 정의 할 수 있습니다. 백틱(``)은 데이터를 동적으로 삽입할때 주로 사용하며, 일반 문자열로 작성 가능합니다. 결론 👉 모든 종류의 텍스트 포함됩니다. 3. Boolean 타입 예시 👉 true, false 설명 👉 참과 거짓이라는 값만 알면 됩니다. if 문에서..