서버컴포넌트에서 토글기능으로 다크모드 기능 추가하기 (스테픈 2km)

오늘의 작업일지

일단 vscode 스럽게 디자인을 좀 배치중이다

light모드에서는 이런식으로 동작하고

다크모드에서는

이런느낌으로 변경되도록 했다.

우측에 X버튼을 클릭하면

VScode를 종료시키는 느낌으로 기존 디자인으로 변경된다.

일단은 이런 형태로 구상했다.

아니면 x버튼을 누르면 앱 선택창으로 넘어가는 느낌으로 구현할까도 고민중인데

일단은 vsc 느낌으로 제작하려는 방식이 마음에 들어서 이대로 진행해보려고 한다.

react와는 다르게 next에서는 서버사이드에서 redux를 그대로 사용하기 힘들고

일부 훅을 서버사이드에서는 사용할 수 없다.

그래서 페이지를 구성할때 어떤 부분을 서버로 돌릴건지를 고민해야하는데

일단은 훅을 사용하는 경우 전부 클라이언트 컴포넌트로 만들었다.

몇몇 변경이 없는 버튼은 서버 사이드 컴포넌트로 바꾸는게 효율적일것 같은데

이 부분을 어떻게 하면 쉽고 간단하게 할 수 있을지 고민된다.

몇가지 고민점은

외부 api를 사용해 데이터를 받아오는경우

데이터를 받아오는데 시간이 걸려서

페이지 로딩이 많이걸리는데

이 부분을 개선하기 위해 무슨방법을 사용할지 고민을 해봐야겠습니다.

그리고 다크모드와 라이트 모드 구현은

body에 data-theme을 줘서

이걸 css의 선택자를 활용해서 변경처리를 하고있는데

body에 data-theme을 toggle버튼을 클릭시 변경되도록 구상했다.

토글버튼은 이 부분인데

이 방식이 맞는 방식인지는 모르겠고

일단 해당 버튼을 클릭하면

store에 값이 변경된다.

이 함수를 dispatch 해서 스토어에 값을 저장하고

store에 값이 변경되는걸 감시하는 컴포넌트를 하나 만들었다.

스토어의 값이 바뀌면 body에 data-theme의 값을 변경시켜주는 역할을 하고

해당 컴포넌트를 provider로 연결되어있는 컴포넌트에 넣어줬다.

어차피 리턴값이 없기때문에

하는 기능은 그냥 변경사항이 있으면 body의 테마를 변경한다.

다른 좋은방법이 있을지 모르겠고

그냥 고민하다가 이렇게 처리했다..

서버 컴포넌트에서 클라이언트에서 사용하던 훅들을 사용을 할 수 없어서

어쩔수 없이 이런방식을 썼다.

---

스테픈 2km완료