Fe3 Lottie란 무엇인가 Prologue 기획자로부터 요청이 왔다. 버튼안에 있는 문구에 에니메이션을 넣을 수 있냐고... 가이드를 보고 열심히 css animation으로 개발해보았다. 그래서 초안을 공유해드렸더니, 갑자기 모션 디자이너로부터 연락이 왔다. 디자이너님께서 lottie.json 파일로 적용시키면 된다고 한다 (오잉???) lottie가 무엇이고, 어떻게 적용하는지 알아보자 개념 After Effects로 만들어진 고퀄리티 Animation을 web, app에서 쉽게 구현해주는 library입니다. Animation을 json 파일로 export 시켜 개발자에게 공유하여, 개발자들은 이 파일로 에니메이션을 추가합니다. Lottie는 개발자, 디자이너에게 엄청나게 유용합니다. 디자이너가 만든 에니메이션을 개발자가 다.. 2023. 6. 15. Headless Component 개념 기능은 있지만 스타일이 없는 컴포넌트 도입이 필요한 이유 기능과 스타일이 공존한 컴포넌트는 재사용하기가 어렵다. 기능 추가하려니 스타일이 깨지고, 스타일을 추가하려다보니 기존 UI에 side-effect가 생긴다. 그래서 비슷한 컴포넌트를 계속 만들게 되는데.. 이는 변경이 빈번하는 프로젝트에서는 적합하지 않다. 컴포넌트를 기능만 담당하는 것만 하나 만들어서 각자 다른 스타일을 입혀 재사용이 가능한 컴포넌트를 만드는것이 좋겠다. How 인터페이스 먼저 고민하기 의도가 무엇인가? 이 컴포넌트의 기능은 무엇인가? 어떻게 표현되어야 하는가? 분리하기 복잡도를 낮추는가? 재사용 가능한 컴포넌트가 만들어지는가? 구현 custom hook context Headless UI Library https://hea.. 2023. 5. 27. Next.js 3개월 사용 후기 13.0.0 version 기준 페이지간 이동 시 왜 getServerSideProps를 항상 거쳐야 한다. 불필요한 API 호출이 불가피하다. 필요에 따라 skip 할 수 있으면 좋을거 같다. 해당 요청은 몇 년째 계속 있었지만, 아직 해결되지 않았다. dynamic import, preload가 기본적으로 제공되어 너무 편하다. 이러한 로직을 구현하다보면 코드가 더러워지는데... 단, production에 올려야만 preload가 동작한다는걸 명심하자... 왜 local build에서는 안되게 해놨는지 모르겠다. 개발자들이 좋아하는 이유는 알겠다. 귀찮은걸 다 해주기 때문에 비지니스 로직에 집중할 수 있다. 신입이 Next.js만 잘 알고 개발한다면, 왠만한 중상급 개발자만큼 완성도 높은 퀄리티를 보.. 2023. 5. 19. 이전 1 다음
