> 이 글은 2021.10.29에 업데이트 되었습니다.

제가 어떤 기능들로 포스팅 하는지 작성해보려고 합니다.

## SEONEST
원래 사이드 프로젝트 명으로는 catch-a-nest라는 이름을 썼었는데 '둥지를 잡자?'라는 마음상태를 있는 그대로 만들어서 뜻은 그렇게 깊지는 않습니다.

의역 해보자면 `내 스스로 둥지를 잡아보자` 또는 `내 둥지` 라는 뜻으로 지었습니다.(성이 `서` 이기도 해서...)

2021년 10월 경 스타일 수정, pages개선, 컴포넌트 개선 등을 포함하여 리팩토링을 진행했습니다.
스타일의 경우 기존 `emotion`을 사용하는 부분을 모두 `stitches.js`로 변경하고, style token을 재정의, 다크모드 적용 등 많진 않지만 변화가 있었습니다.

![main.png](https://files.seonest.net/images/qnfqnfqnf/post/94/image.png)
![main-dark.png](https://files.seonest.net/images/qnfqnfqnf/post/95/image.png)
## 로그인
초기 컨셉을 [netlify-cms](https://www.netlifycms.org/) 에 영감을 받아 진행했습니다.

### /admin
netlify-cms 에서는 `/admin`을 통해서 cms에 접근할 수 있습니다.

저 또한 그런 방식을 사용했습니다.

![admin-page.png](https://files.seonest.net/images/qnfqnfqnf/post/84/image.png)

### oauth
별도로 이메일 로그인 처럼 회원가입과 로그인 기능을 백엔드에 두지 않고, oauth로만 로그인을 관리하도록 했습니다.

여러가지 이유가 있지만, 시간을 절약하고 보안상으로도 괜찮은 방법을 생각하다보니 이런 방식을 사용했습니다.

단지 현재는 구글**만** oauth를 통해 로그인이 가능하게끔 해놓았습니다.

원래는 로그인 시에 해당 oauth 계정이 앱에 존재 하지 않는다면 자동으로 추가하고 로그인 되도록 로직은 만들어놓았지만 admin 계정을 별도로 만들어 그 계정만 접근할 수 있도록 해놓았습니다.~~(제 구글 계정만 로그인이 가능하답니다...)~~

## 글쓰기
![write1.png](https://files.seonest.net/images/qnfqnfqnf/post/85/image.png)
![write3.png](https://files.seonest.net/images/qnfqnfqnf/post/87/image.png)

로그인을 하게 되면 몇가지 추가적으로 보이는 버튼이 있습니다.

글쓰기와 글수정, 글삭제 등을 할 수 있는 link나 버튼입니다.

## 에디터
예전부터 일을 하거나 공부를 할 때 개발블로그를 많이 찾아보곤 했습니다.

그 중에서 nhn toast 팀 개발블로그를 관심있게 많이 봤었는데 그 글 중에 toast팀에서 개발하고 있는 [markdown editor 에 대한 글](https://ui.toast.com/weekly-pick/ko_20200320)을 보았고 괜찮은 것 같아서 사용해보았습니다.

처음 사용할 땐 2.0 버전 이었는데 중간에 3.0버전이 업그레이드 되어 저도 migration을 진행했었습니다.
(이미지 hook 커스텀에 대해 오류가 잠깐 있었지만 3.0.1이 되면서 수정되었습니다.)

현재는 3.1.1이 릴리즈되었습니다.

![editor.png](https://files.seonest.net/images/qnfqnfqnf/post/89/image.png)

## nhn/tui.editor
> GFM Markdown and WYSIWYG Editor - Productive and Extensible
> _- https://github.com/nhn/tui.editor_

기능적으로나 사용자 경험으로나 뛰어난 에디터라고 생각합니다.
react 에서도 사용할 수 있게 라이브러리를 지원해주고 있습니다.

무엇보다 가장 마음에 들었던 건 preview auto scrolling이 정확하게 잘 된다는 점이었습니다.

글을 길게 작성하게 될 경우가 있는데 간단하게라도 preview 모습을 보면서 작업을 해야 하는데 이 기능이 도움이 많이 되는 것 같습니다.

그리고 블로그 특성 상 이미지를 첨부를 많이 하게 되는데 그 부분에서도 `hooks`를 통해 `addImageBlobHook` 함수를 통해 미들웨어처럼 사용할 수 있게 제공되어 있어 쉽게 사용하기 좋았습니다.

`code` 하이라이트도 지원이 되며 `prism.js`를 통해 지원하는 플러그인을 설치를 하여 적용할 수 있습니다.

![image-hook.png](https://files.seonest.net/images/qnfqnfqnf/post/93/image.png)

다만 스타일 관련 부분은 css를 직접 import하여 편하게 쓸 수 있지만 자기 취향대로 변경하기 위해서는 override하기 위해서 class명을 찾아가며 수정할 수는 있습니다.

dark mode경우도 css가 별도로 지원합니다만 저는 내부 테마 token 적용을 위해 override해서 사용했습니다.

## 저장
![post-save.png](https://files.seonest.net/images/qnfqnfqnf/post/90/image.png)

간단한 설명을 추가할 수 있고 post에 대한 thumbnail을 저장할 수 있게 해놓았습니다.

## 임시저장
중간중간 언제 어디서든 작성할 수 있도록 임시저장 기능을 넣었습니다.

![image.png](https://files.seonest.net/images/qnfqnfqnf/post/91/image.png)

이미 publish된 글에도 임시저장을 할 수 있고, 수정을 했을 시 임시저장된 글이 있으면 불러올지 말지 결정할 수 있습니다.
(velog 사이트에서 임시저장에 대한 기능을 보고 좋은 것 같아서 만들어보았습니다.)

## Preview
@toast-ui/editor는 좋은 preview를 제공합니다.
그대로 post detail 페이지에 써도 상관은 없지만 좀 더 다양한 remark, rehype plugin 적용과 컴포넌트 적용 등을 위해 [react-markdown](https://github.com/remarkjs/react-markdown)을 사용했습니다.

그래서 editor에서 글을 쓰고 toast-ui/editor preview 뿐만아니라 `react-markdown`에 대한 preview를 보기 위해 컴포넌트를 적요하였습니다. (post detail page에 동일하게 들어갑니다.)

![preview.png](https://files.seonest.net/images/qnfqnfqnf/post/92/image.png)

## 다크모드
 `@radix-ui/colors`를 통해 다크모드를 구현하였습니다.
해당 라이브러리에는 동일한 color명에 해당하는 light, alpha-light, dark, alpha-dark 이렇게 4개의 palette를 제공해줍니다.

이를 이용하여 light theme과 dark theme에 동일한 color명이지만 모드에 따라 light color와 dark color를 가지게 하여 적용하는 방법을 사용하였습니다.

![dark.png](https://files.seonest.net/images/qnfqnfqnf/post/96/image.png)
![dark-editor.png](https://files.seonest.net/images/qnfqnfqnf/post/97/image.png)

## slug
> slug: A slug is a part of the URL when you are accessing a resource.
> 
> _- [what is a slug](https://stackoverflow.com/questions/19335215/what-is-a-slug)_


내부적으로는 post에 대한 생성은 id가 key인 스키마이지만 url이나 외부적으로 보이는 부분은 전부 slug를 통해 사용합니다.

unique한 slug를 위해 로직을 추가하고 사용하기 때문에 중복되는 slug인 경우에는url상에서 달라질 수 있습니다.

## 권한
글쓰기, 글수정 등은 로그인 되어 있지 않으면 접근하지 못하도록 막아야 합니다.

전역 상태인 user 상태를 보고 authentication을 체크한 뒤에 401 페이지를 렌더링 하게 합니다.

![401.png](https://files.seonest.net/images/qnfqnfqnf/post/99/image.png)

## 마치며
> 이 전체에 대한 소스는 [제 github](https://github.com/JHSeo-git/catch-a-nest) 에서 보실 수 있습니다.


많은 기능들이 있는 것은 아니지만 글을 쓸 때 어떻게 작성하는지 정리해보고자 글을 적어보았습니다.

계속해서 기능들이 추가되거나 작성되지 않는 기능들을 더 넣도록 이 글을 업데이트 해나갈 예정입니다.

SEONEST

> 이 글은  재 작성된 글입니다.
>  
> _- 2021. 07.16_

많은 곳에 좋은 개발 블로그 사이트가 많습니다.
(medium, tistory, wordpress, velog, devto 등등)

Notion처럼 좋은 도구들도 많습니다.
(현재도 사이드 프로젝트 관리라던지, 일정 관리가 필요할 경우 유용하게 사용하고 있습니다.)

그럼에도 이렇게 개인 사이트를 개발 했던 이유가 있습니다.

개인적으로 개발 블로그를 만들어서 사용하고 싶은 욕구와 더불어서
기술 습득과 실제로 구현 시에 어떤 부분에서 
- 문제가 많이 발생하는지
- 고민을 많이 하는지
- 고려해야될 것들은 어떤게 있는지
- 등등

을 느껴보고 싶어서 시작한 이유가 있습니다.

또한 구현 시에 나의 부족한 점을 파악할 수 있고, 이해도를 높일 수 있겠다는 생각도 했었습니다.

그래서 시작했습니다.

# Stack 선택 기준
- 많이 익숙한 것 
- 그렇지만 더 이해할 필요가 있는 것 또는 이해하고 싶은 것 
- 사용해보고 싶었던 것

위 조건 범주에서선택해서 개발 했습니다.

# Front-end
- typescript: 이젠 타입스크립트 없이 개발을 못한다고 할까나...
- react: 프런트엔드 3대장 중 가장 좋아합니다.
- next.js: React SSR을 위해 선택했고 Vercel과 잘 맞아서 선택했습니다.
- recoil.js: 정식 릴리즈는 되지 않았지만 보일러 플레이트가 없다 싶이 하고 진입장벽이 낮아 썼는데 상당히 만족스럽습니다.(페이스북에서 만들었기 때문에 React와 잘 맞을 것 같다는 생각도 했습니다)
- react-query: API 관련 상태를 별도 상태 관리 툴 없이 간편하게 쓸 수 있는 장점이 있습니다. 타입스크립트 지원도 매우 잘 되어 있습니다. 
- axios: api 호출을 위해 사용했습니다.
~~- emotion: CSS-in-JS tool 중 간편하게 쓸 수 있어서 사용했습니다.(성능 또한 좋습니다.)~~
- stitches.js: 가볍고, design token을 적절히 강제하여 복잡도를 낮추는 theme 적용방법이 좋았고, 타입스크립트 지원도 잘 됩니다. ssr 지원도 간편하게 적용가능하고, dark mode 적용 시 theme을 통해 간편하게 적용할 수 있어서 사용하였습니다.
- toast-ui/editor: v2.0 부터 사용했지만 최근 v3.0 배포가 되어 더 좋아졌기도 하고, 프리뷰 자동 스크롤링이 굉장히 잘 되어있습니다. 큰 단점은 없어보여 사용했고, 문서도 잘 되어 있습니다.
~~- markdown-it: post viewer에 좀 더 나은 markdown view를 위해서 사용했고, 여러 plugin이 잘 제공되어 있어서 사용했습니다.~~
- react-markdown: react component 형태로 사용할 수 있어서 좋았고, 타입스크립트 지원도 잘 되어있습니다. rehype, remark 플러그인도 무리없이 적용할 수 있어서 사용하였습니다.
- vercel: 프런트엔드 배포를 위해 별도 build 없이 github에 push 하면 자동 빌드, 배포 되어 매우 편해서 사용했습니다.

# Back-end
풀 스택으로 개발을 해보고 싶었고 그래서 cms를 구현하기 위해 back-end를 개발했습니다.

- typescript
- node.js: java spring boot를 다루긴 힘들기도 했고, 자바스크립트로 웹 서버를 간단하게 구현할 수 있어서 선택했습니다. 무엇보다 친숙한 언어로 가능하기 때문에 큰 고민없이 선택했습니다.
- koa.js: express.js, koa.js, fastify를 사용해보았었고 그 중 익숙하여 빠르게 적용가능한 koa.js를 선택해서 구축했습니다. (나중에 바꿀 생각도 있습니다.)
- mariadb: 몇 번 써보기도 해봤고, 레퍼런스도 많고 오픈소스이고 등등 많은 이점이 있는 RDB라서 사용했습니다.
- typeorm: 몇 번 사용해보았고, 타입스크립트도 잘 지원되서 사용했습니다. 다만 document가 보기 편하진 않아 아쉬웠습니다.
- aws: s3(이미지, 파일 등 저장용도를 위해), ec2(db서버, 웹서버를 위해), route53(도메인 구매를 위해) 를 사용했습니다.
- pm2: nodejs 프로세스 매니저로 안정적이며 다양한 편의기능이 있어서 사용하기 좋았습니다.
- nginx: 웹 서버 구동을 위해 사용했고, 간단하게 설정할 수 있어서 좋았습니다.
- cloudflare: front-end 정적파일, api 등 cdn, proxy설정을 위해 사용했습니다. ssl 적용도 쉽게 가능하고 여러 편의기능들이 있어 좋았습니다.

# 개발 진행

![notion-ss.png](https://files.seonest.net/images/qnfqnfqnf/post/30/notion-ss.png)

초기 배포를 위해 2주 정도 기간을 잡고 진행했었습니다.
최소한의 기능만 담고 반영된 모습이 생각한 모습과 비슷한지 확인을 위해 최대한 빠르게 배포를 진행했었습니다.

그 뒤 필요한 기능, minor 오류, 추가하고 싶은 기능 등을 하나하나 추가 했습니다.(nextjs, 임시저장 기능, 오류 등)

# 글 작성
제가 부족하거나 이해하고 싶은 글 위주로 작성했었습니다.
최대한 정확한 정보를 작성하기 위해서 글 속도는 많이 빠르진 않지만 꾸준히 해보려고 하고 있습니다.

작년 3,4월 부터 프런트엔드 공부를 시작했습니다.

자바스크립트, react를 보았을 때 신선한 충격과 알 수 없는 불안감 등이 혼합된 상태로 시작했습니다.
불안감이 올 때마다 공부노트 쓰는 것 처럼 글을 작성했고 
작성할 때마다 그 불안감이 조금은 줄어들어 계속해서 느리지만 꾸준하게 작성하게 되는 것 같습니다.

# 마무리
결로은... 여전히 즐겁고 불안하지만... 즐겁게 개발하는 날이 많아졌으면 좋겠습니다.




SEONEST

SEONEST

블로그 생성