전체 글337 carousel 은 CSR 로 구현하자 메인 페이지의 배너를 히어로 캐러셀로 넣기 위해서 많이 쓴다는 embla 캐러셀을 사용하려 했으나 아래의 에러 발생... 해당 캐러셀의 공식 홈페이지에서 react 에서의 사용법으로 준 스켈레톤 코드 자체에 useRef 가 사용되어 있어서, hook을 사용하기 위해서는 CSR 을 적용하기 위해서 "use client" 를 사용해야만 했다.(Next.js 13버전의 CSR 구현법...) 근데, 메인 페이지 배너를 csr 로 만들고 싶지 않았으므로... 그냥 ssr 로 구현가능한 다른 라이브러리를 찾아보기로 했다 swiper slider 를 사용하였으나, 같은 에러가 발생하였다 그냥 "use client" 를 사용해서 CSR로 구현하면 된다지만, 히어로 캐러셀은 SSR로 만들고 싶었기에 더 찾아보았더니 아래.. 2023. 2. 23. Next.js 13 에는 아직 css-in-js 를 사용하긴 이른 것 같다 처음에는 css framewok로 mui(Material UI) 사용을 생각했으므로, mui에 맞게 emotion css 를 사용해보려 했으나... 듣도 보도 못한 에러가 나와서 당황하던 중... 공식 문서를 찾아보니 그렇다... emotion 과 mui는 아직 미지원 상태여서 에러가 났던거였다... 음, 그럼 스타일드 컴포넌트로 해야겠다! 나도 하던거 하면 편하니까! 근데 안되네... ssr 로 만들어야 할 레이아웃의 서버 컴포넌트를 "use client"로 클라이언트 컴포넌트로 선언해서 csr 로 해야만 에러가 나지 않더라... 해당 페이지의 csr은 내가 원하는 것이 아니었다 한참을 방법을 찾던 중, next js 13 공식 문서에서 답을 찾았지만, 설정 방법 대로 하던 중, 아래와 같은 에러 발생.. 2023. 2. 22. 최적화의 늪... 완벽한 코드 작성에 대한 고찰 최적화 optiamization 듣기 참 좋은 말이다 "최적화하고 추후 유지보수가 쉽게 해야한다" 많이 들은 말이고 당연하지! 싶었다 근데... 이게 현실에서도 항상 정답일까? 최근 사이드 프로젝트를 혼자 해보는 중 이전 팀프로젝트에서는 생각하지 못했던 생각이 들었다 "이거 이렇게 하면 추후 유지보수 할 때 편하겠는데? 멋진 코드야! 근데 이렇게 하니 시간이 몇 배로 걸렸네..." "코드를 추후의 유지보수를 위해 최적화된 코드를 만드는 것은 물론 옳은 일이지만, 최적화를 적용하기 위해 드는 시간의 비용도 고려해야 하지 않을까?" 지금은 취업 전이므로 최적화에 필요한 추가적인 시간적인 비용은 나 혼자의 지출이지만, 회사에 입사했다면 회사에서는 개발 비용이 높아지게 된다. 그때도 추후 유지보수를 위해서 최적.. 2023. 1. 13. storybook react 컴포넌트는 재사용하여 생산성을 향상시켜준다 근데 그 컴포넌트 정보를 팀원에게 공유하자니 생각보다 이게 설명하기 힘들고 귀찮다 Next.js에서는 그런 당신을 위해 준비했습니다! 내가 말고 어느 대단하신분들이 만든 라이브러리! storybook! 컴포넌트 별로 문서화하고 테스트 해볼 수 있는 라이브러리라고 보면 될 것 같다 api 도 스웨거로 문서화하고 테스트해보듯이, 컴포넌트도 문서화로 쉽게 정리하고 조작하도록 돕는 것이다! 사용 세팅방법은 아래와 같다 리액트 앱(혹은 next.js) 설치 후 아래의 코드 실행하자 npx sb init --builder webpack5 그럼 설치 후 아래와 같이 묻는다 Do you want to run the 'eslintPlugin' migration on .. 2023. 1. 8. 이전 1 2 3 4 5 6 7 ··· 85 다음
