전체 글 10

ZEP을 Angular.js에서 Next.js로 마이그레이션하며

3월 말정도부터 시작됐던 본격적인 ZEP 플레이화면의 마이그레이션 프로젝트를 진행하면서 느낀 점들을 회고해보려고 한다. 약 두달이 넘는 시간동안 프론트엔드팀 전부가 꽤 많은 시간을 크런치모드 상태로 지냈던 것 같다.사실 나는 신입이였기에 이게 얼마나 힘든 일인지 몸으론 느꼈지만 머리로 가늠은 하지 못하고 있는 상태에서 그저께 회식에서 팀장님이 말씀해주시길 자기의 커리어상 가장 힘들고 긴 크런치모드였다고…한다.크리티컬한 문제가 있을만한 이슈들은 쳐내고 마이그레이션 TF를 마무리하는 시기에 느끼는 부분으로는 정말 힘들고 짧지않은 시간이였지만 꽤나 큰 뿌듯함이 몰려온다. 짧은 시간 내에 변경된 코드를 파악하고 기능을 구현해야했어서 어려운 부분이 많았고 온전히 내 것으로 만들었다는 확신도 아직은 들지 않지만 최..

FE 2024.08.22

ReactQuery 세미나 정리하기 (feat. 배민 주문팀)

처음 v1(Angularjs) 프로젝트에서 정적페이지로만 이루어진 부분 먼저 v2(React)로 마이그레이션을 진행하던 중 상태관리 및 query fetching에 대한 효율적인 부분을 고민하던 중 ReactQuery가 좋은 대안이 될 수 있겠다고 판단했고 관련된 내용을 찾아보던 중 배민 주문팀 프로젝트에 성공적인 ReactQuery 도입과정을 세미나로 풀어낸 내용이 있어 해당 내용을 정리하였다.당시 바쁘던 팀원들의 상태를 위해 그나마 빠르게 정리할 수 있도록 내용을 정리하고 공유했다.유튜브 배민 세미나 영상 출처 https://www.youtube.com/watch?v=MArE6Hy371c1. FE 상태관리는 무엇일까?상태란??주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경 가능즉, 문자, ..

FE 2024.08.22

MobX setter 구조분해할당 관련 트러블슈팅

프로젝트 마이그레이션을 진행하는 중 Mobx관련 setter함수를 사용할 때 있었던 문제를 정리해보려고 한다.구현하고자 했던 기능은 스페이스 설정에서 유저가 해당 스페이스의 설정중 저전력모드라는 기능을 토글로 on/off할 수 있는 기능을 구현 중이였다.구현 방향해당 기능은 유저 즉, 플레이어마다 스페이스별로 개별의 설정을 갖고 있어야했다. 그래서 플레이어의 설정관련된 전역상태를 저장하고 있는 settingStore내에 playerSettings라는 속성을 만들고 거기엔 스페이스(hashId)별 playerSettings객체를 갖도록하고 해당 정보는 유저의 로컬스토리지에 저장하도록 구현하였다.기존프로젝트(v1)에서는 추후 저전력모드 뿐만 아니라 플레이어별 설정들이 늘어날 것으로 예상하여 해당 서버 api..

FE 2024.07.10

angular.js oninput 트러블슈팅

구현기능스페이스에서 발생하는 배경음악 등의 볼륨을 조절할 수 있는 기능을 스페이스 설정창에 구현해야했다. v1(Angularjs)프로젝트에서 input의 range타입을 활용하여 해당 값을 앵귤러 컨트롤러 함수에 넘겨주려고 했다.해당 input의 oninput으로 값만 바로 바인딩하면 해결될 것 같았고, 해당 부분에서 슬라이더의 값이 변경되는 순간마다 로그에 값이 잘 바인딩이 되는 것을 확인했다.oninput onchange 차이점onchange 이벤트는 input 태그의 초점(focus)를 잃은 순간에 작동한다. 즉, input태그의 데이터를 입력하고 다른 곳을 클릭 했을 때 작동함.oninput은 input, textarea 태그에서만 사용이 가능하다. onchange는 input, textarea,..

FE 2024.07.10