Gloomy Store

프론트엔드

채팅: 채팅 기능의 핵심은 웹소켓입니다. 소켓에 메세지를 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의 인증을 위임받은 구글서버에 의해 인증서버에는 사용자의 정보(이름, 메일)이 도착하여 토큰화되어 사용할 수 있게 됩니다.

프론트엔드

풀무원 지점을 운영하고 있는 어머니를 위한 쇼핑몰입니다. 상품 목록페이지, 상품 상세페이지에만 데이터가 들어가기 때문에, 해당페이지에만 데이터를 바인딩 시켜서 보여줍니다. ajax로 데이터를 받아온 뒤, promise와 await로 동기적으로 state를 변경하여 각 상품의 상세 정보를 렌더합니다.

백엔드

모든 서비스를 javascirpt로 구현하기 위해 MERN스택으로 쇼핑몰을 구현했습니다. 실 결제를 위한 모듈은 아임포트를 사용하여, 아임포트 이외에는 전부 스스로의 힘으로 구현했습니다.

프론트에서 상품 고유넘버를 전송하면, mongoDB에서 해당 상품이 실제로 존재하는지 조회한 후, 결제 솔루션 서버로 결제정보를 전송합니다.
결제정보가 전송되어 response값을 성공적으로 전송받으면, 구매내역 DB에 구매정보를 저장한 뒤 네이버 클라우드 서버에 SMS를 전송합니다. 이 때 클라우드 서버로 전송되는 header정보는 sha256으로 암호화 되어 전송됩니다.

최종적으로, PHP서버로 json을 전송하면 PHP mailer가 구매자에게 메일을 전송해줍니다.

프론트엔드

몇 년전 일본에 가족여행을 갔을 때, 너무나도 훌륭한 서비스와 분위기에 비해 숙소 웹사이트는 90년대에 머물러있어서 안타까움을 느꼈습니다. 이에 해당 료칸 웹사이트만 봐도 고객들이 오고싶게 만들도록 토이프로젝트로 리뉴얼했습니다.

이 사이트는 실제 예약이 가능합니다. 라이브러리 없이 달력을 구현하고, 그 달력에 예약기능을 추가하여 날짜를 선택하면 날짜에 pointing이 됩니다.

실제로 제가 호텔을 운영하고 있는 것이 아니기 때문에 결제 부분만 아무 동작없이 바로 결제완료로 처리합니다.
객실의 등급에 따라, 숙박 인원 수에 따라 자동으로 요금을 계산합니다.

백엔드

게시판, 회원가입, 로그인, 예약 등이 전부 구현되어 있습니다.
또한 고객 문의를 구현해두어 form 내용이 자동으로 관리자와 고객에게 전송됩니다.

이 내용은 전부 PHP와 mariaDB로 구현되어 있습니다.

개요

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

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

function App() {
  const [data,setData] = useState([{ title: 'title1', date: '2022-05-10 10:55:40'}, { title: 'title2', date: '2023-02-11 15:50:30'}])
  useEffect(()=>{
      const newData = [...data]
      newData.forEach(e=> e.date = gloomyDate.date(e.date))
      setData(newData)
  },[])
  return (
    <div className="list">
      {
        data.map((elm,idx)=>
        <div key={idx}>
          <p className="title">{e.title}</p>
          <p className="date">{e.date}</p> {/* expected: 1년 전 */}
        </div>
        )
      }
    </div>
  );
}

예상 출력결과

title1
1년 전

title2
2달 전

배포

npm publish로 배포합니다.

npm i gloomydate

로 설치할 수 있습니다.

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

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

일반 HTML 프로젝트의 경우

<script src="https://cdn.gloomy-store.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(20230426081022,'ko') // number

'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합니다.

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

백엔드

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

시간 기준은 클라이언트 기준이 되어야하기 때문에, 클라이언트에서 한국시간을 구해줍니다.
(new Date()에서 9 * 60 * 60 * 1000를 더함)
그리고 이 시간을 getServerSideProps를 사용하여 api로 보내줍니다.
시간은 보안정보가 아니기 때문에 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합니다.