[Kotlin] 안드로이드 스튜디오 프론트엔드가 백엔드와 API 통신하는 법(로그인 구현)
·
개발새발개발/Kotlin
백엔드 API 통신하는 법1. API 인터페이스 정의com.example.appname경로에 network 패키지 생성 후 TestApi.kt 파일 생성Request와 Respose 타입 지정, API  메서드( POST/GET  등)지정큰 흐름을 볼 수 있게, request는 없고 respose는 json으로 온다고 가정했고, json일 경우 타입은 Object로 작성해야한다 (String으로 했더니 에러가 발생했다)package com.example.picktimeapp.networkimport retrofit2.http.GETinterface TestApi { @GET("test") suspend fun test(): Object}  2. Retrofit 인스턴스 제공com.example..
[Kotlin] 안드로이드 전역 폰트, 사이즈, 굵기 설정하기 Typography 설정
·
개발새발개발/Kotlin
Typography 설정1. 폰트 파일 추가res/font 폴더에 파일 추가소문자와 언더바(_)만 사용 가능app/ └ res/ └ font/ └ hakgyoansimalrimche.ttf  2. Font.kt 생성경로 : app/src/main/java/com/example/picktimeapp/ui/theme/Font.ktpackage com.example.picktimeapp.ui.themeimport androidx.compose.ui.text.font.Fontimport androidx.compose.ui.text.font.FontFamilyimport androidx.compose.ui.text.font.FontWeightimport com.example.picktimeapp...
[Kotlin] 안드로이드 스튜디오 배경색, 기본 컬러 지정하는 법
·
개발새발개발/Kotlin
앞 게시물에 이어서 전체 배경 기본 컬러 지정하는 법!Jetpack Compose로 사용하고 있기 때문에, 앞 게시물에 적어둔 Color.kt 를 기본으로 하여 지정했다 Theme.ktbackground 색을 DarkGreen10으로 설정하면 이후 MaterialTheme.colorScheme.background에서 자동으로 불러옴surface도 추가하면 기본 배경 색도 일치하게 됨private val LightColorScheme = lightColorScheme( background = DarkGreen10, surface = DarkGreen10 )  MainActivity.ktSurface는 Material Design 구조에서 배경을 적용해주는 역할앱 루트에 한 번만 설정하면 모든 화..
[Kotlin] 안드로이드 스튜디오 기본 컬러 정의하는 법(기본, Jetpack)
·
개발새발개발/Kotlin
안드로이드 스튜디오 기본컬러 정의하는 법res/values/colors.xml #D9F0DC #ADD5A3 #72C865 #F9D952 #F0B53F #FDFFF2 #EEF1D9 #252525 #66656C #9999A1 #E6E6E8 #F4F4F6 #E0CDA8 #A57145 #722717 #350D0A  컬러 사용하는 법XML Kotlinval color = ContextCompat.getColor(context, R.color.green_90)textView.setTextColor(color)   Jetpack ComposeColor.kt Jetpack Compose 스타일에서 ..
[Kotlin] 안드로이드 스튜디오 프로젝트 기본 구조 이해하기
·
개발새발개발/Kotlin
안드로이드 프로젝트 기본 구조 이해하기이후에 앱을 만들 때 어떤 파일을 수정해야 하는지 알기 위해선 안드로이드 프로젝트 기본 구조를 이해하는게 필요하다  안드로이드 프로젝트 폴더 구조1. manifests (AndroidManifest.xml)  앱의 설정 정보가 들어 있는 파일예를 들어, 앱의 이름, 아이콘, 권한, 실행 액티비티(Activity) 설정이 포함     위 코드에서 ` `부분이 앱이 실행될 때 처음 실행되는 화면을 지정하는 코드intent-filter 부분이 있어서, 앱 아이콘을 클릭하면 MainActivity가 ..
[Kotlin] 안드로이드 앱의 구조 및 동작 원리, 자바가 아닌 코틀린을 사용하는이유
·
개발새발개발/Kotlin
강의를 들으며 안드로이드 앱 개발 공부를하다가, 강의가 너무 오래되어 현재와 많은 부분이 다른 것을 확인했다.그렇다고 최신 강의들을 듣기엔 아쉬운 리뷰가 많아 수강이 망설여졌다.   그래서 유튜브에서 최신 강의를 찾다가 8개월 전에 업로드 된 강의를 듣게됐다.하지만, 그것도 코드 따라적기식의 강의라서 개념 설명이 부족함을 느꼈다.  그래서 개념과 전체적인 틀을 먼저 이해하는게 필요하다고 생각되어 공식문서와 GPT를 참고하여 블로그 정리를 시작한다 :)   안드로이드 앱의 구조 및 동작 원리 안드로이드 앱의 구조 안드로이드 앱은 크게 4가지 주요 컴포넌트로 구성되어있다 ① 액티비티 (Activity)앱의 화면(UI) 을 담당하는 요소예를 들어, 로그인 화면, 메인 화면, 설정 화면 등은 각각 다른 Acti..
[Kotlin] 안드로이드 스튜디오에서 Toast와 시스템바 고려해서 화면 확장하는 방법
·
개발새발개발/Kotlin
ToastToast.makeText(context, "메시지 내용", Toast.LENGTH_SHORT).show()context: 현재 Activity 또는 Application의 컨텍스트(앱 환경 정보)"메시지 내용": 화면에 표시할 문자열Toast.LENGTH_SHORT 또는 Toast.LENGTH_LONG: 토스트 메시지 지속 시간LENGTH_SHORT: 약 2초간 표시LENGTH_LONG: 약 3.5~5초간 표시.show(): 토스트 메시지를 화면에 표시 Toast 커스텀 하기 (배경색, 위치 변경)1. Toast 위치 변경기본적으로 Toast는 화면 아래쪽에 뜨지만, 위치를 변경할 수도 있다.val toast = Toast.makeText(this, "화면 중앙에 표시", Toast.LENGT..
[Kotlin] 안드로이드 스튜디오 - ViewBinding을 활용한 스톱워치 앱만들기
·
개발새발개발/Kotlin
Kotlin과 ViewBinding으로 스톱워치 앱 만들기Android에서 Chronometer를 사용하여 초 단위 스톱워치를 구현!ViewBinding을 활용해 XML에 정의된 UI 요소를 코드에서 쉽게 접근할 수 있도록 하고, Toast를 사용해 사용자에게 안내 메시지를 띄울 수도 있다.  1. 프로젝트 설정 - ViewBinding 활성화 뷰 바인딩을 사용하면 findViewById 없이도 XML에 정의된 UI 요소를 바로 접근할 수 있다. build.gradle.kts 설정모듈의 build.gradle.kts 파일에 다음 코드를 추가한 후 Sync Now를 클릭하면 된다.android { buildFeatures { viewBinding = true } compileO..
[Kotlin] Kotlin 설치 및 개발 환경 구축하기(기본 셋팅)
·
개발새발개발/Kotlin
Kotlin풀스택 웹 개발, Android와 iOS 앱, 임베디드, IoT 등 모든 개발을 다양한 플랫폼에서 개발할 수 있도록 하는 것  사용 가능한 플랫폼Kotlin/JVM : 자바 가상 머신 상에서 동작하는 앱을 만들 수 있음Kotlin/JS : 자바스크립트에 의해 브라우저에서 동작하는 앱을 만들 수 있음Kotlin/Native : LLVM 기반의 네이티브 컴파일을 지원해 여러 타깃의 앱을 만들 수 있음 코틀린의 장점컴파일과정에서 오류 검출널 포인터로 인한 프로그램의 중단을 예방할 수 있음( = NPE(Null Pointer Exception)에서 자유롭다)함수형 프로그래밍과 객체 지향 프로그래밍이 모두 가능세미콜론을 생략할 수 있음아주 간결하고 효율적 JDK코틀린을 JVM에서 실행하기 위해 설치기존..
[React] useReducer 사용하기
·
개발새발개발/React
useReducer컴포넌트 내부에 새로운 State를 생성하는 React Hook모든 useState는 useReducer로 대체 가능useState는 state를 관리하는 코드를 컴포넌트 내부에만 작성 가능하지만, useReducer를 사용하면 state를 관리하는 코드를 컴포넌트 외부에 작성할 수 있어 코드의 가독성을 높일 수 있다  사용하기import { act, useReducer } from 'react';const reducer = (state, action) => { if (action.type === 'INCREASE') { return state + action.data; } else if (action.type === 'DECREASE') { return s..
[React] 최적화하기 (Optimization) - useMemo, memo, useCallback
·
개발새발개발/React
최적화(Optimization) 적용1. 시기 : 하나의 프로젝트를 거의 완성한 상태에서 시행기능 구현 → 최적화최적화를 먼저 하면 기능 수정할 때 최적화가 풀리거나 꼬여서 작동을 안할 수도 있음 2. 적용 대상 : 꼭 최적화가 필요한 것에만 시행최적화도 마찬가지로 연산이 필요하기 때문에, 단순한 연산일 경우 그냥 리렌더링 되도록 두는게 더 빠를 수도 있음TodoItem을 생성하는 것과 같이 유저의 행동에 따라 개수가 많아질 수 있는 컴포넌트혹은 함수들을 많이 가지고 있어 무거운 코드의 경우 적용하는 게 좋음   useMemo"메모이제이션" 기법을 기반으로 불필요한 연산을 최적화하는 리액트 훅반복되는 내용을 저장해뒀다가 필요할 때 꺼내 쓰는 느낌useMemo를 사용하면 연산 자체를 메모이제이션 할 수 있..
[React] Context 사용해서 props 없이 편하게 데이터 전달하기
·
개발새발개발/React
Context컴포넌트간의 데이터를 전달하는 또 다른 방법기존의 Props가 가지고 있던 단점(Props drilling)을 해결굳이 부모컴포넌트에서 깊이 있는 자식 컴포넌트까지 갈 필요 없이 바로 가져다 사용 가능(Store와 비슷)  사용해보기 1. import createContext import { createContext } from 'react';  2. Context 생성해서 exportexport const TodoContext = createContext();  3. 사용할 자식 컴포넌트 감싸기 return ( );value에 넘겨줄 값 담기(여러개일 경우 객체로 주기)   4. context에서 값 가져오기i..