Sam Story

회사에서 중고거래 플랫폼 프로젝트를 진행하면서가장 고민이 되었던 기능중 하나가 바로 채팅 기능이였다. 단순히 메시지를 주고받는 기능 자체는 어렵지 않다.HTTP 기반으로 주기적으로 데이터를 조회하는 방식이나 쪽지 기능처럼 구현하는 방법도 충분히 가능하다. 하지만 이 방식은 새 메시지를 확인하기 위해 지속적으로 요청을 보내야 하고결국 실시간성과 사용자 경험 측면에서 한계가 분명했다. 특히 판매자와 구매자 간의 소통이 중요한 중고거래 특성상 이러한 방식은답답한 사용자 경험으로 이어질 수밖에 없다고 판단했다. 그래서 최종적으로는 "실시간 대화 기능" 형태로 구현하기로 방향을 잡았다.그렇다면 선택지는 자연스럽게 WebSocket이었다. 내가 알고 있는 범위 내에서는 WebSocket을 이용하는 것이 가장 일반적..

미뤄놨던 포스팅을 조금씩 하려고 한다. 오늘은 8pt Grid System에 대해서 간단하게 정리하고자 한다. 1. 8pt Grid System 이란?8pt Grid System은 모든 간격(spacing)을 8의 배수 단위로 사용하는 레이아웃 규칙이다.UI의 padding, margin, gap과 같은 spacing을 중심으로 8의 배수 단위를 사용하여 레이아웃을 구성한다.8px16px24px32px40px48px이러한 단위를 기준으로 spacing을 구성하면디자인과 코드 모두에서 일관성을 유지할 수 있다. 2. 왜 8pt Grid System을 사용해야 하는가?UI를 디자인하거나 프론트엔드 레이아웃을 만들다 보면padding, margin, gap 값이 제각각 사용되는 경우가 많다.예를 들어 어떤 컴..

오늘은 프론트 작업을 하다가 사용하게된 Router에 대해서 포스팅 해보려 한다. 1. Router 란?Router에 대해 알아보기전에 간단하게 라우팅(Routing)이란 개념을 알고 있어야 한다.우리가 웹사이트를 이용하다보면 주소창에 " https://samtistory.tistory.com/70 " 처럼도메인 뒤에 경로( "/1" 과 같은)가 붙은 경우를 자주 볼 수 있다.이렇게 경로를 통해 어떤 페이지를 보여줄 것인가를 결정하는걸 라우팅이라고 한다. 즉, "현재 내가 어떤 화면(혹은 파일)에 위치해 있는가?"를 알려주는 역할을 하며, 라우팅을 담당하는 도구가 바로 Router이다. 2. 왜 Router 를 쓰는가?프로젝트를 진행하다 보면 여러 화면을 구성해야 하는 상황이 자주 생긴다.이럴 때 단순히..

오늘은 통신 라이브러리 중 하나인 Axios에 대해서 간단히 포스팅 해보려 한다. Axios 란?Axios는 브라우저 용 promise 기반 HTTP 클라이언트 이다.간단히 말해 서버와 데이터를 주고받을 수 있게 도와주는 라이브러리이다. *여기서 Promise 기반 이란?Promise는 비동기 작업의 결과(성공/실패)를 다루는 JavaScript 객체이다.예를 들어, 서버에서 데이터를 받아오는 시간이 걸리는 작업을 처리할 때 유용하게 쓰인다. 그렇다면 Promise 기반 이란건 어떤 의미일까예시코드를 통해서 좀 더 간단하게 이해해보자. axios.get('https://api.Sam-Shop.com/상품정보') 이 코드는 택배를 주문한것(요청)과 같다.바로 결과(상품)가 나오는게 아니라 결과값이 올 때까..