TIL 20240110

이번 주 목표

gthen : Chat.jsx 분석

market : 자바 공부

오늘 목표

gthen : Chat.jsx 분석

오늘 한 것

PubArt : art create, read API 완성

gthen : Chat.jsx 분석

오늘 스케줄

6:00 기상, 아침 식사, 샤워

6:30 커리어톤 - 최종체크

7:00 PubArt 팀 개발

12:00 점심식사, 휴식

13:00 resmemory 팀과 개발 시작

14:00 커리어톤 출석체크

14:15 면접 밸런스 게임

14:30 결석자 call 

15:00 TIL 작성

15:30 resmemory 팀과 개발 재개

16:50 resmemory 팀과 해산

17:00 채용 공고 업데이트 (Android/Kotlin 5개, Spring 2개, Node.js 1개, Python 1개, React 1개)

17:30 커리어톤 1차 체크

18:00 이화교 다녀오기

19:00 저녁식사, 휴식

20:00 회의

21:00 자바 공부  

24:00 취침

1.  omitempty

type User struct {
    Name    string `json:"name,omitempty"`
    Age     string `json:"age,omitempty"`
    Country string `json:"country,omitempty"`
}

 

해당 필드의 데이터가 존재하지 않으면,

Marshaling 수행 시, 해당 필드는 제외하고 Marshaling을 수행.

 

참고 자료 : https://wookiist.dev/127

 

2. Chat.jsx 분석

import React, { useEffect, useState } from 'react';

// CSS 불러오기
import '../../css/Chat.css';

function ChatPage() {
  const [userNickname, setUserNickname] = useState('');
  const [socket, setSocket] = useState(null);
  const [messageInput, setMessageInput] = useState('');
  const [chatMessages, setChatMessages] = useState([]);

  // 컴포넌트가 렌더링 될
  useEffect(() => {
    async function initializeChat() {
      const response = await fetch(`./api/users`, {
        method: 'GET',
        headers: {
          Authorization: sessionStorage.getItem('Authorization'),
        },
      });

      const result = await response.json();

      if (!sessionStorage.getItem('Authorization')) {
        alert('로그인 이후 이용할 수 있습니다.');
        location.href = './';
      } else {
        const nickname = result.responseData.bodies.nickname;

        // 닉네임 설정
        setUserNickname(nickname);

        const newSocket = new WebSocket(`ws://127.0.0.1:8001/?nickname=${nickname}`);

        // 소켓 설정
        setSocket(newSocket);

        newSocket.addEventListener('message', async (event) => {
          const data = event.data;
          const dataParse = await JSON.parse(data);
          const message = dataParse.message;
          const senderNickname = dataParse.nickname;

          // 채팅 데이터를 화면에 추가
          displayMessage(message, senderNickname);
        });

        newSocket.addEventListener('close', (event) => {
          console.log('WebSocket 연결이 닫혔습니다.');
          const nicknameMessage = {
            type: 'nickname',
            value: `${nickname}`,
          };
          newSocket.send(JSON.stringify(nicknameMessage));
        });
      }
    }

    initializeChat();
  }, []);

  const displayMessage = (message, senderNickname) => {
    // 채팅 메시지 배열에 담기
    setChatMessages((prevMessages) => [...prevMessages, { message, senderNickname }]);
  };

  const sendMessage = () => {
    if (messageInput) {
      const data = {
        message: messageInput,
        nickname: userNickname,
      };

      if (userNickname == null) {
        return alert('로그인이 필요한 기능입니다.');
      }

      socket.send(JSON.stringify(data)); // 서버로 메시지 전송

      // 들어온 메시지 담기
      setMessageInput('');
    }
  };

  const handleInputKeyPress = (event) => {
    if (event.key === 'Enter') {
      event.preventDefault();
      sendMessage();
    }
  };

  return (
    <div>
      <img src="../../assets/image/header.png" />
      <div id="chat-container">
        <h1>그땐 채팅</h1>
        <div id="chat-header">
          <span>{userNickname} 님의 아름다운 채팅 문화 선도를 믿습니다.</span>
        </div>
        <div id="chat-messages">
          {chatMessages.map((msg, index) => (
            <div
              key={index}
              className={`chat-message ${
                msg.senderNickname === userNickname ? 'right-align' : 'left-align'
              }`}
            >
              {`${msg.senderNickname} : ${msg.message}`}
            </div>
          ))}
        </div>
        <div id="chat-input">
          <input
            type="text"
            id="message-input"
            value={messageInput}
            onChange={(e) => setMessageInput(e.target.value)}
            onKeyPress={handleInputKeyPress}
          />
          <button id="send-button" onClick={sendMessage}>
            전송
          </button>
        </div>
      </div>
    </div>
  );
}

export default ChatPage;

 

3. Code.js 못 불러오는 문제

문제

code.js를 불러오지 못한다.

시도

function Code 를 만들어 빈 div 를 리턴함과 동시에 code 객체를 변수에 담아 둔다.

Code를 import하고 return하는 div에 넣는다. > 실패

해결

index.html에 code.js를 연결한다.

알게 된 점

js파일의 값이 필요한 경우에는 js파일 자체를 연결해도 된다.

 

4. Class 와 method

public class DoorLockManager{
// public 접근 제어자(access modifier)

	public boolean checkPassword(String password){
    // 리턴 타입 불리언
    // 매개변수는 String 타입의 password
    }
    
    public void setPassword(String password){
    // 리턴 값 없음 (void)
    // 매개변수는 String 타입의 password
    }

}

 

---

정리 

omitempty

해당 필드의 데이터가 존재하지 않으면,

Marshaling 수행 시, 해당 필드는 제외하고 Marshaling을 수행.

 

React에서 js파일의 값이 필요한 경우에는 js파일 자체를 연결해도 된다.

KPT

Keep

주어진 시간에 최선을 다하는 것

Problem

가끔 멍하니 있는 것

Try

시간을 아끼자

소감

오늘도 많은 것을 배우고 익혔다.