프로그래밍

Next.js 상세 페이지 로딩 속도 87% 개선으로 조회수 30% 더 얻기

어느날 회사 홈페이지가 너무 느려서 로컬 서버를 켜서 테스트해 보니 충격적인 결과가 나왔다. 무려 상세페이지 로딩에 1초 이상 소요되고 있던 것이다. 심지어 SSG를 이용해 미리 생성해 둔 정적 페이지인데도 말이다. Content Download 속도가 차지하는 비중이 큰 점으

AWS EC2 요금 폭탄

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

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

자바스크립트에서는 instanceof 연산자를 활용해서 객체의 클래스를 확인할 수 있습니다. 바로 이런 식이죠. import { Dog } from "./dog"; import { Animal } from "./animal"; const dog = new Dog(); co

웹 기반 인테리어 설계 에디터를 구현하기 위해 필요한 것들 [5편]

곡면 모서리를 포함하는 폴리곤 활용하기 시연 영상입니다. 곡면 벽이 그려지고, 방이 자동으로 나눠집니다. 선택했을 때 방도 경계에 맞게 둥글게 외곽선이 그려집니다. 스케치업과 연동해서 절차적으로 곡면 벽을 생성했습니다. 곡면이 들어간 것만으로도 꽤 아름다운 인테리어가 탄생합니

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

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

웹 기반 인테리어 설계 에디터를 구현하기 위해 필요한 것들 [4편]

에디터 엔진을 개발하면서 가장 큰 숙제는 '나중에 벽체, 가구, 마감재 같은 수많은 도면 요소들을 추가할 때, 어떻게 하면 엔진 자체를 뜯어고치는 일 없이 쉽게 추가할 수 있을까? '였습니다. 좋은 개발자 경험(DX)를 위한 확장성 있는 아키텍처가 절실했죠. 그래서 무작정 코

웹 기반 인테리어 설계 에디터를 구현하기 위해 필요한 것들 [3편]

인테리어 설계 에디터를 개발하면서 어느순간 '카메라'라는 개념이 필요해졌습니다. 그러니까, 평면도를 옆으로 움직여서 더 넓은 공간에 그릴 수도 있어야 하고, 때로는 줌을 땡겨서 평면도를 더 크게 보면서 작업해야 하기도 했습니다. 그리고 대각선 벽체가 나오는 경우에는, 평면도를

웹 기반 인테리어 설계 에디터를 구현하기 위해 필요한 것들 [1편]

사실 에디터 엔진을 처음 만들 때는 일단 화면에 뭔가 그려보기라도 하는 방식이 가장 좋은 듯합니다. 그러고나서야 전반적인 아키텍처 설계나 최적화에 관해서 머릿속에 그림이 그려지게 마련이죠. 처음부터 머릿속으로 '객체지향적으로' 설계부터 하다보면 오히려 객체 관계가 꼬이고 맙니

Flutter 상태관리 Provider면 충분하다

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

Next.js Docker 빌드시 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를 선택하고 있습니다. 그러고 보니 지금

[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"라고 하는데요. 아래와 같이 Maxim

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

주소를 가지고 지도에 위치를 찍어주어야 할 일이 있었습니다. 카카오 지도 API에서 주소를 위도 경도로 변환하는 기능을 제공해서 이용하기로 했는데요. 카카오 지도 API를 이용하려면 일단 Kakao Map SDK를 External Script로 불러와야 합니다. 다시 말해서 H

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

파일 크기 저장과 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 구문을 지정한 파일에 담긴 내용으로 대체합니다. 꺽쇠( <...> )를 사용해 경로를 지정한 경우 전처리기는 표준 라이브러리가 있는 시스템 디렉토리부터 사용자가 설정한 디렉토리를 차례로 들여다봅니다. 디렉토리는 VS Studio 2022를