전체 글336 [Archi-play] Feb 2026 프로젝트 세팅 (1/25)1. 기술 스택pnpmNext.js vs. vite https://www.linkedin.com/pulse/vite-vs-nextjs-which-should-you-pick-your-next-project-8jphf/React 19TypescriptThree.jsCSS : Tailwind디자인 라이브러리 : chakra UIstate management : recoil src│ ├── App.css│ ├── App.tsx│ ├── assets│ │ ├── react.svg│ │ └── texture│ │ └── grass.jpg│ ├── components│ │ ├── render-view│ │ │ ├── player... 2026. 3. 1. [Three.js] 2D 타일 배치하기 Three.js는 3D 라이브러리이지만, 카메라 깊이 방향의 한 축을 고정하면 2D 처럼 구현할 수 있다. png asset은 여기에서 구했다.https://kenney.nl/starter-kits Starter Kits · Kenney kenney.nl 그 와중에 내가 겪은 이슈.. canvas : 800 x 800 pxmapData : 10 x 10 2차원 행렬tile size : 80 x 80 px 그럼 캔버스에 꽉차게 타일이 배치되어야하는데 상단에 까맣게 빈 공간이 존재했다. 의도적으로 타일 텍스쳐를 렌더링하지않고 빵꾸냈을 때 정사각형 타일이 아니라 약간 직사각형인걸 볼 수 있다. 하지만 콘솔 로그를 찍어보면 타일 geometry 크기는 80 x 80인걸 확인할 수 있었다. // 카메라 위치.. 2026. 2. 23. [Three.js] userData 대신 클래스 상속하기 - 구현할 기능클릭 이벤트를 통해📍Pin mesh 를 화면에 추가하고, 이를 클릭했을때는 Ray caster로 intersect된 node 중 pin mesh를 찾아서 selected pin 설정하기 - 초기 구현 방식userData.pinId를 추가해 핀 여부를 판단intersect 결과에서 userData 기반으로 selected pin 결정 - 문제점userData를 추가한 사람 외에는 어떤 속성값이, 어떤 목적으로 들어가있는지 알 수 없음 : 협업 시 추적성과 가독성 저하객체의 역할이 코드에 드러나지 않음 타입 시스템으로 추적하기 어려움 - 설계 변경 PinMesh extends THREE.Mesh { id : string; constructor(id:string){ .. 2026. 1. 30. .gitattributes 와 바이너리 파일 새로운 기능을 구현하기 위해 .glb 파일을 로드해 렌더링 하는데 어느 순간 loader 에러가 발생했다. Draco 인코딩과 KTX2 인코딩하여 압축한 glb 파일을 클라이언트에서 디코딩하여 렌더링하는 코드에서 에러가 발생하고 있었다.잠깐 찾아보니 Draco는 geometry를 압축하여 전송 크기를 감소하고, KTX2는 텍스쳐를 압축하여 GPU 메모리와 성능을 최적화하기 위함 이라고 한다. import * as THREE from 'three';import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';import { .. 2026. 1. 30. [2026] 월간 프로젝트 계획 크든 작든 미니 프로젝트 1개씩 진행하기만들고 싶은거 생길때마다 포스팅 업데이트 ✨ 1월기술 스택 정하기아키텍쳐 고민 2월3D 건축물 뷰어 사이트 만들기 (feat. Three.js)Three.js 직접 사용하고 익숙해지기 3월2D 게임 형식 추가하기 -> 월드맵 개념으로 (아래 링크 참조)W Concept 테크 블로그 4월웹소켓 채팅 구현 5월 2~4월 까지 계획을 쓰고나니까 헐 재밌겠다 !! 하는 생각이 든다 ㅎㅎㅎ 원래는 각자 개별 프로젝트라고 생각했는데 한 개의 프로젝트로 구현이 가능할 것 같다.규모가 커질걸 생각하면 아키텍쳐도 잘 분리해봐야겠다 2026. 1. 19. 2025년 12월 회고 (W49 ~ W52) 📔12월 회고12월 초에 출시를 하고, QA 이슈를 처리하고, 그 외 여러 가지 버그와 UI 를 고치며 한 달을 보냈다. 끊임없이 고쳐야 할 것들이 있었다. 딱 한달이 지나자 어느 정도 안정이 되는 단계가 되었고 부가적인 기능도 마저 구현하고, 배포하게 되었다. (모호한 부분이 있지만) 다음 단계를 기획하는 시점이랄까.. 최근에 프로젝트 코드에 익숙해져서 추상화된 코드를 어느정도 파악하고, 유지보수 할 수 있게 된 것 같아서 꽤 뿌듯했다. (리뷰 받아봐야 하지만) 처음 개발 공부를 시작하고 기능을 구현했을때 느꼈던 그 기쁨이었다. 📅 25년 회고24년 6월 퇴사24년 7월 부트캠프 시작24년 12월 부트캠프 수료25년 6월에 개발자 취직 7개월 차 근무 중 타임라인을 적어놓고 되돌아보니 나에겐 뜻깊은.. 2026. 1. 4. 2025년 10-11월 회고 (W40 ~ W48) 🗓️😂2달 뒤로 갑작스레 출시일이 정해졌다. 출시를 앞두고도 세부적인 기획에 변동이 생기는데, 출시 일정은 그대로였다. 그렇게 은은한 야근이 시작되었다.. 출시라는 목표가 생기니 원동력이 되긴 했다. 그렇지만 기획 명세의 부재로 인해 번복되는 업무들이 좀 답답하게 느껴졌달까?페이지를 만들었는데요, 없어졌습니다. 근데 주변 이야기를 들어보니 비일비재한 일인가보다.. 주요 기능(3D 모델 렌더링)은 이전부터 개발된 상태인데 그걸 둘러싼 나머지 기능들을 추가하고, 고치고.. 하는 일정들이 이어지고 있다.디자인 시스템을 구축해두어서 UI 요소를 그려내는건 비교적 간단했다. 그렇지만 보여지는 것보다 중요한 것들이 있음을 배워가는 것 같다.. 근데 보여지는것도 중요함 ㅜ 아직은 개발 업무에 대한.. 어떤.. .. 2025. 11. 30. 2025년 9월 회고 (W36 ~ W39) 👽💬9월의 업무 요약- 기록의 중요성. 적어두지 않으면 당최 무슨 일을 했는지 알 수가 없다..- 되짚어보니 TO DO 가 더 발견되는 회고 시간. 이래서 회고하는건가요 빌드 최적화 : static 파일 빌드에서 제외하고, 배포 컨테이너에서 EFS 로 마운트- 도커 학습 하는 기회가 되었다 -> 좀 더 사용해보자- 이미지, 컨테이너, ... - AWS 도 개인적으로 써보면 좋을것같다- 당초 목적과 달리 정작 빌드 시간이 줄어들진 않았다. 빌드 시간이 많이 소요되는 이유를 한번 분석해보자 서비스 간 SSO login- 개발 필요한 api 정의 - 응답 -> 리다이렉트 : 로그인 or 회원가입- 인증 처리 (액세스 토큰, 쿠키, 로컬 스토리지, 로그아웃, .. ) -> 여기서 많이 헤맸음. SSO .. 2025. 9. 30. 2025년 8월 회고 (W31 ~ W35) 👽💬1년 52주인데, 어느새 35주차라니. 올해가 4달밖에 남지 않았다니 ! 입사 3달차가 되었다. 명확한 태스크가 주어지기 보다는, 개발 중인 서비스도 주요한 기능은 거의 구현이 되었고.. 사소한 버그나 개선, QA 역할을 하고 있다. 내가 근무하던 제조업에서의 익숙한 업무 방식은 Top down 이라서 .. 개발자는 좀더 주체적으로 일할 수 있는 게 장점이라고 생각하긴 했지만 생각보다도 더(!) 할 일을 찾아서 헤매야하는? 그런 상황이 이어졌다.. 물론 가끔 명확한 요구사항이 있어서 구현한 경우도 있었다. 그래도 기존 코드가 워낙 많고 길고 복잡하니까 봐두는게 좋을거같아서 흐름을 따라가보며 나름 공부를 좀 했다. 버그 있으면 고쳐보고.. tanstack-query는 부트캠프 프로젝트에서 몇번 사.. 2025. 8. 29. 이전 1 2 3 4 ··· 38 다음
