프로젝트 과정 기록

[Project] Youtube Party 만들기 (4) - socket 모듈 만들기 (Nextjs, Express로 채팅 기능 구현)

개요 저번 글에서는 Express로 만든 방 번호 생성 API와 Next의 ServerSideProps의 기능을 이용해 url의 roomId가 유효하지 않다면 리다이렉트 시키는 기능까지 구현해봤다. [Project] Youtube Party 만들기 (3) - Nextjs 채팅방 페이지로 이동하는 기능 만들기 +) getServerSideProps 리다 개요 저번 "(2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기" 편에서는 채팅방을 생성하는 서버측 코드를 작성했다. [Project] Youtube Party 만들기 (2) - Express 디렉토리 구조 설정, 채팅 room 생 bluepebble25.tistory.com 이번 게시글은 그렇게 리다이렉트되지 않고 채팅방 페이..

[Project] Youtube Party 만들기 (3) - Nextjs 채팅방 페이지로 이동하는 기능 만들기 +) getServerSideProps 리다이렉트

개요 저번 "(2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기" 편에서는 채팅방을 생성하는 서버측 코드를 작성했다. [Project] Youtube Party 만들기 (2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기 채팅인데 방 생성 API를 만드는 이유 나는 기존에 튜토리얼에서 흔히 하듯이 유저가 직접 방 이름을 입력해 socket 채팅방에 참여하는 방식이 아니라, 서버에 의해 방 이름을 받아 접속하도록 하고 bluepebble25.tistory.com 이번 시간에는 그렇게 생성한 방 생성, 조회 API를 가지고 클라이언트측에서 채팅방 페이지로 이동하는 기능을 만들 것이다. 그 과정에서 만약 유효하지 않은 roomId 페이지로 이동했다면 ge..

[Project] Youtube Party 만들기 (2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기

채팅인데 방 생성 API를 만드는 이유 나는 기존에 튜토리얼에서 흔히 하듯이 유저가 직접 방 이름을 입력해 socket 채팅방에 참여하는 방식이 아니라, 서버에 의해 방 이름을 받아 접속하도록 하고 싶었다. 그래서 방 POST, GET API를 만들었는데, 그것을 이용해 채팅방을 생성하는 과정은 다음과 같다. Nextjs에서 유저가 방 생성 버튼을 클릭하면 API에 방 생성 요청을 보낸다. 서버는 랜덤 문자열을 생성하고, 그 문자열을 roomId로 하는 방 객체를 만든다. 그리고 클라이언트에게 roomId를 전달한다. 클라이언트는 받아온 roomId에 해당하는 페이지로 이동한다. ex) localhost:3000/party/dflc24dfsd 처음 roomId에 해당하는 페이지로 이동해 connect될 ..

[Project] Youtube Party 만들기 (1) - 프로젝트 환경설정 | Nextjs + Typescript + Express

설치 한 repository에서 클라이언트, 서버 둘 다 관리하게 할 것이므로. youtube-party라는 폴더 아래에 client와 server 폴더를 만들고, 그 안에 각각 Nextjs와 Express를 설치해줬다. 클라이언트 Nextjs를 typescript 옵션을 줘서 설치한다. npx create-next-app --typescript 서버 Express 설치 npm install express Typescript 관련 패키지 설치, ts-node 설정 typescript ts-node (node 대신 typescript 파일을 실행하게 할 녀석) @types/express (express를 위한 type이 정의되어 있다.) 이 세가지를 dev dependency로 설치해준다. npm inst..

[Project] Youtube Party 만들기 - 프로젝트 주제, 컨셉

프로젝트 주제 넷플릭스 파티, 유튜브 파티라는 브라우저 확장 프로그램이 있다. 친구와 함께 같은 영상을 보며 채팅을 할 수 있는 프로그램인데, 재생바를 이동하는 등 영상의 싱크도 맞출 수 있다. 이걸 확장 프로그램이 아니라 사이트로 구현해보고 싶다는 생각이 들었다. 그리고 넷플릭스 / 유튜브 파티를 쓰면서 느꼈던 몇 가지 문제점을 어떻게 해결할 수 있을까 고민해보고 싶기도 했다. 기존의 유튜브 파티 확장 프로그램 분석 가장 유명한 두 가지 프로그램을 사용하고 아쉬운 점을 분석해봤다. 모두가 컨트롤 권한을 가지도록 구현된 프로그램(youtube party)을 사용해보니 무심코 이동하거나 정지를 누르는 경우 신호가 가서 불편하다. 공평하다는 장점이 있지만 역시 방장만 컨트롤 가짐 옵션은 꼭 넣어야 하는 듯 ..

[React] Chartjs로 막대그래프 그리기

패키지 설치 npm install chartjs react-chartjs-2 chartjs 뿐만 아니라 react에서 chart를 렌더링하기 위한 react-chartjs-2도 설치해야한다. Chart 그리기 1) 사용할 chart 요소 등록하기 (register) react에서 chartjs를 사용하려면 컴포넌트를 불러오는 것 뿐만 아니라 사용할 컴포넌트들을 register하는 과정이 필요하다. import React from 'react'; import { Bar } from 'react-chartjs-2'; import { Chart as ChartJS, CategoryScale, LinearScale, Title, Tooltip, Legend, BarElement, } from 'chart.js'..

[JS] Chartjs 막대그래프 그리기 (별점 분포 차트)

별점들을 표시하고 최빈값을 다른 색으로 표시하는 차트를 그릴 것이다. 1. 준비물 CDN 방식으로 라이브러리 불러오기 script 부분 body 부분 2. 크키 지정 (반응형) chartjs 옵션을 따로 설정할 필요 없이 차트 canvas를 div로 감싸고, 그 div에 max-width로 크기를 지정하면 된다. .chart-box { margin: auto; max-width: 800px; } #average { margin-top: 30px; text-align: center; } 3. 차트 그리기 const ratings = [ { stars: 1, count: 100 }, { stars: 2, count: 230 }, { stars: 3, count: 700 }, { stars: 4, count:..

[React] 회원가입 유효성 검사 구현하며 겪은 시행착오와 react-hook-form 사용

TL;DR onChange마다 유효성 검사를 하면 리렌더링이 너무 잦고 에러 메시지 관리도 힘들다. react-hook-form은 보통 submit시 유효성 검사를 한다고 알려져 있지만, onChange때마다 검사하도록 mode를 설정할 수도 있다. react-hook-form으로 리렌더링 횟수를 줄이고 유효성 검사를 간편하게 해보자. 1. 시행착오 과정 recoil로 직접 값 검증 구현 vs react-hook-form 이용하기 나는 react-hook-form은 비제어 컴포넌트 방식이고, 제출시에 값 검증을 하는 라이브러리라고 알고 있었다. 난 onChange마다 유효성 검사를 하고 싶었었기 때문에 react-hook-form 사용 대신 input을 별도의 컴포넌트로 분리하고, 컴포넌트 내부에 rec..