Gloomy Store

포트폴리오 설명

프론트엔드

이제는 볼 수 없는, 그리운 싸이월드를 되살린 컨셉의 개발 블로그 입니다.

명색이 개발자인데, 네이버나 티스토리같은 기성품보다는 블로그 시스템 자체를 제가 만들어보고 싶었어요.

글쓰기 기능이 생각보다 어려웠던 기억이 납니다. 코드에디터와 코드 하이라이팅 기능이 들어가야하는데, 에디터 자체를 만드는 것은 상당히 시간을 많이 잡아먹는 일이었기에 summernote라는 WISYWIG editor로 구현을 했습니다.

다만 커스텀해야할 기능이 많이 있었기에 (code highlighter 포함) 글 작성 기능에 상당한 시간이 걸렸습니다.

이미지는 첨부하자마자 바로 webp로 변환하여 서버에 저장합니다.

블로그에 존재하는 모든 내용은 ServerSide Rendering으로 구현됩니다.

이미 클라이언트에 도착한 시점에 모든 HTML이 완성되어 있으니,
검색엔진 최적화에 큰 도움이 될거라 생각하고 있습니다.

PC버전 기준으로, lighthouse로 채점해본 web vital은 거의 만점에 가깝습니다.
다들 성능최적화 한다고 쉽게 말은 해도,
어떤걸 최적화하는지, 구체적으로 뭘 해야 하는지 모르는 경우가 많으니깐요.

제가 아는 FE최적화 지식은 다 욱여넣은 것 같아요.
거의 모든 코드에 Memoization을 적용시켜서 웬만하면 재렌더는 일어나지 않습니다.
폭풍같은 작업량이었지만, 즐거웠습니다.

자택 서버가 좀 더 성능이 우수한 고가 제품이었다면, 점수가 더 잘나왔을지도 모르겠습니다.

백엔드

CRUD: 글 작성, 댓글 작성으로 INSERT INTO를, 글 수정, 댓글 수정으로 UPDATE SET을, 임시글이 정식 포스트가 될 때 임시글 DELETE를, 거의 모든 데이터 조회에 SELECT를, 쿼리문은 원없이 사용해본 것 같습니다.

이외에 이미지 첨부시 바로 webp로 전환해서 temp 이미지 폴더에 넣는기능, 임시 저장글이 정작글로 포스팅 될 때 temp image dir에서 정식 이미지 dir 옮기는 기능, 정규식으로 포스팅 내용의 <img> 태그를 읽어서 정식 이미지 dir로 src 내용을 바꾸는 기능이 들어가 있습니다.

JWT: 로그인 기능 개발을 위해 도입했습니다. 토큰이 이상하면 400을 보내고, 토큰이 파기날짜가 되었으면 403을 보냅니다.
어느 쪽이든, 프론트에서는 자동 로그아웃 기능을 적용시킵니다.

게시판이라는 것이 생각보다 복잡하고
경우의 수가 너무나도 많다는 것에 놀랐습니다.

조금 아쉬웠던 점은, 블로그라는 것은 실시간 데이터를 보여주는 시스템이다보니
SSG, ISR 같은 캐싱 전략을 활용할 기회가 적었습니다.

개요

기본적으로 다크모드로 생활을 하는 사람들이 있습니다.
바로 제가 그러한 경우이죠.

핵심은 lightness를 계산하는 기능입니다.
#000 => rgb(0, 0, 0) => hsl(0, 0, 0)로 변경해서, 배경이 어두우면 그대로 두고, 밝으면 어둡게 바꿉니다.

// 16진수 색상을 RGB로 변환하는 함수
      function hexToRgb(hex) {
        hex = hex.replace('#', '');
        if (hex.length === 3) {
          hex = hex.split('').map(x => x + x).join('');
        }
        const bigint = parseInt(hex, 16);
        return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
      }

      // RGB를 HSL로 변환하는 함수
      function rgbToHsl(r, g, b) {
        r /= 255;
        g /= 255;
        b /= 255;
        
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        const l = (max + min) / 2;
        let h, s;
        
        if (max === min) {
          h = s = 0; // 무채색
        } else {
          const d = max - min;
          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
          switch (max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
          }
          h /= 6;
        }
        
        return [h, s, l];
      }
      

return 값을 [h, s, l]로 빼낼 필요는 없지만(l만 이용하기 때문),
추후 색상은 살리고 밝기만 어둡게 하는 기능을 추가할 예정이기 때문에 hue와 saturation도 return하게 제작했습니다.



위와 같이 동작합니다.
한 번 동작을 일으키면, localStorage에 다크모드 적용 여부를 저장해둡니다.

manifest.json은 PWA에도 사용되지만,
이렇게 크롬 웹스토어에서 이 APP이 어떤 APP인지 정보를 담는 역할도 합니다.

브라우저 엔진으로 chromium을 사용하는 모든 브라우저에 대응합니다.
(chrome 객체 사용 가능한 브라우저 - chrome.runtime, chrome.tabs 등)

단, DOM 요소 중 iframe이나 shadowDom이 다른 도메인을 가지고 있다면,
Cross Origin 보안 작동으로 인해 적용이 안됩니다.

Module 설명

개요

요즘 게시판이나 커뮤니티 등에는 전부 태그가 들어가죠?
useState를 선언하는 것만으로 쉽게 태그를 배열로 받을 수 있습니다.

import GloomyTags from 'react-tag-maker';

      function App() {
        const [state, setState] = useState([]);

        return (
          <GloomyTags
            state={state}
            setState={setState}
          />
        );
      }

      export default App;
      

props는 매우 간단합니다.
그냥 state와 setState 두 개만 넣으세요.

결과물은 ['show', 'me', 'the', 'money'] 와 같은 배열로 만들어집니다.

배포

npm publish로 배포합니다.

npm i react-tag-maker

Reactjs는 물론, Nextjs client component도 대응합니다.
typescript, 일반 js 둘 다 대응합니다.

자매품으로 vue-tag-maker(다운로드 수: 1765)도 만들었어요.

체험해보기

포트폴리오 설명

프론트엔드

채팅: 채팅 기능의 핵심은 웹소켓입니다. 소켓에 메세지를 emit하면, 웹소켓 서버에서 해당 방에 참여한 모든 이들에게 broadcast해주고, broadcast 받은 클라이언트들은 모두 새로운 메세지를 받게되는 형태입니다.

화상통화: 2개의 PEER, 시그널 서버, TURN서버가 주 핵심요소입니다. 최초 동작시, 웹소켓으로 만들어진 시그널 서버에 sdp정보를 보내어 PEER끼리 서로 정보를 주고받습니다. 이후 서로 주고받은 sdp를 토대로 STUN서버 (stun:stun.google.com:19302)에 중계요청을 보내며, 중계기로부터 받은 영상데이터 혹은 PEER에게 직접 받은 영상데이터를 video태그에 재생시킵니다.

백엔드

채팅: 서버에서는 웹소켓 connection이 일어나면 클라이언트에서 받은 uuid를 토대로 방을 생성합니다. 이제 그 uuid로 전달된 메세지를 해당 방에 참가한 사람들에게 broadcast해줍니다.

화상통화: 시그널 서버는 클라이언트로부터 받은 sdp 정보를 상대방 peer에게 전송하여, 서로 연결을 잘 수립할 수 있도록 합니다. 이후 STUN서버나 TURN서버를 통해 Interaction Connection Establishment 후보를 찾고, 서로의 PEER간 연결이 수립되면, 그 이후부터는 서버의 역할이 매우 작아집니다.
단, TURN서버의 경우 직접 구축하는 것이 어려웠기 때문에 google 공개도메인을 사용했습니다.

OAuth: NextAuth 라이브러리를 통해 구현합니다. 사용자(Resource Owner)는 현 프로젝트의 인증서버에 인증 요청을 보냅니다. 그후 인증서버는 구글의 Resource 서버에 요청을 보내게 되고, Resource Owner의 인증을 위임받은 구글서버에 의해 인증서버에는 사용자의 정보(이름, 메일)이 도착하여 토큰화되어 사용할 수 있게 됩니다.

포트폴리오 설명

프론트엔드

우선 getServerSideProps로 해당 투표의 uuid를 토대로, 투표 데이터가 있는지 확인 후 없으면 custom 404페이지로 안내합니다.

존재한다면 실제 투표페이지로 안내합니다.
투표 데이터는 React Query를 통해서 fetch 하며, 데이터가 정상적으로 송/수신 되고 있는지 React-query devtool을 통해 관찰할 수 있습니다.

이 프로젝트는 Build하지 않고, React Query devtool을 보여주기 위해 pm2 - npm run dev로 .env.development 환경으로 돌리고 있는 상태입니다. (꽃 이미지)

투표를 간편하게 생성 가능하며, 언제든지, 자유롭게 생성 가능합니다.

투표를 하면, 바로 DB에 내용이 업데이트 되고, react query에 설정된 의존성 배열에 의해 한 번 더 fetch를 거치게 됩니다. 이후 투표 결과 화면이 송출됩니다.

나의 데이터는 쿠키에 저장되어있으며, (랜덤으로 배정된 고유한 uuid를 마치 id처럼 사용) 내가 이미 투표를 했으면 투표 결과를 보여줍니다.

복사하기 및 카카오 공유가 가능합니다.
모바일, PC 어느쪽이든 쉽게 투표 URL을 공유할 수 있습니다.

백엔드

DB: 비록 백엔드 전문가는 아니나, 나름대로 DB를 설계도 해보고 효율적인 환경을 구축하기 위해 연구했습니다.

vote table: 투표의 개요를 저장합니다.
votemenu table: 해당 투표의 보기를 저장합니다. parentid로 vote table의 uuid를 추적합니다.
voter table: 투표자들이 어떤 보기에 투표했는지 저장합니다. 몇 번 보기의 index를 선택했는지만 저장하면 됩니다.

백엔드에서는 이를 정제하지 않고 전부 클라이언트로 보내서, 클라이언트에서 알아서 데이터를 정제해서 map으로 뿌려줍니다.

Nextjs API: 크게 네 가지 기능으로 나뉩니다.

1. 단순히 투표 DB내용을 클라이언트로 쏴주는 기능
2. 쿠키 데이터가 있는 사용자에 한해서, 내가 만든 투표방을 보여주고, 내가 선택한 투표 보기에 [선택함]을 노출시켜 줍니다.
다만 쿠키가 제거되면 이는 모두 사용할 수 없게 됩니다.
3. 투표 삭제하기 기능: bcrypt를 사용해서 암호화 및 verify를 실행합니다. 올바른 비밀번호를 입력하면, 투표가 실제로 삭제됩니다.
특정 Flag를 만들어서 투표를 비노출 시키는 방법도 있으나, 투표 row가 무한이 늘어나는 것을 방지하기 위해 실제 row를 삭제하는 방법을 채택했습니다. 집에 비싼 서버가 있고 전기세 감당이 된다면 전자의 방법을 택할 수도 있습니다.
4. 투표 관측기간이 지나면, scheduler가 24시간에 한 번씩 실제 row를 삭제하여 더이상 투표를 볼 수 없게 합니다.
node-cron vs node-schedule 둘 중에 고민을 많이 했으나, 사용자가 많은 후자를 택했습니다.

Module 설명

개요

게시판, 댓글 등에서 일일이 날짜를 계산하기 어려웠을 경우, string을 gloomyDate.date(str)에 담는 것만으로 이 게시글이 며칠전에 작성됐는지 return합니다.

개발자는 간편하게 날짜를 bind할 수 있습니다!

      function App() {
        const [data,setData] = useState([
          { title: 'title1', date:  gloomyDate.date('2022-05-10 10:55:40')}, 
          { title: 'title2', date:  gloomyDate.date('2023-02-11 15:50:30')},
          { title: 'title3', date:  gloomyDate.date(new Date())},
          { title: 'title4', date:  gloomyDate.date(Number(new Date()) + 1000)},
        ])

        return (
          <div className='list'>
            {
              data.map((elm,idx)=>
              <div key={idx}>
                <p className='title'>{elm.title}</p>
                <p className='date'>{elm.date}</p> {/* expected: XX 전 */}
              </div>
              )
            }
          </div>
        );
      }
      

예상 출력결과

title1
      1년 전

      title2
      2달 전

      title3
      방금 전

      title4
      잠시 후
      

배포

npm publish로 배포합니다.

npm i gloomydate

로 설치할 수 있습니다.

모듈 번들러(웹팩 등)에 대응하기 위해 es module형태로 제작했으며, tree shaking에 대응하기위해 추후 모듈의 기능이 늘어날 경우 named export로 제작할 예정입니다.

(현재는 모듈 기능이 하나뿐이라 tree shaking이 크게 의미를 가지지 않음)

일반 HTML 프로젝트의 경우

<script src='https://cdn.gloomystore.com/gloomyDate/gloomyDate.js'></script> 
      

로 commonJS에 대응합니다.

react의 예시와 동일하게 사용가능합니다.



3개 국어에 대응하며, 3가지 타입의 데이터 input을 지원합니다.

gloomyDate.date('2023-04-26 08:10:22','en') // formatted string
      gloomyDate.date('20230426081022','jp') // string
      gloomyDate.date(1723722833597,'ko') // number
      gloomyDate.date((new Date()),'ko') // Date
      

'ko', 'jp', 'en'
3개 국어에 대응합니다.

예상되는 결과:

2days ago
      2日前
      2일 전
      방금 전
      

아무 인자도 넣지 않을 경우 'ko'가 default로 작동합니다.

14 length의 string, number에 대응하며,
'YY-mm-dd H:i:s' 형태의 string에도 대응합니다.

포트폴리오 설명

프론트엔드

기존의 CSR형식의 SPA는 검색노출이 어렵고, 설령 구글 검색로봇이라 하더라도 웹서버상에서 index.html을 받았을 때 빈문서 이외에는 내용이 나오지 않습니다.

이러한 점을 해결하기 위해 Next.js의 SSG에 주목했으며, JSX가 서버사이드상에서 이미 html태그로 렌더된 상태로 전송이 되기 때문에 현 포트폴리오의 검색 노출이 더 잘될 것으로 기대하고 있습니다.

최하단 Today, Total은 pages/api 폴더 내에 제작해둔 api를 page에서 GetServerSideProps로 받아오며, DB에 오늘날짜의 테이블이 없다면 오늘 방문자 0명으로 INSERT합니다.
아! app router에서는 fetch action을 GetServerSideProps로 하지는 않겠군요.
cache 설정을 하지 않았으니 pages router의 GetServerSideProps와 유사하게 동작합니다.

이미지, 폰트 등 모든 컨텐츠가 로딩되고, ajax에서 return을 받아오면 비로소 로딩화면이 사라집니다.
(개발자 도구에서 네트워크를 3G로 하고 강력 새로고침을 하면 로딩화면을 볼 수 있습니다.)

백엔드

서버에서 사용하는 것은 오늘 날짜의 today hit, total hit을 구하는 것입니다.

시간 기준은 클라이언트 기준이 되어야하기 때문에, 클라이언트에서 한국시간을 구해줍니다.
(new Date()에서 9 * 60 * 60 * 1000를 더함)

시간은 보안정보가 아니기 때문에 get요청으로 parameter에 붙여서 보내줍니다.

      const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM visitor_today WHERE REGDATE='${'todayDate'}'');
      const [rows2] = await pool.query<RowDataPacket[]>('SELECT * FROM visitor_total WHERE REGDATE='${'todayDate'}'');
      // const count = rows;
      res.status(200).json([...rows,...rows2]);
      

api에서는 DB에 오늘날짜의 테이블이 없다면 오늘 방문자 0명으로 INSERT합니다. 만약 존재한다면 오늘 방문자의 배열을 가져와서 클라이언트로 return합니다.

Fix incorrect Korean translation for MULTIPLE_ERRORS string