개인회고 Week4
- 사진 파편을 만들고 움직임
- 셰이더 프로그래밍
- 갤러리 페이지 히스토리 라우팅
- 그 외 잡다한 버그수정, 스타일수정, 등등…
타입스크립트는 나쁘다- 고통을 받긴 했지만 어떻게든 운영되고 있는 느낌이었다
- react-three/fiber, drei, spring 등은 정말 api 명세서가 되어 있지 않구나는 것을 느꼈다
- 기술 스택 고려할 때 튜토리얼이 잘 되어 있는 것을 선택해야겠다고 생각했다
- 사원수가 뭐하는 놈인지 알게 되었음
- 사진 파편을 구현하는 데 메시 수백개로 표현하는 것은 렌더 콜을 불러일으키기 때문에 성능이 나쁘며, 지오메트리를 useFrame을 이용해서 변경하는 것 역시 CPU에서 대량의 작업을 수행하기 때문에 애니메이션을 CPU로 구현하기로 했음
- 사진 파편 애니메이션을 glsl로 구현하고, react-spring/three를 이용해서 uniform의 값을 넘겨주고 싶었으나 uniforms 객체가 리렌더링되면 새로 매터리얼에 할당되므로 기존에 있던 셰이더와 연동되는 uniforms 객체를 참조하지 못해서 애니메이션이 작동하지 않는 문제가 발생함
- 원인은 useMemo인 것으로 밝혀졌고, useMemo가 react strict mode에서 호출될 때
const lerp = useMemo(()⇒({lerp:1}), [])과 같은 꼴로 사용하더라도 2번 호출되어 각기 다른 객체를 반환하기 때문에 동일성을 보장하고자 useRef를 사용하여 해결함
- zustand의 setter 함수를
const {setValue} = valueStore();와 같은 형태로 사용하면 리렌더링이 일어나는 것을 알게 되었음-
const setValue = valueStore( store⇒store.setValue )와 같은 형태로 작성하도록 리팩토링할 예정
-
- 코드를 보는 실력이 늘어났을지도
- 사진 파편 움직이는 거 정말 미쳤고, 최적화도 잘되어있어서 정말 짱이라고 생각하는 기능입니다.GOOD!(세연)
- 사진 파편이랑 워드 클라우드 정말 미친 것 같습니다! 되게 개별적인 요소들이 많은 것 같은데 최적화가 잘 되어있다는게 대단한 것 같습니다. 개인적으로 최적화 안 된 버전 fps와 현재 버전 fps를 비교하는 글이 있으면 이런 요소들이 잘 부각될 수 있지 않을까 싶습니다. 👍 (종찬)
- 사진 파편 렌더링 성능에 깜짝 놀랐습니다. 셰이더 코드는 알아먹긴 힘들지만 궁금하네요 정말로 (정욱)
- 동기화 기능 구현
- 링크 공유 기능 추가 및 자잘한 수정
- SSE 도입하여 로딩 프로그래스 바 구현 (페어프로그래밍)
- 메인 페이지 유령 캐릭터 모델링 및 이동 구현 (페어프로그래밍)
- 애니메이션 구현 어렵다.. 뭔가 잘 안된다 → 정욱님이 원인을 찾으셨다 역시 라이브러리를 그냥 쓰면 안되고 이에 대한 이해가 필요하다고 느꼈다
- SSE 에 대해 알게 되었다.
- blender를 다루는 법을 조금 알게 되었다.
- react-spring에 대해 조금 알게 되었다.
- 분야 가리지 않고 뚝딱뚝딱 만들어내시는 모습이 정말 멋진 것 같습니다! 저는 프론트하라고 하면 잘 못하는데 진정한 풀스택의 귀감이 아니실까 싶습니다 ㅎㅎ. 페어프로그래밍도 되게 재밌었습니다! (종찬)
- 저도 rotation 돌리는거 재밌었습니다. 동서남북이 45도 틀어진것 뿐인데 왜이리 헷갈리던지 ㅋㅋ.. (정욱)
- 동기화+로딩 프로그레스 기능 수고하셨습니다😇 캐릭터 이동에 대한 고통을 듣고 있는데 힘들어하는 게 느껴지시더라고요.(기종)
- 헤더에 유저 인포 및 로그아웃 기능 추가
- 공유하기 기능 구현
- 공유하기 모달 디자인, 공유API 연결
- history 기능 구현
- history 사이드바 history 변경 모달 디자인
- 유저의 모든 history 가져오기
- 해당 history gallery 데이터 가져오기
- 조회수 기능 구현
- threejs 애니메이션 관련해서 다시 한번 어려움을 느꼈다.
- 이번주는 뭔가 시간이 빨리 가는 느낌이 들었다. (새벽까지 개발하지 않아서 그런가..)
- 리액트는 파도파도 끝이없음
- useFrame 내부에서 상태값 변경이 일어날 시 최적화 이슈가 있음을 알게 되었음
- ref를 사용하거나 최대한 상태값 변경을 줄이는 방향으로 진행해야함
- 라이브러리의 타입스크립트 완벽 지원이 얼마나 중요한지 너무 와닿는 일주일이었다. 그럴 일이 있을지는 모르겠지만 만약 라이브러리를 개발하게 된다면 신경쓸게 정말 많아보인다.
- threejs의 position 계산 방식, scale 등 여러 요소들을 학습하게 되었다.
- 같이 애니메이션 방향별 rotation 값 계산할때 재미있었어요! ㅋㅋ 페어프로그래밍 이래서 하나 싶었습니당(세연)
- 프론트엔드 리팩토링 하시는 거 보면 지식의 깊이가 다른 게 느껴지십니다 ㄷㄷ (기종 + 종찬)
- 리액트 관련 지식이 정말 깊다는 것을 느꼈읍니다 (기종)
- Notion 데이터 처리 관련
- Fastapi와 연동하여 이미지 픽셀 저장
- 노션 페이지 링크 저장
- 각 그룹별 키워드 저장
- SSE 도입하여 로딩 프로그래스 바 구현 (페어프로그래밍)
- 표지판 만들기
- 서버 계층화 관련 리팩토링
- Crontab관련 기능 구현 도중, 우연히 DB상에서 전체 데이터에서 검색하는 것에 대한 어려움을 깨달음.
- 3D 모델링 해보니까 뭔가 뿌듯하다. 프론트 쪽 코드에 벽돌이라도 한 장 쌓은 느낌이다.
- SSE가 기술적으로 꽤 어려울 거라고 생각했는데, 생각보다 쉬웠다.
- SSE에 대해서 알게 되었다.
- SSE가 어떤 방식으로 통신하고, Nginx에서 어떻게 하면 오류가 발생하는 지 이해하게 되었다.
- blender를 다루는 법에 대해 조금 알게 됐다.
- 어제 실험해봤을때 인덱싱을 걸어주고 인덱스 기준으로 탐색하는 걸 확인했는데, 전체 시간은오히려 느려지는 걸 발견했다.
- lastSharedModified를 기준으로 유저 100,000개를 탐색했다.
- 아마도 한날 한시에 생성된 유저들이다보니 중복되는 값이 많아 인덱스가 제 성능을 발휘하지 못하는 것 같다.
- 다음엔 각 유저마다 값을 다르게 주고 실험해 볼 생각이다.
- 리얼 풀스택 종찬님.. SSE Nginx 오류까지 금방 해결하시고 능력자십니다!(세연)
- SSE가 생각보다 쉬우셨다니 놀라운 재능! (정욱)
- 서버 성능에 대해 관심이 많다는 것을 느꼈습니다.
