오늘 고민한 코드들
인스타그램 클론코딩에 들어갔다. 사실 저번주에도 했던 비슷한 내용이 많아서 크게 어려움은 없었으나 고민해 본 코드들을 정리해본다.
1. CSS 파트 고민
<Head>
<div>
<img width={150} height={40}src={instagram} alt="로고" onClick={handleGoToHome}/>
</div>
<IconBox>
<HomeBox>
<img width={30} height={30}src={home} alt="로고" onClick={handleGoToHome}/>
<img width={30} height={30}src={plus} alt="로고" />
<img width={30} height={30}src={profile} alt="로고" onClick={handleGoToProfile}/>
</HomeBox>
</IconBox>
</Head>
)
}
export default Header
const Head = styled.div`
display: flex;
justify-content: space-evenly;
width: 100%;
`- styled component 이용하여 구현.
- 인스타그램 로고와 버튼을 양 옆으로 놨어야 하는 상황
- 결론 : display와 justify-content 잘 이용해야했다.
2. 고민중인 코드
유저 이름을 불러오는 로직 -> 일단 DB에서 받아오는 로직을 짰는데 잘 안 된다.. Dispatch가 아 안 되어 그런건지.. 일단 코드 남겨본다. 이것 때문에 마이페이지가 계속 오류가 난다.
const {account} = useSelector((state) => state.account)
const dispatch = useDispatch()
useEffect(() => {
dispatch(__userProfile())
}, [dispatch])
// 여기서 디스패치가 안 일어난건가?
const onLogoutHandler = () => {
dispatch(__userLogout())
alert("이용하시려면 다시 로그인 해주세요")
window.location.replace("/signin")
}
return (
<div>
<img width={200} height={200} src={profile}></img>
<p>{account.nickname}</p>
<LogoutBox>
<span onClick={onLogoutHandler}>로그아웃</span>
</LogoutBox>
</div>
)
}3. 내일 할 일
- env 고쳐내기.. 갑자기 안 된다.
- 로그아웃 고치기.. 토큰이 안 지워진다.
- 팀원과 머지하기
커피 내리고 향 맡는거 좋아해요. 이것 저것 공부합니다.