프로그래밍

AWS EC2 비용 폭탄

수업료 단단히 치뤘다 보다시피 갑자기 26일부터 하루에 20달러씩 나가기 시작했다. 진작 예산 알림 설정해 두었어야 했는데 너무 안일한 것이다. 주요 항목은 DataTransfer-Regional-Bytes와 Data-Transfer-Out-Bytes다. 모두 EC2에서 발생하는 요금

자바스크립트 instanceof 안 쓰고 클래스 타입 판별하는 방법

클래스 타입 체크는 하고 싶지만 순환 참조 문제는 피하고 싶을 때 자바스크립트에서는 instanceof 연산자를 활용해서 객체의 클래스를 확인할 수 있습니다. 바로 이런 식이죠. import { Dog } from "./dog"; import { Animal } from "./an

CAD 프로그램 곡면 벽 구현하기 Segment + Arc를 Edge로 가지는 Polygon 활용법

CAD 프로그램 곡면 벽 구현하기 Segment + Arc를 Edge로 가지는 Polygon 활용법 시연 영상입니다. 곡면 벽이 그려지고, 방이 자동으로 나눠집니다. 선택했을 때 방도 경계에 맞게 둥글게 외곽선이 그려집니다. 스케치업과 연동해서 절차적으로 곡면 벽을 생성했습니다. 곡면이

실시간 협업을 위한 마우스 트래킹 구현

두 브라우저에서 각각 접속해서 서로 마우스 위치를 공유하는 모습입니다. 인테리어 디자인 소프트웨어에서 사용할 계획입니다. Socket.io를 이용하여 쉽게 구현할 수 있었습니다. mousemove 이벤트가 발생할 때마다 마우스 x, y 좌표를 서버로 보냅니다. 서버는 받은 좌표를 ID

Flutter 상태관리 Provider면 충분하다

React Context API와 비교 4년 동안 어림잡아 50개가 넘는 웹사이트와 앱을 개발하면서 많은 상태관리 라이브러리를 사용했습니다. 웹은 Context api, Redux, Zustand, Flutter는 Provider, GetX, MobX, Bloc, Riverpod, 안

Next.js Docker 빌드시 creating optimized production build 단계에서 멈출 때 해결법

Next.js Docker Build Freezes at "creating optimized production build" Next.js를 Docker 환경에서 빌드하다 보면, creating optimized production build 단계에서 무한정 멈추는 상황을 겪는 분

Next.js vs Remix 비교 둘다 운영 중인 후기

Next.js에서 Remix로, Remix에서 Next.js로 다시 돌아온 과정 Next.js를 사용하다가 작년 이맘때쯤 잠시 Remix로 넘어갔던 것 같습니다. 물론 아래에서 설명하겠지만 Next.js 15.5 이후로 저는 다시 Next.js를 선택하고 있습니다. 그러고 보니 지금

import type으로 순환 참조 문제 해결하기

[TS] import type으로 순환 참조 문제 해결하기 Cannot access '_' before initialization 오류 "Cannot access '_' before initialization" 오류는 말 그대로 무언가를 초기화하기 전에 사용하는 경우 발생합니다. 순환참

개발자에게 AWS 계정 접근 권한 주는 법

AWS IAM 만들기 서버 개발을 위해서는 AWS를 주로 사용하는 편입니다. 특히 서비스를 쓴 만큼 지불하는 온디맨드 과금 정책 덕분에 결제 관리가 편리해서 고객님들께 계정 생성을 요청드리고 있습니다. 다만 아이디 비밀번호로 직접 계정에 접근하는 방법은 보안 위험이 큽니다. 고객님들께

구글 개발자 계정 본인 인증하기

최근에 구글 개발자 계정 인증이 강화되었습니다. 스팸 앱을 차단하기 위한 조치라고 합니다. 앱 개발을 진행할 계정 초대가 필요하시다면 구글 개발자 계정에 다른 사용자 초대하는 방법 게시글을 참고해 주세요. 좌우지간 25달러 결제를 마치고 구글 개발자 프로그램을 가입하면 이런 상태에

[Unity Shader Graph] Texture2DArray를 입력으로 받는 Triplanar Node 만들기

얼핏 보면 잘 모르겠지만, 자세히 들여다 보면 절벽 부분에 텍스처가 늘어나 있습니다. 쉐이더에서 월드 스페이스 xz를 UV로 설정했기 때문입니다. Y축은 고려하지 않은 거죠. 이럴 때는 보통 ShaderGraph가 제공하는 Triplanar 노드를 사용하면 됩니다. Triplanar

HTML img 태그 srcset과 sizes 속성 사용법

HTML img 태그 srcset 과 sizes 속성 사용법 프론트엔드에서 img 태그 srcset 과 sizes 속성에 대한 이해는 필수적입니다. 단순히 src 속성으로만 원본 이미지 파일을 불러오면 불필요한 로딩 시간으로 인해 사용자 경험을 해칠 위험이 크기 때

[Zustand] The result of getSnapshot should be cached to avoid an infinite loop 에러 해결하는 법

Zustand를 사용하다 보면 한번쯤 마주하는 에러입니다. 내용을 보면 "The result of getSnapshot should be cached to avoid an infinte loop"라고 하는데요. 아래와 같이 Maximum update depth exceeded 에러와

Next.js에서 카카오 API로 주소를 위도 경도 값으로 변환하는 법

React 기반 SSR에서 하이드레이션 문제 해결하기 주소를 가지고 지도에 위치를 찍어주어야 할 일이 있었습니다. 카카오 지도 API에서 주소를 위도 경도로 변환하는 기능을 제공해서 이용하기로 했는데요. 카카오 지도 API를 이용하려면 일단 Kakao Map SDK를 External

파일 업로드 기능 구현 방법 및 주의사항

파일 크기 저장과 S3 Presigned URL 웹 서비스 개발 시 사용자 파일 업로드 기능은 필수적입니다. 하지만 단순히 파일을 저장하는 일을 넘어서, 사용자 경험과 웹 성능을 최적화하기 위한 고려 사항들이 많습니다. 특히 대용량 파일을 효율적으로 처리하고, 프론트엔드와 연동해서 화

[Git] Large files detected 오류 해결하는 법(+유니티 팁)

오류 메시지는 이렇게 나옵니다. large files detected. you may want to try git large file storage - https //git-lfs.github.com. 크기가 100MB가 넘어가는 파일을 Commit하는 경우에 생기는 오류입니다. 웹

구글 개발자 프로그램 가입하는 방법

우선 개발자 프로그램에 가입할 구글 계정으로 구글 플레이 콘솔 회원가입 페이지 에 접속합니다. 보시는 페이지에서 법인 사업자인 경우 기관/단체 유형을, 개인 사업자거나 사업자가 없는 경우도 개인 유형을 선택해 주세요. 개발자 계정을 만드는 데 필요한 항목을 설명하는 페이지입니다. 구

AWS Amplify "Log group does not exists" 에러 해결하는 방법

운영 중인 AWS Amplify 앱 로그를 확인하기 위해서 모니터링 페이지에 나와 있는 로그 그룹 링크를 클릭했습니다. 하지만 사진처럼 로그 그룹을 찾을 수 없다는 메시지가 나왔죠. 로그 그룹 링크는 분명히 아래 스크린샷처럼 AWS Amplify 콘솔에 적혀 있는데도 말입니다. 이때

구글 개발자 계정에 다른 사용자 초대하는 방법

이 글에서는 아이디 비밀번호 노출 없이 고객님 구글 개발자 계정에 다른 사용자를 초대할 수 있는 방법을 설명해 드리겠습니다. 초대한 다른 인원은 고객님 개발자 계정에서 빌드 업로드, 테스트 진행, 스토어등록정보 수정 등 작업을 수행할 수 있습니다. 우선 구글 플레이 콘솔 에 접속하신

Remix(Express Server) + Socket.IO 설정하기

Remix 기반 Fullstack 웹 애플리케이션 서버를 운영중이었는데, 채팅 기능을 추가할 일이 생겼습니다. 채팅 기능은 쌍방향 통신을 필요로 합니다. 쌍방향 통신을 구현하는 방법은 여러가지가 있어요. 하지만 첫째로는 생산성, 둘째로는 Flutter와 연동해야 했으므로 호환성 및 라

C++ 코드를 실행하는 과정

전처리, 컴파일, 어셈블, 링킹 1. 전처리 우선 #include 구문을 지정한 파일에 담긴 내용으로 대체합니다. 꺽쇠( <...> )를 사용해 경로를 지정한 경우 전처리기는 표준 라이브러리가 있는 시스템 디렉토리부터 사용자가 설정한 디렉토리를 차례로 들여다봅니다. 디렉토리는 V