이번에는 참가자목록 및 이미지 업로드 기능을 추가했습니다. 참가자목록 채팅방에 유저가 접속하면, 서버에서 해당 유저를 Map에 저장하여 클라이언트측으로 배열 형태로 넘겨주는 방식으로 구현했습니다. > 1. 유저의 socket.id를 key, 닉네임을 value형태로 Map에 저장 클라이언트측으로 넘겨주기 위해 배열로 변환 후 chatUserListArray에 저장 io.emit("userList")를 통해 클라이언트측에 전달 서버에서 유저 리스트를 받은 후, 모달 형식으로 화면에 구현했습니다. > 1. 서버에서 받은 chatUserList중, 본인의 이름을 filter메서드를 활용하여 제거해줍니다. 본인의 이름은 참가자 리스트 최상단에 표시해줍니다. <img src="https://user-images.githubusercontent.com/87972252/231448126-258c6f95-f0df-4ea4-af45-f5d3bfebb694.gif

1편에서 간단히 구현한 로직들을 컴포넌트로 분리 후, css를 적용했습니다. Recoil적용 사용자의 닉네임은 입력받은 후 , Recoil로 상태관리를 진행했습니다. 스크롤 이벤트 추가 채팅내역이 많아진 경우, 사용자가 채팅을 입력하면 최하단으로 스크롤하는 기능을 추가했습니다. 해당 기능은 useRef와 scrollIntoView 메서드를 활용하여 구현가능합니다. > 1. 채팅 최하단 div태그에 scrollRef를 등록해줍니다. chatMessage(채팅 메세지 배열)이 변경될 경우 , scrollIntoView이벤트를 통해 scrollRef위치로 이동시켜줍니다. [scrollIntoView MDN URL](https://developer.mozilla.org/en

Next.js로 사이드프로젝트 진행 중, socket.io를 활용한 채팅방 기능을 구현하고 있습니다. Server express를 활용한 서버는 아래와 같이 구성합니다. > 1. io변수의 path는 클라이언트측과 socekt을 연동시켜주는 주소라고 생각하면 됩니다. io.on 및 io.emit을 통해, 클라이언트측과의 이벤트를 구성해줍니다. io.on은 이벤트수신 , io.emit은 이벤트전송이라 생각하면 됩니다. Client 클라이언트는 Next.js로 구성했습니다. (CSS 미적용) > 1. useEffect를 통해 렌더링 후 서버측과 socket을 연결시켜줍니다. 위의 코드에서 onMessageSubmit함수를 호출하면 작성한 메세지를 서버로 전송합니다. 이후 서버측이 전송한 메세지를 다시 chatMessage에 추가하여 채팅을 보여줍니다. 간단하게 기능확인을 위해 적용한 코드이므로 CSS적용 및 컴포넌트분리등을 추가한 내용으

SSR 및 SSG관련 내용을 정리하다가 문득 HTML생성시점이 헷갈려서 정리해 본다 SSR 위의 이미지들과 같이 SSR의 경우, build 시 HTML파일을 생성하지 않는다. 따라서, 유저가 해당 페이지에 접속한 경우에 HTML을 생성하여 전달해준다. SSG ![](https://velog.velcdn.com/images/yung315/post/fc27d

Next.js에서는 express에서와 같이 middleware를 사용가능하다. 만약 전역 middleware를 사용하고 싶다면 page폴더에 middleware.ts파일을 작성하면된다. 공식문서 URL

Rewrites 위의 코드에서 source경로로 접근 시, destination경로를 보여준다. 단, source경로에 해당하는 페이지가 존재하는 경우에는 source화면을 보여준다. rewrites는 api 경로를 숨기는 경우에도 사용 가능하다. 위의 코드에 따라, api요청시 source경로를 입력하면 네트워크탭에 destination경로가 보여지지 않는다. Redirects 사용자가 source경로로 접근시, 강제로 destinatio경로로 이동시킨다. permanent가 true인 경우에는 308 status code를 사용하며 false인 경우에는 307 status code를 사용한다. 307은 임시적으로 이동시키고 308은 영구적으로 이동시킨다고 판단된다.

Next.js 는 404에러 및 500에러를 담당하는 페이지를 커스텀 가능하다 1. 404 Page 구현되지 않는 페이지로 접속 시 보여주는 페이지이다. 파일명은 404.tsx로하여 원하는 형식으로 에러 페이지를 구성해준다 2. 500 Page 빌드환경에서 에러가 발생할 시 이동하는 페이지이다. 파일명은 _document.tsx로 구성해준다.