[Mini/채팅] 로그인 구현 / 닉네임 설정

 

[Mini/채팅] 로그인 구현 / 닉네임 설정

대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다.

프론트 작업

프론트는 아래 작업을 진행해주었다.

1. 로그인 컴포넌트 생성

2. 로그인 시도 시 nickname을 server에 전달 (이후 사용을 할 수 있을 것 같음)

3. 서버에서 성공적으로 이벤트를 받으면, login state를 true로 변경해줌

로그인이라고 해서 실제 로그인이 아니라 임시 로그인이다(프로젝트 끝까지 임시 로그인으로 구현 예정). 로그인 시 채팅방에 접속 또는 생성할 수 있도록 구현 예정이다.

위 순서로 구현하고 로그인 시도하며 서버에 요청을 보내었지만 서버에서는 응답을 받지 못 하였다. 뭐지 싶어 이 순간 socket을 출력해보았는데 아래와 같이 나왔다.

connected가 false 라고 표시되어 있었다. 그럴리가 없는데 뭐지? 하고 생각하던 중 react에서 개발 시 proxy 설정을 해주어야 한다는 것이 기억났다. package.json에 proxy를 추가해주었다.

"proxy": "http://localhost:4000"

이후 다시 로그인 요청을 하니 connected 값이 true로 변경되었다.

그리고 물론 로그인도 성공하였다.

그런데 이상한게 실패를 하였으면 에러라도 표시되던지 네트워크 에러도 표시되지 않아 이상하다.

서버 작업

서버 작업은 크게 한 것 없다. 프론트에서 event 명을 nickname으로 하여 메시지를 보내기 때문에 동일하게 nickname 명으로 생성해주었다. 그리고 nickname 이벤트 발생 시 socket의 nickname 속성에 nickname을 추가해주었다. 요약하자면 그냥 nickname 이벤트를 받아 socket에 nickname을 추가해주었다.

◆ 참고자료

• 프론트 수정 코드
• 서버 수정 코드

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.