728x90

Front-End 19

[React] Splash, Onboarding 구현

[React] Splash, Onboarding 구현 나는 분명 백엔드 직무를 희망하지만, 프런트엔드도 함께 공부하는 겸 어쩌다 보니 프로젝트에서 풀스택으로 개발 중이다.리액트를 공부한 지 1달(?) 정도 지났는데 데이터 전달 방식도 생소하고, 컴포넌트 배치도 어렵지만, 백엔드에서 보낸 api를 프런트엔드에서 전달받아 어떻게 활용하는지 직접 구현해 보니까 나름 웹 프로그래밍 공부가 되는 것 같다. 프로젝트가 멋져 보이기 위해 실제 앱을 구동하는 것처럼 스플래시와 온보딩도 추가했다.하지만 리액트 왕초보인 나는 이미 정해진 프레임에서 스플래시를 내가 생각한 방식대로 구현할 수 없었다.  [문제상황]import React from "react";import "./App.css";import { Route, R..

Front-End/React.js 2024.06.21

[Kotlin] 액티비티 생명주기

[Kotlin] 액티비티 생명주기 프래그먼트가 액티비티처럼 동작하지만, 액티비티는 아니다.AndroidManifest.xml를 살펴보고 여러 개의 액티비티를 사용해 보자. 인텐트 : 컴포넌트를 실행하려고 시스템에 전달하는 메시지, 어떤 액티비티를 실행할 건지 결정함안드로이드의 컴포넌트 클래스라면 개발자가 코드에서 직접 생성해서 실행할 수 없습니다.시스템에서 인텐트의 정보를 분석해서 그에 맞는 컴포넌트를 실행해 줍니다.외부 앱의 컴포넌트와 연동할 때도 마찬가지입니다.  startActivity() 함수가 인텐트를 시스템에 전달Intent 생성자의 매개변수는 클래스 타입 래퍼런스 정보를 가진다.액티비티를 추가하면 manifest에 액티비티가 자동으로 등록된다. - MainActivity와 DetailActi..

Front-End/Kotlin 2024.04.27

[Kotlin] Material 라이브러리, 플로팅 버튼, Tab 레이아웃, 뷰페이저

[Kotlin] Material 라이브러리, 플로팅 버튼, Tab 레이아웃, 뷰페이저 이전에 사용되었던 viewpager와 별개로 2019년에 viewpager2를 제공하였다.항목이 순서대로 나열되어 있는데 한 화면에 항목 하나가 나오는 것을 viewpager2를 사용해 구현한다. 어댑터 : 여러 프래그먼트가 포함된 뷰를 제어할 수 있는 것으로 각 항목을 만들어 주는 역할을 한다.프래그먼트 어댑터 이용 : 프래그먼트로 작성했으면 FragmentStateAdapter로 뷰 페이저2를 구현 한다.class MyFragmentPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity){ val fragments: List init{ ..

Front-End/Kotlin 2024.04.26

[Kotlin] Viewpager2, Recycler View, Layout Manager

[Kotlin] Viewpager2, Recycler View, Layout Manager  오랫동안 이용했던 viewpager와 별개로 2019년에 viewpager2를 제공하였다.항목이 순서대로 나열되어 있는데 한 화면에 항목 하나가 나온다는 개념이다.  어댑터 : 여러 프래그먼트가 포함된 뷰를 제어할 수 있는 것으로 각 항목을 만들어 주는 역할을 한다.프래그먼트 어댑터 이용 : 프래그먼트로 작성했으면 FragmentStateAdapter로 뷰 페이저 2를 구현 한다.class MyFragmentPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity){ val fragments: List init{ fragmen..

Front-End/Kotlin 2024.04.25

[Kotlin] Action View 돋보기, 드로어, 토글, Fragment

[Kotlin] Action View 돋보기, 드로어, 토글, Fragment 뷰를 가지고 있다는 것은 코틀린 쪽에서도 제어가 가능하다는 것입니다. 액션 뷰는 액션바에서 특별한 기능을 제공하며, 대표적으로 androidx.appcompat.widget.SearchView가 있습니다. 서치 뷰 검색 기능 구현은 SearchView를 등록한 MenuItem 객체를 얻고 MenuItem 객체에 등록된 SearchView 객체를 구하면 된다. overrid fun onCreateOptionsMenu(menu: Menu): Boolean{ val inflater = menuInflater inflater.inflate(R.menu.menu_main, menu) val menuItem = menu?.findItem..

Front-End/Kotlin 2024.04.24

[Kotlin] 제트팩 라이브러리, Action Bar 메뉴

[Kotlin] 제트팩 라이브러리, Action Bar 메뉴 사용자가 자주 사용할만한 기능들을 별도로 묶어 제공해 주는 라이브러리이다. 제트팩은 구글에서 안드로이드 앱 개발용으로 제공하는 다양한 라이브러리 모음 androidx로 시작하는 패키지명을 사용 앱을 개발하는데 필요한 권장 아키텍처를 제공한다. API 레벨의 호환성 문제를 해결합니다. 플랫폼 API에서 제공하지 않는 다양한 기능을 제공합니다. 화면 구성과 관련된 라이브러리 androidx.appcompat : 앱의 API 레벨 호환성을 해결합니다. androidx.recyclerview : 목록 화면을 구성합니다. androidx.viewpager2 : 스와이프로 넘기는 화..

Front-End/Kotlin 2024.04.23

[Kotlin] Dialog

[Kotlin] Dialog 토스트는 화면 아래쪽에 잠깐 보였다가 사라지는 문자열이다. 토스트는 Toast의 makeText() 함수로 만듭니다. open static fun makeText(context: Context!, text:CharSequence!, duration: Int): Toast! 세번째 매개변수는 토스ㅌ가 화면에 출력되는 시간을 뜻한다. val LENGTH_LONG: Int val LENGTH_SHORT: Int 토스트 출력 예 val toast = Toast.makeText(this, "종료하려면 한번 더 누르세요", Toast.LENGTH_SHORT) toast.show() 날짜를 입력받을 때는 DatePickerDialog를, 시간을 입력받을 때..

Front-End/Kotlin 2024.04.22

[Kotlin] View Binding과 Event

[Kotlin] View Binding과 Event 뷰 바인딩은 레이아웃 XML 파일에 선언한 뷰 객체를 코드에서 쉽게 이용하는 방법이다. 액티비티에서 findViewById() 함수를 이용하지 않고 레이아웃 XML 파일에 등록된 뷰 객체를 쉽게 사용할 수 있는 방법을 제공한다. 레이아웃 XML 파일에 등록된 뷰 객체를 포함하는 클래스가 자동으로 만들어집니다. - build.gradle에 뷰 바인딩 설정 android{ viewBinding{ enable = true }} 자동으로 만들어지는 클래스의 이름은 레이아웃 XML 파일명을 따릅니다. 글자를 대문자로 하고 밑줄(_)은 빼고 뒤에 오는 단어를 대문자로 만든 후 'Binding'을 추가한다. activity_main.xml -> A..

Front-End/Kotlin 2024.04.21

[Kotlin] Resourse의 종류와 특징

[Kotlin] Resourse의 종류와 특징 리소스 디렉터리명은 고정, 리소스 파일명은 values에 추가하는 파일을 제외하고는 모두 자바의 이름 작성 규칙 준수한다. 알파벳 대문자를 사용할 수 없다. 레이아웃 리소스 - layout 디렉터리 이미지 리소스 - drawable 디렉터리 (PNG,JPG,DIF, 9.PNG XML 파일) 실행 아이콘 리소스 - mipmap 디렉터리 값 리소스 - values 디렉터리 문자열, 색상, 크기, 스타일 배열 등의 값을 XML로 저장 values 디렉터리의 리소스 파일은 파일명이 R인 파일에 식별자로 등록되지 않고 리소스 파일에 값을 지정한 태그의 name 속성값이 등록, 스타일 리소스는 style 태그로 등록 스타일 속성은 뷰에 설정되..

Front-End/Kotlin 2024.04.20

[Kotlin] RelativeLayout, FrameLayout, ConstraintLayout

[Kotlin] RelativeLayout, FrameLayout, ConstraintLayout 순서대로 배치하지 않고 개발자가 원하는 위치대로 배치하는 것 상대 뷰의 위치를 기준으로 정렬하는 레이아웃이다. 상대 뷰의 어느 쪽에 맞춰서 정렬할지를 정하는 속성 - android:layout_above : 기준 뷰의 위쪽에 배치 - android:layout_below : 기준 뷰의 아래쪽에 배치 - android:layout_toLeftOf : 기준 뷰의 왼쪽에 배치 - android:layout_toRightOf : 기준 뷰의 오른쪽에 배치 상위 레이아웃을 기준으로 맞춤 정렬하는 속성 - android:layout_alignParentTop : 부모의 위쪽에 맞춤 - android:layout_alig..

Front-End/Kotlin 2024.04.19
728x90