Typescript, NextJS 스터디

Beter 프로젝트를 진행하면서 Typescript와 NextJS을 너무 모르고하다보니 진전이 잘 안됐다.

그래서 미니 프로젝트를 만들어 먼저 스터디를 진행하고 이어서 개발하기로 했다.

미니 프로젝트는 Markdown 문서(MD 파일)를 Html로 변경하고

웹 에디터에서 수정하면 워드파일 다운로드 받을 수 있는 Converting 프로젝트이다.

회사에서 노션을 사용하는데 프로그램 설계서를 어떻게 하면 귀찮은 복붙작업없이 바로 워드 문서로 만들수 있을까 고민하다가

찾아보니 MD 파일을 업로드하면 워드 파일로 변환해주는 사이트를 찾았다.

그런데 한번에 여러 파일을 업로드하면 내용을 합쳐줄주 알았는데 아니였다.

변환을 한다고해도 복붙을 해야된다면 굳이 변환하는게 의미 없는 것 같아서 내가 만들어야겠다 싶었다.

하는김에 태그별로 스타일도 바꾸고 싶어 html로 바꾸고 정리한 다음 docx로 바꾸기로 했다.

이름하야 'MDOCX'!!! 아래에는 mdocx 만들면서 배우거나 막혔던 부분을 정리했다.

 

1. Typescript 부문

http request / response 타입문제

알면서도 코베인 문제였다.

md 파일을 업로드하면 서버에 저장하고 변환한 다음 삭제하는 API을 만드는 중이었다.

res.status나 res.json이 계속 안되서 왜 안되지...계속 헤매고 있었는데,

내 블로그에 NextApiRequest, NextApiResponse을 보고 그제서야 깨달았다. 수정했더니 됐다ㅠㅠㅠ

이래서 복습이 중요하다는걸 느꼈다.

import { NextApiRequest, NextApiResponse } from 'next'

 

2. NextJS 부문

next-connect 사용기

next-connect을 적용하는데 애먹진 않았다. 사용법이 편리했고, 개발하기에도 좋았다.

next-connect는 공통된 에러 처리를 해주고, 미들웨어와 메소드별 분기처리를 깔끔하게 작성할 수 있도록 도와주는 모듈인 것 같다,

express의 재질이었다.

import nc from 'next-connect'

const handler = nc<NextApiRequest, NextApiResponse>({
  onError(error, req, res) {
    res.status(400).json({ result: false, message: 'Sorry!' })
  },
  onNoMatch(req, res) {
    res.status(404).json({ result: false, message: 'Not Mached Method!' })
  }
})

handler.use((res, res, next) => {
	// 미들웨어 자리
    // 미들웨어는 각 메소드별 함수가 실행되기 전에 호출되는 전처리 함수이다.
})

handler.post((req, res) => {})
handler.get((req, res) => {})
handler.put((req, res) => {})
...

multer을 적용하면서 확인해보니 클라이언트단에서 FormData로 데이터를 전송하면 req.body로 못 받아와서

formidable 모듈을 사용해 FormData을 파싱해야됐다.

 

(망할) multer 사용기

multer는 사용법 자체는 굉장히 심플해서 편리했다.

그런데 나는 시리얼 번호를 생성해 폴더를 만들고, 그 폴더에 업로드한 md 파일을 저장하고 싶었다.

또, 파일명이 index 번호명으로 생겼으면 좋겠다고 생각했다. (나중에 알았지만 이건 필요 없었음)

다행히 destination 옵션에서 시리얼을 생성해 폴더를 만들고, filename 옵션에서 그 폴더 아래 파일이 생기도록 할 수 있었다.

파일명은 업로드한 파일명 그대로는 가능했다. 확인해보니까 미들웨어는 한번 호출되는데 multer에 destination, filename 옵션은 파일갯수 만큼 호출되어 전체 중 몇번째인지 구분할 수 없었다.

 

제일 큰 문제는 multer에서 생성한 시리얼 번호를 post 메소드 함수에서 알수 있는 방법이 없었다.

전역 변수를 써야될까 고민했지만 Request 동작되는 환경에서 그럴수 없었다.

결국 전달할 수 있는 방법을 못찾아 내 방식대로 만들었다.

 

1. 클라이언트에서 시리얼 번호를 생성해 url 쿼리로 전달

2. 파일명을 Index로 바꿔서 FormData에 담아 API 호출

3. multer destination 에서 받아 시리얼 폴더를 만든다음

4. 원본 파일명으로 파일을 시리얼 폴더 아래에 저장

5. post 메소드 함수에서 시리얼 번호를 받아 폴더 찾아 파일 읽고 변환

6. unified 모듈로 md 파일 html로 Converting

7. html response 보내기

8. 클라이언트에 잘 도착하면 Clear API 호출해서 시리얼 번호로 폴더 찾아 파일들 삭제

 

사실 중간에 완전 생짜로 Blob 파일 Read하고 저장하고..해봤는데 파일이 계속 깨지거나 공백으로 들어가서 포기했다.

다음에 fs 부분을 다시 한번 스터디해봐야겠다.

 

_app.tsx 관하여

_app.tsx에 대해 NextJS에서 소개하는 내용만 봐 피부로 못느꼈는데 에디터에서 document을 못찾는 문제를 찾다보니 알게 되었다.

index.tsx에 console 찍어보고, _app.tsx에도 찍어봤는데 "index -> _app" 순으로 나왔다.

그리고 호기심이 생겨 _app.tsx에 id로 구분할 수 있는 div 태그를 달아 콘솔창으로 확인해보니 index.tsx에 작성한 태그보다 밖에 있었다.

어쩌면 당연한 것이 태그처럼 트리형 구조는 자식먼저 끝나고 부모가 끝난다. 그래서 콘솔 로그가 역순으로 나왔다.

즉, _app.tsx가 index.tsx을 감싸 공통적인 내용을 적용할 수 있게 해준다. (예를 들면 global.css)

 

_document.tsx 관하여

_app.tsx 보다 더 상위에서 생성되는 index.html과 같은 파일이 _document.tsx이다.

콘솔 로그를 찍었는데 반영이 안되서 재기동해보니 _app.tsx 처럼 확인 됐다.

 

3. React 부문

state의 한계

거의 마지막까지 프로세스를 끝내고 테스트를 해보니 큰 오류가 발생했다. 한개씩 converting할때는 문제가 없었는데, 10개 이상의 파일을 converting하니까 두가지 포인트에서 부하가 발생했다. 하나는 React state, 그리고 하나는 react-quill 이였다.

react-quill은 텍스트를 정리하는 기능을 넣어 크게 필요하지않아 삭제해서 제외시켰는데 state는 큰 텍스트 파일을 setState하니까 브라우저가 한참 멈추다가 진행된다.

사실 처음부터 state 문제라고 생각하지 못하고 파일 처리하는 부분부터 한 개씩 동기방식으로 처리되도록 수정했다.

 

1.  파일명을 Index로 바꿔서 FormData Array에 담아두기

2. 클라이언트에서 시리얼 번호를 생성해 url 쿼리로 시리얼번호와 Index 전달하기

3. multer destination 에서 받아 시리얼 폴더가 없으면 생성하기

4. 시리얼 폴더 아래에 Index 파일명으로 저장

5. post 메소드 함수에서 시리얼 번호와 Index 받아 파일 읽기

6. unified 모듈로 md 파일 html로 Converting

7. html response 보내기

8. 전달받은 html array에 저장

9. 모든 파일이 변환되면 Clear API 호출해서 시리얼 번호로 폴더 찾아 파일들 삭제

10. html array data state에 저장해서 div 태그안에 보이게 처리

11. html 정리

12. html-docx-js-typescript로 html 태그 docx로 변환

 

이렇게 수정하다보니 여러 테스트를 통해 핵심적인 문제는 state에 있다는걸 알게되었다.

그래서 머리를 쓰다 immutable 형식을 state로 사용했고, 다행히 문제를 해결되었다...!

 

다 하고 보니 별거 없는 기능인데 여러가지 시행착오를 격은 것 같다.

Beter 프로젝트 할때는 좀더 수월하게 진행되기를 기도했다ㅋㅋㅋ

 

완성된 MD => DOCX 프로젝트 파일은 깃에 올려놨다.

사용하게될지는 모르겠지만 나중에 산출물 제출할때 도움이 됐으면 좋겠다.

https://github.com/yelling95/mdocx.git

yelling95/mdocx