'Study/FrontEnd' 카테고리의 글 목록

Study/FrontEnd (17)

[flutter] 플러터 웹뷰 3.xx -> 4.xx 변경점, webview_flutter 최신화, 코드팩토리의 플러터 프로그래밍

Study/FrontEnd 마이쮸(mychew__) 2023. 7. 28. 03:48

코드팩토리의 플러터 프로그래밍책을 보다가 webview_flutter package를 이용하는 게 있는데, 책에서 사용한 3.04와 현재 최신인 4.xx버전이 사용방법이 많이 달라진 것 같다. 이런 패키지가 버전이 달라진다고 사용방법이 자주 바뀌지는 않는데, 아무래도 메이저 버전이 업데이트되었으니 변경된 것 같다. 아니면 네이티브 진영(안드나 아이폰)에서 뭔가 설정이 바뀌어서 업데이트가 됐나? 무튼 책을 그대로 따라 하면 안 되길래 4.xx대로 webview를 써보자. 옛날 거로 쓰긴 싫으니 ㅋㅋ 코드팩토리의 플러터 책은 강의도 그렇지만 참 설명이 짧다. 이런 거는 패키지 버전 다르면 사용법이 다를 수 있다고 명시를 좀 해줘야 할 텐데 일단 pub.dev에 가보면 현재 버전은 4.2.2가 최신이다 htt..

[Flutter] 플러터로 쇼핑몰 앱 만들기 [3]

Study/FrontEnd 마이쮸(mychew__) 2022. 8. 3. 01:45

구현 기능 - 회원가입 / 로그인 - 상품 조회 - 장바구니 개발환경 - 윈도우 10, IntelliJ github: 전체 - tkdlek11112/shopingmall_flutter: simple shopingmall by flutter (github.com) 이번 포스팅 완료 브랜치 - tkdlek11112/shopingmall_flutter: simple shopingmall by flutter (github.com) 들어가기 전에 지난 시간에는 파이어 베이스를 이용해서 회원가입/로그인 기능을 만들었습니다. 파이어 베이스의 강력크한 기능을 이용해 간단하고 빠르게 만들 수 있었습니다. 이번 시간에는 쇼핑몰의 핵심 기능인 상품 관련된 기능들을 만들어보겠습니다. 상품 조회 - 홈 탭 우리가 만든 쇼핑몰 ..

[Flutter] firebase 연결하기 (window 버전)

Study/FrontEnd 마이쮸(mychew__) 2022. 7. 17. 23:17

예전에는 파이어베이스를 플러터 앱에 연결할 때 OS별로 하나하나 눌러서 연결해줘야 했는데, 언제부터인가 파이어베이스에 플러터 연동 아이콘이 생겼다. 파이어베이스에서 플러터 아이콘을 클릭하면 아래와 같이 가이드가 나오는데 고대로 따라 하면 된다. 근데 뻐킹 윈도우는 역시나 예외가 있었다. 일단 파이어베이스 CLI를 설치하는 건 간단하다. 윈도우에 npm이 설치되어 있으면 그냥 npm install 하면 된다. Firebase CLI글씨를 누르면 설치하는 곳으로 링크되니 따라 하면 끝. Flutter SDK는 플러터 할꺼면 당연히 설치되어있으니 패스~ 문제는 FlutterFire CLI라는 놈인데 이놈은 설치를 하면 환경변수 어쩌고 저쩌고 PATH를 추가하라고 나온다. 윈도우에서 개발하는 개발자는 아주 익숙..

[Flutter] 플러터로 쇼핑몰 앱 만들기 [2]

Study/FrontEnd 마이쮸(mychew__) 2022. 7. 17. 21:46

플러터로 쇼핑몰 앱 만들기 [2] 구현 기능 - 회원가입 / 로그인 - 상품 조회 - 장바구니 개발환경 - 윈도우 10, IntelliJ github: 전체 - tkdlek11112/shopingmall_flutter: simple shopingmall by flutter (github.com) 이번 포스팅 완료 브랜치 - tkdlek11112/shopingmall_flutter at 플러터쇼핑몰만들기_2 (github.com) 들어가기 전에 지난 포스팅에서 로그인 화면, 회원가입 화면, 하단 바로 이루어진 메인화면 + 4개의 탭을 만들었습니다. 처음 로그인하면 splash화면이 뜨고, 로그인 여부를 체크해서 로그인 화면 or 메인화면으로 보내주고, 로그인 화면에서는 버튼을 눌러 회원가입 화면으로 이동할..

[Flutter] 플러터로 쇼핑몰 앱 만들기 [1]

Study/FrontEnd 마이쮸(mychew__) 2022. 7. 14. 02:15

플러터로 쇼핑몰 앱 만들기 구현 기능 - 회원가입 / 로그인 - 상품 조회 - 장바구니 개발환경 - 윈도우 10, IntelliJ github: 전체 - tkdlek11112/shopingmall_flutter: simple shopingmall by flutter (github.com) 이번 포스팅 완료 브랜치 - tkdlek11112/shopingmall_flutter at 플러터쇼핑몰만들기_1 (github.com) 프로젝트 만들기 프로젝트를 만들면 바로 git에 올리기 위해서 리드미 파일을 만듭니다 ㅋㅋ 리드미 파일만 만들었을 뿐인데 많이 한 느낌.. 시작이 반이랄까 ^^ 메인화면 만들기 - 하단 바 일단 무언가 시작을 하려면 어떤 화면을 만들어야 할지 생각하고 만들어야겠지요? 제일 먼저 아래 화..

[flutter] 플러터 http api 호출해보기

Study/FrontEnd 마이쮸(mychew__) 2022. 6. 26. 17:58

플러터를 이용해서 간단하게 API 호출을 해보겠습니다. 환경은 MacOS, intelliJ 프로젝트 만들기 일단 신규 프로젝트를 만듭니다. 저는 젯브레인즈 툴을 많이 쓰기 때문에(전부 샀기 때문에,,) 인텔리J를 활용해서 플러터를 사용하고 있습니다. 각자 자신이 쓰는 툴 쓰시면 되용~ 프로젝트 만들었으면 괜히 한번 실행해주는 게 예의죠. API 사용하기 위한 회원가입 이번에 사용할 API는 뉴스 API인데요, newsapi.org에 접속해서 간단하게 가입하면 사용할 수 있습니다. 이메일 주소만 있으면 가입이 가능합니다. 가입하고 나면 API 키를 줍니다. 이 키를 이용해서 API를 호출할 수 있습니다. API키를 받고 나서 다시 홈페이지에 있는 get start메뉴를 들어가면 어떻게 API를 호출하는지 ..

[Flutter] Retrofit 적용해서 api 호출하기

Study/FrontEnd 마이쮸(mychew__) 2021. 8. 26. 18:21

안드로이드를 개발해본 사람이라면 Retrofit이 친숙할 겁니다. 초창기 restapi를 호출하기 위해 삽질하다가 이제 거의 모든 restapi호출이 retrofit을 사용하는 것으로 통일되고 있는 추세인데요 ㅋㅋ flutter에서 restapi를 어떻게 처리할까 찾아보다가 retrofit for dart가 있어서 해보려고 합니다 ㅋㅋ 역시 쓰던거 하는 게 편하니까~ 일단 필요한 패키지를 설치합니다. dependencies: retrofit: any logger: any #for logging purpose dev_dependencies: retrofit_generator: any build_runner: any flutter pub get을 이용해 설치합시다~ 이제 바로 api를 호출하는 코드를 만들어..

[Flutter] Flutter Bloc 디자인 패턴 적용해서 rest api 호출하기

Study/FrontEnd 마이쮸(mychew__) 2021. 8. 6. 18:33

안드로이드에서 mvc를 써보고, django에서 mvt를 써보고, Flutter를 하면서 비슷한 게 있지 않을까? 생각해서 검색했더니 bloc 패턴이랑 mvvm 패턴이 가장 많이 쓰이는 것 같았다. 그래서 bloc을 한번 적용해보려고 하는데 생각보다 까다롭고 길다. django에서는 대충 소스 하나씩 해서 3개면 끝나는데, bloc은 파일만 몇개를 만드는지... 암튼 medium이나 블로그 찾아서 따라 하는데도 버전이 틀리거나 오타가 있어서 안 되는 부분들이 많아 따로 정리해본다. 1. 사용할 http call 일단 rest api중에 단건 호출인지 다건호출인지가 생각보다 중요했다. 나는 json array형태로 들어오는 api를 처리하고 싶었는데 대부분의 예제는 단건조회만 처리하게 되어있어서, 찾고 찾..

[Flutter] #3 http interface

Study/FrontEnd 마이쮸(mychew__) 2021. 7. 27. 01:19

follow the flutter.dev homepage tutorial guide. I think, it's the best way to learn flutter that learn from flutter.dev website. This article is based on flutter.dev use the http package on flutter Let's use rest api protocol on flutter. First, we need to add http package. Seconde, import package on source. import 'package:http/http.dart' as http. as http is optional. Third, add ..

[Flutter] #2 stateful widget

Study/FrontEnd 마이쮸(mychew__) 2021. 7. 22. 00:51

stateful widget stateful is the widget that it can change some value like text, image and any state in checkbox, radiobutton. the other, stateless is the widget can't change. when state change, setState() method will run and do somethong to change values. how to make statful widget First, make a class extends StatefulWidget. class ExStatefulWidget extends StatefulWidget{ @override _ExStatefulWid..

[Flutter] #1 flutter layout

Study/FrontEnd 마이쮸(mychew__) 2021. 7. 18. 04:08

Widget widget is base fact in flutter. We can build layout by using widgets. we can see the description of widget in source framework.dart. Widgets are the central class hierarchy in the Flutter framework. A widget is an immutable description of part of a user interface. Widgets can be inflated into elements, which manage the underlying render tree. We can't build a widget in widget. ?_?......

[Flutter] 플러터 레이아웃 튜토리얼 진행

Study/FrontEnd 마이쮸(mychew__) 2021. 5. 23. 17:05

링크 - Building layouts - Flutter 레이아웃 뽀개기 지난 포스팅에서 했던 스타트업 이름 지어주는 튜토리얼을 지나서, 이번엔 레이아웃을 연습해보는 튜토리얼을 진행했다. 공식 홈페이지에는 튜토리얼 전에 이론에 대해서도 잠깐 설명해주는데, 그냥 일반적인 이론들이라서 패스했다 ㅋㅋㅋ 아마 안드로이드나 아이폰을 개발해본 사람이라면 쉽게 이해할 수 있을 텐데, 플러터도 행과 열로 레이아웃을 짜는 구조라서 안드로이드의 리니어 레이아웃과 비슷하다. 따라서 Column과 Row를 잘 조합해서 바둑판식으로 레이아웃을 조절할 수 있다. 이건 모바일뿐만 아니라 웹도 비슷하니까, 프론트를 해보신 분들은 저보다 더 잘 알듯.. 일단 위에 올린 사진대로 앱을 만드는것이 목표다. 레이아웃을 보면 크게 이미지, ..

[Flutter] 튜토리얼 앱 만들기

Study/FrontEnd 마이쮸(mychew__) 2021. 5. 3. 00:01

공식 홈페이지 튜토리얼. 스타트업의 이름을 랜덤 하게 지어주는 앱을 만들기로 한다. 공심 홈피 링쿠 - flutter-ko.dev/docs/get-started/codelab 일단 이름을 지어주기 위해서 english_words라는 패키지를 설치해야 한다. flutter에서 외부 라이브러리는 pubspec.yaml에 관리되고 있다. pubspec.yaml에 가보면 dependencies: 아래 기본적으로 몇 가지 패키지가 적혀있는데, 그 아래 english_words: ^4.0.0-0을 추가하자. 그리고 터미널에서 flutter pub get을 입력하면 .yaml에 입력해놓은 것들을 다운받는다. 마치 장고에서 pip install -r requirements.txt를 입력하는 것과 비슷하다. 이제 imp..

react - django, cors 문제. django-cors-headers를 깔아도 문제가 발생할 때

Study/FrontEnd 마이쮸(mychew__) 2021. 4. 21. 23:12

리액트를 조금만 하다 보면 지옥의 CORS문제와 만나게 된다. CORS는 Cross-Origin Resource Sharing의 약자로 프론트엔드가 백엔드로 요청할 때 프론트와 백엔드의 도메인이 다르면 발생하는 문제다. 근데 이건 프론트엔드에서 발생하는 게 아니라 브라우저에서 발생한다. 따라서 django로 rest api 서버를 만들었을 때, 모바일 앱에서는 rest 호출이 정상적으로 되지만 프론트엔드(react, vue, angular,..)에서는 에러가 날 수 있다. 왜냐하면 도메인이 다르기 때문! 참고로 모바일 앱에서도 웹뷰를 띄워서 호출한다면 동일한 문제가 발생한다. 왜냐하면 웹뷰의 근원은 브라우저니까. django와 react를 쓸 때 보통 이런 문제가 발생하면 django에 django-co..

[Flutter] 설치하기

Study/FrontEnd 마이쮸(mychew__) 2021. 4. 2. 19:16

하이브리드의 대세가 왠지 flutter가 될 것 같아서 진행 중이던 react를 살짝 버리고(?) flutter를 시작해봅니다 ㅋㅋㅋㅋ 맥에서 설치해야 안드 아이폰 다돼서, 맥에서 진행할 예정. 맥에서 flutter 설치하기 java는 intelliJ, 안드로이드는 android studio, 아이폰은 xcode와 같이 언어와 IDE가 연동돼있는 애들을 보면 그냥 IDE만 깔면 언어를 다로 설치하지 않아도 실행 가능했다. 근데 flutter라는 놈은 언어도 생소하고 전용 툴도 없다. 단지 android stuido나 intelliJ에서 플러그인을 설치해서 사용할 수 있다. 일단 flutter sdk를 다운받아야 한다. flutter-ko.dev/docs/get-started/install/macosflu..

백엔드 개발자 프론트 도전기 feat.리엑트 [2]

Study/FrontEnd 마이쮸(mychew__) 2021. 1. 8. 23:52

SASS라고?? 리액트를 하다 보니 SASS라는 단어가 나왔다. 풀 네임은 Syntactically Awesome Style Sheets인데 멋진 스타일 시트 정도로 해석할 수 있다 ㅋㅋ SASS는 CSS pre-processor로 약간 코딩하는 방식으로 CSS를 만들면 SASS가 CSS로 변환하는 역할을 해준다. 그래서 SASS로 작성한 문서는 브라우저에서는 단순히 CSS로만 보이게 된다. 초창기에는. sass파일만 지원했는데 지금은. scss파일도 지원한다. 두 개가 다 똑같은 sass 긴 한데. scss가 문법이 좀 더 css와 비슷해서 사용하기 쉽다. 일단 sass쓰려면 따로 패키지를 설치해야 한다. (* 5.0.0 버전이 있긴 한데 작동하지 않는다. 4.14.1을 선택하자) 그리고는. scss파..

백엔드 개발자 프론트 도전기 feat.리엑트 [1]

Study/FrontEnd 마이쮸(mychew__) 2021. 1. 8. 23:48

react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 벨로퍼트와 함께하는 모던 리액트로 리액트 시작. useState 뭐냐...? 동적인 값을 할당하기 위해 useState라는걸 사용하는데 고놈 참 신기한 동작을 한다. 일단 선언은 아래와 같다. const [number, setNumber] = useState(0); useState는 함수고 인자값은 초기값이다. 이놈은 return으로 두 개의 변수가 담긴 배열을 반환한다. 이 배열에 첫번째놈은 value이고 두번째..

1

IT, I Think