이번 주 목표
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
시간을 아끼자
소감
오늘도 많은 것을 배우고 익혔다.
'verdantjuly > Today I Learned' 카테고리의 다른 글
TIL 20240113 (0) | 2024.01.13 |
---|---|
TIL 20240111 (2) | 2024.01.11 |
TIL 20240109 (0) | 2024.01.09 |
TIL 20240108 (0) | 2024.01.08 |
TIL 20240106 (0) | 2024.01.06 |