- 랜딩페이지 1차 UI 완료 *13인치 노트북에서 background image 하단 잘리는 문제 해결 필요 - 디자이너님과 회의 1. 유저가 보는 첫 화면이 로그인 페이지가 아니라 랜딩페이지 2. 회원가입을 하지 않은 경우 게임하러 가기 버튼이 아니라 회원가입 버튼이 보임 3. 회원가입-로그인을 하면 로비(게임방 리스트 페이지)로 감 4. 로비에서 뒤로 가기 버튼을 누르면 랜딩페이지로 오는데 이 때는 게임하러 가기 버튼으로 보임 - 로그인 여부에 따라 버튼 텍스트를 다르게 보이도록 해야 함 5. 회원가입, 로그인 시 help text 는 toast message 로 보여줌(지금 디자인 최대한 보존) 6. 게임 룰 확인 모달이 보일 때 뒤로가기와 설정 버튼이 보이나 클릭은 하지 못하도록 막기 - 로그인..
오늘의 삽질... 10초 후 자동으로 사라지는 모달 컴포넌트 const [seconds, setSeconds] = useState(10); function GameAnswerModal({ setIsMyTurnModal }) { ... useEffect(() => { const countdown = setInterval(() => { setSeconds(parseInt(seconds, 10) - 1); }, 1000); if (parseInt(seconds, 10) === 0) { setIsMyTurnModal(false); } return () => clearInterval(countdown); }, [seconds]); ... } 상위 컴포넌트 {isMyTurnModal && ( )} 10초가 지나도 ..
Timer // 외부모듈 import React, { useState, useEffect, useRef } from 'react'; import styled from 'styled-components'; function Timer({ setIsStartTimer }) { const [seconds, setSeconds] = useState(20); useEffect(() => { const countdown = setInterval(() => { setSeconds(parseInt(seconds, 10) - 1); }, 1000); if (parseInt(seconds, 10) === 0) { clearInterval(countdown); setIsStartTimer(false); } return () ..
*어제 채팅을 구현하면서 setState 함수 안에서 화살표 함수를 써야 배열에 데이터들이 정상적으로 담기는 것을 깨달았다. https://berkbach.com/setstate-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-28b207fc81df setState( ) 파헤치기 타이머를 만들며 알게된 setState( ) berkbach.com 그래야 최신 상태가 유지되는 것 같다. 좀 더 찾아보고 토요일 기술매니저님께 여쭤보아야겠다. 오후에는 프론트 다같이 화면공유를 켜놓고 닉네임을 세션스토리지에 저장하는 로직을 구현했다. https://kyounghwan01.github.io/blog/React/redux/redux-persist/#persist-store-%E1%84%89%E1%..
[TIL] 230111
[Error] Each child in a list should have a unique "key" prop. https://crong-dev.tistory.com/47 [Warning: Each child in a list should have a unique "key" prop.] 에러 해결 문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )}React crong-dev.tistory.com 너무 간단하게 해결됨.! 수정 전 map 돌릴 때 고유한 key..
SearchRoom.jsx 수정 전 // 외부 모듈 import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; // 내부 모듈 import { searchRoom } from '../../../../redux/modules/roomSlice'; import search from '../../../../assets/img/search.png'; function SearchRoom() { const dispatch = useDispatch(); const roomList = useSelector((state) => state..
줌 클론 코딩 강의를 다 보고 채팅 구현 시작... 잠온다... 일단 시작은 했는데 모르겠다^ㅇ^ const connect = () => { client.current = new StompJs.Client({ webSocketFactory: () => new SockJs(`${process.env.REACT_APP_API_URL}/ws-stomp`), // proxy를 통한 접속 connectHeaders: { // Authorization: new Cookies().get('access_token'), // 'Refresh-Token': new Cookies().get('refresh_token'), }, debug(str) { console.log(str); }, onConnect: () => { s..
export const searchRoom = createAsyncThunk( 'room/searchRoom', async (keyword, thunkAPI) => { console.log('keyword', keyword); try { const response = await instance.get(`/rooms/search?keyword=${keyword}`); console.log('search room', response); return thunkAPI.fulfillWithValue(response.data); } catch (error) { console.log('search room error', error); return thunkAPI.rejectWithValue(error); } }, )..
아팠음 중복검사 에러와 싸움