We are Creators

Android 인터넷에서 데이터 가져오기 Codelab 정리

Heechan Park — Wed, 13 Dec 2023 17:06:26 +0900

이 글은 Google Codelab 인터넷에서 데이터 가져오기를
학습하고 정리한 글 입니다.

최근 레트로핏을 사용한지 오래 됐고 문법이 기억나지 않아서
Google Codelab에서 레트로핏을 공부했다. 해당 코드랩

이 글은 공부한 내용을 정리한 글이다.

예제 앱 보기

이 앱은 화성 표면의 이미지르 받아와서 보여주는 앱니다.!

이 앱은 이 프로젝트의 starter 브랜치를 학습하면 된다.

Retrofit 의존성 추가하기

외부 라이브러리를 프로젝트에 추가하기 위해서는 라이브러리가 호스팅 되는,
즉 라이브러리를 받아오는 저장소를 추가해줘야 한다.

build.gradle(Project)에 repositories에 다음과 같은 코드를 추가해준다.

repositories {
   google()
   jcenter()
}

각각 google과 JCenter라는 커뮤니티에서 라이브러리를 받아오는 것이다.

라이브러리를 가져오기 위해서 build.gradle(app)에 dependencies 섹션에 다음과 같은 코드를 추가해준다.

// Retrofit
implementation "com.squareup.retrofit2:retrofit:2.9.0"
// Retrofit with Moshi Converter
implementation "com.squareup.retrofit2:converter-scalars:2.9.0"

Sync Now를 눌러준뒤 적용한다.

Retrofit2와 같이 타사의 라이브러리는 Java8 기능을 사용한다.
Android Gradle에는 Java8 기능이 내장되어 있고 이 기능을 사용하기 위해서는 build.gradle(Project)에 다음 코드가 있어야 한다.

android {
  ...

  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }

  kotlinOptions {
    jvmTarget = '1.8'
  }
}

Retrofit 서비스 만들기

우선 기본적으로 API를 요청할 주소를 상수로 저장해둔다.

private const val BASE_URL = "https://android-kotlin-fun-mars-server.appspot.com"

이 주소를 변수로 저장하지 않고 하드코딩해서 사용해도 된다.
하드코딩을 한다면 보안상으로 좋지 않을뿐 아니라 나중에 주소가 변경된다면 하나씩 수정해야한다는 불편함이 있다.

그 다음 Retrofit의 기능이 담겨져있는 객체를 만들어 준다.

private val retrofit = Retrofit.Builder()

네트워크에서 받아온 값을 String으로 변경해주는 팩토리가 있어야 한다.
팩토리는 네트워크에서 얻은 데이터로 해야할 일을 알려주는 역할을 한다.
String으로 변경하기 위햐서는 ScalarsConverterFactory를 사용해준다.

addConverteFactory()함수를 사용해서 팩토리를 가져와준다.

private val retrofit = Retrofit.Builder()
    .addConverterFactory(ScalarsConverterFactory.create())

이 레드토핏 서비스가 어떤 웹 서비스에 접근해서 데이터를 가져올 것인지를 명시하기 위해서
baseUrl() 함수를 사용해서 기본 URL을 추가해준다.
아까 상수로 저장한 BASE_URL을 사용한다.

private val retrofit = Retrofit.Builder()
   .addConverterFactory(ScalarsConverterFactory.create())
   .baseUrl(BASE_URL)
   .build()

Retrofit이 웹 서버와 통신하는 방법을 정의해줘야 한다.
이말은 BASE_URL의 어떤 경로에 접속할지를 정의하는 것이다.

인터페이스를 만들고 함수를 만들어 준다.

interface MarsApiService {

}

이 인터페이스에 함수를 만들어주고 해당 함수가
어떤 방법으로 어떤 경로에 접속하는 것인지를 정의한다.

네트워크 통신을 하면 시간이 딜레이 되기 때문에 suspend 함수로 만들어준다.

interface MarsApiService {
    @GET(name = "photos")
    suspend fun getPhotos() : String
}

getPhotos() 함수를 GET방식의 photos으로 지정했다.

base url이 https://android-kotlin-fun-mars-server.appspot.com이니
getPhotos() 함수를 호출하면 GET 방식으로 https://android-kotlin-fun-mars-server.appspot.com/photos 경로로 요청을 보내게 된다.

반환값으로 String을 넣어 줬는데 위에서 ScalarsConverterFactory를 사용해서
네트워크 요청 결과를 String으로 만들어 줬기 때문에 이 결과가 반환된다.

Retrofit 객체 만들기

싱글톤 패턴으로 객체 하나를 만들어주기 위해서 object를 만들어 준다.

object MarsApi {
    val retrofitService : MarsApiService by lazy {
       retrofit.create(MarsApiService::class.java)
    }
}

이 object에는 retrofitService 변수가 있고 이 변수를 호출하면 늦은 초기화로
위에서 만들어준 retrofit 객체에 create() 함수를 사용해서 만들어준다.
이때 통신하는 법을 정의해준 인터페이스를 같이 넣어주게 된다.

만들어준 Retrofit을 ViewModel에서 호출하기

지금까지는 Retrofit을 사용하기 위해서 사전 세팅을 해줬다면 이제는
ViewModel에서 Retrofit을 호출해서 사용해준다.

viewModel에 데이터를 불러오는 함수를 만들고 ViewModelScope를 열어준다.

private fun getMarsPhotos() {
    viewModelScope.launch {

    }
}

이 ViewModelScope안에서 Retrofit 서비스의 getPhotos() 함수를 사용해준다.

private fun getMarsPhotos() {
    viewModelScope.launch {
        val listResult = MarsApi.retrofitService.getPhotos()
    }
}

이 코드의 결과로 listResult가 이 링크로 요청한 결과가 String으로 들어오게 된다.

에러및 예외 처리

앱을 실행하면 다음과 같은 에러가 발생한다.

    --------- beginning of crash
22803-22865/com.example.android.marsphotos E/AndroidRuntime: FATAL EXCEPTION: OkHttp Dispatcher
    Process: com.example.android.marsphotos, PID: 22803
    java.lang.SecurityException: Permission denied (missing INTERNET permission?)

이 에러는 앱에 인터넷 권한을 허용하지 않아서 발생하는 에러이다.

manifest에서 다음 코드를 추가해줘서 인터넷 권한을 추가해준다.

<uses-permission android:name="android.permission.INTERNET"/>

이 권한을 추가하고 다시 빌드하면 다음과 같이 결과가 잘 나온다.

하지만 인터넷이 꺼져 있는 상황에서 앱을 실행하면 다음과 같은 에러가 발생해서 앱이 꺼진다.

3302-3302/com.example.android.marsphotos E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.android.marsphotos, PID: 3302
    java.net.SocketTimeoutException: timeout

이런 경우를 위해서 예외처리를 사용한다.
ViewModel에서 try-catch 문을 사용해서 네트워크 요청을 보낸다.

viewModelScope.launch {
   try {
       val listResult = MarsApi.retrofitService.getPhotos()
       _status.value = listResult
   } catch (e: Exception) {
        _status.value = "Failure: ${e.message}"
   }

인터넷이 꺼져 있는 등 네트워크 통신을 할수 없는 상황이라면 앱이 거지는게 아니라
다음과 같은 결과가 나온다.

네트워크 요청 결과를 객체로 만들기

현재 코드의 문제점은 요청 결과 Json을 String으로 변환해서 사용하는 것이다.

String으로 변환하면 데이터를 사용할 수 없으니
Moshi를 사용해서 Json으로 객체로 만들어서 사용한다.

build.gradle(app)에 다음 코드를 추가한다.

// Moshi
implementation 'com.squareup.moshi:moshi-kotlin:1.9.3'

위에서 추가한 레드로핏을 Moshi와 호환되는 라이브러리로 변경해준다.

// Retrofit
implementation "com.squareup.retrofit2:retrofit:2.9.0"
// Retrofit with Moshi Converter
implementation "com.squareup.retrofit2:converter-scalars:2.9.0"

이 코드를 삭제하고

// Retrofit with Moshi Converter
implementation 'com.squareup.retrofit2:converter-moshi:2.9.0'

이 코드로 변경한다.

현재 Json은 다음과 같은 형식을 가지고 있다.

[
  {
    "id": "424905",
    "img_src": "https://mars.jpl.nasa.gov/msl-raw-images/msss/01000/mcam/1000MR0044631300503690E01_DXXX.jpg"
  },
  {
    "id": "424906",
    "img_src": "https://mars.jpl.nasa.gov/msl-raw-images/msss/01000/mcam/1000ML0044631300305227E03_DXXX.jpg"
  },
]

Json객체가 id와 img_src의 키로 규칙적으로 반복되고
이 객체들이 Json List에 담겨있다.

Json객체를 Kotlin의 data class로 만들어 준다.
그리고 Moshi를 사용해서 자동으로 변환해준다.

data class MarsPhoto(
   val id: String,
   val img_src: String
)

Json의 id와 img_src의 값이 클래스 맴버 변수의 id와 img_src에 들어가서 객체가 만들어진다.

Kotlin애서는 변수명을 카멜 케이스로 작성한다.
Json 객체의 key값은 img_src이지만 맴버 변수명을 imgSrc로
사용하고 싶다면 Json 어노테이션을 사용한다.

data class MarsPhoto(
   val id: String,
   @Json(name = "img_src")
   val imgSrcUrl: String
)

현재는 retrofit을 만들 때 팩토리로 ScalarsConverterFactory를 사용하지만 Moshi를 사용하도록 변경해준다.

우선 moshi 객체를 만들어 준다.

private val moshi = Moshi.Builder()
    .add(KotlinJsonAdapterFactory())
    .build()

retforit을 만들때 addConverterFactory 함수를 변경해준다.

private val retrofit = Retrofit.Builder()
   .addConverterFactory(MoshiConverterFactory.create(moshi))
   .baseUrl(BASE_URL)
   .build()

retrofit의 결과가 변경됐으니까 MarsApiService 인터페이스의 getPhotos() 함수의 반환값도 변경해준다.

interface MarsApiService {
    @GET("photos")
    suspend fun getPhotos() : List<MarsPhoto>
}

이제 viewModel에서 호출한 결과로 String이 아닌 데이터 리스트가 들어가게 된다.

val listResult : List<MarsPhoto> = MarsApi.retrofitService.getPhotos()

2022년 EDCAN을 마치며 - 학과 발표회 발표 정리

Heechan Park — Wed, 13 Dec 2023 17:05:48 +0900

이 글은 2022 선린 소프트웨어과 학교 발표회에서 발표한
동아리 발표 - EDCAN 입니다.

2022년 12월 27일 학교에서 학과 발표회를 진행하였다.
나는 이번 학과 발표회에서 동아리 발표로 우리 EDCAN 발표를 맡았다.

이 글은 발표 내용을 정리한 글이다.

발표 내용

올해 2022년은 정말 많은 변화가 있던 한해였습니다.
절대 끝나지 않을것 같았던 코로나 팬데믹이 끝을 보이고,
학교 행사들도 온라인에서 점차 오프라인으로 돌아왔죠

이런 많은 변화 속에서 저희 EDCAN이 어떤 활동을 했고,
어떤 성과를 거두었으며 어떤 시행착오를 했는지,
오늘 이 자리에서 여러분들께 발표하겠습니다.

2022년의 EDCAN을 마치며 발표를 시작하겠습니다.

!youtube[jdnadhdfqy8]

올해 EDCAN은 18명의 부원과 함께 했습니다.
이중 개발자 유닛인 아틀리에 부원이 12명,
디자이너 유닛인 픽셀 부원이 6명이었고

1학년 부원이 11명 2학년 부원이 7명으로 구성되었습니다.

이 18명 모두 EDCAN의 크리에이터로서 많은 활동을 해주었고,
함께 진행한 동아리 행사, 프로젝트들 모두 성공적으로 마쳤습니다.

부부장으로서 동아리를 이끈 저는 물론
함께 한 17명의 부원 모두 이 경험들이
소중한 추억과 뜻깊은 경험이 되었습니다.

올 한해 EDCAN에서는 30여개의 작품을 창작하였습니다.
개발자, 디자이너가 아닌 EDCAN의 크리에이터로서

각자의 분야에 상관 없이
각자의 학과에 상관 없이 모두 다양한 작품을 창작을 해주었습니다.

이 많은 작품 중에서 대회에서 입상한 우수한 작품들을 소개하겠습니다.
부원 모두가 창작자로서 분야에 상관 없이 다양한 대회에 나가서 수상했는데요.

화면에 나와있는 9개의 수이과 더불어
어제 발표가 나왔던 <디지털 콘텐츠 경진대회>에서도 금상과 동상을 수상하며
올해 EDCAN은 총 11개의 수상 실적을 거뒀습니다.

특히 이번 <선린 해커톤>에서는 1학년 중에서는 유일하게 저희 부원들이 수상하면서
EDCAN의 밝은 미래를 보여주었습니다.

여기에 더불어서 작년 한해동안 EDCAN의 기둥이 되어주신 3학년 선배님들 역시
<선린 해커톤>과 교외 대회인 <메타버스 경진대회>에서 대상을 수상하시는등
EDCAN을 빛내주셨습니다.

이렇게 많은 수상실적이 있던 반면
많은 변화속에서 동아리 운영은 순탄하지 못했는데요.

코로나로 인한 선배님들과의 단절, 동아리 정체성 이슈등
올 2022년은 조금은 아쉬운 한해가 아니었나 생각됩니다.

그러면 아쉬운 2022년은 마무리하고
새로운 2023년을 시작해보겠습니다.

이번 2023년은 EDCAN에게는 정말 뜻깊은 한해인데요.
이번에 들어오는 신입생들은 10기로 EDCAN이 10주년이 되는 해입니다.

이런 10주년을 맞아서 저희는 새로운 것들을 준비했습니다.

처음으로는 커리큘럼을 새롭게 정비했는데요.

기존에 있는지도 모르게 지난간 웹 수업을 빼고,
안드로이드를 조금더 자세히, Jetpack Compose까지 준비하였습니다.

그렇다고 EDCAN이 안드로이드만 하는것인가
이건 아닙니다.
만약 부원중에 웹이나 게임을 공부하고 싶은 부원이 있다면
방학중에 선배에게 질문을 하면서 스스로 공부하면 됩니다.

저희는 커리큘럼을 만들때 3가지 원칙을 중심으로 준비했습니다.

첫째, 기초부터 확실하게
둘째, 팀 프로젝트를 중심으로
셋째, 심화까지 완벽하게

이런 원칙으로 다음과 같은 커리큘럼을 준비해보았습니다.

이중에서 중요한 점은 팀 프로젝트 기초 수업인데요.
이 수업에서는 팀 프로젝트를 하기 위한 준비 과정으로
프로젝트 기획, 설계, 헙업 기술 등을 배우게됩니다.

특히 디자이너도 안드로이드에서 UI를 만드는 언어인 XML을 공부하고,
개발자도 디자인 툴인 Figma를 공부하게됩니다.

이 과정에서 협업을 준비한 다음 방학 프로젝트나 중강중간 작은 팀 프로젝트를 진행하게됩니다.

또 10주년을 맞아서
새로운 로고,
새로운 컬러,
새로운 아이덴티티 등 새로운 디자인 시스템을 제작하고 있습니다.

현재에는 제작중이며 신입생들이 들어오는 3월달에 공개 할 예정입니다.

이번에 보자 자세한 소통을 위해서 블로그를 개설했는데요.
아래 주소가 있으니 한번씩 방문해서 작성된 글을 읽어주세요.

오늘 이 자리에서 여러분들께 처음 발표하겠습니다.
저희 EDCAN은 2023년, 한국 디지털 미디어 고등학교의
전공 동아리 LUNA와 협동 수업을 계획하고 있습니다.

이는 양 학교간의 공식적인 첫 동아리 협동수업이며
이 기회는 저희 EDCAN 부원뿐만 아니라 선린고, 디미고 학생 모두에게 좋은 기회가 될것입니다.

마지막으로 EDCAN의 2번째 뜻으로 발표를 마치겠습니다.
for Era of Digital Content And Next
디지털 콘텐츠 시대와 다음 시대를 위하여

저의 2023년, EDCAN의 새로운 모습을 기대해주세요.

발표를 들어주셔서 감사합니다.

후기

나는 이날 약 150명 정도의 사람 앞에서 발표를 했다.
이렇게 많은 사람 앞에서 발표하는 건 처음이고
만약에 내가 발표를 실수하면 EDCAN을 망신 시키는 것이라고 생각되니까
엄청 긴장했고 발표 연습도 정말 많이 했던거 같다.

덕분에 발표는 정말 성공적이었다.

이렇게 많은 사람앞에서 발표하는걸 다음에 또 할 수 있을것 같다.

명함을 만들었다

Heechan Park — Wed, 13 Dec 2023 17:05:21 +0900

이 글은 명함 만든걸 자랑(?) 하는 글입니다.

최근 동아리에서 행사 예산이 조금 남아서 부원들과 함께 명함을 만들었다.

작년에도 만들었지만 작년에는 너무 조금 만든것 같고 또 EDCAN의 느낌이 아니라
개발자 유닛은 ATELIER의 명함인 느낌이라
이번에 후배들도 명함을 만들어 줄겸 명함을 제작했다.

디자인은 우리 EDCAN 픽셀장 친구가 해줬다.
디자인을 처음 봤을 때 너무 예뻐서 놀랐다. 내가 생각한 EDCAN 스러움이 정말 잘 드러나는 것 같다.

추석에 친척들께도 내 명함을 드리니 감탄하셨고, 정말 잘 만들었다고 해주셨다.
~~용돈은 덤이었다.~~

[프로젝트] 트위치 한국 철수 디데이 웹사이트 개발기

Heechan Park — Wed, 13 Dec 2023 17:01:47 +0900

> 이 글은 트위치 한국 철수 디데이 웹사이트를 개발하면서 배운점을 정리하는 글 입니다.

# 3줄 요약 + 사용해보기
1. 트위치가 한국에서 철수한다
2. 한국 철수까지 남은 시간을 보여주는 웹을 개발했다.
3. 사용해보고 싶다면 [twitch.kichan.dev](https://twitch.kichan.dev/)에서 봐주세요

- 소스 코드는 [github.com/kichan05/Goodbye-Twitch](https://github.com/kichan05/Goodbye-Twitch)을 봐주세요

# 트위치가 섭종한다...
아침에 자고 일어나서 인스타에 들어가보니 충격적인 뉴스를 보았다.
트위치가 한국에서 철수한다는 소식을 들었다.
이때부터 트위치 스트리머들은 장례식을 준비했다.

한 스트리머 방송에서는 한국 철수까지 남은 디데이를 보여주었다.
이 방송을 보고 잠을 자려고 누웠는데
눕자마자 한국 철수까지 남은 시간을 보여주는 웹사이트를 만들고 싶어졌다.

그 즉시(새벽 2시) 바로 일어나서 개발을 시작했다.

# 남은 시간을 보여주는 웹을 만들어보자
단순히 디데이 웹사이트를 만들고 싶어서 개발을 시작한건 아니다.

1. 최근에 공부한 리액트로 프로젝트를 하고 싶었다.
2. 숫자가 롤렛처럼 보이는 애니매이션의 UI를 만들고 싶었다.
3. 간단한 토이 프로젝트가 하고 싶어 졌다.

우선 프로젝트의 가장 기본이 되는 날짜 계산 부분은
평소 공부해보고 싶었던 **moment.js**를 사용했다.

```js
const END_D_DAY = moment("2024-02-27:00:00:00")

useEffect(() => {
  const timeInterval = setInterval(() => {
    const d = END_D_DAY.diff(moment())
    const duration = moment.duration(d)

    setDDay({
      days: Math.floor(duration.asDays()),
      hours: duration.hours(),
      minutes: duration.minutes(),
      second: duration.seconds(),
      asSecond : Math.floor(duration.asSeconds()), // 남은 시간을 모두 초로 계산
    })
  }, 500)

  return () => {
    clearInterval(timeInterval)
  }
}, [])
```

moment를 사용해서 트위치 한국 철수 예정일인 2024년 2월 27일 0시 00분으로 기준을 잡아주었고
useEffect 훅을 사용해서 처음 마운트 될때 timeInterval를 걸어주었고
언마운트 될때 삭제 되게 해주었다.

![개발 예시 사진](https://velog.velcdn.com/images/ckstmznf/post/1f92c917-e302-4cec-af93-ea73870b541f/image.png)

위의 사진 처럼 숫사가 수직으로 배열되어 있는 **Number** 컴포넌트를 만들어 주었고
이 컴포넌트에서 숫자 몇을 보여줘야 하는지는 props로 받아주었다.

Number 컴포넌트에서 보여주는 숫자에 대해서 위치를 계산해주는게
위치는 `-1 * 각 숫자들의 높이 * 보여주는 숫자`를 계산한 값으로 주어서
각 숫자마다 위로 올라가게 하고
**.d-day** 엘리먼트의 overflow를 hidden으로 주면서 요소의 너비를 넘어간 부분은 숨겨주었다.

그래서 다음과 같은 애니매이션을 만들었다.
![애니메이션 시연](https://velog.velcdn.com/images/ckstmznf/post/89d4e915-626b-432c-8750-0c7b76050889/image.gif)

# 이게 무슨 버그야.. 아오 애플
새벽에 개발을 완료하고 인스타그램으로 지인들에게 먼저 공개를 하고 잠에 들었다.
그리고 아침에 일어나서 많은 DM을 받았는데...

![버그 제보 DM](https://velog.velcdn.com/images/ckstmznf/post/ba75fa31-613b-4270-897a-b4fa1cbdc8b9/image.jpg)

ios 남은 시간이 보이지 않는 버그가 발생한것이다.
나는 노트북부터 휴대폰까지 모두 애플 기기가 아니었기 때문에 테스트할때 확인을 못했다.
또 이런 버그가 발생할거라고 생각도 못했다.

급하게 동생 핸드폰을 빌려와서~~(뺐어 와서)~~ 테스트를 해보았다.

버그의 원인은 moment.js가 동작 하지 않는것 같았다.
그리고 해결법을 찾아보니 moment.js가 아니라 **Luxon** 라이브러리를 사용하는 방법이 있었고
이 방법을 사용하기로 했다.

사용법은 moment.js와 비슷해서 오래 걸리지는 않았다.

```jsx
import { DateTime } from 'luxon'

useEffect(() => {
  const timeInterval = setInterval(() => {
    const duration = END_D_DAY.diff(
      DateTime.now(), ['days', 'hours', 'minutes', 'seconds']
    ) // 남은 시간 계산

    setDDay({
      days: duration.days,
      hours: duration.hours,
      minutes: duration.minutes,
      second: Math.floor(duration.seconds),
      asSecond : Math.floor(duration.as("seconds")), // 남은 시간을 모두 초로 계산
    })
  }, 500)

  return () => {
    clearInterval(timeInterval)
  }
}, [])
```

# 프로젝트하면서 어떤걸 배웠나요
1. 날짜 계산 하는 방법
2. 애플 기기에서는 moment.js는 정상적인 작동 안한다.
3. 처음으로 하는 리액트 프로젝트
4. 숫자 애니메이션 만드는 방법

[Android] 여러 프래그먼트에서 공유되는 ViewModel 만들기

Heechan Park — Wed, 13 Dec 2023 17:01:07 +0900

이 글은 여러 프래그먼트에서 하나의 ViewModel을 공유해서 사용하는 법을 기록했고
Google Codelab을 통해 학습한 내용을 정한 글 입니다.

Android에서 회원가입, 메인 페이지 등 Navigation을 사용해서 여러 프래그먼트에서
데이터를 공유해서 사용해야 할 때가 있다. 이 방법을 공부하기 위해서
Google Codelab에서 공부했다. 해당 코드랩

결론부터

ViewModel은 다음과 같이 동일하게 만들어 주면 된다.

class OrderViewModel : ViewModel() {
  private val _quantity = MutableLiveData<Int>(0)
  val quantity: LiveData<Int> = _quantity
}

Fragment에서 ViewModel을 만들때 activityViewModels()을 사용해주면 된다.

class PickupFragment : Fragment() {

    private val sharedViewModel: OrderViewModel by activityViewModels()

    ...    
}

다음과 같이 여러 프래그먼트에서 만들어줘도 접근하는건 하나의 객체에 접근한다.

class FlavorFragment : Fragment() {
    private val sharedViewModel: OrderViewModel by activityViewModels()
    ...

    // 공유 뷰모델에서 접근 하는 법
    // sharedViewModel.quantity.value
}

[React.js] React Router 사용법

Heechan Park — Wed, 13 Dec 2023 17:00:05 +0900

이 글은 React Router를 공부하고 정리한 글 입니다.

React Router이 뭔가요?

React Router은 리액트에서 여러 페이지를 만들고 사용할 때 사용하는 리액트 라이브러리입니다.
전문용어로 라우팅리라고 하죠.

기본 사용법

npm에서 react-router 라이브러리를 설치해줍니다.

npm i react-router

라우터의 기본 구조는 다음과 같은 컨포넌트 구조로 이루어져있습니다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={...} />
        <Route path="path1" element={...} />
        ...
      </Routes>
    </BrowserRouter>
  );
}

BrowserRouter라는 컨포넌트가 최상위에 있고
그 다음으로 Routes가 Route 컨포넌트들을 감싸고 있습니다.

Route의 element 속성은 해당 경로로 접속을 하면 보여줄 컨포넌트를 받고
index 속성이 있다면 루트 경로로 접속을 했을때 보여주는 컨포넌트 입니다.

import { Link, Outlet } from "react-router-dom";

<nav>
  <ui>
    <li>
      <Link to="/" >Home</Link>
    </li>
    <li>
      <Link to="/path1">path1롤 가기</Link>
    </li>
  </ui>
</nav>

Link 컨포넌트는 라우터의 경로를 이동하는 컨포넌트입니다.

Link 컨포넌트가 가지고 있는 속성을 다음과 같습니다.

preventscrollreset : 페이지 이동시 스크롤이 최상단으로 이동하는 것을 방지합니다.
state : 이동하는 페이지의 데이터를 전달 할 수 있습니다.
state 속성을 사용해서 다음과 같이 name 데이터를 전달하면
```
<Link to="new-path" state={{name : "박희찬"}}/>
```
다음과 같이 name 데이터를 가져올 수 있습니다.
```
const { state } = useLocation()

const name = state.name
```
reloadDocument : reloadDocument속성은 페이지를 이동할때 클라이언트측에서만 랜더링 하는게 아니라 처음 접속하는것 처럼 문서 전체를 재 랜더링을 합니다.

[Python] Pandas에서 데이터 전처리 하기

Heechan Park — Wed, 13 Dec 2023 16:59:29 +0900

이 글은 Pandas에서 데이터 전처리 하는 방법을 공부하고 정리한 글 입니다.

w3school의 해당 강의를 참고하며 공부했습니다.

데이터 전처리란

우리의 데이터가 항상 깔끔했으면 좋겠지만 아닌 경우가 너무 많다.
다음과 같은 경우가 있다.

데이터의 셀이 비어있다.
데이터 형식이 잘못되었다.
너무 크거나 작은 데이터가 있다.
중복된 데이터가 있다.

이런 경우에 데이터 분석에 영향을 없애기 위해서 처리를 해줘야 한다.

비어있는 데이터 전처리

데이터의 셀이 비어있는 경우
해당 데이터의 행을 지워버리거나 비어있는 셀을 특정 값으로 채워 넣을 수 있다.

new_df = df.dropna()

dropna() 함수를 사용하면 비어있는 셀이 있는 모든 행을 삭제한다.

데이터의 양이 많거나 삭제하는 행이 적을때는 문제가 되지 않지만
데이터 양 자체가 적거나 너무 많은 행을 삭제할때는
다른 방법을 사용하는게 좋다.

newdf = df.fillna(100)

fillna() 함수를 사용하면 인자로 들어온 값으로 비어있는 셀 전체를 채운다.

newdf = df["Calories"].fillna(100)
df["Calories"] = newdf
df.head(100)

fillna() 함수는 시리즈에도 적용해서 특성 열만 전처리가 가능하다.

평균값 = df["Calories"].mean()
중앙값 = df["Calories"].median()
최빈값 = df["Calories"].mode()

print(평균값, 중앙값, 최빈값)

채워넣는 값은 임의의 값이 아니라 보통 평균값, 중앙값, 최빈값을 사용한다.
각각의 값은 mean(), median(), mode() 함수를 사용해서 구해준다.

잘못된 데이터 전처리

데이터의 값이 너무 크거나 작은 경우 수동으로 전처르 해줄 수 있다.

df.loc[7, "Duration"] = 1

해당 코드는 7번 행의 "Duration"열의 값을 1로 수정하는 코드다.
이때 수정하는 값은 평균값, 중앙값, 최빈값 등을 사용 할 수 있다.

mean_value = df["Duration"].mean()

for index in df.index:
    if df.loc[index, "Duration"] > 100:
        df.loc[index, "Duration"] = mean_value

너무 많은 값을 수동으로 전처리 해주기는 힘들기 때문에
for 문을 사용해서 자동으로 평균값으로 입력 해줄 수 있다.

for index in df.index:
    if df.loc[index, "Duration"] > 100:
        df.drop(index, inplace=True)

혹은 기준에 넘는 행을 삭제 할 수 있다.

중복된 데이터 전처리

df.duplicated()

df.duplicated() 함수를 사용하면 중복된 행이 있는지 탐색하고
결과를 각각의 bool값을 가진 시리즈를 반환한다.

new_df = df.drop_duplicates()

df.drop_duplicates() 함수를 사용하면 중복된 행들은 삭제한 결과를 반환한다.

[Python] Pandas 기초 공부해보기

Heechan Park — Wed, 13 Dec 2023 16:58:11 +0900

이 글은 Python의 모듈인 Pandas를 공부하고 정리한 글입니다.

항상 Python에서 데이터를 다룰때 Pandas를 사용했지만
기초는 모른체 구글에서 검색하거나 감으로 사용했었다.
이 기회에 기초를 공부해보았다.

w3school의 Pandas강의를 참고해서 공부했다

Pandas가 뭔가요

Pandas는 Python에서 데이터 분석을 할때 사용하는 모듈이다.

테이블 형식의 2차원 자료를 다룰때 유용하게 사용한다.

pip install pandas

위의 명령어를 사용해서 모듈을 다운로드 할 수있다.

import pandas

위의 코드를 사용해서 모듈을 사용 할 수 있다.

import pandas as pd

Python에서 모듈은 as 키워드를 사용해서 모듈명을 축약 할 수 있는데
보통 Pandas는 pd라는 이름으로 축약한다.

Pandas의 시리즈란?

Series : 테이블의 하나의 열, 1차원 배열과 같다.
하나의 시리즈에는 여러 자료형이 들어갈 수 있다.
```
a = [1, 7, 2]
myvar = pd.Series(a)
```
위의 코드를 사용해서 리스트를 시리즈로 만들었다.

자료형이 pandas.core.series.Series인걸 볼 수 있다.

a = [1, 7, 2, 12]
myvar = pd.Series(a)
print(myvar[3]) #12

시리즈의 원소에 접근할때는 인덱스를 사용한다.

a = [1, 7, 2]
myvar = pd.Series(a, index=["x", "y", "z"])
print(myvar["z]) #2

시리즈를 생성할 때 기본 인텍스는 기존 리스트의 인덱스와 같다.
시리즈를 생성할 때 index인자를 사용하면 인덱스를 따로 지정 해 줄 수 있다.

calories = {"day1": 420, "day2": 380, "day3": 390}

myvar = pd.Series(calories)
myvar

딕셔너리를 시리즈로 제작해주면 각 원소의 인텍스가 해당하는 Key로 지정된다.

데이터프래임이란????

데이터 프래임은 2차원 구조를 가진 테이블과 같은 자료구조이다.

data = {
  "calories": [420, 380, 390],
  "duration": [50, 40, 45]
}

df = pd.DataFrame(data)
df

위의 예제는 data 딕셔너리를 데이터프래임으로 만들어주었다.

data의 key들이 각각의 열이 되고 value가 열을 이루는 데이터로 행이 된것을 볼 수 있다.

데이터프래임에서 인텍스를 사용해서 행을 찾을때는 loc라는 속성을 사용한다.
이때 결과는 시리즈를 반환한다.

여러 행을 찾을때는 찾고자하는 인덱스를 리스트로 전달을 한다.
이때는 결과로 데이터프래임을 반환한다.

데이터프래임 역시 index 속성을 사용해서 각 행들의 인덱스를 지정 해 줄 수 있다.

EDCAN 10기 부원들을 위한 FireBase Guide 2

leeharam — Mon, 12 Jun 2023 13:50:59 +0900

1. res/brawble 안에 다음 두 xml 파일을 만들어주세요. (drawble 파일 new -> new resource file)

/* btn.xml */

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="#425563" /> 
    <solid android:color="#425563" />
    <corners android:radius="12dp" />
</shape>

/* border.xml */

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="#E3E6E8" /> 
    <solid android:color="#FFFFFF" />
    <corners android:radius="12dp" /> 
</shape>

2. RegisterActivity를 만들고 XML을 다음과 같이 만들어주세요.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@color/white"
    android:layout_height="match_parent"
    tools:context=".RegisterActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/header"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="372dp"
            android:layout_height="152dp"
            android:src="@drawable/photo" />

        <TextView
            android:id="@+id/id_info_txt"
            android:layout_marginTop="32dp"
            android:text="아이디"
            app:layout_constraintTop_toBottomOf="@+id/header"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:textColor="#425563"
            android:textSize="15sp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            android:layout_height="wrap_content" />

        <EditText
            android:id="@+id/id_et"
            android:layout_marginTop="12dp"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:hint="아이디를 입력해주세요"
            android:paddingStart="20dp"
            android:background="@drawable/border"
            android:textSize="15sp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:textColorHint="#98A4AE"
            app:layout_constraintTop_toBottomOf="@+id/id_info_txt" />

        <TextView
            android:id="@+id/id_password_txt"
            android:layout_marginTop="20dp"
            android:text="비밀번호"
            app:layout_constraintTop_toBottomOf="@+id/id_et"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:textColor="#425563"
            android:textSize="15sp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            android:layout_height="wrap_content" />


        <EditText
            android:id="@+id/password_et"
            android:layout_marginTop="12dp"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:hint="비밀번호를 입력해주세요"
            android:paddingStart="20dp"
            android:background="@drawable/border"
            android:textSize="15sp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:textColorHint="#98A4AE"
            app:layout_constraintTop_toBottomOf="@+id/id_password_txt" />

        <Button
            android:id="@+id/submit_btn"
            android:background="@drawable/btn"
            android:layout_width="372dp"
            android:layout_marginTop="48dp"
            android:textColor="@color/white"
            android:layout_height="52dp"
            android:textSize="15sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="회원가입"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@id/password_et" />

        <TextView
            android:id="@+id/change_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="20dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="이미 계정이 있어요"
            android:textColor="#425563"
            app:layout_constraintTop_toBottomOf="@id/submit_btn" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

3. LoginActivity를 만들고 XML을 다음과 같이 만들어주세요.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@color/white"
    android:layout_height="match_parent"
    tools:context=".LoginActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginStart="24dp"
            android:textSize="32sp"
            android:textStyle="bold"
            android:text="로그인"
            android:textColor="#425563"
        />

        <TextView
            android:id="@+id/id_info_txt"
            android:layout_marginTop="32dp"
            android:text="아이디"
            app:layout_constraintTop_toBottomOf="@+id/header"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:textColor="#425563"
            android:textSize="15sp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            android:layout_height="wrap_content" />

        <EditText
            android:id="@+id/id_et"
            android:layout_marginTop="12dp"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:hint="아이디를 입력해주세요"
            android:paddingStart="20dp"
            android:background="@drawable/border"
            android:textSize="15sp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:textColorHint="#98A4AE"
            app:layout_constraintTop_toBottomOf="@+id/id_info_txt" />

        <TextView
            android:id="@+id/id_password_txt"
            android:layout_marginTop="20dp"
            android:text="비밀번호"
            app:layout_constraintTop_toBottomOf="@+id/id_et"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:textColor="#425563"
            android:textSize="15sp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            android:layout_height="wrap_content" />


        <EditText
            android:id="@+id/password_et"
            android:layout_marginTop="12dp"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:hint="비밀번호를 입력해주세요"
            android:paddingStart="20dp"
            android:background="@drawable/border"
            android:textSize="15sp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:textColorHint="#98A4AE"
            app:layout_constraintTop_toBottomOf="@+id/id_password_txt" />

        <Button
            android:id="@+id/submit_btn"
            android:background="@drawable/btn"
            android:layout_width="372dp"
            android:layout_marginTop="48dp"
            android:textColor="@color/white"
            android:layout_height="52dp"
            android:textSize="15sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="로그인"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@id/password_et" />

        <TextView
            android:id="@+id/change_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="20dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="회원가입 하러 가기"
            android:textColor="#425563"
            app:layout_constraintTop_toBottomOf="@id/submit_btn" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

4. 해당 프로젝트에서 Authentication을 사용 설정해주세요. (시작하기 누르기)

5. 기본 제공업체의 이메일/비밀번호를 누른 후, 이메일/비밀번호만 사용설정(스위치) 한 후 저장해주세요.

EDCAN 10기 부원들을 위한 FireBase Guide

leeharam — Tue, 6 Jun 2023 23:04:37 +0900

안녕하세요, 10기 부원 여러분들.

아래 내용은 수업 참고 자료로 이용해주시면 됩니다.

1. 아래 링크를 따라 들어가 파이어베이스에 접속하고, 콘솔로 이동해주세요.

"콘솔로 이동" 버튼은 우측 상단에 있습니다.

https://firebase.google.com/?hl=ko

Firebase

Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world.

firebase.google.com

2. 새 프로젝트를 만든 뒤 구글 애널리틱스는 비활성화 시켜주세요. 사용하지 않을 기능입니다.

3. 프로젝트가 다 만들어지면 "앱에 FireBase를 추가하여 시작하기" 하단의 안드로이드 로고를 클릭해 새로운 앱을 만들어주세요.

패키지 이름은 MainActivity.com 최상단의 패키지명을 사용하시면 됩니다. 앱 닉네임은 원하는대로 만들어주세요.

4. 구성 파일을 다운로드 한 후 프로젝트의 app 폴더에 넣어주면 됩니다.

아래 보이는 사진처럼 상단에서 Android 보기를 Project 보기로 설정하면 app 폴더를 쉽게 확인할 수 있습니다.

5. google-services.json 파일이 추가되었다면 다시 안드로이드 보기로 돌아간 후 두 개의 build.gradle 파일을 열어주세요.

파이어베이스에 나와있는 내용은 예전 내용으로 코드가 많이 바뀌어 새로운 방식으로 파이어베이스를 앱에 추가시켜줘야 합니다.

프로젝트 단위의 gradle과 앱 단위의 gradle을 확인해주세요.

6. 프로젝트 단위의 gradle의 중괄호 안에 다음 한줄을 추가한 후 sync해주세요.

id 'com.google.gms.google-services' version '4.3.10' apply false

7. 앱 단위의 gradle의 중괄호 안에 다음 내용을 추가한 후 sync해주시고,

오류가 발생할 경우 오타를 잘 확인한 후 선배를 불러주세요.

// 최상단 plugins를 아래처럼 바꿔주세요.

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'com.google.gms.google-services'
}

// 뷰바인딩을 이용하기 위해 android 중괄호 안에 다음 코드를 넣어주세요.

viewBinding {
    enabled = true
}
buildFeatures {
    viewBinding true
}

// 최하단 dependencies 안에 다음 코드를 추가해주세요.

implementation 'com.google.firebase:firebase-firestore-ktx:24.6.1'

8. 문제가 없다면 XML 파일을 아래와 같이 만들어주세요.

- 첫번째 EditText의 id = et1

- 두번째 EditText의 id = et2

- 세번째 EditText의 id = et3

- 버튼의 id = btn

9. 최상단 코드를 뷰바인딩 사용을 위해 아래처럼 바꿔주세요.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

10. 뷰바인딩 사용을 위해 액티비티의 클래스 코드를 수정해주세요.

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        FirebaseApp.initializeApp(this)

        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
    }
}

11. 이제 본격적으로 파이어베이스를 다루어보겠습니다.

앞의 수업에 집중해주세요.