Colin's Blog
[kotlin] 코틀린 서버 사이드 개발에서 프론트엔드와의 상호작용 방법

최근에는 코틀린이 서버 사이드 개발에서 많이 사용되고 있으며, 프론트엔드와의 상호작용이 필요한 경우가 많습니다. 이번 블로그에서는 코틀린을 사용하여 프론트엔드와의 상호작용을 구현하는 방법에 대해 알아보겠습니다.

WebSocket을 이용한 양방향 통신 구현

웹 소켓(WebSocket)은 서버와 클라이언트 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 코틀린 서버에서 WebSocket을 이용하여 프론트엔드와의 실시간 상호작용을 구현할 수 있습니다.

import io.ktor.http.cio.websocket.*
import kotlinx.coroutines.channels.SendChannel
import kotlinx.coroutines.channels.actor
import kotlinx.coroutines.channels.consumeEach
import kotlinx.coroutines.launch
import kotlinx.html.*
import kotlinx.html.stream.*
import java.time.*

suspend fun DefaultWebSocketServerSession.handle(frontendChannel: SendChannel<String>) {
    frontendChannel.actor {
        consumeEach { message ->
            send(Frame.Text(message))
        }
    }
    
    for (frame in incoming) {
        frame as? Frame.Text ?: continue
        frontendChannel.send(frame.readText())
    }
}

위 코드는 Ktor 프레임워크와 kotlinx.html을 사용하여 WebSocket을 구현한 예시입니다. 이를 통해 서버와 클라이언트 간의 실시간 양방향 통신이 가능해집니다.

RESTful API를 통한 데이터 교환

또 다른 방법으로는 RESTful API를 통해 데이터를 교환하는 것입니다. 코틀린 서버에서 REST API를 구현하고, 프론트엔드에서 HTTP 요청을 통해 데이터를 주고받을 수 있습니다.

import io.ktor.application.*
import io.ktor.http.*
import io.ktor.response.*
import io.ktor.routing.*

fun Application.main() {
    routing {
        get("/api/data") {
            call.respondText("This is the data from the server.", ContentType.Text.Plain)
        }
    }
}

위 코드는 Ktor 프레임워크를 사용하여 간단한 RESTful API를 구현하는 예시입니다. 클라이언트 측에서 HTTP GET 요청을 보내면, 서버는 해당 데이터를 응답으로 보내줍니다.

GraphQL을 이용한 유연한 데이터 요청

GraphQL은 데이터를 효율적으로 요청하고 응답받을 수 있는 쿼리 언어입니다. 코틀린 서버에서 GraphQL을 이용하여 프론트엔드와의 데이터 요청을 다룰 수 있습니다.

import com.expediagroup.graphql.server.execution.GraphQLContext
import com.expediagroup.graphql.server.execution.GraphQLRequestHandler
import com.expediagroup.graphql.server.execution.GraphQLRequestParser
import com.expediagroup.graphql.server.execution.GraphQLRequestParserKtor
import com.expediagroup.graphql.server.types.GraphQLRequest
import com.expediagroup.graphql.server.types.GraphQLResponse
import io.ktor.application.*
import io.ktor.request.*
import io.ktor.response.*
import io.ktor.routing.*
import io.ktor.server.engine.*
import io.ktor.server.netty.*

fun main() {
    val requestParser: GraphQLRequestParser = GraphQLRequestParserKtor()
    val requestHandler: GraphQLRequestHandler = MyGraphQLRequestHandler()

    embeddedServer(Netty, port = 8080, module = {
        routing {
            post("/graphql") {
                val request = call.receive<GraphQLRequest>()
                val response = requestHandler.handleRequest(request, GraphQLContext(), requestParser)
                call.respond(response)
            }
        }
    }).start(wait = true)
}

class MyGraphQLRequestHandler : GraphQLRequestHandler {
    override suspend fun handleRequest(
        request: GraphQLRequest,
        requestContext: GraphQLContext,
        requestParser: GraphQLRequestParser
    ): GraphQLResponse {
        // Handle the GraphQL request and return the response
    }
}

위 코드는 Ktor 프레임워크와 com.expediagroup.graphql 라이브러리를 사용하여 GraphQL 서버를 구현하는 예시입니다.

결론

코틀린을 사용하여 서버 사이드 개발을 할 때, 프론트엔드와의 상호작용을 위한 다양한 방법을 살펴보았습니다. WebSocket, RESTful API, 그리고 GraphQL을 이용하여 서버와 클라이언트 간의 효율적인 통신을 구현할 수 있습니다. 이러한 방법을 활용하여 보다 유연하고 효율적인 서버-클라이언트 통신을 구현할 수 있을 것입니다.

참고 문헌:

© 2018 Colin. All rights reserved.