728x90
반응형

SELF STUDY 35

[Flutter] 넷플릭스 클론 코딩 #3 | Top Bar 추가 | 로고 추가 | 이미지 패키지 추가 | 이미지 띄우기 | png 파일 추가

이번 시간에는 넷플릭스에 들어가는 N로고를 추가하는 방법에 대해 알아보는 시간~ 나는 강사님이 만들어주신 B로고를 그대로 사용했는데, Y로 바꾸고 싶다+_+ 이미지 파일 패키지에 추가하는 방법 1. root폴더 아래에 images폴더 생성 버튼 누르고 images 폴더 생성 (원하는 폴더명으로 하면 될 듯) 2. 생성한 폴더 (images)에 추가하고자 하는 이미지 파일 저장 3. pubspec.yaml 파일 수정 assets에 있는 주석을 지우고, 원하는 파일의 경로를 추가해주면 된다. ex) 수정 전 # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - i..

SELF STUDY/Flutter 2024.04.24

[VSCode] 에뮬레이터 실행하는 방법 | 에뮬레이터 추가 | iOS 버전 추가

Flutter 개발 처음이라 처음에 에뮬레이터를 실행하는 방법도 몰랐다! 그래서 정리해두는 에뮬레이터 실행 방법 일단 에뮬레이터 실행을 위해서는 Xcode 와 Android Studio가 설치되어 있어야한다. 각각 플랫폼에서 설치해둔 에뮬레이터만 실행이 가능하기 때문. 에뮬레이터 실행하는 방법 1. 검색창클릭 2. > Flutter: Launch Emulator 입력 후 엔터! 3. 실행가능한 에뮬레이터 확인 후 선택하면 된다. EZ 나는 기존에 ios 개발을 해본적이 없어서 iOS 에뮬레이터가 하나도 없었다. 그래서 추가해줬는데 방법은 iOS 에뮬레이터 모델 추가 방법 1. Xcode실행 2. Setting 클릭 3. Platforms 에 보면 실행 가능한 에뮬레이터를 확인 가능하고, 다른 버전 추가도..

SELF STUDY 2024.04.23

[Flutter] 넷플릭스 클론 코딩 #2 | 하단 네비게이션 바 생성

하단 네비게이션 바를 생성하는 방법에 대해 정리! 하단 네비게이션 바라고 하면 여기 사진에서 아래 홈 / 검색 / 저장 / 더보기 에 해당하는 네비게이션을 의미한다! bottom_bar.dart 하단 네비게이션 바를 구현하는 소스 TabBar 사용. 각 탭은 아이콘 + 텍스트로 구성. class Bottom extends StatelessWidget { const Bottom({super.key}); @override Widget build(BuildContext context) { // for flexible size based on device display final Size screenSize = MediaQuery.of(context).size; final double screenHeight =..

SELF STUDY/Flutter 2024.04.23

[Flutter] 넷플릭스 클론 코딩 #1 | 플러터 개발 환경 세팅 | fix 'bottom overflowed by 19 pixels' error

뭔가 계속 취준을 하다 보니 나의 개발 스택을 넓히고 싶다는 생각이 들었다. 그래서 예~전부터 해보고 싶었던 Flutter에 드디어 손을 살짝- Android 와 IOS를 둘 다 개발 해볼 수 있다니 두근두근! 인프런에 클론 코딩 하는 강좌가 있어서 입문해보고자 도전 했다. 강좌는 4년 전 꺼라 현재 업데이트 되면서 틀린 부분도 있어서 어렵긴 했다. 개발 환경 세팅 시작 할 때 가장 어렵고 번거로운 환경 세팅~ 하지만 홈페이지에 아주 잘 나와있어서 그대로만 하면 되었다! https://docs.flutter.dev/get-started/install Choose your development platform to get started Install Flutter and get started. Downlo..

SELF STUDY/Flutter 2024.04.22

[Android][Kotlin][Jetpack] 개발 완성 | Figma로 앱 기획해보기 (혼자 앱 개발 #4)

그냥 디자인 한게 너무 맘에 들어서 올려보는 .. 내가 만든 DoneList 전체적인 커버. 개발 디자인 기획하면서 만들었다+_+ Github꾸미려고 만들었는데, 엄청 집중해서 했다.. 참 별거 아니지만 엄청 오래걸렸다. 내 피그마 ~.~ 사실 기능 몰라서 마우스로만 움직이기 +_+ 개발 공부에 집중해야하는데, 항상 이런 디자인같은 겉모습에 신경을 엄청 많이 쓰는듯.. 실제 개발에 더 신경쓰자.. 실제 개발이 끝났고! 실제 완성된 모습은.!! ٩(ˊᗜˋ*)و 헤헤

[Android][Kotlin][Jetpack] 화면 전환 | Activity 전환 (혼자 앱 개발 #2)

8월에 한 내용을 이제야 정리하는 나.. Jetpack Compose 개발을 처음 해봐서 화면 전환 ( Activity 이동) 하는 것 부터 완전 어려웠다. 여러가지 설명을 봐도 이해가 안되서 어려워 하던 중 codelab 을 발견했다! 구글에서 제공해주는 소스로 시도하기 어려운 것에 대해 자세한 설명 + 예시 소스 가 있다. 천천히 따라하다 보면은 이해도 쏙쏙 되고, 바로 내 소스에 적용 할 수 있어서 좋다. 내가 따라한 code lab 은 https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko#6 Jetpack Compose 기초 | Android Developers 이 Codelab에서는 Compose의 기본사항을 알아봅니다. dev..

[Kotlin] 코틀린 언어 특징, 언어 기초

코틀린 완벽 가이드 (길벗) 을 이용해 코틀린 공부하기 1일차 (23/8/8) 오늘은 어제 공부한거 정리하기~ 달달 외우면서 하기 보다는 그냥 읽으면서 익히는 용도로 공부하는 중이다. 모르는 것들만 정리해보겠음! Chapter 1. 강력하고 실용적인 코틀린 △ Kotlin 언어 특징 : 안정성, 간결성, 상호 운용성 - 안정성 : 타입 추론 / Null이 될 수 있는 타입 / 스마트 캐스트 (타입 변환 / 타입 캐스트 오류 방지) - 다중 패러다임 : 코틀린 : 객체 지향 + 함수 형 프로그래밍 지원 + 도메인 특화 언어 (DSL) + 동시성 프로그래밍 (코루틴 지원) * 자바 : 객체 지향 패러다임 * 함수 형 프로그래밍 : 함수를 다른 값(변수)과 동일하게 사용 - 간결성과 표현력 : Getter, ..

SELF STUDY/Kotlin 2023.08.09

[Android][Kotlin][Jetpack] Background color 변경 | Full screen 으로 변경 (혼자 앱 개발 #1)

어제 퇴사로 오늘 백수 1일차 그간 하고 싶었던 공부 드디어 하는 중! 매우매우 행복하다 히히 코틀린 이론 공부도 하면서 같이 작은 프로젝트를 개발해보려고 한다. 바로바로 던리스트 체크 리스트는 숙제 주는 기분이고 완료 못하면 자존감 하락인데..., 완료한 것을 적으면서 자존감도 상승하고 좋을 것 같아서 하하! 오늘의 목표는 첫 번째 화면 완료하기 인데, 가능 할지 모르겠다. 코틀린으로만 개발하려고 했는데, 기본 구성이 Compose Jetpack 로 되어 있어서.. 한 번도 안해봐서 너무너무 어려움 ㅠ_ㅠ 코틀린 공부 하고 그 다음에 Compose Jetpack 공부하려고 했는데, 이렇게 된거 한 번에 익히는 수 밖에...ㅎㅎ 그래도 최선을 다해 해보겠어!! Layout 일단 이 번에 Figma도 처음..

[디자인패턴] 템플릿 메소드 패턴 | Template Method Pattern | 안드로이드 예제

지난 게시글에서 퍼사드 패턴을 출근 준비로 표현했던 것 처럼..! 이번 템플릿 메소드 패턴도 동일하게 정리를 해봐야겠다.! 출근 준비에 대한 것을 큰 카테고리? 로 보면 알람 -> 씻기 -> 옷입기 -> 이동수단 으로 볼 수 있다. A와 B의 준비 단계를 보자! A : 알람 -> 씻기 -> 옷입기 (원피스) -> 이동수단 (자동차) B : 알람 -> 씻기 -> 옷입기 (파란티) -> 이동수단 (버스) 이다.! 여기서 A,B가 다르지 않고 동일한 과정은 빨간색으로, 다른 과정은 파란색으로 표시를 해보았다. 이를 코드로 표현을 해보자.! "A" 의 준비 과정 class ReadyToWorkA { public void start(TextView tv) { alarm(tv); wash(tv); clothes(t..

[디자인패턴] 퍼사드 패턴 | Facade Pattern | 안드로이드 예제

오랜만에 또 디자인패턴.! 오늘은 퍼사드 패턴을 해보려고 한다. 먼저, 위의 펭수처럼 출근을 하려면 필요한 단계가 있다. 나의 경우에는 알람으로 기상 -> 씻기 -> 옷입기 -> 전철을 타서 출근을 하는 단계를 거친다. 각 단계를 코드로 보면.. "알람" - 알람을 듣고 일어나거나.. 그냥 꺼버리는 경우.. ㅠ class Alarm { public void Wake(TextView tv){ tv.setText( (String) tv.getText() + "\nwake!" ); } public void OFF(TextView tv){ tv.setText( (String) tv.getText() + "\nalarm off!" ); } } "씻기" - 씻고 가거나 그냥 안씻고 가는 경우.. class Wash..

728x90
반응형