악역영애의 개발일지

강의를 듣다보니 예전 안드로이드스튜디오랑은 좀 다른게 생겨서 메모해놓는다

empty Activity 만들고싶은데 워낙 선택지가 많아서 헷깔렸다

방법1. 바로선택

방법2. Gallery 보고 선택

New > Activity > Gallery 선택

Empty Views Activity 선택

Activity 이름 설정

이때 Activity Name 과 Layout Name을 잘 맞춰야한다

커서를 앞으로 이동하여 Main을 지우고 다른 문자로 바꾸면 괜찮지만, 전체삭제한경우 activity_가 prefix로 붙지않는 경우도 있기 때문이다

혹시나 activity 생성하고나서 setContentView(R.layout.레이아웃이름) 부분이 제대로 import안되더라도 걱정하지말자

일시적으로 import 인식을 못하는것같다.

한번 실행해보면 오류없이 실행됨!

TextView

html 의 p태그와 비슷하며, 텍스트를 입력할 수 있다

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="소개팅 앱!!"
 />

match_parent : 부모요소의 길이

예제를 기준으로, textView 상위 부모의 width 를 따라간다

wrap_content : 해당요소의 길이

예제를 기준으로, text 요소의 height를 입력한다

LinearLayout

여러 요소를 줄세우는 div

세로, 가로 가능

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    tools:layout_editor_absoluteX="0dp">
    
    <Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/mainColor"
    android:layout_margin="10dp"
    android:textColor="@color/white"
    android:text="Login" />

</LinearLayout>

orientation = vertical : 세로정렬

components 폴더 생성

root 디렉토리에 components 폴더를 생성한다

하위에 layout 폴더를 생성하고 그 안쪽에 layout과 관련된 로직을 추가할것이다

프로젝트가 실행될 때 가장 먼저 실행되는것이 _app.tsx 이다.
만약 localhost:3000/home 으로 접속 시 _app.tsx 가  실행되면서 Comonent로 "home" Component가 들어오게된다
그렇기에 레이아웃을 씌우는 대상은 _app.tsx가된다

Header, Footer 생성

기본적인 헤더, 푸터를 생성해보자

▼Header.tsx

import React from 'react'

const Header = () => {
    return (
        <>
            <h1>Header</h1>
        </>
    )
}

export default Header

▼Footer.tsx

import React from 'react'

const Footer = () => {
    return (
        <>
            <div>
                <h1>Footer</h1>
            </div>
        </>
    )
}

export default Footer

Layout 생성

위에서 만들어진 Header, Footer 를 layout화 시켜보자

▼ Layout.tsx

import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import {Noto_Sans_KR} from "next/font/google";

type LayoutProps = {
  children: React.ReactNode
  className?: string
}

const notoSansKr = Noto_Sans_KR({
    subsets: ['latin'],
    weight: ['100', '400', '700', '900'],
    variable: '--font-notoSansKr',
})

export default function Layout({ children, className }: LayoutProps) {
  return (
    <div className={`${notoSansKr.className}`}>
      <Header />
      <div>
          {children}
      </div>
      <Footer />
    </div>
  )
}

layout function 에는 인자값으로 children, className 이 들어올건데, 이것의 타입은 위에 선언된 LayoutProps 이다.

그리고 Header, body, Footer 모두 폰트를 적용시키기 위하여 상위에 Classname을 설정해줬다

참고로 return 시 상위 태그를 선언하지않으면 오류가 난다

아래와 같이 빈 태그라도 넣어줘야한다

만든 Layout을 _app에 씌운다

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import {NextPage} from "next";
import {ReactElement, ReactNode} from "react";
import Head from "next/head";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (_page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}
export default function App({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page)

  return(
      <>
        {getLayout(<Component {...pageProps} />)}
      </>
  )
}

index 정리

필요없는 코드를 정리해준다

import { Inter } from 'next/font/google'
import {NextPageWithLayout} from "@/pages/_app";
import Layout from "@/components/layout/Layout";

const inter = Inter({ subsets: ['latin'] })

const Home : NextPageWithLayout = () => {
  return (
    <>
      <h1>본문 영역입니다</h1>
    </>
  )
}

Home.getLayout = function getLayout(page) {
  return<Layout>{page}</Layout>
}

export default Home

이렇게 레이아웃이 나뉘어졌다!

에뮬을 실행했더니 아래와 같은 오류가 확인되었다

Waiting For debugger

Application [프로젝트명] (process com.example.폴더명) is waiting for the debugger to attach.

Error running 'app'

Processes com.example.sogating are not found. Aborting session.

코틀린 안드로이드 개발은 처음인데.. java 처럼 오류메세지가 와락 뜨는게 아니라서 디버깅하는 방법을 공부하는중..

일단 에뮬이 냅다 꺼진다면, 로직이 잘못된것이므로 코드를 하나씩 지워가면서 오류포인트를 찾았다.

뭐 설정이고 무슨 문제가 아니라, 로직문제가 없는지 확인할것..!