사이드 프로젝트10 [웹챗] 레이아웃 스타일 & 기본 스타일 이번 프로젝트의 경우 채팅창을 모듈로 배포하는게 목적이기 때문에 그 채팅창을 감싸는 부분과 채팅창 부분의 경우 스타일링 방식을 조금 다르게 처리했다. 레이아웃은 css flex를 통해서 잡았고, 추후 모듈 배포나 기타 설정에 따라서 사용자가 수정하거나 옵션을 줄 수 있도록 할 예정이다. 디자인은 디자이너가 아니라서 노력대비 효율이 별로 나오지 않으므로 최대한 심플하면서 깔끔한 느낌을 줄 수 있게 색배합 정도만 신경썼다. 먼저 모듈배포에 포함 되지 않을 레이아웃 부분의 경우 styled-components를 통해서 글로벌 스타일과 컴포넌트 스타일을 통해서 간단한 레이아웃과 스타일을 잡아줬다. 이 부분은 추가 기능을 넣지 않는한 크게 변할 부분은 없을거로 예상된다. const CommonStyle = cre.. 2021. 11. 24. [웹챗] 기본적인 메시지 전송 & 수신 이벤트 구현 프론트엔드 이번에는 채팅창에 대한 기본적인 레이아웃(DOM)을 잡고, 그에 따른 기본적인 소켓 연결과 해제, 메시지 전송과 전달 등의 기본적인 로직을 작성하고 컴포넌트를 나누었다. socket.io에 대한 테스트코드를 작성하면서 비동기 및 소켓 통신에 대한 테스트 코드가 처음이다 보니 많이 어려웠다. 사실 기본적인 로직의 경우 별거 없기 때문에 로직구현보다 테스트 코드 작성에 시간을 더 많이 소요했다. webChat.test.tsx describe('webChat 채팅창', () => { let socket: any; beforeAll((done) => { socket = io('http://localhost:7778/webChat', { transports: ['websocket'] }); socket.. 2021. 11. 23. [웹챗] 리액트 컴포넌트 구조 및 소켓 서버 초기 설정 프론트엔드 지난번 프론트 엔드의 경우 app.tsx 즉 애플리케이션 라우트까지 진행을 마쳤다. 이번 작업의 경우 기본적인 DOM 레이아웃과 컴포넌트 구조를 잡는 선까지 작업을 진행했으며, 당연히 간단한 테스트 코드를 먼저 작성하는 방식(TDD)으로 진행했다. (TDD를 따로 정리해서 포스팅해야 할 필요성이 있긴 한 거 같다. 정의 내리기 힘들다.) 스타일의 경우 채팅창 소켓 통신에 대해서 어느 정도 구현을 마친 후 기획에 따라서 구현하기로 정했기에 비교적 간단한 작업이었다. 작업에는 총 8 커밋이 소요되었다. 먼저 지난번의 임시로 구현해놓은 '/' 라우트 부분을 pages/main.tsx로 분리했고 main에 기획한 레이아웃인 header, main, footer 구조를 만든 후 해당 부분을 따로 com.. 2021. 11. 18. [웹챗] 프론트 ENTRY 구성 및 벡엔드 repo 생성 프로젝트 Repo https://github.com/yoonjonglyu/webChat GitHub - yoonjonglyu/webChat: 간단한 채팅 웹 간단한 채팅 웹. Contribute to yoonjonglyu/webChat development by creating an account on GitHub. github.com 기본적인 환경 설정은 끝났고 react와 recoil를 통한 번들링 entry와 앱의 시작점이 될 app entry를 만들어줘야 한다. 크게 거창하게 할 것은 없고 보편적으로 나누는 방법대로 index.tsx와 app.tsx로 나누어서 세팅했다. index.tsx 코드 import React from 'react'; import ReactDOM from 'react-dom.. 2021. 11. 17. 이전 1 2 3 다음
