소개

안 써본 스택들을 총망라하여 개발해봤다. 오로지 공부를 위해서였다.
지금 소개하고자 하는 Simple-SNS는 간단한 SNS 글 작성 CRUD를 구현해본 것이다.
글 작성만 구현한 것이라 별다른 인증없이 한 사람이 글을 작성하고 수정하고 삭제하는 기능을 제공한다. 이를테면 아직은 SNS보다는 메모에 가깝다고 할 수 있다.

사용 아키텍쳐

⌞ 프론트 엔드

• 리액트 : 마지막으로 웹서비스를 제대로 구현해봤을 때 나는 vanlila.js만 이용해왔다. 드디어 React를 다루는 데 익숙해져서 사용했다. 다시 한 번 느끼는 거지만, 리액트는 정말 상태관리 하나만으로 정말 편한 웹개발을 할 수 있게 도와준다.
• 테일윈드 : CSS 프레임워크이다. 비슷한 예로 '부트스트랩'이 있다. 테일윈드는 유틸리티 중심으로 CSS 작업을 한다는 특징이 있다. 이번에 테일윈드를 사용한 이유는 CSS 작업의 생산성을 늘릴 수 있는 방법이 없을까에 대한 고민의 답이었다.

⌞ 백엔드

• node.js & 익스프레스 : 간단한 CRUD 작업이 끝일 것 같아서 빠르게 서버 작업을 할 수 있는 툴들을 사용하였다.
• mongoose : mysql에서는 Sequelize가 있듯, 몽고db에는 mongoose가 있는 것 같다. 몽고db를 DBMS로 사용하기로 한 순간, 이 라이브러리를 같이 이용하기로 정했다.

⌞ DBMS

• 몽고db : 사실 몽고db를 선택한 이유는 NoSQL을 연습해보고 싶어서였다. 하지만 이번처럼 쿼리 하나만으로 데이터를 가져오게끔 데이터모델링을 하게되는 경우가 앞으로 있게된다면, 몽고db 같은 NoSQL을 이용하게 될 것 같다.

기능

클라이언트의 화면에서 이전에 작성된 메시지들을 읽을 수 있으며, 또한 새로운 메시지를 추가 저장해놓을 수 있다. 작성되었던 메시지들은 필요에 의해서 수정되거나 삭제될 수 있다.

개선할 점

⌞ 기능적 측면

• 현재는 유저가 한 명일 때를 가정하여 구현하였다. 하지만 SNS를 표방한만큼 여러 유저의 사용이 가능하게 개선하려고 한다. 인증 관련한 기능을 추가하고, 서로의 메시지에 답글을 달고 "좋아요"를 누를 수 있게 구현하려고 한다.

⌞ 보수,운영적 측면

• 테일윈드로 빠른 CSS 작업을 도모했지만, 리팩토링이 안되었다. 현재 각 엘리먼트의 className은 매우 복잡하게 작성이 되어있어 정리가 필요하다. 테일윈드를 적용하는 동시에 CSS 보수,개선을 어떻게하면 더 효율적으로 할 수 있을지 고민하고 작업을 해봐야겠다.

⌞ 사용자 경험 측면

• 글이 얼마 없어 현재는 데이터를 모두 받아와 바로 클라이언트에 노출시키고 있다. 추후 무한스크롤 기능을 추가하며 서비스 초입 및 사용 중에 부드러운 서비스 경험을 할 수 있게 만드려고 한다.

참고

• Github : 서버 코드
• github : 클라이언트 코드