반응형 react2 Next.js 삽질 후기 - Toast UI Editor, TipTap, Quill 에디터 실패기 웹퍼블리싱만 하던 놈이 개발을 해보겠다고 호기롭게 덤빈 것이 후회되는 상황이 많이 발생하고 있는데, 그 중에 제일 장벽이 크게 느껴지는게 텍스트 에디터를 삽입하려다 실패한 것들입니다. Next.js는 SSR이 장점인 동시에, SSR때문에 초래되는 문제들이 있습니다. 리액트는 보통 CSR을 기본으로 돌아가고 있다보니 텍스트 에디터들이 굳이 SSR을 지원할 이유도 없고, 그러다보니 Next.js에 쉽게 붙이기가 어렵습니다. Dynamic import는 물론이고 이미지 업로드 기능이라도 붙여볼라치면 아주 지저분해지기 쉽상이죠. 이미지를 붙이는 가장 쉬웠던 방법은 Cloudinary 플러그인입니다. How to Serve Videos in Next.js Web Apps With Cloudinary Learn h.. 2022. 8. 3. react + tailwindcss 로 만든 샘플사이트 지난번과 똑같은 디자인인데, 이번엔 리액트 + 테일윈드CSS로 만들어봤습니다. 확실히 리액트로 만들면 반복되는 작업들을 줄여줄 수 있다는 점이 가장 큰 장점인 것 같습니다. 섹션을 표현할때도 아래와 같은 상황이 생길 수 있습니다. 공통적인 부분이 많이 사용되는데요. 어느정도 규칙성이 있죠? 조금 더 세부적으로 보면 아래와 같은 예시를 볼 수 있습니다. 반복 되는 요소들이 보이시죠? 이런식으로 스타일을 정의해놓고 Testimonial과 Our Services 그리고 그 안에 필요한 내용들만 데이터로 전달해주면, 껍데기는 알아서 씌워주는 식으로 작동하게끔 해줍니다. 이렇게 컴포넌트 단위로 쪼개서 작업한다는 것이 리액트의 장점입니다. UI를 재활용할 수 있는 단위로 만드는 것이죠. 위의 카드 스타일도 마찬가지.. 2022. 8. 1. 이전 1 다음 반응형
