SSR
-
[ReactJS] Styled Components (CSS IN JS) 적용 및 사용법 ( 부록 : NextJS + TypesScript 환경 적용 및 사용법 )frontend/react&next 2022. 3. 3. 16:30
웹 프론트엔드 개발 시에 CSS를 적용하는 방식으로는 CSS IN CSS , CSS MODULE, CSS IN JS 등 다양한 방식이 있습니다. 프로젝트의 성격에 따라 구현하는 방식은 다르겠지만, 오늘은 Styled Components ( CSS IN JS )에 대해서 알아보겠습니다. 우선 Styled Components 를 사용하기 위해서는 가장먼저 스타일 컴포넌트 모듈부터 설치해야 됩니다. 0. Code Snippet 설치 필수는 아니지만 스타일 컴포넌트가 문자열 처럼 그냥 쭉쭉 나오면 매우 불쾌지수가 올라갑니다. 익스텐션 제가 쓰는 걸 알려드리자면 vscode-styled-components 입니다. 해당 스니펫이 아니더라도 꼭 깔고 작업하시는걸 추천..또 추천드립니다. 1. styled-compo..
-
[NextJS] Tiptap(WSIWYG Editor) - NextJS 문서 편집기(Rich Editor) 구축기frontend/react&next 2022. 3. 2. 16:32
매일 개인 개발을 할 때 글 쓰기를 만들 때 내 입맛대로 만들고 싶을 때 어떤 에디터를 사용할까라는 고민을 정말 많이 해왔던 것 같습니다. 저 또한 Quill, CK, TUI, Editor, TinyMCE 등 많은 에디터 들이 있지만 그 중에서 가장 제가 원하는대로 깔끔하게 커스텀 가능했던 에디터를 소개해드릴려고 합니다. Vue이용자들은 Tiptap에디터를 꽤 많이들 사용하는 것으로 알고 있습니다. Tiptap의 가장 큰 장점은 다양한 프레임워크 지원이 아닐까 싶습니다. Vue, React 뿐만 아니라 Nuxt, Next 등의 SSR에서의 환경을 제공한다는 것은 매우 만족 스러웠습니다. quill을 이용했을 때는 매번 dynamic을 써서 어거지로 넣었던 기억이 있습니다. 이 에디터는 매우 강력하고 스타..