안녕하세요! 이번 포스팅에서는 태블로 이중축에 대해 정리해보겠습니다. 이중축은 2개의 측정값을 하나의 그래프에 동시에 표시하고 싶을 때 주로 사용합니다. 이외에도 이중축을 사용할 수 있는데, 각 경우에 대해 알아보겠습니다. 슈퍼스토어 예제 데이터를 사용했습니다. 강조 포인트 표시 기간별 매출 데이터를 시각화한다고 가정해보겠습니다. 이때 특정 시점의 매출을 강조하고 싶다면 이중축을 사용하면 됩니다. 그전에 우선 특정 시점을 표시하기 위한 '계산된 필드'를 생성해야 합니다. 예시에서는 2017년 11월의 매출 데이터를 가져오는 계산된 필드를 만들었습니다. 다음으로는 앞서 생성한 계산된 필드값을 별도의 그래프에 표시합니다. 이후 이중축 설정을 통해 하나의 그래프에 표시합니다. 약간의 커스터마이징을 거치면 위와..
Mapbox 지도 AP를 활용해 개인 프로젝트를 진행했습니다. 지도상 특정 위치에 핀을 꽂고 해당 위치 정보를 활용해 애플리케이션 아이템을 구현하는 과정이 몹시 즐거웠습니다. 하지만 무엇보다 프로젝트를 마치고 가장 기억에 남는 점은 팝업이 나타나면서 화면이 깜빡거리는 현상을 개선한 트러블슈팅 과정입니다. 문제가 발생하는 과정을 논리적으로 정리하고 어느 부분을 개선해야 하는지 진단하는 과정이 재밌었습니다. 🚧 이슈 지도상 특정 위치를 더블 클릭하면 해당 위치에 대한 정보를 입력하는 팝업이 나타납니다. 팝업이 정상적으로 나타났으면 좋았겠지만.. 깜빡거리면서 등장하는 문제가 발생했습니다. UX적인 측면에서 치명적인 문제였기 때문에 문제 해결을 위해 고민하는 시간을 가졌습니다. 문제 정의 문제 상황을 아래 3단..
일주일 동안의 여정을 성공적으로(?) 마쳤습니다. 사실 소켓 통신을 처음 다뤄본다는 막연한 두려움이 앞섰던 것 같습니다. "주변 도움없이 프로젝트를 성공적으로 완수할 수 있을까?" 이같은 걱정들은 모두 기우였습니다. 매 순간마다 프로젝트를 성공적으로 마치고 싶다는 마음이 더 간절했습니다. 그리고 그 간절함 덕분에 모르는 개념은 끝까지 물고 늘어질 수 있었고, 난공불락이었던 것만 같은 에러들을 모두 해결할 수 있었습니다. 지난 일주일 회고를 시작하겠습니다! 🎉 📍 Why MasonTALK? 이전에 패션 커뮤니티를 구현하면서 Advanced로 분류했던 채팅 기능을 끝내 구현하지 못했습니다. 그 이후 "꼭 채팅 웹 애플리케이션을 구현해봐야겠다."는 생각을 줄곧 가지고 있었습니다. http 통신에만 익숙했던 터..
👷🏻♂️ 중간 점검 클라이언트 쪽에서 소켓을 다루면서 에러가 자주 발생했습니다. 이대로는 프로젝트를 마무리하지 못할 것 같아 6일차에는 정리 시간을 가졌습니다. 정리를 하며 소켓 서버와 클라이언트 사이 워크플로우를 살펴봤습니다. useEffect훅이 업데이트 되는 로직을 단계별로 정리하고 소켓과 통신하며 어떻게 하면 상태관리를 효율적으로 할 수 있을지를 중점적으로 고민했습니다. 그 과정에서 불필요한 상태를 제거함으로써 로직을 단순화하는 작업을 거쳤습니다. 그 결과 작성한 코드의 전체적인 동작 방식에 대해 자신감이 생기는 경험을 할 수 있었습니다. 하루 동안 정리하는 시간을 가지고 마지막 7일차에 프로젝트를 성공적으로 마무리했습니다. 지속적으로 코드를 들여다보고, 코드에 대해 생각하면서 개선점에 대해 끊..
🕹 5일차 구현 사항 프론트엔드 1. socket.io-client 설치, CORS 설정 2. 🟡 온오프라인 유저별 프로필 구분 - addNewUser 이벤트 EMIT: 클라이언트 쪽에서 발생시키는 이벤트입니다. 이벤트를 발생시키는 동시에 소켓 서버 쪽으로 유저 id를 전달합니다. - getOnlineUsers 이벤트 ON: 클라이언트 쪽에서 구독중인 이벤트입니다. onlineUsers 배열을 전달 받으면 상태변수로 관리합니다. 3. 🔵 채팅 메시지 실시간 동기화 - 기존 서버로 새로운 메시지를 POST 요청 보내고 응답으로 받은 newMessage를 상태변수로 관리합니다. - sendMessage 이벤트 EMIT: 클라이언트 쪽에서 발생시키는 이벤트입니다. 소켓 서버 쪽으로 기존 newMessage 상..
🕹 3일차 구현 사항 프론트엔드 클릭한 채팅바의 메시지 내용 불러오기: Context API를 사용한 상태 관리(currentChat, messages) 메시지 보내기 (소켓 통신 미적용 yet) 🚀 트러블슈팅 1. 채팅방 메시지 내용 불러오기 WHAT? 메시지 목록을 불러오는 로직 구현의 어려움 HOW? Context API를 사용한 상태 관리 채팅방 목록은 불러왔지만 각 채팅방의 메시지 내용을 불러오는 구체적인 로직을 짤 때 어려움을 겪었습니다. 서버 엔드포인트를 만들어 놓은 상태였기 때문에 정보들을 불러올 수 있었습니다. 하지만 불러온 정보들을 어떻게 화면에 렌더링할지 구체적인 flow가 떠오르지 않았습니다. 곰곰이 생각하던 중, 채팅방을 클릭하는 이벤트에 주목했습니다. "클릭한 채팅방을 상태변수(..
🕹 2일차 구현 사항 프론트엔드 로그인/로그아웃 유틸리티 함수 생성 Chat Context 생성: 로그인 한 유저의 채팅 목록 불러오기, 아직 채팅을 개시하지 않은 유저 목록 커스텀훅(useFetchReceiverUser) 생성: 일대일 채팅에서 상대방 정보 불러오기 백엔드 채팅방 관리를 위한 MVC 작성: Chat 스키마, 라우트(경로), 컨트롤러 함수 채팅 메시지 관리를 위한 MVC 작성: Message 스키마, 라우트(경로), 컨트롤러 함수 🚀 트러블슈팅 1. 유저 채팅 목록 불러오기 WHAT? 복잡해진 Chat 페이지 코드 HOW? 코드 가독성을 높이기 위한 커스텀훅 생성 유저의 채팅 목록을 불러오는 로직을 구상하면서 코드 가독성이 떨어지는 문제를 발견했습니다. 서버로 GET 요청을 보내는 코드,..
💬 프로젝트 주제 유저들과 일대일 채팅이 가능한 미니 서비스를 구현할 예정입니다. 여자친구와 둘만 이용하는 채팅 애플리케이션이 있으면 좋겠다는 대화를 나눈 후에 계획했습니다. 🎨 기술 스택 프론트엔드 - react, react-bootstrap, react-router-dom 백엔드 - express, mongoose, postman 기타 - socket.io 채팅이라는 핵심 기능 구현에 집중하기 위해(=스타일링에 대한 고민을 최소화하기 위해) 리액트 부트스트랩을 사용했습니다. 클라이언트 뿐만 아니라 서버에 관한 로직에 대해서도 차근차근 생각해보면 서비스가 동작하는 전체적인 workflow를 이해할 수 있겠다는 기대감이 있었습니다. 이에 express로 서버를, mongoose로 데이터베이스를 구축했습니..
