codestates / codestates/aneun-dongne

[Dev-Log] 1209 / 윤해용

Open
#110 0 comments 0 reactions 1 assignee Claimed by @haeyong9701 View on GitHub
Dev Log
Dominant language
JavaScript
Stars
6
Forks
7
PR merge metrics
No merged PRs in 30d

Description

> ### 오늘은 어떻게 프로젝트에 기여했나요?
> * 주소창에 아이콘과 이름 아는동네로 바꿈
> * 회원가입 성공시 모달창 꺼지게 설정했음.
> * 마이페이지 SPA, 메뉴바 리팩토링.
> ### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
> * 리팩토링이 필요해 보여서 시도중인데, 생각보다 시간이 많이 걸린다.
> * SPA에서 메뉴 버튼 클릭 시, 클릭한 메뉴버튼만 색이 바뀌게 하는 작업이 어려웠다.
```useRef```으로 ul 태그를 가져온다. navEffectHandler에서 ```focused```를 classname에 붙여서 색을 하나만 바뀌게한다.
하나만 바뀌게 하는 조건은 ```useLocation```을 이용해 현재경로일 때만 바뀌게 했다.
```jsx
const { pathname } = useLocation();

const navMenu = useRef();

useEffect(() => {
navEffectHandler();
});

const navEffectHandler = () => {
for (let i = 0; i < navMenu.current.childNodes.length; i++) {
navMenu.current.childNodes[i].childNodes[0].classList.remove("focused");
}
switch (pathname) {
case "/mypage":
navMenu.current.childNodes[0].childNodes[0].classList.add("focused");
break;
case "/mypage/comments":
navMenu.current.childNodes[1].childNodes[0].classList.add("focused");
break;
case "/mypage/like":
navMenu.current.childNodes[2].childNodes[0].classList.add("focused");
break;
case "/mypage/visited":
navMenu.current.childNodes[3].childNodes[0].classList.add("focused");
break;
default:
return;
}
};

...
return(

    ```

    > ### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
    > * [ ] 마이페이지 내가 쓴 리뷰 구현하기

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.