jsp 기능을 리액트로 옮기는데 시간이 너무 오래 걸려서...
다 롤백하고 일단 디자인만 입혀보기로 했다
테일윈드 라이브러리 설치
스프링에서는 헤더jspf의 head 태그에 외부 라이브러리를 import 하고 그 헤더를 모든 페이지마다 집어넣는 방식으로 외부 라이브러리를 적용했다
리액트도 딱히 설치 필요 없이 html 의 head 태그에 매번 import 하는 방법도 있지만 브라우저가 매번 테일윈드 기능을 계산해야 하기 때문에 화면 로딩이 느려질 수 있어서 권장되지 않는 방법이라고 한다
일반적으로는 라이브러리를 설치하는게 가장 좋다고 해서 그냥 설치를 해줬다
역시나 터미널에 명령어를 입력하면 간편하게 라이브러리 설치를 할 수 있다
서버가 실행중이라면 ctrl + c 를 눌러서 잠깐 서버를 꺼주고
npm install -D tailwindcss postcss autoprefixer
를 입력하면 테일윈드 설치가 된다
그 뒤에 테일윈드 설계도 파일을 만들기 위해
터미널에 npx tailwindcss init -p 명령어를 입력하면
tailwind.config.js : 테일윈드 전용 설계도
postcss.config.js : 테일윈드 문법을 CSS 로 바꿔주는 번역기
두개의 파일이 생성이 되어야 하는데 나는 이게 생성이 안되고 계속 오류가 났다
문제 해결 과정
다시 재설치 후 같은 명령어들을 입력... 하는 과정을 여러번 했지만 매번 오류
가장 간단한 해결 방법 : 그냥 수동으로 파일 두개를 만들어준다
src 폴더 아래에 그냥 만들어주면 끝
플러그인으로 추출
플러그인이 이렇게 추출을 해줬다
각각 화면 구조, 설정, 스타일을 나타낸다
jsx 는 페이지 디자인이니까 화면을 담당하는 js 파일들에 넣어주면 되겠고
두번째 config.js 는 설치할 때 만들어놓은 그 파일에 넣으면 된다
마지막 css 는 index.css 파일에 넣으면 된다
jsx 파일로 추출했으니 js 였던 파일 확장자를 바꿔줬다
그 두개의 차이를 찾아보니까
JS(.js)는 표준 자바스크립트 파일
JSX(.jsx)는 리액트(React)에서 HTML과 유사한 마크업을 자바스크립트 코드 안에 작성할 수 있게 해주는 확장 문법
즉 리액트에서 html 마크업을 사용할 수 있게 바꿔준거다
옮기는 과정 중 쓰고있던 플러그인이 좀 이상해서...
복사하는데에도 한도가 있길래 다른 플러그인으로 바꿨다
주로 나타났던 오류 : 이미지 경로
추출된 코드를 복붙하면 매번 오류가 났는데
화면에서 이미지나 아이콘을 쓰려고 하는데 찾을 수가 없어서,
즉 실제 파일도 없고 import 도 되어있지 않아서 나타나는 오류였다
이런 오류의 경우 해결법이 단순한데, 그냥 피그마에서 svg 로 아이콘을 내보내서
public 폴더 안에 때려넣었다
대부분의 웹 프로젝트에는 public이라는 이름의 특수 폴더가 있다
이미지, 폰트, 아이콘 같은 정적 파일들을 이곳에 담아두는 용도
개발 도구는 이 public 폴더 안에 있는 파일들을 웹사이트의 뿌리(Root)에 있는 것처럼 취급하기로 약속이 되어 있다
경로 맨 앞에 붙은 슬래시(/)는 "우리 웹사이트의 최상단(루트) 주소에서 시작" 하라는 뜻
따라서 굳이 경로를 직접 적을 필요가 없게 되고
{/* 로고 영역*/}
<div className="flex items-center cursor-pointer">
<img src="/logo.svg" className="h-[56px] w-auto object-contain" />
</div>src="/logo.svg" 이런식으로 사용이 될 수 있는 것이다
디자인 퍼블리싱 작업 중에서...오류는 없고...
그냥 플러그인으로 추출해서 그대로 넣으면 미세한 디자인이 자꾸 어긋나서 짜증나는 문제밖에 없다...
현재까지 jsx 로 바뀐 것들은 대충 페이지가 구현이 된 상태이고... 자세한 부분은 아예 생각 안했다
스프링하고 연결해서 데이터 가져오는 부분...진짜 걱정이다 이걸 어떻게 해야하나...
글 작성, 수정 페이지에 에디터 사용
https://codesandbox.io/examples/package/react-quill
react quill 에디터와 미리 나와있는 디자인을 사용할 예정이다
일단 후보군 두개가 더 있었는데
TipTap 은 내가 하나하나 다 커스텀 해야하는 번거로움이 있었고 실제로 구현은 하긴 했지만 너무 조악해서...롤백했다
CKEditor 5 는 프리미엄 기능이 너무 많았다...
quill 은 일단 설치만 하면 필요한 기능은 다 제공이 되기도 하고... 우연히 css 디자인 되어있는 곳을 발견해서 커스텀 할 필요가 없겠다 싶어서
npm install react-quill-new
이 명령어는 리액트 19버전을 지원하는 quill 을 설치하는 명령어
내가 쓰는 리액트는 19 버전이라서
처음 설치했던 quill 은 호환성이 맞지 않아서 아예 바꿔줬다
설치가 다 끝나고
package.json 파일에 가보면 "react-quill-new": "^3.8.3", 이 잘 추가된걸 볼 수 있다
원래 팁탭 부품으로 사용했던 컴포넌트 안에 있는 파일을 활용해서 Quill 로 수정해줬다
import, export 도 전부 quill 로 수정해준다
여기까지 하면서 느낀건데
커뮤니티 CRUD 는 완전히 포기하고
도슨트 기능 + 아카이브 기능 + API 활용에 먼저 집중해야 할 것 같다
왜 다른 서비스들이 커뮤니티 기능을 구현하지 않았는지 좀 알것 같기도 하고
커뮤니티 관련 로직까지 다 구현하다가는 내가 이걸 도저히 완성하지 못할 것 같아서...
