-
Notifications
You must be signed in to change notification settings - Fork 0
✒ 프로젝트 회고
슬기 edited this page Nov 12, 2024
·
1 revision
- 마우스 좌표를 찾는 것은 쉬울 것이라 생각했으나 실제로는 시작지점, 마우스 이동 거리 등 생각보다 계산이 복잡했습니다
- 클릭이 시작되는 위치에 클릭이 끝나는 위치를 빼는 식으로 드래그 거리를 계산했습니다
- 드래그 거리를 측정한 후에, 이것을 카드의 위치값인 translateX, Y에 적용하는 식으로 드래그를 구현했습니다
- 마우스 드래그까지는 예제를 찾아 빠르게 해결했지만 카드의 좌표를 기준으로 이동 제한을 거는 것이 가장 어려웠습니다
- 카드의 이동 거리를 제한은 처음 카드의 위치를 저장하고, 프레임 전체 높이를 측정하고 카드의 길이 만큼 뺀 만큼만 이동 가능하게 하게끔 구현했습니다
- 몇 줄의 결과물이지만 여기에 엄청난 시간이 걸릴 수 있음을 체감했습니다
- 중간점검 때 강사님께 받은 피드백 내용 중 중복코드에 관한 문제가 있었습니다
- 5개의 앨범에 맞춰 5개의 팝업 창이 존재했고, 이를 구현하는데 거의 비슷한 구조의 코드가 다섯 번 반복되는 상황이 발생했습니다
- 먼저, 동일한 부분과 내용이 변경되는 부분에 대해 구분을 진행했습니다
- 내용이 변경되는 부분들은 Javascript 에서 객체 선언 후 값을 할당하여 함수로 값을 지정하는 방식으로 해결했습니다
- 메인 페이지에서 특정 카드/앨범을 클릭하여 각 상세페이지로 이동할 때 클릭한 값을 어떤 식으로 전달할 것인가에 대한 고민이 있었습니다
- 메세지 저장에서 활용해 보았던 로컬 스토리지와 추가로 세션 스토리지, 파라미터 전달 방식에 대해 찾아보고 모두 구현해보았습니다
- 최종적으로, 페이지 이동 시 1회성으로 쓰이는 데이터라 스토리지에 저장하는 방식이 아닌, 파라미터로 전달하기로 결정했습니다
- 기본적으로 카메라 설정과 scene 설정, 애니메이션 처리는 수업을 들으면서 배운 내용으로 구현 했습니다
- 다만, 텍스처를 적용하는 것은 공식문서만으로 이해가 어려웠고, 앨범 선택 시 리렌더링에 대한 고민이 있었습니다
- 예제를 더 찾아보고 MeshStandardMaterial 객체의 map 속성에 텍스처 배열을 전달하는 방식으로 해결했습니다
- needsUpdate 키워드를 통해 텍스쳐만 업데이트 하도록 해결했습니다
- 마우스 값으로 회전 값을 적용 시 너무 많이 회전되는 문제가 발생했습니다
- 마우스의 위치를 -1 ~ 1 범위로 변환해서 상하좌우를 구분해 해결했습니다
- 페이지를 이동하여도 사용자가 직접 입력한 메세지가 변하지 않도록 해야하는 요구사항이 있었습니다
- 로컬 스토리지 활용 예제를 참고하여 해결하였습니다
- 작성한 메세지를 저장하는 것은 예상에 없던 작업이었지만 구현해서 뿌듯했습니다
- 간단하지만 기획부터 개발까지 팀원들과 의사소통을 할 수 있어 좋았습니다!
- 시간이 부족해서 개발적으로 아쉬운 부분도 있지만 더 빨리 성장할 수 있었던 것 같습니다.ㅋㅋ
- 서로 이야기를 안해도 각자 할 일을 하며 팀원의 부족한 부분을 챙기고 배려하며 프로젝트를 진행해서 좋았습니다.
- 급하게 하다 보니 코드들이 너무 꼬인 점이 아쉬웠습니다. 다음엔 코드 기획이나 자바스크립트 공부를 더 해야겠다고 느꼈습니다.
- 프로젝트에 UI나 전반적인 컨셉아트를 짜는 것도 너무 재미있었습니다.
- 팀 프로젝트를 위한 깃허브의 다양한 기능(Issues, Milstone, PR, Project, Wiki)들을 활용해볼 수 있어서 도움이 되었습니다
- 하나의 기능에 대해 여러 방법으로 코드가 작성되는걸 볼 수 있어서 생각의 폭을 넓히는데 도움이 되었습니다
- 팀원들 모두가 적극적으로 프로젝트에 참여하고 서로 부족한 점을 보완해나가는 분위기가 너무 좋았습니다!
- 일주일이라는 짧은 시간 안에 기획, 디자인, 코드 작성, 테스트, 문서 작업을 진행하다보니 체력적으로 힘드네요..ㅠ
- 후반부에 시간이 촉박해지다 보니 저의 코드 작성 방식을 밀어붙힌건 아닌가 싶어 반성하는 시간을 가졌습니다
- 기 작성된 코드 범위 안에서 빠르게 코드 작성 방식을 파악하고 어우러져 코드를 작성할 수 있도록 좀 더 노력해야 할 것 같습니다
- 만들고자 하는 기능의 초안이 어떻게 나오고 이것이 어떻게 개선되는지 과정을 처음부터 끝까지 모두 볼 수 있어 좋았습니다.
- 회고를 통해 진행 상황과 겪고 있는 문제 상황을 공유하면서 코드를 만들어 나가니, 외부의 프로젝트나 웹사이트의 코드를 보는 것 보다 훨씬 코드를 받아들이기 원활했습니다.
- 이제 프론트엔드 직무에 입문하는 입장으로서 관련 경험이 있으신 분들이 전체적으로 프로젝트 관리를 하는지, 코드를 어떻게 짜는지 볼 수 있었습니다.
- 실제 협업에서 깃허브의 활용이 어떻게 되는지 알 수 있었습니다. 혼자서 시뮬레이션만 해봤을 때 발생하지 않은 상황을 겪고 개선해나가는 경험이 너무 좋았습니다.
- 모두가 나서서 열심히 하는 분위기가 형성되어 스스로도 구현을 하면서 기능이 작동하지 않더라도 최대한 포기하지 않으려고 자연스럽게 노력했던 것 같습니다.
- 프로젝트의 기획이 처음부터 명확했던 점이 개발 작업에 집중하는 데에 큰 도움이 되었습니다.
- 같은 부분을 함께 작업하다보니 팀원들의 코드를 보면서 배운점이 많았습니다.
- 피그마, 깃허브의 협업툴을 적극적으로 사용해볼 수 있었고, 프로젝트 전체과정을 경험해볼 수 있어서 좋았습니다.
- 팀원분들 모두 열심히 참여해주셔서 든든했고, 재미있었습니다.
- 개발 협업 방식들이 새로웠고 단기간임에도 과정들이 수월했었어 기억에 남는 팀 프로젝트가 될 거 같습니다.
- 팀원 역량의 합, 밸런스, 성향에 따라 짧고 굵게 프로젝트를 하는 것도 좋을 수 있구나 라는 것을 느꼈습니다.
- 올인이 힘든 상황이라 많이 물어보았는데 나슬기님 포함한 팀원들 지원으로 수월하게 작업할 수 있었습니다.
- 파일, 브렌치, 위키나 코드정리 등 도맡아서 힘 써주신 분들이 있어 편하게 집중할 수 있었습니다. 너무나 감사드립니다.