권용휘

이 전 포스팅에서 웹소켓이 무엇이고 웹소켓에 jwt를 추가하는 글을 작성했었는데, 이 번 글에서는 Spring Boot를 사용해 WebSocket 기반의 실시간 통신을 구현하는 과정을 공유합니다. 이 글에서는 WebSocket 설정, 클라이언트와의 메시징 경로, 그리고 JWT 기반의 인증 처리까지 함께 다룰 예정입니다. ■ Gradle 설정Spring Boot에서 WebSocket을 사용하려면 의존성을 추가해야 합니다. Gradle의 build.gradle 파일에 아래 내용을 추가하세요:implementation 'org.springframework.boot:spring-boot-starter-websocket' ■ 메시지 전송 코드아래는 WebSocket을 통해 메시지를 전송하는 서비스 클래스입니다.S..

웹 애플리케이션에서 특정 상황에 따라 실시간으로 데이터를 클라이언트에 전달하고 싶을 때, **웹소켓(WebSocket)**을 활용하는 방법이 있습니다. 실시간 데이터 전송을 처리할 수 있는 다양한 방법들이 있지만, 저는 양방향 통신을 가능하게 해주는 웹소켓을 사용하기로 결정했습니다.■ HTTP와 WebSocket의 차이점HTTP의 한계:HTTP는 클라이언트 → 서버 요청-응답 모델로 동작합니다. 클라이언트가 서버에 요청을 보내면 서버가 응답을 보내는 방식입니다. 이 구조는 단방향 통신이므로 서버는 클라이언트가 요청하지 않으면 데이터를 보낼 수 없습니다.즉, 서버가 클라이언트에 데이터를 푸시(push)하는 방식은 지원되지 않습니다. WebSocket: HTTP의 한계를 넘다WebSocket은 양방향 통신을..

React Query의 useMutation은 서버와의 데이터를 변경하는 작업(POST, PUT, DELETE 등)을 처리하는 데 강력한 도구입니다. 이 글에서는 useMutation의 매개변수 타입이 한 개인 경우와 두 개 이상인 경우를 비교하며, 어떤 상황에서 어떤 방식이 더 적합한지 설명합니다.(매개변수 처리 방식은 useMutation뿐만 아니라 함수 설계 전반에서 고려해야 할 중요한 요소입니다.) ■ 매개변수가 두 개인 경우return useMutation { sendData: RouteData; user: UserFormData }>({   mutationFn: ({ sendData, user }) => route(sendData, user),   onSuccess: (data) => {   ..

함수나 메서드를 설계할 때, 매개변수를 어떻게 받을지는 코드의 가독성, 유지보수성, 확장성에 큰 영향을 미칩니다. 이는 특정 라이브러리나 프레임워크를 넘어 모든 프로그래밍 언어와 설계에서 공통적으로 고려해야 할 중요한 요소입니다. 이번 글에서는 매개변수를 직접 받는 방식과 객체로 받는 방식을 비교하며, 각 방식의 장단점과 적합한 상황을 설명합니다. ■ 매개변수를 직접 받는 방식매개변수를 함수의 인자로 하나씩 나열하여 전달하는 방식입니다.호출부와 정의부에서 매개변수의 순서가 정확히 일치해야 하며, 매개변수가 적을 때 가장 간단하고 직관적입니다.# 코드 예제function calculateRectangleArea(width: number, height: number): number {   return wid..

React Query를 사용할 때, 한 페이지에서 여러 mutate를 사용하다 보면 코드가 복잡해지고 가독성이 떨어질 수 있습니다.저 역시 page.tsx에서 useMutation을 직접 사용하던 초기 방식에서, 이를 hooks 폴더로 분리하여 관리 효율성을 높였습니다.이번 글에서는 제가 겪었던 문제와 이를 해결하기 위한 과정을 소개합니다. ■ 기존 폴더 구조처음에는 src/api 폴더에서 API 호출 로직만 분리하고, page.tsx에서 직접 useMutation을 사용했습니다.src/ ├── api/ │ ├── map.ts # 경로 관련 API │ ├── user.ts # 사용자 관련 API │ ├── index.ts # API 묶음 관리├── app/ │ ├── page.tsx # 페이지 컴포넌트 ..

Node.js는 최근 웹 개발에서 빼놓을 수 없는 중요한 기술 중 하나로 자리 잡고 있습니다. 많은 개발자들이 Node.js를 활용하여 빠르고 효율적인 백엔드 시스템을 구축하고 있으며, 이를 통해 프론트엔드와 백엔드를 모두 다룰 수 있는 풀스택 개발도 가능해졌습니다. 또한, React 같은 프론트엔드 프레임워크를 사용할 때 실시간 반영(Hot Reloading) 기능을 제공하는 등 개발 효율성을 극대화하는 역할도 수행합니다. 이 글에서는 Node.js의 주요 특징과 활용 방안에 대해 정리해 보겠습니다. ■ Node.js란 무엇인가?Node.js는 Chrome V8 JavaScript 엔진을 기반으로 만들어진 서버 사이드 JavaScript 런타임 환경입니다. 기존에 JavaScript는 브라우저에서만 실..

이 글에서는 Spring Boot 애플리케이션이 AWS S3와 연결하여 파일을 업로드하는 방법을 소개합니다. AWS 자격 증명과 설정을 env.properties에 저장하고, 이 설정을 이용해 S3에 안전하게 접근할 수 있도록 S3Util과 S3Service 클래스를 구현했습니다. ■ env.properties 설정 파일env.properties 파일은 AWS S3와 연결할 때 필요한 다양한 설정 값을 포함하고 있습니다. 다음과 같은 설정이 필요합니다.env.aws.accessKey=sample env.aws.secretKey=sample env.aws.region=sample env.aws.bucket=sample env.aws.endpoint=http://sample or https://sample...

최근에 AWS S3에 파일을 업로드하는 코드를 구현하면서 흥미로운 경험을 했습니다. 이미 완성된 폐쇄망이 아닌 프로젝트를 참고하여, 제 폐쇄망 환경에서 같은 기능을 구현하려고 시도했습니다. 먼저, S3 관련 기능을 사용하기 위해 aws-java-sdk-s3 라이브러리를 Gradle에 의존성 주입만 해줬습니다. 하지만 아래와 같은 오류가 발생했습니다java.lang.NoClassDefFoundError: org/apache/http/protocol/HttpRequestExecutor처음에는 이 오류가 왜 발생했는지 의아했지만, 문제를 해결하기 위해 알아보니 이 오류는 필수적인 전이적 의존성이 누락되었기 때문이었습니다. ■ 폐쇄망과 비폐쇄망 환경의 차이제가 참고했던 폐쇄망이 아닌 프로젝트에서는, Gradle..

Next.js를 사용하면 웹 애플리케이션의 SEO를 손쉽게 개선할 수 있습니다. SEO(Search Engine Optimization)는 검색 엔진에서 더 높은 가시성을 얻기 위해 중요한데, Next.js의 Metadata API를 활용하면 페이지마다 적절한 메타 정보를 설정하여 SEO를 최적화할 수 있습니다. 이번 글에서는 SEO가 무엇인지, 그리고 Next.js 13+ 버전의 app 디렉토리 기반 라우팅에서 메타데이터를 어떻게 설정할 수 있는지에 대해 자세히 살펴보겠습니다. ■ SEO란?**SEO(검색 엔진 최적화)**는 웹사이트가 검색 엔진에서 더 잘 노출되도록 하는 일련의 작업입니다. 구글, 빙, 네이버와 같은 검색 엔진은 웹사이트를 색인(indexing)하고 검색 결과에 표시할 때, 메타데이터..

React에서 개발을 하다 보면 네트워크 요청이나 데이터 처리 시 async와 await를 사용하게 됩니다. 하지만 막상 코드를 작성하다 보면, 왜 이러한 비동기 처리를 사용하는지, 동기와 비동기의 정확한 개념이 무엇인지 궁금해지곤 합니다. 저 역시 비슷한 의문을 품고 있었는데요, 최근 개발 중 async와 await를 사용하는 이유를 정확히 이해하지 못하고 있다는 것을 깨달았습니다. 그래서 이번 기회에 **동기(Synchronous)와 비동기(Asynchronous)**의 차이를 제대로 알아보고, 프론트엔드와 백엔드에서 각각 언제 어떻게 사용해야 하는지에 대해 정리해보려고 합니다. 특히, 프론트엔드 개발에서 비동기 처리가 거의 필수적인 이유와 백엔드에서도 동기와 비동기를 상황에 따라 어떻게 활용하는지 ..