전체 글312 [웹챗] 레이아웃 스타일 & 기본 스타일 이번 프로젝트의 경우 채팅창을 모듈로 배포하는게 목적이기 때문에 그 채팅창을 감싸는 부분과 채팅창 부분의 경우 스타일링 방식을 조금 다르게 처리했다. 레이아웃은 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. [프로그래머스][데브매칭] 2021 실리콘 밸리 데브매칭 후기 https://programmers.co.kr/competitions/1836 2021 Dev-Matching: Silicon Valley 접수 21년 11월 01일 11:00 ~ 11월 19일 17:00 테스트 21년 11월 21일 10:00 ~ 11월 21일 12:00 programmers.co.kr 300점 만점 / 200점 3문제 1문제당 100점이였고 1번째 문제와 2번째 문제를 풀어서 각각 100점씩 도합 200점으로 마무리했다. 문제 난이도 수준은 프로그래머스 2~3레벨 수준으로 보였고, 1레벨 문제는 하나도 없었다. 그리고 4레벨 문제도 없었다. 진짜 안내한 내용대로 2~3레벨 풀 정도면 수월하게 풀 수준이였다. 다만 2레벨 문제를 모두 푼 입장에서 봤을때 중복 문제는 안나왔다. 연습용으로.. 2021. 11. 21. [프로그래머스][LEVEL3] 베스트앨범 # 문제 원문 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요. 제한사항 genres[i]는 고유번호가 i인 노래의 장르입니다. plays[i]는 고유번호가 i인 노래가 재생된 횟수.. 2021. 11. 20. 이전 1 ··· 36 37 38 39 40 41 42 ··· 78 다음
