본문 바로가기

전체 글

 (24)
[1편] 3D 웹게임 렌더링 최적화: 33FPS -> 61FPS 성능 개선 사례 들어가며기본 게임 기능 개발을 완료하고, Chrome DevTools Performance 탭으로 측정해 본 결과는 암담했습니다. JavaScript 실행 시간이 20.9초로 매우 높았고, 큰 번들 사이즈로 인한 초기 로딩 지연이 있었습니다. JavaScript scripting이 전체 실행 시간의 59.6%를 차지했고, 커버리지 분석 결과 상당수의 미사용 코드가 발견되었습니다.이러한 성능 이슈는 게임플레이에 직접적인 영향을 미쳤습니다. 목표했던 60fps의 부드러운 애니메이션이 30fps 이하로 떨어지는 프레임 드랍 현상이 발생했고, 유저의 게임 경험을 크게 저해했습니다. React Three Fiber, Rapier 물리엔진이 결합된 복잡한 3D 환경에서 이러한 성능 문제를 해결하기 위해 다양한 최적..
멀티플레이 게임에서 물리 연산, 어디서 처리하는 게 맞을까? 들어가며멀티플레이 게임 개발에서 물리 연산과 캐릭터 동작을 어디에서 처리할지를 결정하는 건 프로젝트의 핵심 과제 중 하나였습니다. 초기 설계에서는 백엔드가 모든 물리 연산을 담당하는 구조를 선택했습니다. 이 방식은 데이터 신뢰성과 치팅 방지 측면에서는 유리했지만, 구현 과정에서 여러 한계에 부딪혔는데요.이러한 문제를 해결하기 위해 프론트엔드가 물리 연산을 처리하고, 백엔드는 데이터 검증과 동기화에 집중하는 구조로 전환하게 되었습니다. 이 글에서는 해당 논의의 과정과 최종 결정을 내리게 된 이유를 공유하려 합니다. 백엔드에서의 물리 연산의 한계에 부딪힌 이유[1] 맵 구성과 충돌 판정의 복잡도- 맵 데이터 수작업 문제:프론트엔드에서는 3D 모델링 파일인 GLB를 React Three Fiber의 useGL..
가상 DOM과 실제 DOM의 차이: 정말 성능 향상이 있을까? 들어가며React는 가상 DOM 개념을 도입하여 DOM 업데이트 성능을 향상시킵니다. 실제 DOM과 비교했을 때, 가상 DOM은 UI의 변화 관리를 좀 더 효율적으로 처리할 수 있도록 돕습니다. 그러나 최근 모던 리액트 딥다이브를 읽고, 이러한 최적화가 항상 빠른 속도를 보장하지는 않는다는 사실을 알게되었습니다. 직접 실험한 결과에서도 큰 차이를 느끼기 어려웠을 정도인데, 과연 가상 DOM과 실제 DOM의 차이는 왜 중요하며, 어떤 상황에서 유용할까요?  실제 DOM과 가상 DOM의 역할브라우저의 DOM(Document Object Model)은 화면에 표시되는 최종 결과물입니다. 실제 DOM을 변경할 때마다 브라우저는 이를 렌더링하고, 새로 추가하거나 수정된 요소를 반영합니다. 이러한 과정은 복잡한 트..
palloc과 malloc의 차이점: 메모리 할당 구조 이해하기 들어가며Pintos 프로젝트의 4주간 여정이 마무리되었습니다. 흥미로운 부분도 많았지만, 모르는 것이 너무 많아 OS라는 깊은 바다에 빠져 허우적대는 기분이 들기도 했습니다. 그래서 4주 전으로 돌아가 다시 한 번 해보면 더 많은 것을 배울 수 있었을 텐데 하는 아쉬움도 남습니다. 지금이라도 배운 내용을 정리하며 완전히 내 것으로 만들기 위해, 이번 시간을 활용해 메모리 할당에 대해 글을 작성해보려 합니다. 특히, 처음 Virtual Memory 과제를 접하면서 malloc과 palloc의 개념이 혼동되었던 경험을 다루어 보겠습니다.  위의 함수는 page를 초기화하는 함수입니다. 처음 빨간 줄의 코드를 보았을 때, page는 palloc_get_page()으로 할당하는게 맞다고 생각했지만, malloc..
로그인 상태 유지에 대한 모든 것 : 세션과 JWT 차이 및 장단점🤔 들어가며브라우저에서 사용자의 로그인 상태를 유지하는 방법에는 크게 두 가지가 있습니다. 세션(Session)과 JWT(Json Web Token)입니다. 이 두 방식의 차이점은 무엇일까요? 그리고 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링) 환경에서 각각 어떤 방식이 적합할까요?또한, 발행된 토큰을 브라우저에 저장할 때 어떤 제약이 있는지도 살펴보겠습니다. 쿠키와 Web Storage는 어떤 차이가 있으며, 각각의 보안 문제는 무엇인지 알아보겠습니다. 이 글은 DFS(개념을 하나씩 깊이 파고들어가는)방식으로 진행될 예정입니다. Stateless HTTP로그인 상태를 유지하는 기술이 왜 필요한지 이해하려면, 먼저 HTTP가 어떤 특성을 가지는지 살펴볼 필요가 있습니다. HTTP는 무상태..
정글 4주차 회고, 꿈과 현실 기술 블로그 글이 아닌 개인 회고는 블로그에 잘 올리려 하지 않는 편인데, 이번주는 꽤나 스트레스가 심한 주였어서 이 생각들을 미래에 보면 어떤 기분을 가질까 싶어 작성해본다. 나는 나이마다 꼭 해야하는 일이나 성취같은걸 믿지 않는 편이다. 그래서 내가 아직까지 꿈을 쫓으며 살고 있는 것인지도. 근데 생각해보면 그렇지 않나? 이 세상에 꼭 그래야하는게 뭐가 있나? 내 인생인데 남의 생각, 사회의 생각 그런걸 따라서 내가 행복할 수가 있나? 내 인생에는 내 생각, 내 결정, 내 마음이 가장 중요하다고 생각하는 편이다. 그러나 이런 가치관에 의심이 자라나는 한 주였다. 꿈을 쫓아다니다보면 나와 같이 꿈을 쫓고 있는 사람들과 어울리게 된다. 어쩌다보니 이제 나는 꿈을 찾는 그룹에서 항상 최고령이 되었다. 실제..
단방향 암호화와 키 파생 함수: 안전한 비밀번호 관리의 핵심 들어가며사실 지금까지 프론트엔드를 작업하면서 Https에 의존하며, 암호화에 대해 깊이 고민해본 적이 없었습니다. 그러나 이번에 정글에서 백엔드 부분도 개발을 맡게 되고, 처음으로 암호화에 대해 진지하게 고민을 하게 되었습니다. 이 글에서는 비밀번호 암호화에 적합한 방식, 사용가능한 라이브러리, 그리고 암호화가 이루어지는 원리에 대해 정리해보았습니다. 단방향 암호화비밀번호를 암호화 할 때는 단방향 암호화를 진행해야 합니다. 그런데 단방향 암호화는 어떤 뜻일까요?단방향 암호화는 데이터를 암호화할 때, 해당 데이터를 다시 복호화할 수 없는 방식의 암호화 기법입니다. 이는 일반적으로 해시 함수를 사용하여 이루어지며, 해시 함수는 입력 데이터를 고정된 크기의 해시 값으로 변환합니다. 이 변환 과정은 비가역적이며..
1주차 회고: 찬찬히 나를 돌아보는 시간 모래성은 언젠가 무너진다 개발을 하면서 나는 종종 파도 앞의 모래성을 쌓는 듯한 기분이 들었다.국비로 개발을 시작하고 운좋게 바로 회사에 입사할 수 있었지만, 사실 나는 프레임워크의 사용법을 익혀 그걸 단순히 키보드로 쳐내는, 개발자가 아닌 기능인에 가까웠다. 물론, 프레임워크만 잘 다뤄도 회사에서 일하는 데는 지장이 없었다.하지만 그 프레임워크를 뛰어넘는 복잡한 문제 해결을 위해선 사고의 기반이 필요한데, 나의 기반은 파도 한 방이면 사라질 수 있는 모래성처럼 불안했다. 내가 사고할 수 있는 기반이 없고, 사용하는 프레임워크와 라이브러리에 스스로를 제한하고 있다는 느낌을 지울 수 없었다.  하지만 난 그런 기능인에 머무르고 싶지 않았다. 좀 더 복잡한 문제를 해결하는 사람이 되고 싶었고, GPT가 간단..

티스토리툴바