삐옹

사실 html 자체에 내장된 멋진 엘리먼트가 있지만은. 좀더 커스텀한 ui를 만들어보고 싶다 할 수 있겠다. 카카오톡으로 뭘 공유할거냐 했을 때 이걸 이용해 무언가 재밌는걸 할 수 있지않을까 싶다. 1. 조사 구글 검색 시작. 검색 1분만에 맘에 드는게 있어 결정해버렸다. 체크 표시로 한 섹션의 완료를 명확히 확인할 수 있는 이것으로 결정. 자 그럼 만들어볼까. 2. 계획 한 섹션의 시간이 끝나면 저 빈 동그라미에 체크표시와 색이 채워져야한다. 데이터를 어떻게 활용할 것인지 생각해보자. 아래는 처음 Home화면에 들어왔을 때 세팅되는 데이터의 모습이다. remainingTime에 있는 프로퍼티들을 이용하여 화면이 그려진다. 900초가 100%의 기준점이 되어야하고, 1초가 줄어들 때

뽀모도로 타이머를 만들고 있다. Setting 페이지에 등록된 데이터를 연산하여 Home 페이지에 알맞게 뿌려주는 작업을 만만히 봤나.. 나름 골머리를 앓았다. const initialValue = [ { time: 15 }, { shortBreak: 5 }, { longBreak: 5 }, ]; 그래도 initialValue를 기반으로 하여 두 페이지의 UI는 완성되었다. 일단 로그인하면 저기있는 시간이 디폴트로 들어온다 할 수 있겠다. start&stop 버튼, 한 섹션이 끝났을 때 알맞은 다음 섹션으로 이동 처리까지 완료했다. 앞으로 만들 기능은: progress bar 기능을 하는 UI만들기 섹션이 끝나기 10초 전에 알림(소리 + 작은 알림창) 카카오 로그인 & 공유하기(뭘?) 하나 씩 글로 정..

원하는 방에 입장한 후 board, calendar, talk 페이지로의 이동을 구현해야했다. 사전에 방에 입장 할 떄마다 그 방의 고유 id 값을 이용해 동적 라우팅 처리를 해두었다. 그과정에서 일어난 이슈를 정리해보았다. Trouble Shooting 라우터가 동작하지 않는 현상 발생😵‍💫 고치기 전 코드 return ( ... // map을 이용해 3개의 Link를 뿌려주고 있다 {{pages.map((page, idx) => { const pageNameToLower = page.toLowerCase(); return ( handleSelectedPage(e, idx)} className={`list-item ${ selectedPage[idx] ? "list-item_clicked" : "" }..

문제 소속된 워크스페이스 목록을 조회하는 요청과 내가 받은 초대장 목록을 조회하는 요청(GET요청 x2)이 2개의 useEffect 안에서 실행되고 있다. 전역 state를 이용해 같은 slice의 다른 키 값으로 업데이트 요청을 보내는데 소속된 워크스페이스 목록의 값을 잘 불러왔다가, 또 어떤 때는 값이 들어왔다가 다시 초기값으로 돌아가는 상황. Redux로 저장한 배열의 값이 여러번의 렌더링을 거친다. 초깃값 -> 업데이트 -> 초깃값 or 초깃값 -> 업데이트 패턴으로 리렌더링 할 때마다 들어오는 값이 달라짐 그래서 어떤 때는 배열 값이 비어있어서 에러가 뜨고 또 어떤 때는 잘 읽어온다. 예) 첫 렌더링 - arr = Array(0) / 두 번째 렌더링 - arr = Array(3 ) / 세 번째 ..

상황 워크스페이스를 누르면 해당 워크스페이스의 이름을 가져와 화면에 뿌리고 새로고침 했을 때도 유지되게끔 하기 문제 const [workSpaceName, setWorkSpaceName] = useState(""); // 2 useEffect(() => { localStorage.setItem("workspace", workSpaceName); // 3 }, [workSpaceName]); ... return ( ... workspaceList.map( ... return { setOpenDropdown(false); setWorkSpaceName(item.split("+")[1]); // 1 }} > ...) ... ) li태그 클릭 -> state 업데이트 -> ls(local storage)에 저장..