mahwin/JYS_WikiPage

해야할 일

[x] 기본 셋팅
[x] 메인 위키 페이지
[x] 페이지 네이션 (in 메인 위키 페이지)
[x] 위키 내용 페이지
[x] 위키 페이지 추가 모달 만들기
[x] 위키 내용 페이지 수정
[x] 위키 본문에 다른 위키 제목이 있다면 링크 걸어서 이동 시키기

타임 라인 (걸린 시간 / 예상 시간)

기본 셋팅
1. yarn berry 사용 (2h / 1h)
- 프론트 yarn berry
- 백엔드 pnpm
백엔드 작업
1. 간단한 백앤드 서버 구축 (2h / 2h)
- .env 설정
- cors 설정
- CRUD API 구현
1. db 구조 설계 (2h / 2h)
- 파일 시스템으로 db 구축
- 간단한 테스팅
프론트 작업
1. 메인 페이지 ( 4h / 4h )
  - 마크업
  - css
  - js 로직
2. 세부 페이지 ( 3h / 2h )
  - 마크업
  - css
  - js 로직
3. 위키 페이지 추가 모달 ( 1.5h / 2h )
  - 마크업
  - css
  - js 로직
4. 컨텐츠에 하이퍼링크 걸기 (2.5h / 2h )
공통 작업 페이지 네이션
- 프론트에서 받아서 페이지 네이션 하기로 결정
- ~~백엔드 api 변경~~
- ~~프론트 페이지 네이션 구현~~

시도한 것

아토믹 디자인
간단한 nest 서버 구축
yarn berry 사용
dialog를 사용해서 모달을 만들어 보자
ref 최대한 많이 써보기

사용 스택

React, Nest, TypeScript, Styled-components, 패키지 매니저 프론트 yarn berry, 백엔드 pnpm

고민한 내용

db 관련
간단한 웹 페이지니 파일 시스템으로 db를 구축함.
페이지 네이션 관련
- 페이지 네이션 프론트가 할까 백엔드가 할까
- 데이터가 별로 없으니까 프론트에서 다 받고 페이지 네이션하자
- 항상 일정한 갯수의 페이지 네이션이 나오도록 함.
상세 페이지 편집 관련
- 보통은 로그인 정보를 기반하겠지만, 해당 과제에선 패스
- 편집 버튼을 눌러야 편집이 가능하도록 함
- 편집 버튼을 누른 후에 변경 사항이 있다면 업데이트 버튼을 누를 수 있도록 함
- db에 저장되는 것 까지 확인함.
컨텐츠 내용에 링크 달기
- 위키 페이지 내용에 다른 위키 페이지 제목이 있다면 링크를 걸어서 이동 시키기
- 일반적인 서비스라면 입력 받는 곳에 # 등의 특수 문자를 입력하면 입력 창이 열리고 강의 제목을 선택할 수 있게 했을 것 같지만 여기서는 패스
- 그냥 전체 제목과 본문을 비교해서 정확히 같은 내용이 있다면 해당 내용에 하이퍼 링크를 달자
  - 제목들도 다 유니크하다고 가정하자
- 일단 제목이 제일 긴 녀석들 부터 하나씩 비교해 나가야 함.
  - 제목이 긴 녀석들을 먼저 비교하는 이유는 제목이 짧은 녀석들이 제목이 긴 녀석들의 부분집합이 될 수 있기 때문
- KMP 알고리즘으로 컨텐츠 안에 제목이 있는지 확인하자
- 본문 안에 다른 위키 페이지의 제목이 있다면 특수 문자로 감싸서 나중에 하이퍼링크를 달 때 사용하자
- 여기서 사용되는 특수 문자는 위키 페이지를 작성할 때 사용 못 한다는 조건이 있어야함.

실행 방법

git clone 후

cd ./be pnpm install

be/.dev.env 에 CLIENT_URL=http://localhost:5173 pnpm run start:dev

cd ../fe yarn install

fe/.env 에 VITE_API_URL=http://localhost:3000 yarn run dev

mahwin / JYS_WikiPage