GNIN
이 사이트는 간단한 포스트를 올리는 사이트입니다.
개인적으로 아는 Noname이라는 작가분의 닉네임을 기려서 Guest Name Is Noname의 앞글자를 따서 지었습니다.
그래서 제목만 보면 마치 비회원도 포스팅할 수 있는 사이트 같지만, 사실 회원제라는게 함정입니다. 😃
React를 사용하다보니 단순 웹페이지라기 보다는 웹어플리케이션이라는 느낌으로 만들었습니다.
사이트 주소
개발환경
Server : Node.JS
- 서버 환경은 Node.JS(Express.js)입니다. 빌더는 Webpack을 사용하였습니다.
FrontEnd : React + Redux (로그인, 프로필 페이지 제외)
- 로그인, 프로필 수정 페이지는 간단한 html페이지지만 메인기능은 포스트페이지의 경우 React + Redux로 작업되었습니다.
Background canvas library: Brush.js
- pc페이지로 접근 하시면 background에서 원이 스물스물 기어 올라오는 canvas로 구현한 애니메이션이 존재합니다.
- canvas 사용을 쉽게 도와주는 라이브러리를 사용하여 작업하였습니다.
- 모바일환경에서는 cpu점유등으로 인해서 canvas가 노출 되지 않게 설정했습니다.
Authentication Module : Passport.js
- 인증모듈은 그 유명한 passport.js로 구현하였습니다.
- 수많은 인증을 지원하며, 트위터, 페북, 네이버, 다음은 물론 스팀api까지 지원합니다.
Hosting: Heroku
- 무료 Node.js 호스팅인 heroku를 사용하였습니다.
- 무료라 30분 이상 접근이 없을 경우 sleep하는 등의 제약은 있지만, 애초에 접근하는 사용자가 적은 사이트이기 때문에 부담없이 사용할 수 있었습니다.
DB Hosting : Mongolab
- DB는 몽고랩을 사용하고 있습니다.
- 몽구스와 MongoLab에 데이터베이스가 연동되어 사용하고 있습니다.
- 이 또한 프리티어가 존재해서 500메가 무료입니다.
마치며
개인적으로 아는 사람들이 이용하는 사이트라 카카오 단체톡방을 훔쳐보는 기분이 드실 수 도 있습니다! 😔
어찌됐든 블로그를 새로 시작하고 나서, 이제부터 만들게 될 포트폴리오의 첫 발걸음과 같은 사이트입니다.
좋은 하루 되세요.