개요

최근 이직한 회사에서는 모든 타입 정의 코드에서 type을 사용하고 있었다.

항상 interface만 써오던 나로서는 type과 interface의 차이점이 궁금했다.

 

Interface

interface는 객체의 형태를 정의하는 데 사용된다.

예를 들어, 사용자 객체를 정의한다고 할 때, interface를 사용하여 이렇게 작성할 수 있다

interface User {
  name: string;
  age: number;
}

특징

1. 확장

interface는 extends 키워드를 사용하여 다른 인터페이스를 확장할 수 있다.

이를 통해 코드의 재사용성을 높일 수 있다.

interface Admin extends User {
  adminSince: Date;
}


2. 병합

동일한 이름의 인터페이스가 여러 개 정의되면, 타입스크립트는 이를 자동으로 병합한다.

이는 라이브러리 작성 시 유용하다.

interface User {
  isAdmin: boolean;
}

const user: User = {
  name: 'Alice',
  age: 30,
  isAdmin: true
};

 

Type

type은 타입 별칭을 정의하는 데 사용된다.

다음과 같이 사용할 수 있다

type User = {
  name: string;
  age: number;
};

특징

1. 유니온 타입과 교차 타입

type유니온 타입과 교차 타입을 정의할 수 있다.

이를 통해 다양한 타입을 유연하게 정의할 수 있다.

type Admin = User & {
  adminSince: Date;
};

type UserRole = 'admin' | 'user' | 'guest';

 

2. 병합 불가능

동일한 이름의 type을 여러 번 정의하면 오류가 발생한다.

따라서 type은 이름 충돌을 방지하는 데 더 안전할 수 있다.

 

공통점

interface와 type은 둘 다 객체의 구조를 정의하는 데 사용되며, 함수 타입과 제네릭도 지원한다.

interface FunctionType {
  (x: number, y: number): number;
}

type FunctionTypeAlias = (x: number, y: number) => number;

 

언제 무엇을 사용할까?

객체의 형태를 정의할 때

확장이 필요하거나 객체의 구조를 표현할 때interface를 사용하는 것이 좋다.

다양한 타입을 정의할 때

유니온 타입, 교차 타입, 튜플 등을 정의할 때type을 사용하는 것이 좋다.

회사나 팀의 스타일 가이드에 따라 interface와 type 중 하나를 선택하여 사용하는 것이 일반적이다.

 

중요한 것은 일관된 스타일을 유지하는 것이다. (회사에서 type만 쓰는 중)

타입스크립트를 사용하면서 interface와 type을 적절히 활용하면,

더 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있다.

오늘의 내용이 타입스크립트 사용에 도움이 되길 바란다.

반응형

querySelector

  • 정의
    querySelector는 CSS 선택자를 사용하여 문서에서 첫 번째로 일치하는 요소를 반환합니다. 요소를 찾지 못하면 null을 반환합니다.
  • 사용법
    document.querySelector(cssSelector) 형식으로 사용하며, cssSelector는 CSS 스타일의 선택자 문자열입니다.

예시

HTML 문서에서 첫 번째로 발견되는 classexample<div> 요소를 선택합니다.

<div class="example">첫 번째 예제</div>
<div class="example">두 번째 예제</div>
const firstExample = document.querySelector(".example");
console.log(firstExample.textContent); // "첫 번째 예제"

 

querySelectorAll

  • 정의: querySelectorAll주어진 CSS 선택자에 일치하는 문서 내 모든 요소의 정적(NodeList가 아닌) NodeList를 반환합니다. 일치하는 요소가 없으면 빈 NodeList를 반환합니다.
  • 사용법: document.querySelectorAll(cssSelector) 형식으로 사용합니다.

예시

HTML 문서 내에서 classexample인 모든 <div> 요소를 선택합니다.

<div class="example">첫 번째 예제</div>
<div class="example">두 번째 예제</div>
const allExamples = document.querySelectorAll(".example");
allExamples.forEach(el => {
    console.log(el.textContent);
});
// 출력:
// 첫 번째 예제
// 두 번째 예제

 

사용 시 주의점

  • querySelectorAll 반환값: querySelectorAll이 반환하는 NodeList는 정적이므로, NodeList를 생성한 후 DOM이 변경되더라도 NodeList의 내용은 업데이트되지 않습니다.
  • CSS 선택자: querySelectorquerySelectorAll 모두 CSS 선택자를 사용하므로, 유효한 CSS 선택자 문자열을 인자로 제공해야 합니다.
  • 성능 고려: 빈번한 DOM 접근은 성능에 영향을 줄 수 있으니, 필요한 경우에만 사용하고 결과를 캐싱하는 것이 좋습니다.
반응형

개요

현대의 모바일 애플리케이션 개발에서 Android 애플리케이션과 웹 서버 간의 데이터 통신은 필수적인 부분이다

Kotlin으로 개발된 Android 애플리케이션과 PHP 서버 간의 데이터를 주고받는 방법에 대해 알아보자

근래에는 PHP를 잘 쓰지 않지만 레거시 코드 수정 시 필요할 때가 가끔 있었다

 

방법

1. Android에서 PHP로 데이터 보내기

Android 애플리케이션에서 PHP 서버로 데이터를 보내는 것은 사용자 인증, 서버에 데이터 저장 등 다양한 목적으로 사용된다

다음 예제는 Android에서 PHP 서버로 HTTP POST 요청을 통해 데이터를 보내는 방법이다

Kotlin 코드 예시 (Android)

// HTTP 요청을 보내기 위한 함수
fun sendPostRequest(username: String, password: String) {
    val url = URL("https://domain.com/login.php")
    val postData = JSONObject()
    postData.put("username", username)
    postData.put("password", password)

    with(url.openConnection() as HttpURLConnection) {
        requestMethod = "POST"
        doOutput = true

        val outputStream = BufferedOutputStream(outputStream)
        BufferedWriter(OutputStreamWriter(outputStream, "UTF-8")).use { writer ->
            writer.write(postData.toString())
            writer.flush()
        }

	// URL 연결과 데이터 전송 후 서버로부터의 응답을 받는 부분
        if (responseCode == HttpURLConnection.HTTP_OK) {
            BufferedReader(InputStreamReader(inputStream)).use { reader ->
                val response = StringBuilder()
                var line: String?
                while (reader.readLine().also { line = it } != null) {
                    response.append(line)
                }
                // 응답 처리
                Log.d("HTTP_POST", "Response: $response")
            }
        } else {
            Log.e("HTTP_POST", "Error: $responseCode")
        }
    }
}

sendPostRequest

사용자 이름(username)과 비밀번호(password)를 인자로 받아, HTTP POST 요청을 통해 이를 PHP 서버로 전송하는 함수


HttpURLConnection

서버와의 연결을 설정하고, POST 요청을 보내기 위한 준비를 한다

doOutput = true는 요청 본문에 데이터를 포함시킬 것임을 나타낸다


BufferedWriter

JSON 데이터를 서버로 전송하기 위해 사용된다

데이터는 UTF-8 인코딩으로 전송된다


if (responseCode == HttpURLConnection.HTTP_OK)

서버로부터의 응답 코드를 확인하여, 요청이 성공적으로 처리되었는지 확인한다

이후 서버에서 보낸 데이터를 StringBuilder객체로 받아서 활용할 수 있다

 

PHP 코드 예시 (서버)

<?php
// login.php
$username = $_POST['username'];
$password = $_POST['password'];

// 데이터베이스에서 사용자 인증 처리
// 예시이므로 실제 데이터베이스 연결과 쿼리 실행은 생략됩니다.

if (/* 사용자 인증 성공 */) {
    echo json_encode(array("status" => "success", "message" => "로그인 성공"));
} else {
    echo json_encode(array("status" => "fail", "message" => "로그인 실패"));
}
?>

$username = $_POST['username']

Android 클라이언트로부터 전송된 데이터 수신

echo json_encode(array(...))

로그인 성공 여부에 따라 JSON 형태의 응답 클라이언트(안드로이드)로 전송

이 응답은 Android 측에서 처리할 수 있다 (위 Kotlin 코드 응답 부분 참고)

 

2. PHP에서 Android로 데이터 보내기

서버에서 Android 애플리케이션으로 데이터를 보낼 때는 주로 서버의 데이터 상태 변경, 푸시 알림 정보 등을 Android 앱에 알리는 데 사용된다

다음 예제는 PHP에서 Android 웹뷰로 데이터를 보내 JavascriptInterface를 통해 처리하는 방법이다

 

PHP 코드 예시

PHP 코드는 클라이언트로부터 요청을 받고, 적절한 데이터를 처리한 후 결과를 JSON 형태로 반환한다

Android로부터 요청을 받고, 간단한 결과 데이터를 Android에 보내는 과정을 담은 예제이다

<?php
// response.php
$responseData = array("status" => "success", "data" => "Hello from PHP!");
echo json_encode($responseData);
?>

$responseData

서버에서 처리한 데이터를 포함하는 배열, 상태와 메시지 포함

echo json_encode($responseData)

배열을 JSON 형식으로 인코딩하여 클라이언트로 전송

이 JSON 데이터는 Android 앱에서 사용될 수 있습니다.

 

 

Kotlin 코드 예시 (Android)

Android에서는 WebView를 사용하여 PHP 서버와 통신하고

JavascriptInterface를 통해 웹 페이지에서 Android 함수를 호출할 수 있다

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

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 웹뷰 설정
        binding.webView.settings.javaScriptEnabled = true
        binding.webView.addJavascriptInterface(WebAppInterface(this), "Android")
        binding.webView.loadUrl("https://yourdomain.com/response.php")
    }

    class WebAppInterface(private val mContext: Context) {
        @JavascriptInterface
        fun showToast(toast: String) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
        }
    }
}

 

WebView

웹 컨텐츠를 로드하고 표시하기 위한 컴포넌트

loadUrl 메서드를 사용하여 PHP 페이지 로드

addJavascriptInterface

Android와 웹 페이지 간의 인터랙션을 가능하게 하는 메서드

이 예제에서는 WebAppInterface 인스턴스를 JavaScript 인터페이스로 추가하여

웹 페이지 내의 JavaScript 코드가 Android 함수 호출

@JavascriptInterface

안드로이드 메서드가 JavaScript에서 호출될 수 있도록 허용하는 어노테이션

showToast

JavaScript에서 호출될 수 있는 메서드

toast 메시지 화면에 표시

예시

<script>
function showMessage() {
    // AndroidInterface.showToast 메서드 호출
    AndroidInterface.showToast('서버로부터 받은 메시지');
}
</script>

 

결론

이 글에서는 Kotlin으로 개발된 Android 애플리케이션과 PHP 서버 간의 기본적인 데이터 통신 방법에 대해 알아보았다

예제는 PHP 서버에서 Android 애플리케이션으로 간단한 메시지를 보내고

Android 측에서는 이를 받아 토스트 메시지로 표시하는 과정을 구현한 코드이다

실제 애플리케이션에서는 이러한 방식을 확장하여 다양한 데이터 교환과 상호작용을 구현할 수 있다

이것 이외에도 보안, 데이터 검증, 에러 처리 등 추가적인 고려 사항이 필요할 수 있다

반응형

질문 리스트


  - Next.js 정의
  - Next.js의 주요 기능
  - SSR과 CSR의 차이
  - getInitialProps 기능
  - Next.js의 라우팅 방식
  - API 경로 생성 방법


면접 질문


1. Next.js는 무엇입니까? 


Next.js는 React.js, Node.js 및 JavaScript 위에 구축된 오픈 소스 개발 프레임워크입니다. Vercel에서 개발했으며 create-react-app에서 사용할 수 없는 서버 측 렌더링 및 정적 사이트 생성과 같은 기능을 활성화합니다.

2. Next.js의 주요 기능은 무엇입니까?


SSR(Server Side Rendering) - 더 나은 SEO와 더 빠른 페이지 로드 시간을 보장합니다.
SSG(Static Site Generation) - 빌드 시 React 앱을 렌더링할 수 있으며 HTML/CSS 파일로 제공됩니다.
ISR(Incremental Static Regeneration) - 이 기능을 사용하면 전체 정적 사이트를 다시 빌드할 필요 없이 배포 후 정적 콘텐츠를 업데이트할 수 있습니다.
API Routes - Next.js를 사용하면 API 라우트를 구축할 수 있습니다.
내장 CSS 및 Sass 지원, 모든 CSS-in-JS 라이브러리 지원.
Hot Code Reloading - 애플리케이션 코드의 변경 사항은 전체 페이지를 새로 고치지 않고도 즉시 볼 수 있습니다.
자동 코드 분할, 파일 시스템 기반 라우팅 및 경로 미리 가져오기

3. Next.js의 SSR(Server-Side Rendering)에 대해 설명해 주시겠습니까? CSR(Client-Side Rendering)과 어떻게 다릅니까? 

SSR에서 브라우저에 대한 서버의 응답은 렌더링할 준비가 된 페이지의 HTML이므로 브라우저는 모든 JavaScript가 다운로드되고 실행될 때까지 기다릴 필요 없이 렌더링을 시작할 수 있습니다. 이는 더 빠른 FCP(First Contentful Paint)를 제공하며 콘텐츠가 초기 로드 시 이미 사용 가능하므로 검색 엔진 크롤러가 액세스할 수 있으므로 SEO에 탁월합니다. 반면 클라이언트 측 렌더링에서는 페이지를 렌더링하는 데 필요한 JavaScript가 브라우저로 전송된 다음 DOM을 생성하고 페이지를 렌더링합니다. 이것은 보다 상호 작용적인 경험을 제공할 수 있지만 단점이 있습니다. 주요 단점은 특히 느린 네트워크나 장치에서 페이지가 표시되는 데 시간이 더 오래 걸릴 수 있다는 것입니다. Next.js는 개발자가 응용 프로그램의 각 페이지를 렌더링하는 방법을 선택할 수 있는 SSR과 CSR의 하이브리드를 제공하여 많은 유연성을 제공합니다.

4. Next.js의 'getInitialProps' 기능은 무엇인가요?


getInitialProps는 페이지에서 서버 측 렌더링을 활성화하고 페이지가 렌더링 전에 일부 데이터를 기다릴 수 있도록 하는 Next.js의 기능입니다. Next.js 애플리케이션의 모든 페이지에 추가할 수 있는 비동기 정적 메서드입니다. getInitialProps로부터 반환되는 데이터는 페이지 컴포넌트의 props를 채우는 데 사용됩니다. 이 함수는 필요한 데이터를 가져오는 데 유용할 수 있는 여러 속성을 포함한 컨텍스트 객체를 받습니다. 그러나 Next.js 9.3부터는 getInitialProps 대신 getStaticProps 또는 getServerSideProps를 사용하는 것이 좋습니다.  두 방법으로 더 나은 성능과 유연성을 얻을 수 있기 때문입니다.

5. Next.js에서 라우팅이 작동하는 방식을 설명해 주시겠습니까?


Next.js에는 파일 시스템 기반 라우팅 메커니즘이 있습니다. 이는 라우팅이 프로젝트의 'pages' 디렉토리에 있는 파일 구조를 기반으로 한다는 것을 의미합니다. 'pages' 디렉토리 내의 모든 파일은 자동으로 경로가 됩니다. 예를 들어 'pages' 디렉토리에 about.js 파일을 생성하면 your-site.com/about처럼 제공됩니다. 대괄호 []로 시작하는 파일 및 디렉터리 이름을 사용하여 동적 라우팅을 수행할 수도 있습니다. 예를 들어, pages/post/[id].js는 /post/1, /post/abc 등과 일치합니다.

6. Next.js에서 API 경로를 어떻게 생성하나요?


Next.js는 서버 사이드 API 경로를 생성하는 솔루션을 제공합니다. API 경로를 생성하려면 프로젝트의 'pages/api' 디렉토리 내에 파일을 생성합니다. 이 디렉터리의 각 파일은 호출할 수 있는 API 경로가 됩니다. 파일 이름은 경로 경로로 사용됩니다. 예를 들어 'pages/api' 디렉토리에 'hello.js'라는 파일을 생성하면 'yourwebsite.com/api/hello'에서 이 API 경로에 액세스할 수 있습니다. API 경로는 서버 측 전용이며 클라이언트 측 JavaScript 번들의 일부가 아니므로 브라우저로 전송되는 JavaScript 코드의 크기가 증가하지 않습니다.


이상 Next.js 관련하여 면접에서 물어볼 것 같은 사항들을 정리해보았다. 다들 면접 잘 뿌수고 오자 화이팅 !

반응형

+ Recent posts