배경 인턴 업무 중, 웹프로젝트를 AWS ECS(Elastic Container Service)에 배포할 일이 있었다. Next.js 프로젝트를 Docke 이미지로 말아서 ECR(Elastic Container Registry)에 올린 후, ECS에 배포하였다. 클러스터, 태스트 설정, 보안 그룹 설정 등의 사소한 문제는 있었지만 어떻게 해결했는데.. 이번에는 배포한 Next.js 프로젝트에서 로그인 토큰이 발급되지 않는 버그가 발생했다. 혼자서 해결해보려고 3시간 가량 코드를 쳐다보고 도커 이미지를 새로 빌드하면서 테스트해봤는데.. 도통 알 수가 없었다. 알게 된건, 로그인 api 요청 시, Next.js 서버에서는 로그인 인증 정보가 담긴 쿠키를 응답으로 제대로 보내고 있었다는 것과 Next.js 클..
배경 여태까지 나는 useEffect를 사용할 때, 익명 함수, arrow function을 사용했다. 타이핑하기도 간편하고 굳이 함수에 이름을 적을 필요성을 느끼지 못했기 때문이다. 그러나 강의를 들으면서 useEffect의 함수에 이름을 적는 것의 장점을 알게 되었다. 확실히 인턴을 하면서 하나의 파일인데도 코드량이 너무 길어서 이해하기 힘들었던 경험이 있다. 사수가 남긴 주석 덕분에 어떻게든 이해했지만, 이런 방법으로도 가독성을 향상시킬 수 있다는 것은 처음 알았다. 복잡한 로직을 다루게 될 때 한 번 적용해볼 생각이다. 포스팅하면서 머리에 새기고, 다시 되뇌어볼 생각이다. 1. 가독성 향상 함수에 이름을 적으면 당연하게도 코드의 가독성이 향상되면서 코드의 의도를 명확하게 전달할 수 있다. 함수의 ..
배경 센디에서 3번째 파일럿 프로젝트에서 웹소켓 통신을 구현해야 했는데, 그 과정에서 Kotlin Spring 서버와 규격을 맞추기 위해 여러 시도를 해보다가 stomp.js와 sock.js를 사용해서 웹소켓 통신을 구현해보았다. socket.io와 순수 WebSocket API, STOMP 등의 다양한 라이브러리를 사용한 구현 사항을 기록하고자 한다. 로직을 분리하기 위해 커스텀 훅으로 구현하였다. socket.io socket.io 라이브러리는 node.js 기반 라이브러리이고, 표준 WebSocket 위에 추가적인 기능(자동 재연결, Room 등)을 덧붙였기에 서버와 클라이언트 모두 socket.io를 써야만 통신이 가능하다. 그러나 Spring 서버는 socket.io를 지원하지 않기 때문에 통신..
문제 백준 12865번: 평범한 배낭 알고리즘 분류 다이나믹 프로그래밍 배낭 문제 솔루션 input = sys.stdin.readline n, k = map(int, input().split()) products = [list(map(int, input().split())) for __ in range(n)] dp = [[0] * (k + 1) for __ in range(n)] for i in range(n): for j in range(0, k + 1): if j >= products[i][0]: dp[i][j] = max(dp[i - 1][j], dp[i - 1][j - products[i][0]] + products[i][1]) else: dp[i][j] = dp[i - 1][j] print(ma..
문제 설명 길이가 같은 두 개의 큐가 주어집니다. 하나의 큐를 골라 원소를 추출(pop)하고, 추출된 원소를 다른 큐에 집어넣는(insert) 작업을 통해 각 큐의 원소 합이 같도록 만들려고 합니다. 이때 필요한 작업의 최소 횟수를 구하고자 합니다. 한 번의 pop과 한 번의 insert를 합쳐서 작업을 1회 수행한 것으로 간주합니다. 큐는 먼저 집어넣은 원소가 먼저 나오는 구조입니다. 이 문제에서는 큐를 배열로 표현하며, 원소가 배열 앞쪽에 있을수록 먼저 집어넣은 원소임을 의미합니다. 즉, pop을 하면 배열의 첫 번째 원소가 추출되며, insert를 하면 배열의 끝에 원소가 추가됩니다. 예를 들어 큐 [1, 2, 3, 4]가 주어졌을 때, pop을 하면 맨 앞에 있는 원소 1이 추출되어 [2, 3, ..
