요즘 꾸준히 취업 준비를 하던 중이라, 매일 코딩 테스트를 하고 있다.

하루하루 일정을 꽉 채우느라 블로그에 신경을 못 썼던 것 같아 오랜만에 오늘 푼 알고리즘을 포스팅 할까 한다.

사실 여태 한 코테 모두 노션에 문제와 코드, 요약한 내용이 정리되어 있지만 블로그에 따로 풀이를 하듯 적는 것도 좋을 것 같고.

문제

내리막 길

문제는 위와 같고, 내리막 길만을 선택해서 목적지에 도달하는 경우의 수를 출력하면 되는 문제다.

모든 경우의 수를 찾아야 하니 알고리즘은 당연히 DFS를 생각했고, 다시 되돌아 가기 위해 백 트래킹을 적용시켰다.

결과는...

처참했다.

시간 초과 코드

import java.io.*;
import java.util.*;

public class Main {
    static int N, M, CNT;
    static int[] dx = {0, 0, 1, -1};
    static int[] dy = {1, -1, 0, 0};
    static int[][] map;
    static boolean[][] visited;

    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

        StringTokenizer st = new StringTokenizer(br.readLine());

        N = Integer.parseInt(st.nextToken());
        M = Integer.parseInt(st.nextToken());

        map = new int[N][M];
        visited = new boolean[N][M];

        for(int i = 0; i < N; i++){
            st = new StringTokenizer(br.readLine());
            for(int j = 0; j < M; j++){
                map[i][j] = Integer.parseInt(st.nextToken());
            }
        }

        dfs(0,0);

        System.out.println(CNT);
    }

    public static void dfs(int x, int y){
        visited[x][y]  = true;

        if(x == N-1 && y == M-1){
            CNT++;
            return;
        }

        for(int i = 0; i < 4; i++){
            int nx = x + dx[i];
            int ny = y + dy[i];

            if(nx >= 0 && ny >= 0 && nx < N && ny < M && !visited[nx][ny]){
                if(map[nx][ny] < map[x][y]){
                    visited[nx][ny] = true;
                    dfs(nx, ny);
                    visited[nx][ny] = false;
                }
            }
        }
    }
}

위의 코드가 초기의 코드였는데 아무래도 시간 초과가 날 수밖에 없겠다, 싶어서 가지치기까지 모두 섞어 작성해 봤지만, 여전히 시간 초과가 발생했다.

조금 더 고민하다 든 생각이 하나 있었는데,

이럴 때 쓰라고 만든 게 Dynamic Programming 기법이다.

저번주 내내 DP 문제만 풀었더니 완전 탐색 코드의 감을 잃을까 봐 고른 문제였는데 결국 얘도 DP로 해결했다.

최종 코드

import java.io.*;
import java.util.*;

public class Main {
    static int N, M;
    static int[] dx = {0, 0, 1, -1};
    static int[] dy = {1, -1, 0, 0};
    static int[][] map, dp;
    static boolean[][] visited;

    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

        StringTokenizer st = new StringTokenizer(br.readLine());

        N = Integer.parseInt(st.nextToken());
        M = Integer.parseInt(st.nextToken());

        map = new int[N][M];
        dp = new int[N + 1][M + 1];
        visited = new boolean[N][M];

        for (int i = 0; i < N; i++) {
            st = new StringTokenizer(br.readLine());
            for (int j = 0; j < M; j++) {
                map[i][j] = Integer.parseInt(st.nextToken());
            }
        }

        dp[N - 1][M - 1] = 1;

        System.out.println(dfs(0, 0));
    }

    public static int dfs(int x, int y) {

        if (visited[x][y]) return dp[x][y];

        visited[x][y] = true;

        for (int i = 0; i < 4; i++) {
            int nx = x + dx[i];
            int ny = y + dy[i];

            if (nx >= 0 && ny >= 0 && nx < N && ny < M && map[nx][ny] < map[x][y])
                dp[x][y] += dfs(nx, ny);
        }

        return dp[x][y];
    }
}

이러나 저러나 핵심 아이디어는 아래와 같다.

• 한 번 방문한 곳은 다시 방문하지 않기

• 최종 목적지의 DP 값은 미리 1로 설정하여 최종 목적지에 도착했을 시 경우의 수를 +1로 만들기

시간 초과를 없애기 위해 한 번 구한 경우의 수는 저장했다 꺼내 쓰는 방식으로 바꿔야 했고, 매번 dfs가 실행될 때마다 x, y가 최종 목적지와 일치하는지 확인하는게 번거로워 미리 dp[N-1][M-1]에 1을 설정했다.

여섯 번의 시도만에 성공했다.

또, DP로 바꾸고 나서도 계속 시간 초과가 났었다. DP를 쓰는데 시간 초과가 난다면 내가 코드를 아주 단단히 잘못 적고 있구나 싶어서 평소에 쓰던 DFS랑 구조를 좀 다르게 바꿨다.

원래는 DFS에 들어오자마자 visited 배열을 true로 할당하는데, 이건 DP를 활용한 DFS이므로 탐색을 시작하기 전에 방문 여부를 먼저 확인한다.

만약 visited가 true라면, 얘는 이미 본인 위치에서 목적지까지 가는 경우의 수가 구해져 있는 거라 DP 값을 가지고 있을 수밖에 없다. 그래서 바로 dp[x][y]를 리턴해준다.

for문 안에서 탐색하는 코드는 별반 다를 게 없는데, 하나 다른 거라면 dfs 값을 dp에 할당해주는 것 정도다.

내 코드에서 dp[x][y]가 뜻하는 건 x행 y열에서 목적지까지 갈 수 있는 경우의 수다.

알고리즘 흐름도는 아래와 같다!

결론

매번 만만한 골드 4, 5 문제만 찾아 풀다가 이대로는 성장할 수 없으니 오랜만에 골드 3 문제를 풀어봤다.

요즈음 들어 느끼는 건데, 작년부터 꾸준히 코테를 풀었던 효과가 슬슬 나타나는 것 같다. 코테를 처음 시작할 때만 해도 어떤 알고리즘을 써야 할지 모르고, 실버 문제도 어려워서 끙끙댔는데..이제는 골드 문제도 나름 할만 한 것 같다.

앞으로도 지금처럼 쭉 성장할 수 있었으면 한다.

BLE 통신을 한 번도 접해본 적이 없었기에 당연히 상황을 설명드린 후, 앱 개발을 거절했는데 이대로는 할 줄 아는 게 정말 UI 개발밖에 없는 사람이 될 것 같아 차근차근 범위를 넓혀 보기로 했다.

시작은 처음이니만큼 블루투스 스캔 기능을 구현하기로 했다.

우선 블루투스 기능을 사용하기 위해서는 AndroidManifest.xml 파일에 퍼미션을 추가해야 한다.

<uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
<uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-feature android:name="android.hardware.bluetooth_le" android:required="true"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

다른 분들은 이렇게까지 많이 안 하시는 것 같던데, 나는 자꾸 오류가 나서 그냥 관련된 건 다 추가해줬다.

위의 코드는 Manifest 태그 안, Application 태그 밖에 넣어주면 된다.

퍼미션을 추가했으니 이제 유저가 해당 정보 사용을 허락했는지 안 했는지 확인해야 한다.

이 작업은 MainActivity.kt 파일에 추가해주면 된다.

class MainActivity : ComponentActivity() {

    val scanViewModel by viewModels<ScanViewModel>()

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

        setContent {
            BLE_PracticeTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val navController = rememberNavController()
                    NavHost(navController = navController, startDestination = "ScanScreen") {
                        composable(route = "ScanScreen") { ScanScreen(
                            scanViewModel
                        ) }
//                        composable(route = "ConnectScreen") { ConnectScreen() }
                    }
                }
            }
        }

        if(Build.VERSION.SDK_INT >= 31){
            if(permissionArray.all{ ContextCompat.checkSelfPermission(this, it) == PackageManager.PERMISSION_GRANTED}){
                Toast.makeText(this, "권한 확인", Toast.LENGTH_SHORT).show()
            }
            else{
                requestPermissionLauncher.launch(permissionArray)
            }
        }
    }

    private val requestPermissionLauncher = registerForActivityResult(
        ActivityResultContracts.RequestMultiplePermissions()
    ) { permissions ->
        permissions.entries.forEach {
            Log.d("DEBUG", "${it.key} = ${it.value}")
        }
    }
}

위의 코드를 복사해서 MainActivity에 넣으면 아마 오류가 날 거다.

permissionArray가 없어서 그런데, 그건 Util에 따로 빼뒀다.

PermissionArray.kt

val permissionArray = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    arrayOf(
        Manifest.permission.BLUETOOTH_SCAN,
        Manifest.permission.BLUETOOTH_CONNECT,
        Manifest.permission.ACCESS_COARSE_LOCATION,
        Manifest.permission.ACCESS_FINE_LOCATION
    )
} else {
    arrayOf(
        Manifest.permission.ACCESS_COARSE_LOCATION,
        Manifest.permission.ACCESS_FINE_LOCATION
    )
}

이전 코드에서 여기저기 많이 쓰였어서 유틸리티로 빼뒀는데, 굳이 그러고 싶지 않다면 메인 액티비티에 추가하면 된다.

이제 뷰를 보자.

ScanScreen.kt

@Composable
fun ScanScreen(scanViewModel: ScanViewModel = viewModel()) {
    val devices by scanViewModel.devices.observeAsState(initial = listOf())
    val isScanning by scanViewModel.isScanning.observeAsState(initial = false)

    Column {
        Button(onClick = {
            if (isScanning) {
                scanViewModel.stopScan()
            } else {
                scanViewModel.startScan()
            }
        }) {
            Text(if (isScanning) "Stop Scan" else "Start Scan")
        }

        LazyColumn {
            items(devices) { device ->
                ScanItem(device)
            }
        }
    }
}

@SuppressLint("MissingPermission")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScanItem(
    deviceData: BluetoothDevice
) {
    var expanded by remember { mutableStateOf(false) }
    val deviceName = deviceData.name ?: "Unknown Device"

    Card(
        colors = CardDefaults.cardColors(
            containerColor = Color(0xFF569097)
        ),
        modifier = Modifier.padding(vertical = 4.dp),
        onClick = {
        }
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(3.dp)
                .padding(start = 2.dp)
        ) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = deviceName)

                if (expanded) {
                    Spacer(modifier = Modifier.height(4.dp))
                    Text(text = "UUID\n>> ${deviceData.uuids}")
                    Spacer(modifier = Modifier.height(2.dp))
                    Text(text = "Address\n>> ${deviceData.address}")
                }
            }

            IconButton(onClick = { expanded = !expanded }) {
                Icon(
                    imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
                    contentDescription = ""
                )
            }
        }
    }
}

뷰는 딱히 설명할 만한 부분이 없는 것 같은데, 우선 ScanScreen은 두 가지 컴포넌트로 구성된다. 스캔을 시작하고 멈출 Button과 블루투스 디바이스들을 보여줄 LazyColumn.

LazyColumn 안에는 스캔된 디바이스의 개수만큼 ScanItem이 생성된다.

ScanItem은 디바이스의 이름이 뜨고, 카드를 확장하면 그 안에 블루투스 기기의 UUID와 address가 보이게 된다.

이제 뷰모델 코드만 작성하면 코드 작성이 완료된다.

ScanViewModel.kt

@Suppress("DEPRECATION")
class ScanViewModel(application: Application) : AndroidViewModel(application) {

    // 블루투스 기능을 위한 블루투스 어댑터
    private val bluetoothAdapter: BluetoothAdapter? = BluetoothAdapter.getDefaultAdapter()

    // 블루투스 기기 목록
    private val _devices = MutableLiveData<List<BluetoothDevice>>()
    val devices: LiveData<List<BluetoothDevice>> = _devices

    // 스캔 여부를 저장할 변수
    private val _isScanning = MutableLiveData<Boolean>()
    val isScanning: LiveData<Boolean> = _isScanning

    // 기기가 스캔이 되면 addDevice() 실행
    private val scanCallback = object : ScanCallback() {
        override fun onScanResult(callbackType: Int, result: ScanResult?) {
            super.onScanResult(callbackType, result)
            result?.device?.let { device ->
                addDevice(device)
            }
        }
    }

    // 스캔 시작 함수
    @SuppressLint("MissingPermission")
    fun startScan() {
        _isScanning.value = true
        bluetoothAdapter?.bluetoothLeScanner?.startScan(scanCallback)
    }

    // 스캔 정지 함수
    @SuppressLint("MissingPermission")
    fun stopScan() {
        _isScanning.value = false
        bluetoothAdapter?.bluetoothLeScanner?.stopScan(scanCallback)
    }

    // 기기를 _devices 변수에 추가
    private fun addDevice(device: BluetoothDevice) {
        val newList = _devices.value?.toMutableList() ?: mutableListOf()
        if (newList.none { it.address == device.address }) {
            newList.add(device)
            _devices.value = newList
        }
    }

    // 블루투스 스캔 중일 때 뷰모델 소멸 시 스캔 정지
    override fun onCleared() {
        super.onCleared()
        if (_isScanning.value == true) {
            stopScan()
        }
    }
}

이렇게 작성하고 나면

사진처럼 디바이스 목록이 뜨게 된다.

왜인지 모르게 이름이 null인 디바이스가 참 많이 발견됐더라.. 내 문제인지 모르겠어서 우선은 좀 더 공부해 봐야 할 것 같다.

아직은 BLE 통신의 초입에 들어온 거라 어떻게 활용할 수 있을지 감이 잘 안 온다.

다음은 블루투스 connect와 관련하여 포스팅을 해보겠다.

문제는 아래 링크를 통해 확인해 주시면 될 것 같다.

표현 가능한 이진 트리

문제를 보고, 아 이건 이진 검색을 쓰면 되겠다 싶었다.

왼쪽 노드와 오른쪽 노드를 모두 검색해야 했기에 이진 검색 + 분할 정복 알고리즘을 사용하여 문제를 풀었다.

코드는 보고 싶지 않고 힌트만을 얻고 싶은 분들을 위해 설명부터 작성하겠다.

풀이 흐름

1. 10진수를 2진수 문자열로 변경
2. 만약 이진수가 모두 1일 경우는 1, 이진수가 0일 경우는 0을 result에 바로 삽입
3. 위의 조건이 아닌 경우 makeTree 함수를 만들어 완전이진트리가 될 때까지 이진수 앞에 0 추가
   • 현재 이진수의 길이보다 첫 번째로 큰 길이가 될 때까지 추가

• 예를 들어 이진수가 11인 경우 완전이진트리로 만들려면 길이가 3이 되어야 하므로, 앞에 0 하나를 더 붙여 011로 만듦
  4. isUnavailable 함수를 만들어 이진트리가 될 수 없으면 true, 될 수 있다면 false 출력
  • 이진 검색 알고리즘을 통해 root를 기준으로 양쪽을 검사
  • 분할 정복으로 모든 노드를 검사
  • 재귀 사용
  • 만약 루트가 0인데 양쪽 노드 중 하나라도 1이 있으면 이진트리가 될 수 없음
  5. true/false에 따라 result에 값 삽입

위와 같은 흐름으로 진행됐다.

처음 풀 때 놓쳤던 부분이 두 가지 있다.

1. 완전이진트리가 될 때까지 앞에 0을 추가해줘야 하는 점
2. 단말노드가 아니고, 루트가 될 수 있는 노드 중 값이 0인 게 있다고 무조건 실패가 아닌 점

1번을 보완하기 위해 makeTree 함수를 만들었고, 2번을 보완하기 위해 isUnavailable 함수 중간에 조건문을 하나 추가했다.

주석으로도 달아놨지만, 2번은 입력 값이 8일 때 이진법 1000으로 표현되는데 완전이진트리로 변경 후 왼쪽과 오른쪽 노드를 살펴보면 루트가 0이라 무조건 true가 반환 됐었다. 양쪽 부분 트리의 루트가 0이지만, 나머지도 모두 더미 노드이기 때문에 완전이진트리가 될 수 있기에 false가 출력됐어야 했다.

코드는 아래와 같다.

import java.io.*;
import java.util.*;

class Solution {
    static int[] result;

    public static int[] solution(long[] numbers) {

        result = new int[numbers.length];

        for (int i = 0; i < numbers.length; i++) {
            StringBuilder sb = new StringBuilder();
            // 2진수 변환
            String binaryValue = Long.toBinaryString(numbers[i]);

            // 이진수가 모두 1로 구성되어 있다면 이진트리 가능
            if (!binaryValue.contains("0")) {
                result[i] = 1;
                continue;
            }
            // 만약 이진수 값이 0이라면 될 수 없으므로 바로 0 삽입
            if (binaryValue.length() == 1) {
                if (numbers[i] == 0) result[i] = 0;
                continue;
            } else{
                // 위의 조건이 모두 아닐 경우 완전이진트리로 만듦
                binaryValue = makeTree(binaryValue);
            }
            sb.append(binaryValue);

            binaryValue = sb.toString();

            // 완전이진트리로 만들 수 있는지 없는지 판별
            result[i] = isUnavailable(binaryValue, 0, binaryValue.length() - 1) ? 0 : 1;
        }

        return result;
    }

    public static boolean isUnavailable(String binaryValue, int start, int end) {
        // 이진 검색을 끝냈다면 false 반환, 만들 수 있음
        if (start > end || start == end) {
            return false;
        }

        // 루트 설정
        int root = (start + end) / 2;

        // 루트가 0인 경우
        if (binaryValue.charAt(root) == '0') {
            // start부터 end까지 1이 하나라도 있다면 완전이진트리 불가
            // 예를 들어, 입력값이 8인 경우 0001000로 표현됨
            // 0001000은 완전이진트리지만, 왼쪽과 오른쪽의 노드가 모두 0
            // 이런 경우를 방지하기 위한 for문
            for(int i = start; i <= end; i++) {
                if(binaryValue.charAt(i) == '1') return true;
            }
            // 모두 0이라면 false
            return false;
        }

        // 루트 기준 왼쪽 노드 이진 검색
        boolean left = isUnavailable(binaryValue, start, root - 1);

        // 루트 기준 오른쪽 노드 이진 검색
        boolean right = isUnavailable(binaryValue, root + 1, end);

        // 하나라도 true라면 true 반환
        return left || right;
    }

    public static String makeTree(String value){
        int treeLength = 1;
        // 완전이진트리의 길이 공식
        while(value.length() > treeLength){
            treeLength = treeLength * 2 + 1;
        }

        // 완전이진트리 길이 - 이진수의 길이
        int zeroLength = treeLength - value.length();
        StringBuilder sb = new StringBuilder();
        // 빼준 길이만큼 앞에 0 추가
        sb.append("0".repeat(zeroLength));
        return sb.append(value).toString();
    }
}

뭔가 조건을 제대로 생각하지 못한 것 같아서 다음에 풀 때는 조금 더 꼼꼼히 생각해 봐야 할 것 같다.

지난주에 무작정 사람들의 글을 따라하며 Oauth2 로그인을 구현한 프로젝트를 만들었는데 Android와 연동을 하려니 이것저것 오류가 나는 게 많아 아직은 포스팅일 미뤄두고 있다.

무작정 따라하다 보니 이해도 안 되고, 필터 체인의 각 요소가 뭔지도 모르겠어서 우선 천천히 기초부터 시작하기로 했다.

Security를 적용할 프로젝트 준비

우선 시큐리티를 사용할 프로젝트를 만들어 줬다.

나는 java, gradle, jdk 17로 준비했고 추가한 의존성은 아래와 같다

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'
    compileOnly 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testImplementation 'org.springframework.security:spring-security-test'
}

스프링부트를 처음 하시는 분이 시큐리티 포스팅을 읽을 것 같지는 않지만, 혹시 스프링부트 프로젝트를 어떻게 만들지 모르시는 분들이 계시다면 해당 링크에서 손쉽게 만들 수 있으니 참고하시길 바란다.

이렇게 작성하고 나면 시큐리티를 사용할 준비가 다 됐다.

Security 코드

우선 java 코드를 작성하기 전에, 기능이 잘 작동하는지 확인할 html 파일을 작성한다.

src/main/resources/templates 이 경로에 hello.html 파일과, home.html, login.html 파일을 만들어 준다.

위의 폴더 구조를 따르면 된다.

home.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<meta charset="UTF-8">
<head>
    <title>Spring Security Example</title>
</head>
<body>
<h1>Welcome!</h1>

<p><a th:href="@{/hello}">로그인</a>하러 가기</p>
</body>
</html>

이 화면은 위 사진처럼 간단한 헤더와, 로그인 버튼으로 구성되어 있다.

여기서 로그인을 누르면 이동하는 화면이

login.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Spring Security Example </title>
</head>
<body>
<div th:if="${param.error}">
    Invalid username and password.
</div>
<div th:if="${param.logout}">
    You have been logged out.
</div>
<form th:action="@{/login}" method="post">
    <div><label> User Name : <input type="text" name="username"/> </label></div>
    <div><label> Password: <input type="password" name="password"/> </label></div>
    <div><input type="submit" value="Sign In"/></div>
</form>
</body>
</html>

이 로그인 화면이다.

위 사진처럼 나오면 성공!

마지막으로 hello.html 파일을 생성해주면 완성이다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <title>Hello World!</title>
</head>
<body>
<!-- 현재 인증된 사용자의 이름을 표시 -->
<h1>Hello, <span sec:authentication="name"></span>!</h1>
<form th:action="@{/logout}" method="post">
    <input type="submit" value="Sign Out"/>
</form>
</body>
</html>

마지막에 유저 이름과 로그아웃 버튼을 만들어준 화면이다.

이제 본격적으로 security를 사용할 java 파일을 만들어 보자.

MvcConfig.java

이 파일은, 어플리케이션에서 뷰를 연결해주기 위한 파일이다.

@Configuration
public class MvcConfig implements WebMvcConfigurer {

    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/home").setViewName("home");
        registry.addViewController("/").setViewName("home");
        registry.addViewController("/hello").setViewName("hello");
        registry.addViewController("/login").setViewName("login");
    }
}

우리가 만들어둔 html 파일들을 매핑해 준 것인데, 간략히 설명을 해보자면 아래와 같다.

registry.addViewController("/home").setViewName("home");

• /home 이라는 경로에 _home_이라는 이름의 뷰를 매핑
  • 즉, localhost:8080/home 으로 들어가면 home.html을 띄움

그리고 security를 사용하기 위해 여러가지 보안 필터를 걸어줘야 하는데, 그게 WebSecurityConfig.java 파일이다.

SecurityConfig 파일을 작성할 때, 정말 오류가 많았다.

WebSecurityConfigurerAdapter을 사용해서 작성하려 했더니 이제 지원되지 않아서 필터 체인을 사용해야 했고, 필터 체인을 썼더니 온통 빨간 줄이라 더 찾아보니까 각 내용들을 람다식으로 변경해야 했다.

그렇게 완성된 오류 없는 버전이 아래의 코드.

WebSecurityConfig.java

@Configuration
@EnableWebSecurity
@EnableMethodSecurity
public class WebSecurityConfig{
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                //crsf 보안을 꺼둠
                .csrf(AbstractHttpConfigurer::disable)
                //cors 보안을 꺼둠
                .cors(AbstractHttpConfigurer::disable)
                // restAPI 요청이 있을 시 해당 인가에 대한 필터링
                .authorizeHttpRequests(request -> request
                        // 요청이 "/"이나 "/home"이면 로그인 없이 허용
                        .requestMatchers("/", "/home").permitAll()
                        // 그 외는 어떠한 요청이라도 인가 필요
                        .anyRequest().authenticated()
                )

                .formLogin(login -> login
                                // 로그인은 /login 페이지로 매핑
                                .loginPage("/login")
                                .permitAll()
                )
                .logout(LogoutConfigurer::permitAll);

        return http.build();
    }

    @Bean
    public UserDetailsService userDetailsService() {
        // 유저 이름을 "user", 비밀번호를 "password"로 설정
        // 실제로는 BCryptPasswordEncoder를 사용해서 비밀번호를 암호화
        //  - BCryptPasswordEncoder는 암호화할 때마다 다른 결과를 반환
        UserDetails user = User.withDefaultPasswordEncoder()
                .username("user")
                .password("password")
                .roles("USER")
                .build();

        return new InMemoryUserDetailsManager(user);
    }
}

나처럼 처음 SecurityFilterChain을 접하신 분들이 대체 무슨 내용인지 잘 이해가 가지 않을 것 같아서, 최대한 설명하기 위해 줄마다 주석을 달아봤다.

그래도 뭐가 뭔지 모르겠다 싶으면 아래의 설명을 참고해 주시면 된다.

• crsf: 사이트 간 위조 요청 방지에 관한 필터링

• cors: 허용한 브라우저에서만 리소스 접근 가능
• authorizeHttpRequests: http 요청 시 인가 여부 필터링
• requestMatchers("주소"): "주소"로 오는 요청 관련 인가 필터링
  • permitAll(): 특별한 인증 없이 모두 허용
  • anyRequest: 모든 요청에 대한 인가 여부 필터링
  • authenticated: 무조건 인증 필요
  • formLogin: Spring Security에서 제공하는 폼 기반 로그인 사용
  • loginPage("/login"): /login으로 매핑된 html을 로그인 화면으로 설정
  • logout: 로그아웃 관련 필터링

이 정도로 정리할 수 있을 것 같다.

이렇게 보안 규칙과 유저 정보를 모두 설정해주면 끝이 난다.

localhost:8080으로 들어가면 설정해둔 html 파일이 보이며 제대로 프로젝트가 작동된다.

또 열심히 Security 관련 공부를 하고 다음 포스팅을 이어가겠다.

문제 설명

• N x M 크기의 미로가 존재한다.

• 미로 안에서 움직일 수 있는 방향은 상하좌우 뿐이다.
• 제한사항
  • 미로의 벽 바깥으로는 움직이지 못 한다.
  • 시작점에서 탈출 지점까지 K만큼 움직여야 하며, 왔던 경로를 재방문 할 수 있다.
  • 탈출한 경로를 u(상), d(하), l(좌), r(우)로 나타냈을 때 사전 순으로 가장 빠른 경로로 탈출해야 한다.

풀이 과정

문제를 보자마자 아 이건 완전 탐색이다 싶었다.

갈 수 있는 경로를 모두 체크해서 그 중 사전 순으로 가장 빠른 경로를 출력하면 된다고 생각해 DFS 알고리즘을 사용해 풀었었다.

import java.io.*;
import java.util.ArrayList;
import java.util.Collections;

class Solution {
    static Character[] location = {'l', 'u', 'r', 'd'};

    static char[][] campus;

    static String result = "impossible";
    static ArrayList<String> resultList = new ArrayList<>();
    static int[] dy = {-1, 0, 1, 0};
    static int[] dx = {0, -1, 0, 1};

    static int N, M, X, Y, R, C, K;


    public static String solution(int n, int m, int x, int y, int r, int c, int k) {

        campus = new char[n][m];
        N = n;
        M = m;
        Y = y - 1;
        X = x - 1;
        R = r - 1;
        C = c - 1;
        K = k;

        if (y == c && x == r) return "";

        dfs(X, Y, 0, "");

        // resultList가 비어있다면 impossible 출력
        if (resultList.isEmpty()) {
            return result;
        }
        // resultList를 사전 순으로 정렬 후 첫 번째 경로 출력
        else {
            Collections.sort(resultList);
            return resultList.get(0);
        }
    }

    public static void dfs(int x, int y, int cnt, String str) {

        // 남은 경로로 이동할 수 없으면 그냥 return
        int remainMoves = K - cnt;
        int distanceToGoal = Math.abs(R - x) + Math.abs(C - y);
        if (remainMoves < distanceToGoal) return;

        // K번 이동했을 때 위치가 (R, C)면 resultList에 경로 추가
        if (cnt == K) {
            if (x == R && y == C) {
                resultList.add(str);
            }
            return;
        }

        // 경로 탐색
        for (int i = 0; i < 4; i++) {
            int fx = x + dx[i];
            int fy = y + dy[i];

            if (fy < 0 || fx < 0 || fx >= N || fy >= M) continue;

            dfs(fx, fy, cnt + 1, str + location[i]);
        }
    }
}

이렇게 resultList를 만들어 경로를 모두 찾아준 후, Collections.sort로 사전 순 정렬을 해줬는데 결과는 대참패였다.

아마 7문제 빼고 전부 시간 초과나 메모리 초과였던 것 같다.

이대로는 시간복잡도가 너무 크고 불필요한 경로까지 모두 찾아야 한다는 생각에 List 형태로 저장하지 않고, 애초에 사전 순으로 빠른 경로부터 찾도록 변경해야 한다는 생각이 들었고 그게 아래의 코드다.

import java.io.*;
import java.util.ArrayList;
import java.util.Collections;

class Solution {
    // 경로를 찾을 때 움직이는 순서 변경
    static Character[] location = {'d', 'l', 'r', 'u'};
    static char[][] campus;
    static String result = "impossible";
    static int[] dy = {0, -1, 1, 0};
    static int[] dx = {1, 0, 0, -1};
    static int N, M, X, Y, R, C, K;


    public static String solution(int n, int m, int x, int y, int r, int c, int k) {

        campus = new char[n][m];
        N = n;
        M = m;
        Y = y - 1;
        X = x - 1;
        R = r - 1;
        C = c - 1;
        K = k;

        if (y == c && x == r) return "";

        // 가지치기 - 애초에 갈 수 없는 경우
        if (!isAvailable(X, Y, 0)) return result;

        dfs(X, Y, 0, "");

        return result;
    }

    // 목적지까지 갈 수 있는지 없는지 판별하는 함수
    public static boolean isAvailable(int x, int y, int cnt) {
        int remainMoves = K - cnt;
        int distanceToGoal = Math.abs(R - x) + Math.abs(C - y);

        return remainMoves >= distanceToGoal && ((remainMoves - distanceToGoal) % 2 == 0);
    }

    public static boolean dfs(int x, int y, int cnt, String str) {

        // 남은 횟수 안에 갈 수 없으면 바로 false 반환
        if(!isAvailable(x, y, cnt)) return false;

        // K만큼 이동하여 현재 위치가 (R, C)인가?
        if (cnt == K) {
            // 맞으면 result를 str로 변경 후 true 반환
            if (x == R && y == C) {
                result = str;
                return true;
            }
            // 아닌 경우 false 반환
            return false;
        }

        for (int i = 0; i < 4; i++) {
            int fx = x + dx[i];
            int fy = y + dy[i];

            if (fy < 0 || fx < 0 || fx >= N || fy >= M) continue;
            // 더 움직였을 때 도착 가능하면 true 반환
            if (dfs(fx, fy, cnt + 1, str + location[i])) {
                return true;
            }
        }

        // 기본적으로 false 반환
        return false;
    }
}

변경사항은 아래와 같다.

1. 움직이는 순서를 사전 순으로 설정
   • l -> u -> r -> d 순에서 d -> l -> r -> u로 변경
2. 애초에 탈출이 불가능한 경우는 solution 함수 내에서 가지치기
   • isAvailable 함수를 생성하여 true - false 반환
3. 경로 탐색 시작 시 남은 횟수 안에 갈 수 없다면 더이상 경로를 찾지 않고 false 반환
4. 리스트로 경로를 모두 저장하지 않고 찾은 경로를 바로 result에 삽입

위와 같은 변경을 거치고 나니, 통과됐다.

뭔가 2023 카카오 공채 코테는 전체적으로 어떻게 풀어야 할지는 알겠지만 이런저런 조건을 생각하는 곳에서 많이 삐끗했던 것 같다. 그래도 점점 문제를 봤을 때 풀기 위해 코드를 구성하는 능력이 길러지고 있는 것 같다.

다음엔 2023 카카오 공채 코테 중 다른 lv.3 문제들을 가지고 오겠다.

DI

DI는 Dependency Injection의 약자로 의존성 주입을 뜻한다. 특정 한 객체가 다른 객체를 필요로 할 때 이 의존성을 제공하는 기술이 DI다.

객체가 다른 객체를 필요로 하면 외부에서 해당하는 객체를 생성하여 필요한 객체에 넘겨주게 된다.

DI는 아래와 같은 장점이 있다.

1. 코드 재사용성 향상
   • 결합도 감소
2. 테스트 용이성
   • 의존성을 가짜 객체나 Mock 객체로 대체하여 테스트 수행 가능
3. 코드의 유연성 및 확장성, 가독성 향상
   • 새로운 기능을 추가하거나, 기능을 수정할 때 미치는 영향 감소
4. 의존성 추적 용이성
   • 클래스가 사용하는 종속성의 명확한 파악 가능

Android Developers에 있는 공식 코드를 활용해 이야기를 해 보겠다.

두 개의 코드가 있는데, 둘의 차이점은 무엇일까?

첫 번째 코드

class Car {

    // 여기
    private val engine = Engine()

    fun start() {
        engine.start()
    }
}

fun main(args: Array) {
    val car = Car()
    car.start()
}

두 번째 코드

class Car(private val engine: Engine) {
    fun start() {
        engine.start()
    }
}

fun main(args: Array) {
    val engine = Engine()
    val car = Car(engine)
    car.start()
}

얼핏 보기에는 비슷해 보이지만 위의 코드는 DI를 사용하지 않은 코드고, 두 번째 코드는 DI를 사용해 의존성을 주입한 예제 코드다.

첫 번째 코드의 주석 부분을 보면 Car 클래스가 자체적으로 Engine을 생성해 사용하고 있다. 이 코드는 둘 간의 의존성이 높아 결합도가 높아지고, Car 클래스가 Engine을 직접 인스턴스화 해서 Engine의 서브 클래스들을 사용할 수 없다.

반면 두 번째 코드는 Main 코드에서 Engine 인스턴스를 생성해 Car 클래스에 파라미터로 넘겨주고 있다. 그렇기에 Car 클래스의 재사용성이 높아지고, Engine의 구현이 수정돼도 Car 클래스에는 영향을 미치지 않는다.

안드로이드에서 의존성을 주입해 주는 방법은 두 가지가 있다.

• 생성자 삽입 (Constructor Injection)

• 필드 삽입 (Field Injection)

생성자 삽입

생성자 삽입은 위의 두 번째 코드에서 설명한 방법이다.

클래스의 종속 항목을 생성자에 전달한다. 코드는 앞서 말했으므로 생략하고 넘어가겠다.

필드 삽입

Activity, Fragment 등 특정 안드로이드 프레임워크 클래스에서는 생성자 삽입이 불가한 경우가 있다. 이럴 때 필드 삽입을 통해 클래스가 생성된 후 종속 항목을 인스턴스화 해주는 방법이 있다.

class Car {
    lateinit var engine: Engine

    fun start() {
        engine.start()
    }
}

fun main(args: Array) {
    val car = Car()
    car.engine = Engine()
    car.start()
}

위처럼 Car 클래스를 먼저 생성해주고, 그 후에 Engine을 인스턴스화 해주면 된다.

여기서 연계해서 설명할 개념이 하나 생긴다.

바로 Hilt다.

Hilt

Hilt란 Dagger를 기반으로 의존성을 주입하고, 수명 주기를 자동으로 관리하기 위한 안드로이드의 DI 라이브러리다.

라이브러리인만큼 build.gradle 파일에 플러그인을 추가해 줘야 한다. 또한, Java 8 기능을 사용하므로 프로젝트 내에서 Java 8을 사용하고자 한다면 아래와 같은 코드를 app/build.gradle에 추가해야 한다.

android {
  ...
  compileOptions {
    sourceCompatibility = JavaVersion.VERSION_1_8
    targetCompatibility = JavaVersion.VERSION_1_8
  }
}

Hilt는 아래와 같은 특징이 있다.

1. AndroidX와 통합
   • 안드로이드 앱의 생명주기와 관련된 의존성 주입 지원
2. 안드로이드 컴포넌트와 자동 통합
   • Application, Activity, Fragment, ViewModel과 자동으로 통합
3. Daager의 간소화
   • Dagger의 복잡성을 간소화 하고 Dagger 컴포넌트 및 모듈의 생성, 관리를 자동화
4. 코드 간소화 및 테스트 용이성
   • DI 관련 코드를 간소화 하고, 테스트에서 필요한 의존성을 쉽게 대체 가능

이 Hilt를 사용하기 위해서는, @HiltAndroidApp 어노테이션을 사용해야 한다.

@HiltAndroidApp
class MainApplication : Application() { ... }

매니페스트에도 아래와 같이 추가해야 한다.

 <application android:name=".ExampleApplication"

Hilt로 의존성을 주입하고 나면, @Injection 어노테이션을 사용하여 가져올 수 있다.

@AndroidEntryPoint
class ExampleActivity : AppCompatActivity() {

  @Inject lateinit var analytics: AnalyticsAdapter
  ...
}

@Binds 어노테이션도 있다.

@Binds 어노테이션은 인터페이스에 대해 종속성을 삽입할 때 사용하는 어노테이션이다.

예를 들어 한 인터페이스를 두 개의 레포지토리가 상속받는 경우, Hilt는 어느 레포지토리를 선택해야 할지 혼란을 겪게 된다. 이럴 때 @Binds로 상속받은 인터페이스를 구분지을 수 있게 된다.

@Module
@InstallIn(ApplicationComponent.class)
public abstract class MyModule {

    @Binds
    @Singleton
    abstract MyInterface bindMyInterface(MyImplementation myImplementation);

}

또한, @Provides 어노테이션으로 인스턴스를 삽입할 수도 있다.

@Provides 어노테이션은 Room이나 Retrofit 등의 외부 라이브러리에서 제공되는 클래스라 프로젝트 내에서 소유할 수 없는 경우나 Builder 패턴을 사용하여 인스턴스를 생성할 경우 주로 사용된다.

아래와 같은 규칙을 따라야 한다.

• return 유형은 함수가 어떤 유형의 인스턴스를 제공하는지 Hilt에 알림

• 파라미터는 해당 유형의 종속 항목을 Hilt에 알림
• 함수 본문은 해당 유형의 인스턴스를 제공하는 방법을 Hilt에 알림
  • Hilt는 해당 유형의 인스턴스를 제공해야 할 때마다 함수 본문을 실행

@Module
@InstallIn(ApplicationComponent.class)
public class ExternalLibraryModule {

    @Provides
    @Singleton
    ExternalLibraryClass provideExternalLibraryClass() {
        return new ExternalLibraryClass();
    }

}

@Binds와 @Provides 모두 Dagger 모듈 내에 정의된다.

오늘은 이렇게 안드로이드의 DI와 Hilt에 대해서 알아보았는데, 사실 아직 Hilt를 제대로 사용할 수 있다고 말하진 못할 것 같다.

Hilt를 사용해서 직접 프로젝트를 만들어서 의존성을 주입해 볼 생각이라, 추후 간단하게 코드를 작성하고 다시 포스팅을 하도록 하겠다.

내가 푼 문제들을 작성해보면 좋을 것 같아서, 이번 주 과제 중 하나인 백준 암호 해독 문제를 가져왔다.

문제에서는 평서문을 암호문으로 만들 수 있는 조건을 알려준다. 입력 값으로 암호 해독 키와 암호문을 주면, 이걸 평서문으로 바꿔서 출력하면 되는 문제다.

이 문제를 풀기 위해 역으로 암호문을 평서문으로 만들기 위한 과정을 생각했다.

1. 암호 해독 키를 알파벳 순으로 정렬한다.
2. 암호문의 길이를 암호 해독 키의 길이로 나눈 길이만큼의 부분 문자열을, 1열부터 마지막 열까지 차례대로 넣어준다.
   • 암호문의 길이는 언제나 암호 해독 키의 배수라는 조건이 존재
3. 정렬된 암호 해독 키를 원래의 형태로 만든다.
   • 이때, 중복된 문자가 존재하면 먼저 들어온 순서대로 생성
   • 부분 문자열을 담은 열(Column)의 순서도 알파벳 위치대로 변경
4. 완성된 행렬 테이블을 1행부터 마지막 행까지 순서대로 읽어준다.

크게 말하자면 위의 네 단계로 볼 수 있다.

맨 처음에 생각했던 방법은, 이차원 배열을 사용하는 방법이었다.

그러나 원래 코딩 테스트를 파이썬으로 공부하다가 언어를 자바로 바꾼 거라 자바를 완전히 활용하지 못하고, 이차원 배열을 활용한 로직이 잘 생각나지 않아서 해시맵을 활용하는 코드로 변경했다.

총 두 개의 해시맵을 사용했는데, 하나는 암호 해독 키의 문자와 문자가 들어온 순서를 기억하기 위한 <Integer - Character> 쌍의 해시맵이다. 즉, 암호 해독 키의 들어온 순서와 문자를 기억한다.

다른 해시맵은 문자가 들어온 순서와 부분 문자열을 저장하는 <Integer - String> 쌍의 해시맵이다. 두 번째 해시맵을 통해 정답을 출력한다.

원래는 부분 문자열을 저장할 때 <Character - String> 쌍의 해시맵을 하나 추가해 사용했었는데, Character를 사용하니 들어온 순서를 기억 못 하는 걸 생각 못 하고 제출했다가 틀렸었다.

코드에 사용한 알고리즘은 아래와 같다.

1. <Integer - Character> 해시맵에 들어온 순서와 글자 저장
2. 암호 해독 키의 글자를 알파벳 순으로 해시맵 정렬
   • Value 값으로 해시맵 정렬
3. List를 생성해 해시맵의 KeySet 저장
   • 그냥 해시맵을 사용하면 0부터 차례대로 저장되기 때문에, LinkedHashMap을 사용해 Value 값으로 정렬되어 뒤죽박죽인 Key의 순서 그대로 저장
4. <Integer - String> 해시맵에 해독 키의 문자가 들어왔던 순서와 부분 암호문 저장
   • 들어온 순서는 정렬되어 있지 않음
   • 부분 암호문의 길이 = 암호문의 길이 / 암호 해독 키의 길이
   • 암호문의 첫 번째 글자부터 순서대로 저장
5. <Integer - String> 해시맵의 Key 값들을 들어온 순서대로 정렬
6. 각 Value 값의 첫 번째 글자를 모두 출력 후 두 번째 글자, 세 번째 글자, ..., 마지막 글자 순서대로 출력
   • 하나의 Value 값을 한 번에 모두 출력하는 게 아님
   • 모든 Value의 첫 글자를 순서대로 출력 후, 그 다음엔 모든 Value의 두 번째 글자를 순서대로 출력하여 마지막 글자까지 출력하는 과정
   • Value 값이 'Spring', 'Python'이라면 출력은 SPpyrtihnogn

코드에 대 한 설명은 모두 끝났으니, 어디 보여주긴 부끄러운 코드지만 코드를 띄우고 마무리하겠다.

import java.io.*;
import java.util.*;

public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        String pw = br.readLine();
        String sentence = br.readLine();

        int len = sentence.length() / pw.length();

        HashMap<Integer, Character> sequence = new HashMap<>();

        for (int i = 0; i < pw.length(); i++) {
            sequence.put(i, pw.charAt(i));
        }

        List<Map.Entry<Integer, Character>> list = new ArrayList<>(sequence.entrySet());

        Collections.sort(list, new Comparator<Map.Entry<Integer, Character>>() {
            @Override
            public int compare(Map.Entry<Integer, Character> o1, Map.Entry<Integer, Character> o2) {
                return Character.compare(o1.getValue(), o2.getValue());
            }
        });

        LinkedHashMap<Integer, Character> sortedSequence = new LinkedHashMap<>();
        for (Map.Entry<Integer, Character> entry : list) {
            sortedSequence.put(entry.getKey(), entry.getValue());
        }

        List<Integer> keySets = new ArrayList<>(sortedSequence.keySet());

        HashMap<Integer, String> amo = new HashMap<>();



        int idx = 0;
        for(int i = 0; i < pw.length(); i++){
            int key = keySets.get(i);
            String subString = sentence.substring(idx * len, len * (idx + 1));

            amo.put(key, subString);
            idx++;
        }

        Collections.sort(keySets);


        int maxLength = amo.values().stream().mapToInt(String::length).max().orElse(0);

        for (int i = 0; i < maxLength; i++) {
            for (Integer key : amo.keySet()) {
                String value = amo.get(key);
                if (i < value.length()) {
                    bw.write(value.charAt(i));
                }
            }
        }

        br.close();
        bw.close();

    }
}

아마 개발을 하다가 한 번쯤은 들어보았을 것 같은데, MVVM이란 Model, View, ViewModel의 줄임으로 뷰가 특정 모델에 의존하지 않도록 하는 소프트웨어 디자인 패턴이다.

MVVM은 아래와 같은 장점을 가지고 있다.

• 관심사 분리
  • 각 컴포넌트가 각자의 역할에만 집중

• 유연한 UI 개발
• 테스트 용이성
• 유지보수 및 재사용 용이
• 데이터의 일관성 유지

MVVM은 모듈화와 분리가 목적인 패턴인만큼, UI 중심의 어플리케이션에서 유용하게 사용된다. UI와 비즈니스 로직이 독립적으로 존재하여 변경 사항의 빠른 적용과 테스트가 가능해진다.

코틀린에서는 위의 사진과 같은 앱 아키텍처를 권장하고 있다.

액티비티나 프래그먼트가 뷰모델에만 종속된 걸 볼 수 있는데, 각 구성요소가 한 수준 아래의 구성 요소에만 종속되어 있는 구조다.

그렇다면 본격적으로 Model, View, ViewModel에 대해 알아보기로 하자.

Model

Model은 어플리케이션의 데이터와 비즈니스 로직을 담당하는 요소다.

쉽게 말해 만약 우리가 User라는 데이터 클래스를 생성하게 된다면, 이게 MVVM의 Model이 되는 거다.

네트워크 요청이나 데이터베이스 접근, 데이터 가공 등의 작업을 수행할 수 있다.

data class User(
    val id: Int,
    val name: String
)

위의 코드가 Model의 코드다. 뷰와 뷰모델 관련한 정보는 아무것도 없도록 작성해야 한다.

View

그렇다면 View는 무엇일까?

View는 말 그대로 UI와 사용자의 입력을 처리하는 요소다. 사용자와 상호작용하고, 화면의 데이터를 표시하며 입력 등으로 인해 발생하는 이벤트를 ViewModel에 전달해야 한다.

View는 화면에 보여지기 위한 코드만 작성하도록 최소한의 로직을 가지고 있어야 한다.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.lifecycle.ViewModelProvider
import androidx.lifecycle.Observer
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private lateinit var viewModel: UserViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewModel = ViewModelProvider(this).get(UserViewModel::class.java)

        viewModel.user.observe(this, Observer { user ->
            displayUserInfo(user)
        })

        updateButton.setOnClickListener {
            val newUser = User(1, "Mi-fasol")
            viewModel.updateUser(newUser)
        }
    }

    private fun displayUserInfo(user: User) {
        userIdTextView.text = "Id: ${user.id}"
        userNameTextView.text = "Name: ${user.name}"
    }
}

이렇게 사용자 입력을 처리하고, 뷰모델의 로직을 가져와 쓰는 게 뷰다.

ViewModel

마지막으로 ViewModel은 View와 Model의 중간 매개체로, UI와 관련된 로직을 처리하는 요소다.

View에서 입력을 받은 값을 Model에 전달하고, Model의 데이터를 받아와 View에 전달한다. ViewModel에서는 View의 상태를 관리하고 비즈니스 로직을 처리해야 한다.

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class UserViewModel : ViewModel() {

    private val _user = MutableLiveData<User>()

    val user: LiveData<User>
        get() = _user

    fun updateUser(newUser: User) {
        _user.value = newUser
    }
}

아까 있던 View에서 LiveData를 활용하고 있기 때문에, 뷰모델의 _user 변수도 MutableLiveData로 생성해야 한다.

이렇게 하면, 이벤트가 발생할 때 즉각적으로 View에 반영해 줄 수 있다.

보이는 것처럼 User 입력 이벤트에 대한 처리만 담당하는 게 ViewModel이다.

오늘은 간단하게 MVVM에 대해서 알아봤다.

오늘 GDSC Android Study가 있는 날인데, 추가적으로 알게 되는 정보가 있으면 포스트를 수정하며 다시 개념을 잡아야겠다.

Controller와 Service, Component, Repository는 스프링을 사용하면서 가장 많이 사용하는 어노테이션이다. 코드를 작성하며 사용하기는 했지만, 어떻게 작동되고 어떤 기능을 하는지는 정확히 알지 못해서 공부할 겸 정리하고자 포스팅을 한다.

우선 설명에 앞서, 위의 네 가지를 어노테이션이라고 하는데 스프링 코드에 메타데이터를 제공하여 스프링 컨테이너가 해당 클래스나 메서드를 어떻게 처리해야 하는지를 알려주는,기능을 수행하게 하는 주석이다.

우리는 어노테이션을 사용하여 코드를 더 짧고 효율적으로, 유지보수에 용이하게 작성할 수 있다.

가장 기본적인 @Repository 어노테이션부터 살펴보자.

@Repository

Repository 어노테이션은 데이터 액세스 계층의 구성 요소를 다루는 어노테이션이다.

아래와 같은 특징을 가지고 있다.

• 데이터베이스와의 상호작용을 담당

• Persistence Layer에 존재
• 주로 DAO(Data Access Object) 클래스에 사용되는 어노테이션
• 스프링에서 지원하지 않는 특정 예외를 Spring Exception으로 전환
• 예외 발생 시 Unchecked Exception을 DataAccessException으로 변경하여 처리

Repository 어노테이션의 개념과 특징에 대해서 간단히 설명을 했으니 사용법에 대해 알아보자.

import org.springframework.stereotype.Repository;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.ResultSetExtractor;

@Repository
public class ExampleRepository {

    private final JdbcTemplate jdbcTemplate;


     @Autowired
    public ExampleRepository(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    public String getNameById(Long id) {
        String sql = "SELECT name FROM my_table WHERE id = ?";

        try {

            // JDBC로 id를 통해 name 필드 가져오기
            return jdbcTemplate.query(sql, new Object[]{id}, (ResultSetExtractor<String>) rs -> {
                if (rs.next()) {
                    return rs.getString("name");
                }
                return null;
            });
        } catch (DataAccessException ex) {
            // 예외 처리
            throw ex;
        }
    }
}

위의 코드처럼 class 위에 어노테이션을 붙여주면 끝이다.

@Autowired로 의존성을 주입해준 코드는 아래와 같이 변경할 수 있으나, 어노테이션으로 주입해주는 걸 추천한다.

    public ExampleRepository(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

SpringBoot에서 JPA를 사용하여 Repository를 사용하는 건 더 간단하다. 어노테이션을 붙일 필요 없이 아래와 같이 작성해주면 된다.

public interface UserRepository extends JpaRepository<User, Long> {
    User findByNickname(String nickname);

    Boolean existsByNickname(String Nickname);
}

어노테이션을 사용할 필요 없이 JPARepository를 사용해주면 된다.

그럼 다음으로 Service 어노테이션에 대해 알아보자.

@Service

Service 어노테이션은 해당 클래스가 비즈니스 로직을 담당하는 서비스 계층 구성 요소임을 알려주는 어노테이션이다.

아래와 같은 특징을 가지고 있다.

• 주로 Service Layer 클래스에 사용

• 스프링 컨테이너에 해당 클래스를 빈으로 등록
• 스프링의 트랜잭션 관리를 받음
• 비즈니스 로직을 가지고 있음

개념과 특징을 알았으니, 코드로 살펴보자.

@Service
public class UserService {

    @Autowired
    UserRepository userRepository;

    public User saveUser(User user) {
        return userRepository.save(user);
    }
}

위에 보이는 것처럼 클래스 위에 어노테이션을 사용해 주면 된다.

서비스 클래스는 기능의 처리와 관련된 부분을 작성해야 한다. 서비스 클래스에서 비즈니스 요구사항을 구현하면, 후에 나올 컨트롤러에서 서비스 클래스의 함수를 호출해주는 형식으로 작성이 이루어져야 한다.

@Component

Component 어노테이션은 스프링 IoC 컨테이너가 해당 클래스를 자동으로 빈으로 인식하고, 필요한 곳에 주입하거나 관리할 수 있게 하는 어노테이션이다.

아래의 특징이 있다.

• 빈을 등록하고 자동으로 검색 및 등록 가능

• 스프링이 클래스의 의존성을 관리하며 필요한 곳에 자동으로 의존성 주입
• @Repository, @Service. @Controller는 모두 @Component를 확장한 어노테이션

설명은 이 정도면 끝일 것 같고, 앞서 했던 것처럼 코드로 확인해보자.

@Component
public class User {
    public User() {
        System.out.println("Component Example");
    }
}

이렇게 사용해주면 User 클래스를 스프링 컨테이너가 빈으로 인식하게 되고, 의존성을 주입한다.

@Controller

Controller 어노테이션은 해당 클래스가 웹 어플리케이션 요청을 처리하는 컨트롤러임을 나타내는 어노테이션이다.

아래의 특징이 있다.

• 웹 어플리케이션에서 클라이언트의 요청을 처리하는 컨트롤러 역할

• @RequestMapping 어노테이션으로 컨트롤러에서 처리하는 요청의 기본 경로 지정 가능
• 메서드 수준에서 어떤 경로의 요청을 처리할지 지정 가능
• @Component 어노테이션을 구체화 한 것으로, 해당 클래스를 IoC 컨테이너에 빈 등록

컨트롤러에는 자주 사용되는 어노테이션이 있는데, 대표적으로 몇 가지만 알아보자.

그럼, 마지막으로 코드로 살펴보자.

@Controller
public class ExampleController {

    @RequestMapping("/example")
    public String example() {
        return "example";
    }
}

이런 식으로 사용해주면 된다.

Controller 말고도 @RestController라는 어노테이션이 존재하는데, @Controller는 JSP 등의 View 템플릿 엔진을 사용하여 HTML 페이지를 넘겨주지만, @RestController는 RESTful API를 제공하는 컨트롤러에서 사용된다는 차이점이 있다.

오늘은 이렇게 Spring의 MVC를 위한 기초 어노테이션에 대해서 알아봤다. 원래는 Bean에 대해서도 작성할까 헀지만, 너무 길어질 것 같아 다음 포스팅에서 다루기로 하자.

그 중, StateFlow와 SharedFlow의 차이점에 대해 조금 더 공부하고자 포스팅을 한다.

그 전에 짚고 넘어갈 점이 있다면, StateFlow와 SharedFlow는 모두 핫 스트림이란 점이다.

콜드 스트림과 핫 스트림의 차이는 아래와 같다.

• 콜드 스트림: 구독자가 스트림을 시작할 때마다 데이터 재생성 및 방출
  • 각 구독자는 스트림을 독립적으로 소비
  • 각자의 시작점부터 데이터 수신

• 핫 스트림: 데이터를 생성하고 방출하는 주체가 구독자와 독립적으로 동작
  • 스트림이 이미 존재하고 있음
  • 구독자가 현재의 스트림 상태를 얻거나 중간부터 데이터 수신 가능
  • 이벤트 발생 시 모든 구독자에게 동시에 데이터 전달

우선 SharedFlow부터 살펴 보기로 하자.

SharedFlow

SharedFlow는 무엇일까?

• SharedFlow: 수집하는 모든 소비자에게 값을 내보내는 핫 스트림 플로우
  • 여러 구독자 간에 데이터 공유 가능
  • 내부적으로 상태를 유지하고 있기에 현재 상태를 새로운 구독자에게 전달하지만 과거에 있던 정보를 보여주는 것
  • Flow를 상속받고 있음

SharedFlow는 Flow를 상속받고 있으며, 여러 구독자가 데이터를 공유할 수 있는 플로우다.

emit 함수를 통해 새로운 이벤트를 방출하고, 구독 중인 모든 구독자에게 이를 전달하게 된다.

SharedFlow는 아래와 같이 생성하고, 방출할 수 있다.

// 생성
 val sharedFlow = MutableSharedFlow<Int>()

 // 방출
 sharedFlow.emit(1)
 sharedFlow.emit(2)
 sharedFlow.emit(3)

SharedFlow는 중복 값을 필터링 하여 emit 된 값이 중복된다면 collect 하지 않는 특성을 가지고 있으며, 만약 Flow를 SharedFlow로 변경하고 싶다면, SharedIn을 사용할 수 있다.

public fun <T> Flow<T>.shareIn(
    scope: CoroutineScope,
    started: SharingStarted,
    replay: Int = 0
): SharedFlow<T> 

위의 코드를 작성하면 Flow가 주어진 코루틴 스코프의 스트림을 SharedFlow로 변경할 수 있다.

StateFlow

그렇다면 StateFlow란 무엇일까?

• StateFlow: 상태를 가지고 있는 Flow
  • 상태를 가지고 있기 때문에 새로운 수신자가 등록되면 현재 상태를 즉시 전달 가능
  • SharedFlow를 상속 받고 있음

이렇게 간단하게 정의할 수 있다. 단어 그대로 상태를 갖는 Flow다.

StateFlow는 현재 상태와 새로 변경된 상태를 계속 내보내게 된다. 상태를 변경하기 위해서는 MutableStateFlow의 value 값에 할당해주면 된다.

 private val stateFlow = MutableStateFlow("First State")

위의 코드가 StateFlow를 생성한 코드다. 이 코드에서 상태를 변경하고자 한다면 아래와 같이 작성하면 된다.

exmaple.value = "Seconde Flow"

앞서 말한 것처럼 value를 사용해 상태를 변경해준 코드다.

StateFlow는 상태를 가지고 있는 Flow이기 때문에 주로 UI처럼 상태 변화에 민감한 애플리케이션에서 사용된다.

만약 Flow를 SharedFlow처럼 핫 스트림으로 변경하고 싶다면, 또다른 방법으로 StateIn을 사용할 수 있다.

fun <T> Flow<T>.stateIn(
    scope: CoroutineScope,
    started: SharingStarted,
    initialValue: T
): StateFlow<T>

위의 코드를 작성하면 Flow가 주어진 코루틴 스코프의 스트림을 StateFlow로 변경할 수 있다.

오늘은 간단하게 SharedFlow와 StateFlow의 차이에 대해서 알아봤다.

사실 이걸 작성하면서도 완전히 이해된 것은 아니라 앞으로도 계속 Flow에 대해서 공부를 해봐야 할 것 같다.

다음에는 이해도를 높이기 위해 Flow 자체에 대한 포스팅을 올려보겠다.

그동안 정보처리기사 필기 시험을 준비하고 토이 프로젝트를 진행하고 있었다. 필기 시험은 공부한 범위 내에서 나왔고 80점을 넘기며 넉넉하게 합격했다.

이제 실기 시험만 남았는데, 실기 시험도 열심히 공부를 해야지.

사담은 여기까지 하고 오늘은 스프링부트와 플러터에서 회원가입 시 닉네임을 확인하는 기능을 포스팅 할 예정이다.

현재 진행하고 있는 토이 프로젝트가 어느정도는 틀이 잡혔는데 생각보다 세세한 부분을 놓친 게 많더라. 오늘은 그 중 하나인 닉네임 중복 확인 기능이다.

우선 스프링의 코드부터 확인하겠다.

UserController.java

    @GetMapping("isExist/{nickname}")
    public ResponseEntity<Boolean> checkNickname(@PathVariable String nickname)
    {
        return ResponseEntity.ok(userService.checkNickname(nickname));
    }

굉장히 간단한 한 줄짜리 함수다.

userService에 분리해둬서 그렇다.

UserService.java

public boolean checkNickname(String nickname) {
        return userRepository.existsByNickname(nickname);
    }

사실 얘도 한 줄짜리다. ㅋㅋㅋㅋ.

뭔가 복잡한 로직이 아니라 해당 닉네임이 존재하는지 안 하는지만 확인해 주면 되기 때문이다.

그 다음은 레포지토리에도 딱 한 줄만 선언해주면 된다.

UserRepository.java

public interface UserRepository extends JpaRepository<User, Long> {
    User findByNickname(String nickname);

    // 여기!
    Boolean existsByNickname(String Nickname);
}

이렇게 작성을 마쳐주고 나면, JPA가 스스로 대문자를 필드 이름으로 인식해 매개변수로 들어온 Nickname이 테이블의 nickname 필드에 존재하고 있는지를 확인해 준다.

나는 있는지 없는지 여부만 확인하면 됐기에 Boolean으로 리턴했다.

그럼 이제 Flutter의 코드를 보자.

DBService.dart

Future<bool> checkNicknameDuplicate(String nickname) async {
    final response = await http
        .get(Uri.parse("uri"));

    if (response.statusCode == 200) {
      final data = json.decode(response.body) as bool;
      return data;
    } else {
      throw Exception('Failed to check nickname availability');
    }
  }

위와 같이 함수를 작성했다. uri 주소에 Get 형식의 요청을 보내서 돌아온 json 값을 bool 형식으로 받아 와 반환해줬다.

활용하는 코드는 아래와 같다.

UserController.dart

  Future<bool> checkNickname(String nickname) async {
    DBService db = DBService();
    bool isUsed = await db.checkNicknameDuplicate(nickname);
    if (isUsed == false) {
      return true;
    } else {
      return false;
    }
  }

Future를 활용하여 통신이 가능하게 해줬고 bool 값을 반환하여 존재하는지 안 하는지 여부를 알 수 있게 해줬다.

서버와 통신하는 함수를 분리해서 사용할 때는 꼭 async-await을 사용하는 걸 잊지 말자.

이렇게 controller에 함수를 작성해주면, 마지막으로 아래와 같이 활용해주면 된다.

나는 모든 회원 필드가 입력됐다는 가정 하에 버튼이 활성화 되도록 구현했는데,

1. 버튼을 클릭하면 닉네임 중복을 확인하고, 2-1. 닉네임 중복 시 다이얼로그를 띄운다. 2-2. 닉네임이 중복되지 않을 시 모든 회원 정보를 저장한다.

대충 이런 알고리즘으로 간단하게 작성했다.

RegisterPage.dart

onPressed: () async {
          bool isAvailableNickname = await _userController
                          .checkNickname(_textController.text);
          if (isAvailableNickname) {
                 _userController.saveInfo(
                 _textController.text,
                 _selectedMajor,
                 _selectedGender,
                 userImage[_index],
                        );
          } else {
                 showNicknameUnavailable(
                       context,
                       "닉네임 사용 불가",
                       "이미 사용 중인 닉네임입니다.");
                  }
         },

이렇게 작성해주면 아래와 같이 작동이 된다.

이렇게 이미 존재하는 닉네임을 입력을 해주고, 등록을 누르면

이렇게 간단하게 다이얼로그가 생성되며 회원 저장이 되지 않는다.

어렵지 않은 기능인데도 말로 풀어서 설명하려니 글이 생각보다 길어진 느낌이다.

다음에 구현할 기능은 신고하기 기능인데, 자동으로 이메일이 전송되도록 할 예정이다.

블로그를 돌아보니 내 눈에는 잘 읽히는 코드들이 다른 사람들에게는 잘 이해되지 않을 수도 있을 거라는 게 문득 떠올랐다. 다음에는 처음 본 사람도 이해하기 쉽게 글을 작성하는 걸 우선적으로 생각해야겠다.

프로그래밍 파트의 IP 주소의 단계에 관한 개념이다. 분명 컴퓨터네트워크라는 과목에서 배웠던 개념인데, 네트워크의 길이에 따라서 클래스가 나뉜다는 것을 알고 있는데 이상하게 문제를 풀 때마다 헷갈린다.

Q. C Class에 속하는 IP address는?

1. 200.168.30.1
2. 10.3.2.1
3. 225.2.4.1
4. 172.16.98.3

정답은 1번 200.168.30.1이었다.

IP Address

IP 주소란, 인터넷에 연결된 모든 컴퓨터 자원을 구분하기 위한 고유한 인터넷 주소다. 8비트 씩 네 개로 구성되어 있어 총 32비트의 길이를 가지고 있고, 네트워크 주소 길이에 따라 A 클래스부터 E 클래스까지 총 다섯 개로 분류된다.

보통은 A, B, C의 세 가지가 가장 많이 활용된다.

A Class

A 클래스는 국가 및 대형 통신망에 이용되는 주소로, 0 ~ 127 사이의 숫자로 시작한다.

B Class

B 클래스는 중대형 통신망에 이용되는 주소로, 128 ~ 191 사이의 숫자로 시작한다.

C Class

C 클래스는 그보다 더 작은 소규모 통신망에 이용되는 주소로, 192 ~ 223 사이의 숫자로 시작한다.

D Class

D 클래스는 멀티캐스트에 이용되는 주소로, 224 ~ 239 사이의 숫자로 시작한다.

E Class

E 클래스는 실험적인 주소로, 공용되는 주소가 아니다.

시험이 얼마 남지 않았음에도, 틀린 문제를 계속 틀리고 있다. 이번 정리를 계기로 IP 주소에 관련된 문제가 스스로 잘 이해됐기를 바랄 뿐이다.

정보시스템이랑 DB, 프로그래밍 쪽은 어느정도 완성이 됐는데 소프트웨어 계획과 개발 쪽이 계속 오답이 나온다.

우선 내가 틀린 문제는 시나공 2023년도 3회 대비 모의고사의 17번 문제였다.

Q. UML에서 활용되는 다이어그램 중 시스템의 동작을 표현하는 행위 다이어그램에 해당하지 않는 것은?

1. 유스케이스 다이어그램
2. 시퀀스 다이어그램
3. 활동 다이어그램
4. 배치 다이어그램

1번과 3번은 알고 있었는데, 뭔가 배치 다이어그램도 행위 다이어그램에서 본 기억이 있던 것 같아서 바보같이 2번을 선택했었다.

정답은 4번 배치 다이어그램이었다. 워낙에 다이어그램의 종류가 많기도 하고 이름이 헷갈려서 매번 풀 때마다 오답률이 꽤 높았기에 이번에 다시 정리해보려 한다.

UML(Unified Modeling Language)

UML은 소프트웨어 모델을 생성하기 위한 표준 언어다. 소프트웨어 개발 과정 전반에서의 원활한 의사소통을 위한 통합 모델링 언어라고 정의하면 될 것 같다.

UML은 각 목적에 따라 크게 두 가지로 분류될 수 있다.

구조 다이어그램

• 클래스 다이어그램:클래스의 속성, 함수, 변수 타입으로 구성된 다이어그램

• 객체 다이어그램: 클래스의 인스턴스, 객체와 객체 간의 관계로 구성된 다이어그램
• 복합체 구조 다이어그램: 클래스 혹은 컴포넌트가 복합 구조인 경우 해당 내부 구조를 표현하는 다이어그램
• 배치 다이어그램: 물리적 요소들의 위치를 표현하는 다이어그램
• 컴포넌트 다이어그램: 컴포넌트 간의 관계나 컴포넌트 사이의 인터페이스를 표현하는 다이어그램
• 패키지 다이어그램: 모델 요소를 그룹화 한 패키지 간의 관계를 표현하는 다이어그램

행위 다이어그램

• 활동 다이어그램: 시스템이 수행하는 기능에 대한 로직 혹은 조건에 따른 처리 흐름을 순서에 따라 표현하는 다이어그램

• 상태 다이어그램: 객체 내부의 자세한 동작이나 시스템 전체의 동작을 표현하는 다이어그램
• 유스케이스 다이어그램: 사용자 요구를 분석하여 시스템과 사용자 간의 상호작용을 표현하는 다이어그램
• 순차 다이어그램: 상호작용하는 시스템 혹은 객체 간에 주고 받는 메시지를 표현하는 다이어그램
• 상호작용 개요 다이어그램: 상호작용 다이어그램 사이의 제어 흐름을 표현하는 다이어그램
• 통신 다이어그램: 상호작용에 참여하는 요소 간의 관계를 명확하게 표현하는 다이어그램
• 타이밍 다이어그램: 객체 상태 변화 및 시간 제약을 명시적으로 표현하는 다이어그램

이 정도로 정리할 수 있을 것 같다. 이번 정리를 계기로 UML 문제의 오답률이 조금 줄어들기를 바란다..

저번에 발생했었을 때는 포트 번호를 8080으로 사용하고 있었기 때문에 그러려니 하고 프로퍼티의 포트 번호를 변경하고 사용했는데, 절대 사용하지 않을 번호가 계속 사용 중이라는 거다.

말하기는 조금 부끄럽지만, 복잡한 번호가 귀찮아서 1004번을 사용하고 있는데 내가 이걸 다른 곳에서 사용할 일이 뭐가 있나..

그래서 이곳저곳을 찾아본 결과, 서버를 종료할 때 비정상적으로 종료가 되면 계속 사용되고 있다고 나오는 경우도 종종 발생한다고 한다.

해결하기 위해서는 아래의 두 가지 방법이 있다.

1. 포트 번호를 변경한다.

2. 현재 실행 중인 포트를 강제 종료하고 서버를 재시작한다.

포트 번호를 바꾸는 거야, 나처럼 application.properties 파일에서 번호만 바꿔주면 되는 건데 계속 이런 식으로 반복되는 오류라면 바꾸지 않고 해결하는 방법을 찾고 싶었다.

필자는 mac을 사용 중이기에 mac 기준으로 해결 방법을 작성하겠다.

우선 terminal을 켜고 정말 간단하게 명령을 작성하면 된다.

lsof -i tcp:포트번호

이렇게 작성하면 아래와 같은 정보가 나온다.

java에서 해당 포트를 사용하고 있다는 건데, 이 정보에서 우리가 필요한 건 PID다.

해당 PID를 확인한 후 sudo kill -9 PID 명령어를 작성해주면 해당 포트를 사용 중인 작업이 종료된다.

그 후 다시 서버를 돌려보면 멀쩡하게 돌아가는 모습을 확인할 수 있다!

다행히 시험 점수는 괜찮게 나온 듯 싶어서 기분 좋게 포스팅을 하려고 한다.

현재 4학년으로 재학 중이라 졸업작품을 진행하고 있는데, 이번 졸업작품에서 리액트로 웹 서비스를 해야 할 일이 생겼다.

기본적인 틀은 다 MapBox에서 기본으로 제공하는 튜토리얼 소스를 활용했고, 서울시의 지도를 보여줘야 했기 때문에 구글에서 찾은 서울시 geojson 데이터를 활용했다.

우선 맵 박스는, 카카오 맵이나 구글 맵처럼 지도를 제공하는 서비스 중 하나다.

자유롭게 디자인을 변경할 수 있어 자유도가 굉장히 높은 편이라, 디자인에 따라 수정할 게 많지만 그 대가로 확실히 예쁜 지도를 얻을 수 있다.

나는 아직 디자인 단계가 아니기 때문에 기본 스타일을 그대로 활용했다.

나는 노트북에 원래 리액트 관련 소프트웨어가 설치되어 있어서 이 포스팅에서 굳이 언급하지 않겠지만, 혹시 깔려있지 않으신 분들은 미리 설치하고 이 포스팅을 참고하시길 바란다.

맵박스 예제 코드

위의 코드를 참고하여 진행했었다.

귀찮은 분들을 위해 코드의 전문을 올려보자면

Legend.js

import React from "react";

const Legend = (props) => {
  const renderLegendKeys = (stop, i) => {
    return (
      <div key={i} className="txt-s">
        <span
          className="mr6 round-full w12 h12 inline-block align-middle"
          style={{ backgroundColor: stop[1] }}
        />
        <span>{`${stop[0].toLocaleString()}`}</span>
      </div>
    );
  };

  return (
    <>
      <div className="bg-white absolute bottom right mr12 mb24 py12 px12 shadow-darken10 round z1 wmax180">
        <div className="mb6">
          <h2 className="txt-bold txt-s block">{props.active.name}</h2>
          <p className="txt-s color-gray">{props.active.description}</p>
        </div>
        {props.stops.map(renderLegendKeys)}
      </div>
    </>
  );
};

export default Legend;

Optionfield.js

import React from "react";

const Optionsfield = (props) => {
  const renderOptions = (option, i) => {
    return (
      <label key={i} className="toggle-container">
        <input
          onChange={() => props.changeState(i)}
          checked={option.property === props.property}
          name="toggle"
          type="radio"
        />
        <div className="toggle txt-s py3 toggle--active-white">
          {option.name}
        </div>
      </label>
    );
  };
  return (
    <div className="toggle-group absolute top left ml12 mt12 border border--2 border--white bg-white shadow-darken10 z1">
      {props.options.map(renderOptions)}
    </div>
  );
};

export default Optionsfield;

이 두 코드를 src 디렉토리에 하위 디렉토리 components를 생성해 넣어줬다.

data.json 파일도 하나 생성해서 원하는 geojson 데이터를 넣어주면 된다. 이건 각자 원하는 데이터가 다를 테니까 생략하고 넘어가도록 하겠다.

App.js 파일도 변경해줘야 하는데, 정말 간단하다. Map을 리턴해주기만 하면 된다.

App.js

import Map from './Map';
import React from 'react'

function App() {
  return (
    <div>
      <Map/>
    </div>
  );
}

export default App;

그 다음으로는 index.css파일을 설정해줘야 한다.

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

css 파일을 설정해줬으니 js 파일도 설정해주자.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

그 다음은 정말 별 거 없는 Map.css 파일이다.

Map.css

.map-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

이제 마지막으로 가장 중요한 코드인데, MapBox에서 기본으로 제공하는 코드인 Map.js 코드다.

Map.js

import React, { useRef, useEffect, useState } from 'react';
import mapboxgl from 'mapbox-gl';
import Legend from './components/Legend';
import Optionsfield from './components/Optionsfield';
import './Map.css';
import data from './data.json';

mapboxgl.accessToken =
  'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

const Map = () => {
  const options = [
    {
      name: 'Population',
      description: 'Estimated total population',
      property: 'pop_est',
      stops: [
        [0, '#f8d5cc'],
        [1000000, '#f4bfb6'],
        [5000000, '#f1a8a5'],
        [10000000, '#ee8f9a'],
        [50000000, '#ec739b'],
        [100000000, '#dd5ca8'],
        [250000000, '#c44cc0'],
        [500000000, '#9f43d7'],
        [1000000000, '#6e40e6']
      ]
    },
    {
      name: 'GDP',
      description: 'Estimate total GDP in millions of dollars',
      property: 'gdp_md_est',
      stops: [
        [0, '#f8d5cc'],
        [1000, '#f4bfb6'],
        [5000, '#f1a8a5'],
        [10000, '#ee8f9a'],
        [50000, '#ec739b'],
        [100000, '#dd5ca8'],
        [250000, '#c44cc0'],
        [5000000, '#9f43d7'],
        [10000000, '#6e40e6']
      ]
    }
  ];
  const mapContainerRef = useRef(null);
  const [active, setActive] = useState(options[0]);
  const [map, setMap] = useState(null);

  // Initialize map when component mounts
  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [5, 34],
      zoom: 1.5
    });

    map.on('load', () => {
      map.addSource('countries', {
        type: 'geojson',
        data
      });

      map.setLayoutProperty('country-label', 'text-field', [
        'format',
        ['get', 'name_en'],
        { 'font-scale': 1.2 },
        '\n',
        {},
        ['get', 'name'],
        {
          'font-scale': 0.8,
          'text-font': [
            'literal',
            ['DIN Offc Pro Italic', 'Arial Unicode MS Regular']
          ]
        }
      ]);

      map.addLayer(
        {
          id: 'countries',
          type: 'fill',
          source: 'countries'
        },
        'country-label'
      );

      map.setPaintProperty('countries', 'fill-color', {
        property: active.property,
        stops: active.stops
      });

      setMap(map);
    });

    // Clean up on unmount
    return () => map.remove();
  }, []);

  useEffect(() => {
    paint();
  }, [active]);

  const paint = () => {
    if (map) {
      map.setPaintProperty('countries', 'fill-color', {
        property: active.property,
        stops: active.stops
      });
    }
  };

  const changeState = i => {
    setActive(options[i]);
    map.setPaintProperty('countries', 'fill-color', {
      property: active.property,
      stops: active.stops
    });
  };

  return (
    <div>
      <div ref={mapContainerRef} className='map-container' />
      <Legend active={active} stops={active.stops} />
      <Optionsfield
        options={options}
        property={active.property}
        changeState={changeState}
      />
    </div>
  );
};

export default Map;

위의 코드는 각 나라별 인구분포도와 GDP에 따라 세계지도에 색을 입혀 보여주는 코드다.

• options: 해당하는 property 값에 따라 정해진 구간 별로 색을 설정

• useEffect의 center: 지도를 띄울 때 중앙에 보일 지역
  • 본인은 서울 지도가 필요해서 뒤에 나올 코드에 보이 듯 서울의 위경도로 설정
• useEffect의 zoom: 지도 줌 비율
• map.on('load' ...): 지도가 로딩 될 때 설정
  • countries라는 id를 가진 속성에 geojson 타입의 데이터를 삽입
  • data.json 파일을 따로 만들어뒀기에 data를 import 함
• map.addLayer(...): MapBox 스타일의 레이어 추가
• map.setPaintProperty(...): 지정된 스타일 레이어의 페인트 속성 값 변경

대충 이정도로 간단하게 설명할 수 있겠다. 실행시키면 아래의 화면이 나온다.

나는 여기서 사소하게 몇 부분만 건드렸는데, 우리 졸업작품에선 포트홀에 따라 색이 바뀌어야 했기 때문에 서울시 행정구역 geojson 파일에 pothole이라는 이름의 프로퍼티를 임의로 추가해줬고, 색의 구간도 변경해줬으며 각 구역에 클릭 이벤트를 주기 위해 코드를 추가했었다.

  const options = [
    {
      name: '도로 파손 정도',
      description: '도로 파손 개수에 따른 지표',
      // data.json에 있는 포트홀 프로퍼티로 구간 사용
      property: 'pothole',
      // 내 데이터에 맞도록 각 구간 변경
      stops: [
        [0, '#f8d5cc'],
        [3, '#f4bfb6'],
        [5, '#f1a8a5'],
        [7, '#ee8f9a'],
        [9, '#ec739b'],
        [12, '#dd5ca8'],
        [15, '#c44cc0'],
        [18, '#9f43d7'],
        [20, '#6e40e6']
      ]
    },
  ];

위의 코드가 구간을 정하는 프로퍼티 값을 포트홀로 바꾸고, 구간을 재설정한 코드다. 또, 아까 살짝 언급했지만 나는 서울 지도가 필요해서 아래와 같이 지도의 설정을 바꿔줬다.

useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      // 센터는 서울의 위경도
      center: [127.0016958, 37.5642135],
      // 줌도 모자라서 더 확대되도록 변경
      zoom: 10.0
    });

위처럼 구간을 나눴고, addLayer 부분을 변경했다.

map.addLayer({
        // countries라는 id는 맞지 않다고 판단하여 변경
      id: 'region',
      type: 'fill',
      source: 'region',
      paint: {
        'fill-color': {
          // 아까 구간 설정한 것처럼 pothole로 변경
          property: 'pothole',
          stops: active.stops
        }
      }
    });

레이어의 id 값을 region으로 변경한 후 색이 입혀질 프로퍼티를 pothole로 변경해줬다.

마지막으로 지도의 각 구역을 클릭했을 때의 클릭 이벤트 리스너를 등록하는 코드를 추가적으로 넣어줬다.

map.on('click', 'region', (e) => {
      const features = map.queryRenderedFeatures(e.point, { layers: ['region'] });

      if (features.length > 0) {
        const clickedFeature = features[0];
        // 클릭된 레이어(구역)의 포트홀 데이터를 가져옴
        const potholeValue = clickedFeature.properties.pothole;
        // 콘솔창에 로그로 출력
        console.log(`해당 구역의 포트홀 개수: ${potholeValue}`);
      }
    });

이렇게 하면 아래처럼 간단한 결과를 얻을 수 있다.

왼쪽의 웹 화면에 있는 각 구역을 클릭하면 해당하는 포트홀 값을 아래 콘솔창에서 로그 값으로 보여준다.

지금은 아직 이렇게 간단한 기능밖에 없지만, 추후에 onClick 이벤트를 다이얼로그로 바꾸고 주변 지도도 좀 더 예쁘게 꾸며볼 생각이다.

맨 처음 맵박스를 활용할 때 정말 어떻게 해야 할지 감도 안 잡혔었고, 생각보다 자료도 많이 안 나와서 막막했었는데 나와 같은 경험을 한 분들이 조금이나마 수월하게 만드시기를 바라는 마음으로 올려본다.

이제 Flutter에서 DB에 저장된 게시물 목록을 가져와 보여주고, 게시물 리스트의 아이템을 클릭하면 게시물의 상세 정보를 보여주는 기능을 생성해야 했는데, 어처구니 없는 이유로 오류가 발생한 걸 꼬박 하루만에 깨달아서 나와 같이 헤매고 있는 분들이 계실까 싶어 게시물로 작성한다.

우선, Flutter의 코드부터 살펴보자.

데이터를 전송하는 코드와 마찬가지로 db_service.dart 페이지에 API 통신을 위한 코드를 작성해줬다.

  Future<List<PostResponse>> getAllPost() async {
    final response = await http.get(Uri.parse("api 통신 uri"));
    if (response.statusCode == 200) {
      final data = json.decode(response.body) as List<dynamic>;
      return data
          .map<PostResponse>((json) => PostResponse.fromJson(json))
          .toList();
    } else {
      throw Exception('Failed to load post list');
    }
  }

  Future<PostResponse> getPostById(int id) async {
    final response =
        await http.get(Uri.parse("api 통신 uri"));
    if (response.statusCode == 200) {
      final jsonData = json.decode(response.body) as Map<String, dynamic>;
      return PostResponse.fromJson(jsonData);
    } else if (response.statusCode == 404) {
      throw Exception("Post not found");
    } else {
      throw Exception("Failed to fetch Post by Id");
    }
  }

간단히 함수에 대해서 설명하겠다.

• getAllPost(): 모든 게시물 데이터를 list 형태로 불러오는 함수

• getPostById(int id): pId를 사용하여 특정 게시물을 불러오는 함수

getAllPost() 함수는 PostResponse 모델을 리스트로 저장해 모든 게시물을 불러오고, getPostById() 함수는 단일 PostResponse 객체를 불러와 특정 게시물의 정보를 받아온다.

나는 pId를 Auto Increase로 설정했기 때문에 Flutter에서 전송을 할 때는 pId가 없는 Post 모델을, 스프링을 통해 데이터를 받아올 때는 pId까지 포함된 PostResponse 모델을 사용했다.

받아올 때 Post 모델을 사용하면 pId 필드가 없기 때문에 pId를 통해 게시물을 상세조회할 수 없고, PostResponse 모델을 통해 서버에 데이터를 전송하면 pId필드가 null로 들어가서 Auto Increase가 아니라 직접 pId를 입력해야 했기 때문에 위와 같은 방법을 선택했다.

Flutter에서는 더 설명할 부분이 없으니 바로 Spring Boot로 넘어가자.

우선 getAllPost() 함수부터 설명하겠다.

PostContoller.java

@GetMapping(produces = "application/json")
@ResponseBody
public List<PostDto> getAllPost(){
    return postService.allCashBoardEntity();
}

• @GetMapping: Get 방식을 통해서 매핑해주는 어노테이션

이 정도면 간단히 설명이 끝난다. return에 있는 postService.allCashBoardEntity() 함수는 아래와 같다.

public List<PostDto> allCashBoardEntity(){
        return exec();
    }

public List<PostDto> exec(){
    List<Post> postList = new ArrayList<>(postRepository.findAll());

    List<PostDto> postDtoList = new ArrayList<>();

    for(Post post: postList){
        PostDto requestDetailAll = new PostDto();
        requestDetailAll.setPId(post.getPId());
        requestDetailAll.setTitle(post.getTitle());
        requestDetailAll.setContent(post.getContent());
        requestDetailAll.setCategory(post.getCategory());
        requestDetailAll.setPerson(post.getPerson());
        requestDetailAll.setNickname(post.getNickname());
        requestDetailAll.setCreatedAt(post.getCreatedAt());
        requestDetailAll.setType(post.getType());
        postDtoList.add(requestDetailAll);
    }
    return postDtoList;
}

유지보수를 위해 함수를 분리해줬고, exec() 함수에서는 혹시나 pId가 누락되는 상황을 막기 위해 모든 필드에 set을 직접 해줬다.

왜 이렇게 하지?라는 의문이 생기는 것도 당연하나, 나는 코드를 다 작성하고 플러터에서 앱을 실행했을 때 자꾸 pId가 null로 받아와지는 오류가 발생했다.

게시물 리스트는 보이지도 않고 자꾸 아래 사진처럼 "type 'NULL' is not a subtype of type 'int'"라는 오류가 발생하는 거다.

스프링 코드에도 pId가 있고, 데이터베이스에도 있고. 혹시 PostDto에 pId가 안 받아와지나 싶어서 하나하나 set을 해줘도 계속 같은 오류가 발생했었다.

웹에서 api를 사용하면 제대로 Json 데이터가 나오고, pId 필드도 보이는데 이상하게 Flutter에서 게시물 조회가 안 됐다.

그러다가 찾은 것이 아래와 같다.

글씨가 작아서 잘 안 보이겠지만, 자세히 보면 pId 필드가 "pid"로 모두 소문자다. Auto Increase로 자동 생성되는 필드기 때문에 DB에 들어갈 때 그냥 pid로 들어간 거다. 이름이 pid인데, Flutter에서는 자꾸 pId인 속성을 찾으라 하니 당연히 못 찾고 pId 필드가 null로 받아와진 거다.

Flutter의 toJson, fromJson 함수의 pId를 pid로 바꿔주니 아래처럼 정상적으로 작동했다.

나처럼 바보같은 실수를 하지 않았다면, Dto를 따로 안 만들고 그냥

@GetMapping(produces = "application/json")
@ResponseBody
public List<Post> getAllPost(){
    return postRepository.findAll();
}

이렇게만 해줘도 정상적으로 작동한다.

이렇게 게시물을 리스트로 받아오게 했으면 이제 게시물을 상세 조회해줄 차례다.

Flutter의 코드는 위에서 함수를 설명하며 작성해뒀으니 스프링만 보겠다.

PostController.java

@GetMapping("/{id}")
@ResponseBody
public ResponseEntity<Post> getPostById(@PathVariable Long id) {
     Optional<Post> postOptional = postRepository.findById(id);
     return postOptional.map(ResponseEntity::ok).orElseGet(() -> ResponseEntity.notFound().build());
}

모든 게시물을 가져올 때와 마찬가지로 get 방식을 사용하며, 하나의 게시물만 가져오면 되기에 Post를 반환하도록 했다.

스프링의 findById() 함수를 사용하면 데이터 중에 해당 id 값을 가진 데이터 하나만 반환해준다.

스프링에서 이렇게 작성을 마치고 플러터에서 리스트의 아이템을 클릭해주면

이렇게 게시물의 타이틀과 내용을 보여준다. 아직 페이지 디자인이 완료되지 않았기 때문에 우선은 이렇게 간단하게 보여주도록 작성했다.

스프링을 공부한지는 얼마 되지 않았지만, 지금 내가 작성한 코드들은 어디 가서 "스프링 알아요" 할 정도도 못된다는 것을 안다. 앞으로 좀 더 공부해서 CRUD 말고 다른 기능들도 작성해보고 싶다.

다음 게시물은 Spring의 개념에 대해서 조금 더 알아볼 예정이다.

오늘은 이 두 가지 개념에 대하여 알아보도록 하겠다.

IoC

IoC부터 살펴보도록 하자.

IoC는 제어의 역전을 의미한다.

객체와 메소드를 호출하는 작업은 보통 개발자가 하게 되는데, IoC를 사용하면 스프링 컨테이너가 이에 대한 제어권을 가지게 되어 제어가 역전되는 것이다.

우리가 보통 객체를 제어하려면 어떤 코드가 필요할까?

class Example{

    private Test test;

    Example(){
        this.test = new Test();
    }
}

이렇게 new를 통해 직접 객체를 생성한 후 객체를 할당해야 한다. 이제 IoC를 활용하여 적은 코드의 예시를 보자.

public class Example{

    @Autowired
    private Test test;

}

위의 코드를 살펴 보면, 클래스에서 @Autowired 어노테이션을 통해서 객체를 주입 받았다.

Test 객체가 스프링 컨테이너(IoC 컨테이너)에게 관리받는 대상인 빈(Bean)일 경우, 이 @Autowired 어노테이션을 사용해 객체 주입이 가능해진다.

컨테이너가 객체를 생성해서 해당 객체에 주입시킨 것인데, 이것이 제어 역전의 예시다.

IoC의 장점

• 객체 간 결합도 감소

• 코드의 유연성
• 코드 해석의 용이성
• 개발 및 유지보수의 용이성

IoC를 사용할 경우, 객체를 일일이 클래스에 생성하고 사용할 필요 없이 그냥 주입받아서 사용하면 된다.

그럼 객체를 주입받는 것은 무엇인가?

DI

여기서 필요한 개념이 DI다.

의존성이란 무엇인가? 스프링에서 생성되는 객체 간의 관계를 뜻한다. 한 객체가 다른 객체에 의존한다는 것은, 의존대상인 객체가 변할 때 그것이 다른 객체에도 영향을 미친다는 것을 의미하는 것이다.

DI의 장점

• 재사용성 향상

• 테스트의 용이성
• 유지보수의 용이성
• 코드 해석의 용이성
• 코드의 단순화
• 종속성 감소
• 결합도는 감소시키면서 유연성 및 확장성 향상
• 객체 간 의존 관계 설정

DI는 위처럼 개발 및 유지보수가 편해지고, 결합도가 낮아지며 유연해진다는 장점이 존재한다.

그렇다면 의존성을 주입하는 방법은 어떤 것이 있을까?

의존성 주입의 세 가지 방법

• 생성자 주입: 가장 권장되는 방법

• 필요한 의존성을 포함한 클래스 생성자를 만든 후, 이 생성자를 통해 의존성 주입
  • 필드 주입: 필드에 의존 관계를 주입하는 방법
• 프레임워크에 의존적이고, final 선언이 불가하므로 권장되지 않는 방법
  • 수정자 주입: setter 메소드를 통해서 의존성을 주입
• 현재는 주입 받는 객체가 변경될 수 있는 경우에 사용

위의 세 가지 방법으로 의존성을 주입한다고 한다.

예시 코드를 확인해보자.

생성자 주입

@Component
public class TestController {

   private TestRepository testRepository;

   public TestController(TestRepository testRepository) {
       this.testRepository = testRepository;
   }
}

필드 주입

@Component
public class TestController {
    @Autowired            // 필드에 직접 @Autowired 어노테이션 선언
    private TestRepository testRepository;
}

수정자 주입

@Component
public class TestController {

   private TestRepository testRepository;

   @Autowired         // setTestRepository로 setter 생성하여 의존성 주입
   public void setTestRepository(TestRepository testRepository) {
       this.testRepository = testRepository;
   }
}

오늘은 이렇게 간단하게 DI와 IoC에 대하여 알아보았다.

전에 학교에서 수업을 들을 때 잠깐 다뤄본 기억이 있는데, 시간이 지나고 다시 글로 작성해보니 기억하고 있던 개념을 직접 코드로 볼 수 있어서 좋은 것 같다.

다음 게시물도 스프링에 관한 글을 적어보겠다.

백 개발자를 따로 구하지 않았기 때문에 이번에 한 번 해보자고 생각하며 처음 스프링에 대해서 알아가게 되었다.

우선 Flutter에 화면 구성은 웬만큼 되어 있는 상태였기 때문에, DB를 생성해서 연결하는 작업이 필요했다.

처음 접해보는 스프링이다 보니, 어떻게 해야 할지 막막했는데 찾아서 하다 보니 되긴 되더라. 백을 공부하고 있던 애인의 도움도 많이 받았다.

일단 스프링을 처음 해본 후기는 딱 한 줄이다. 설정이 정말 힘들다.

설정하면서 이런저런 오류가 계속 발생해서 서버를 새로 만들었다가 프로젝트를 새로 만들었다가 몇 번을 반복했는지 모르겠다. 다들 설정이 더럽다고 하는 데는 이유가 있었다.

그래도 하는 김에 제대로 해보려고 Spring Study도 신청했다. 현재 GDSC에 소속되어 있어서, 우리 학교 GDSC에서 열리는 스프링 스터디 분야에서 공부해보기로 했다. 조금 걱정되긴 하지만 뭐, 잘 할 수 있겠지.

이 포스팅은 서버와 스프링 연결이 완료되었고, 플러터에 프론트가 어느정도 완성되었다는 것을 기반으로 한다는 점을 미리 알린다. 참고로 나는 MariaDB와 MySQL 워크벤치를 사용했다.

Flutter의 코드부터 살펴보겠다.

나는 user를 스프링 부트 프로젝트에 전송해서 DB에 저장하는 코드가 필요했다.

그러기 위해서 user_model.dart 파일에 User 데이터 모델부터 정의해보자.

class User {
  final String? nickname;
  final String? major;
  final String? gender;

  User({required this.nickname, required this.major, required this.gender});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
        nickname: json['nickname'],
        major: json['major'],
        gender: json['gender']);
  }
  Map<String, dynamic> toJson() => {
        'nickname': nickname,
        'major': major,
        'gender': gender,
      };
}

위와 같이 fromJson, toJson를 통해 Json으로의 변환이 가능하게 해줬다. DB에는 uId라는 애트리뷰트가 하나 더 있지만, autoIncrease로 생성해둬서 굳이 플러터에서 설정할 필요가 없다.

데이터 클래스를 만들었으니 서비스 해줄 차례다.

나는 용이한 사용을 위해 service 디렉토리에 db_server.dart 파일을 만들어 분리했다.

Future<void> saveUser(User user) async {
    try {
      final response = await http.post(
        Uri.parse("http://server-uri/user"),
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
        body: jsonEncode(user.toJson()),
      );
      if (response.statusCode != 201) {
        throw Exception("Failed to send data");
      } else {
        print("User Data sent successfully");
        Get.to(const HomePage());
      }
    } catch (e) {
      print("Failed to send user data: ${e}");
    }
  }

• Future saveUser(User user) async){...}: 비동기 처리로 진행

• try-catch: 예외 처리

  • Uri.parse(""): 서버와 연결
  • 'Content-Type': 'application/json; charset=UTF-8': http 메시지를 json으로 변환해서 전송, charset을 UTF-8로 사용
  • jsonEncode(user.toJson): 인코딩

  이 정도로 간단히 설명할 수 있을 것 같다. server-uri에는 본인의 서버 주소를 넣으면 된다.

  위의 saveUser 함수는 아래와 같이 사용할 수 있다.

 DBService dbService = DBService();
      dbService
          .saveUser(User(nickname: nickname, major: major, gender: gender));

그럼 이제 스프링 부트에 플러터를 연결할 준비가 끝났으니, 스프링 코드를 작성해줘야 한다.

나는 vscode에서 스프링 작업을 하다가 중간에 뭘 잘못 건드렸는지 온통 빨간줄이라 IntelliJ로 갈아탔다.

연결을 해주기 위해선 스프링에서 테이블을 생성해야 하므로 플러터와 마찬가지로 User 데이터 클래스를 만들어준다.

@Entity
@Table(name = "user")
@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "uId")
    private Long uId;

    @Column(name = "nickname")
    private String nickname;

    @Column(name = "major")
    private String major;

    @Column(name = "gender")
    private String gender;
}

필요한 애트리뷰트들을 선언해줬다. uId는 앞서 말했던 것처럼 AI 속성이므로 @GeneratedValue 어노테이션을 붙여줬다.

그 다음은 UserRepository 클래스로 레포지토리를 만들어준다. 한 줄이면 끝난다.

public interface UserRepository extends JpaRepository<User, Long> {}

그 다음에는 매핑을 위한 UserController 파일을 만들어준다.

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping(produces = "application/json")
    public ResponseEntity<User> saveUser(@RequestBody User user) {
        User savedUser = userService.saveUser(user);
        return new ResponseEntity<>(savedUser, HttpStatus.CREATED);
    }
}

플러터에서 스프링 부트로 데이터를 전송할 때 필요한 코드다.

• @RequestMapping: 매핑 요청을 /user로 받음

• @PostMapping(produces = "application/json"): Post 타입으로 매핑하며 json 형태로 받아옴

위의 두 가지 어노테이션만 알아두면 될 것 같다. 사실 스프링 한지 얼마 안 돼서 나도 잘 모른다. 추후에 더 공부해서 스프링에 대한 게시물도 포스팅할 예정이다.

그리고 마지막으로 데이터를 서비스 해주기 위한 UserService 파일을 만들어준다.

@Service
public class UserService {

    @Autowired
    UserRepository userRepository;

    public UserService(UserRepository userRepository) {
        this.userRepository = userRepository;

    }

    public User saveUser(User user) {
        return userRepository.save(user);
    }
}

• @Autowired: 의존성 주입 어노테이션

• save(): 데이터 업데이트

이 정도로 간단하게 설명이 끝나겠다.

이렇게 코드 작성을 모두 완료하고 서버를 돌린 후 여기에 정보를 모두 입력하고 가입 버튼을 눌러주면 이렇게 전송이 완료되었다는 로그와 함께 전송이 완료된 것을 확인할 수 있다.

이 간단한 코드를 짜는데 꽤나 시간을 잡아먹었지만, 하고 나니 괜히 뿌듯해진다.

다음 게시물도 스프링에 관해 올려보겠다.

의존성 주입이란 컨트롤러를 인스턴스화 시키는 것을 말하는데, GetX에는 총 네 가지의 방법이 있다.

• Get.put: 페이지로 이동할 때 생성(create), 초기화(initialized)되며 페이지에서 나갈 때 delete

• Get.lazyPut: 페이지로 이동할 때가 아닌, 무언가 변화가 생겼을 때 create, inintalized
• Get.putAsync: 데이터에 가공 처리 등을 한 후 인스턴스화 해야 할 때 사용
• Get.create: 동작이 일어날 때마다 인스턴스 생성

개념은 위와 같고, 특징이라고 하자면 put, lazyPut, putAsync는 싱글톤이기 때문에 인스턴스를 단 한 번 생성하지만, create는 동작/변화가 발생할 때마다 인스턴스를 생성한다는 점을 들 수 있겠다.

코드 예시로 살펴보자.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx/controller/dependency_controller.dart';
import 'package:getx/page/get_lazy_put.dart';
import 'get_put.dart';

class DependencyManagePage extends StatelessWidget {
  const DependencyManagePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        ElevatedButton(
            onPressed: () {
              Get.to(const GetPut(), binding: BindingsBuilder(() {
                Get.put(DependencyController());
              }));
            },
            child: Text("Get.put")),
        ElevatedButton(
            onPressed: () {
              Get.to(const GetLazyPut(), binding: BindingsBuilder(() {
                Get.lazyPut<DependencyController>(() => DependencyController());
              }));
            },
            // 컨트롤러에 접근하려 할 때 메모리에 올림
            // 접근을 하려 할때 그제서야 intialized
            child: Text("Get.lazyPut")),
        // 바로 intialized
        // 페이지에 접근할 때 데이터에 가공을 하고 해야 할 때
        // 아래 코드는 5초 후에 initialized 해줌
        ElevatedButton(
            onPressed: () {
              Get.to(const GetPut(), binding: BindingsBuilder(() {
                Get.putAsync<DependencyController>(() async {
                  await Future.delayed(Duration(seconds: 5));
                  return DependencyController();
                });
              }));
            },
            child: Text("Get.putAsync")),
        // 위의 세 개는 싱글톤이었음, 한 번 생성하면 그 뒤로 생성 X
        // 버튼을 누를 때마다 인스턴스를 생성해줌
        ElevatedButton(
            onPressed: () {
              Get.to(const GetPut(), binding: BindingsBuilder(() {
                Get.create<DependencyController>(() => DependencyController());
              }));
            },
            child: Text("Get.create"))
      ]),
    ));
  }
}

내 GetX 게시물은 모두 유튜버 '개발하는 남자'님의 강의를 보고 요약한 것인데, 코드만 보고서는 이해가 잘 안 되는 분들을 위해 코드의 주석까지 그대로 올린다.

화면의 구성은 간단하게 버튼 네 개로 되어있고, 각각 onPressed 시 순서대로 put, lazyPut, putAsync, create가 동작된다.

버튼들을 누르면 각각의 페이지로 이동하게 되는데, 아래는 put, putAsync, create를 눌렀을 때 이동하는 get_put.dart 코드다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controller/dependency_controller.dart';

class GetPut extends StatelessWidget {
  const GetPut({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: ElevatedButton(
          child: Text(""),
          onPressed: () {
            print(Get.find<DependencyController>().hashCode);
            Get.find<DependencyController>().increase;
          },
        ));
  }
}

• print(...): 버튼 클릭 시 인스턴스 값을 콘솔에 띄워주는 코드

복잡한 코드는 아니라서 위의 한 줄로 설명이 될 것 같다.

컨트롤러의 increase 함수에는 기능이 없어서, 코드를 보여주지 않고 넘어가겠다.

그 다음은 putLazy 버튼을 눌렀을 때 이동하는 get_lazy_put.dart 코드다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx/controller/dependency_controller.dart';

class GetLazyPut extends StatelessWidget {
  const GetLazyPut({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: ElevatedButton(
          child: Text(""),
          onPressed: () {
            Get.find<DependencyController>().increase;
          },
        ));
  }
}

역시 특별한 기능은 없다. 동작이 발생해야 initialized 되는 것을 확인하기 위해 버튼만 하나 만들어뒀다.

게시물 초반부에 create만 싱글톤이 아니라고 했었는데, 그 차이를 확인해보자.

Get.put 버튼을 누르면 콘솔창이 아래와 같이 나온다.

보이는 바와 같이 여러 번 버튼을 눌러도, create와 initialized가 한 번만 출력되고, 해시코드도 749971821로 하나만 출력된다. 하나의 인스턴스만 생성된다는 뜻이다.

Get.create의 콘솔도 확인해보자.

put과는 다르게 클릭할 때마다 initialized가 실행되고, 각 인스턴스의 해시코드도 다르게 출력되는 걸 볼 수 있다. 클릭할 때마다 새로운 인스턴스가 생성되는 것이다.

플러터를 처음 접해보시는 분이라면 개발하는 남자 님의 유튜브에 자세하게 설명이 되어 있으니 다들 한 번씩 참고햅길 추천드린다.

다음에는 GetX의 바인딩에 대해서 알아보겠다.

지난 게시물에서 얘기한대로, 오늘은 반응형 상태 관리에 대해 알아보겠다.

반응형 상태 관리와 단순 상태 관리의 차이점은 지난 게시글에서 다뤘으니, 오늘은 예시 코드와 코드 해석만 간단히 짚고 넘어갈 예정이다.

반응형 상태 관리는 변수를 선언하는 방법이 조금 독특하다. reactive_controller.dart의 코드를 보며 확인해보자.

import "package:get/get.dart";

class ReactiveController extends GetxController {
  RxInt count = 0.obs;
  void increase() {
    count++;
  }
}

반응형 상태 관리를 사용하려면, 변수 타입 앞에 Rx를 추가하고 변수 뒤에 .obs를 붙이면 된다.

• obs: 따로 타입을 지정하지 않고, 컨트롤러에서 선언한 변수의 변화를 감지했을 때 바로 update 가능

• RxInt 변수명 = 0.obs; // 정수형
• RxDouble 변수명 = 0.0.obs; // 실수형
• RxString 변수명 = "".obs; // 문자열
• Rx<클래스명> 변수명 = 클래스(인자).obs; = RxList<배열 타입> 변수명 = [].obs;

increase 함수는 별반 다를 게 없다. 이전 게시물에서 말했듯이 반응형 상태 관리는 provider의 notifyListener()나, 단순 상태 관리의 update() 등 상태 변경을 알리는 함수를 사용하지 않아도 된다는 차이점 정도가 있겠다.

그 다음은 reactive_getx.dart의 코드다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx/controller/reactive_controller.dart';

class ReactiveGetX extends StatelessWidget {
  const ReactiveGetX({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(ReactiveController());

    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GetBuilder<ReactiveController>(builder: (controller) {
          return Obx(() => Text(
                "${controller.count}",
                style: const TextStyle(
                  fontSize: 50,
                ),
              ));
        }),
        ElevatedButton(
            onPressed: controller.increase,
            child: const Text(
              "+",
              style: TextStyle(
                fontSize: 30,
              ),
            ))
      ],
    ));
  }
}

이전 게시글의 with_getx.dart 파일과 동일한 폼이지만, 다른 코드가 하나 있다. 바로 Obx() =>를 통해 텍스트를 선언해줬다는 것이다.

• Obx(): 컨트롤러를 명시하지 않아도 위젯을 반환해주는 함수

이전 with_getx.dart 코드에서는

GetBuilder<IncreaseController>(builder: (controller) {
          return Text(
            "${controller.count}",
            style: const TextStyle(
              fontSize: 50,
            ),
          );
        }),

이랬던 코드가, 반응형 상태 관리를 적용하면

Obx(() => Text(
              "${controller.count}",
              style: const TextStyle(
                fontSize: 50,
              ),
            )),

이렇게 변한다. Obx()를 사용하여 빌더를 통해 컨트롤러를 명시해줘야 했던 불편함을 덜어줄 수 있다.

또는

GetX(builder: (_) {
          return Text(
            "${Get.find<ReactiveController>().count.value}",
            style: const TextStyle(
              fontSize: 50,
            ),
          );
        })

이런 식으로 코드를 변경할 수도 있다. 보여지는 결과는 차이가 없고, 코드의 로직만 살짝 바뀐 것이다. 무엇을 쓸지는 본인 취향이지만, Obx()가 조금 더 깔끔해 보이기는 한다.

main.dart의 코드는 이전 코드의 WithGetx()를 ReactiveGetx()로 바꾸면 되므로 생략하고 넘어가도록 하겠다.

반응형 상태 변경의 또다른 장점으로는, 값이 변경이 되어야만 리렌더링이 된다는 것이다. 이를 통해 불필요한 랜더링을 확실하게 줄일 수 있다.

예를 들어, reactive_getx.dart에 아래와 같은 버튼을 하나 더 추가했다고 가정해보자.

ElevatedButton(
            onPressed: () {
              controller.makeIt();
            },
            child: const Text(
              "make it 0",
              style: TextStyle(
                fontSize: 30,
              ),
            ))

onPressed에 선언된 makeIt 함수를 사용하기 위해 reactive_controller.dart에 아래와 같은 함수를 추가해야 한다.

void makeIt() {
    count(0);
  }

• count(0): count라는 변수에 0 삽입

그리고 생긴 make it 0 버튼을 눌러도 값은 이미 0이기 때문에 화면이 랜더링 되지 않는다.

혹시 정말 그런지 궁금하신 분이 계시다면, Text 위젯에 print("rendering");을 추가해서 버튼을 눌렀을 때 콘솔에 나타나는지 확인해보시면 된다.

이렇게 간단한 반응형 상태 관리의 코드를 확인해 보았는데, getX는 알면 알수록 참 편리한 것 같다.

다음에는 getX의 의존성 주입에 대해 알아보겠다.