1. 메뉴 만들기

사실 먼저 
```
<ul>
	<li>메뉴1</li>
    <li>메뉴2</li>
</ul>
```
이런 식으로 하려다가 생각보다 현타가 왔다. 이걸 다 쓴다고? 굳이?

그래서 
```
const menu=["메뉴1","메뉴2",...]
const submenu=[["메뉴 11","메뉴12"],["메뉴21","메뉴22"]]
<ul>
	{menu.map((v,k)=>{
    	return (<li> {v}</li>)
        })
     }
  </ul>
  ```
  
  이런 식으로 하려고 했다. 그런데 하다보니까 서브메뉴를 나타낼 수 없었다. 
  3시간동안 이것만 붙잡고 있었다. 사실 무지성으로 하면 금방 끝난다는걸 아는데, 뭔가 하드코딩을 하기는 싫었다. 
  
  그러던 중 교수님께서 데이터 저장 방법이 잘못 되었다고 알려주셨다. 
  ![](https://velog.velcdn.com/images%2Fnara7875%2Fpost%2Fe98c8b85-c595-45ce-8a40-03d1fdea4029%2Fimage.png)
	이렇게 메뉴를 저장하는게 맞다고 알려주셨다. 
    그리고 map함수는 return을 써야했다. 
    그래서 이렇게 나타내었다. 
    

<Menu>
      {menu.map((v,k)=>{
          return(
              <>
                  <li key={k}>{Object.keys(v)}
                      <HoverMenu>
                          {Object.values(v)[0].map((m,j)=>{
                              return(
                                  <li key={j}>{m}</li>
                                  )                         
                          })} 
                      </HoverMenu> 
                  </li>
              </>
          )
      })}
</Menu>

2. 나이트모드 설정하기

나이트 모드를 설정하는 건 생각보다 어려웠다. 사실 방법이 있는데 그걸 구현하는 방법을 몰라서 헤맸던 것이었다.

• rootProvider.js

import React from 'react';
import ThemeLayout from '../Components/Layouts/ThemeLayout.jsx';
import {useDispatch,useSelector} from 'react-redux'
import {Light,Night} from './rootProviders_css'
const RootProvider = ({children}) => {
    const {nightMode} = useSelector((state)=>state.mode);
    return(
        <>
            <ThemeLayout>
                {nightMode===true?
                    <Light>{children}</Light>
                    :<Night>{children}</Night>
                }
            </ThemeLayout>
        </>
    )
}

export default RootProvider;

• rootProviders_css.js

import styled,{createGlobalStyle}  from 'styled-components';


export const Light = createGlobalStyle`
    body{
        margin:0;
        padding:0;
        background: radial-gradient( pink, #efefef, purple ) fixed;
        color:#302f2f;
        }
`
export const Night = createGlobalStyle`
	 body{
 	  margin:0;
 	  padding:0;
  	 background-color:#1a1c25;
  	 color:#efefef;
     }
`;

createGlobalStyle이란 속성이 styled-components에 있어서 그걸 쓰면 body부분 설정이 가능하다. context에 mode를 만들고, nightMode라는 속성을 초기값에 담아서 설정해 주었다. 그래서 버튼을 누르면 나이트모드가 되고, 다시 누르면 라이트 모드(?)가 되게끔 설정을 해주었다.

아주 개발자적인 감성이다^^🤣🤣😂
교수님께서는 선넘었다고 ㅋㅋㅋㅋㅋㅋ

오늘은 이제 모바일 모드를 해 볼 것이다.