Atrix의 웹 개발 및 삽질 블로그 Atrix의 웹 개발 및 삽질 블로그

버전 정보React : 18.3.1Flutter : 3.24.3 이번에 Flutter 앱과 React 웹과의 데이터 통신이 필요하게 되어 Flutter에 문외한인 나는 Chatgpt와 구글링을 열심히 했다.테스트용 Flutter 코드는 제공받았지만 Dart 문법을 아예 몰랐기 때문에 내가 사용할 부분 만큼은 이해할 필요가 있었다.이전에 React Native와 데이터 통신을 했던 경험이 있던지라 금방 처리될 것이라 생각했다. (플래그 ON)작성한 코드는 아래와 같았다.Flutter// main.dartcontroller ..addJavaScriptChannel( 'FlutterWebView', // JavaScript에서 호출할 채널 이름 onMessageReceived: (JavaS..

버전 정보Next.js : 14.2.5ws : 8.18.0 구조App Router 이번에는 채팅 서비스를 구현 해보려고 한다.이전에 블로그에 기술했던 socket.io가 아닌 ws로 websocket 통신을 구현해보았다. 먼저 필요한 라이브러리들을 설치해준다.npm install ws bufferutil utf-8-validate※ 여기서 bufferutil을 설치하지 않으면 서버쪽에서 아래와 같은 오류가 발생한다.TypeError: bufferUtil.unmask is not a function 아래는 서버 및 클라이언트 측 코드이다.서버 코드// app/api/ws/route.tsimport { NextResponse } from 'next/server'import { WebSocketServer, ..

※ AWS Elastic Beanstalk와 Docker의 자세한 설명은 구글링하면 내가 설명하는 것보다 더 좋은 퀄리티의 가이드가 있으니 여기서는 설명은 생략하도록 하겠다. 내 기준에서는 Elastic Beanstalk을 생성할 때 Node.js 플랫폼과 Docker 플랫폼을 가장 많이 사용한다. 그 중에서 가장 최근엔 Docker 플랫폼을 사용했는데, Elastic Beanstalk를 생성하면 아래 이미지와 같이 기본적으로 나타나는 페이지가 있다. 보통 Docker에 프로젝트를 배포하게되면 이 화면은 사라지게 되고 배포한 프로젝트가 출력된다. 하지만 나는 이번에 일반적인 방법으로 프로젝트를 배포하지 않고 Elastic Beanstalk로 생성된 EC2 인스턴스에 직접 접근해서 grafana를 사용해보..

개발하면서 현타가 와서 생각 정리겸 푸념하며 몇자 끄적여보고자 한다... 그동안 Next.js로 개발을 하면서 로컬 환경과 배포 환경의 차이로 인해 수많은 오류를 발견하고 수정하느라 꽤나 삽질을 많이했고 스트레스도 어지간히 받았었다. 알고보니 생각보다 간단하게 해결될 일이었다... 먼저 배포 환경에서 Next.js가 실행되는 방법을 생각해보자. 배포 과정에서 npm run build 명령어를 통해 빌드를 한다. 빌드가 완료되면 .next 폴더에 웹에서 실행될 javascript 파일들이 생성된다. 배포 환경에서는 이 파일들을 실행시키는 것이다. 그렇다면 npm run start는 어떨까. 실행 순서를 보면 배포 환경과 같은 과정이다. 먼저 빌드 후에 .next 폴더의 파일들을 실행시키는 것이다. 이 점을..

클라이언트 버전 정보 Next.js : 13.4.9 socket.io : 4.7.1 socket.io-client: 4.7.1 서버 버전 정보 node.js : 18.12.0 express : 4.18.2 socket.io : 4.7.1 Next.js로 여러 웹 프로젝트를 개발하던 중 이번엔 websocket을 사용해보기로 했다. 먼저 websocket이 무엇인지부터 알고 넘어가는 것이 중요하다. 기존 웹은 단방향 통신이며 필요시에 데이터를 송/수신 할 수 있다. 그에 비해 websocket은 서버와 클라이언트간에 실시간으로 양방향 통신을 하게 해주는 녀석이다. 간단히만 말하자면 이런 것이고, 자세한 개념은 구글에 셀 수도 없이 널렸으니 개념이 이해될 때까지 찾아보기를 바란다. socket 통신을 위해 ..

참고 문서 next-auth 공식 문서 삽질의 시작... 최근에 웹페이지에 로그인 기능을 도입하게 되었다. 단, 서비스 자체 가입 및 로그인은 만들지 않기로 했다. 카카오 로그인 등의 간편 로그인만 사용하기로 했다. 하지만 각각의 간편 로그인 서비스들을 일일이 구현하기에는 많은 시간 소모와 삽질이 예고 되어있음을 감지했다. 그래서 어지간한 간편 로그인 서비스들이 모여있고 코딩하기에 간편한 'next-auth' 라이브러리를 사용하기로 했다. 그 중 GoogleProvider(구글 계정으로 로그인), KakaoProvider(카카오 계정으로 로그인)를 추가할 계획이다. 그런 뒤에, 이렇게 저렇게 해서 아기다리 고기다리 던 로그인 기능 구현이 완료되었다. 이제 배포해야지ㅎ 하고 기능 구현이 생각보다 금방 끝나..

Next.js 프로젝트에서 발생한 에러를 추적하기 위해 Sentry 를 도입했다. local 환경에서 동작 확인을 위해 npm run dev를 실행하여 localhost:3000으로 접속해보았다. (브라우저는 Chrome을 사용했다) 그런데 브라우저 콘솔 창에 아래와 같은 오류가 나타났다. 필자의 환경 기준에서 이 오류가 발생하는 원인은 브라우저의 광고 차단 확장프로그램 때문이었다. 모든 사람들은 유튜브나 기타 웹사이트에서 광고가 나타나는 것을 싫어한다. 때문에 브라우저에서 광고를 차단 시켜주는 플러그인을 사용하는 사람들이 많아졌다. 하지만 이 기능이 Sentry에서 오류를 추적하는 것까지 차단을 시켜버린다. 정상적으로 오류를 추적하고 싶다면 해당 페이지에서 만큼은 광고 차단 플러그인을 중단시켜야 한다.