하루 한 걸음, 개발 블로그

중간발표회 끝 후련하면서 기분이 이상하다. 피드백 - CloudFront 로 배포 진행하셨는데, 번들링 된 결과 파일들의 캐싱에 의해 이전 버전이 여전히 운영존에서 서비스되는 문제점을 어떻게 해결하셨는지 구글링을 통해 문제를 해결하려고 했지만, 결국 해답을 찾지 못 해서 CloudFront가 아니라 EC2로 프론트 서버를 배포했습니다. CloudFront에 대해서는 추후 더 알아봐서 정확한 사용법을 알아볼 예정입니다. 배포할 때 npx 명령어를 사용해서 코드 경량화를 제안드립니다. npx의 경우 한 번만 실행시킬 서버를 다운로드 하는 것이고, serve라는 웹서버를 다운받아서 실행 시킬 때, build라는 놈을 root로 하겠다는 의미입니다. 리액트 전체를 다 서버로 돌리는 것이 아니라 build를 통해..

게임룰 적힌 팝업 만들기 회원가입,로그인에서 뒤로가기 (랜딩 페이지로가는) 버튼 추가 랜딩페이지 로그인/비로그인 유저 구별해서 로그인하기/게임하러가기 버튼으로 변경 방장아이콘 넣기 유저카드 대체이미지 변경 스포트라이트 보더라인 백그라운드 변경 정답모달 레이아웃 수정

나몰닭 UI 완료...?

- 게임로직 구현 완료 - 작은 오류들 수정 중 - 서비스 아키텍쳐 및 선정 이유 정리 - 트러블슈팅, 기술적 의사결정 정리 - 1차 회원가입 UI 완성 - form 태그 안 중복확인 버튼 2개 중 첫번째 alert이 계속 뜨는 오류 해결 중

- 랜딩페이지 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%..

[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..