[네이버 클론 5] 배경색 테마 적용

3일 정도 틈틈히 생각을 하다가 해결방법을 생각해냈다.

내 프로젝트에서 APP컴포넌트 그리는 방식

지금 개발을 하고 있는 프로젝트는 SSR을 적용했다. 그래서 기존에 styled-component에서 사용하는 ThemeProvider로 body를 감싸지 못한다(App 컴포넌트는 theme 적용가능). 이를 해결하기 위해서 기존 방식인 클래스에 light, dark를 추가하는 방식을 사용했다.

아래 body의 스타일 부분은 간단하게 구성을 했고, 테마가 토글되는 기능도 되게 간단하게 구현을 했다.

이 코드는 테마를 변경하기 위한 버튼을 누르면 실행되는 부분이다.

 

버튼을 눌렀을 때 작동하는 코드

theme의 값은 useThemeContext에서 결정되서 나오게 되고, theme_str은 theme의 반대이다. 예를들어 theme_str은 theme이 light일 때 light의 반대인 dark의 값을 가지게 된다.

toggle함수는 on/off 기능을 수행하는 함수인데, 이 두개를 같이 사용하게 되면 단순히 켜고 끄는 것이 아니라, 두 문자열을 교차 시킬 수 있게 된다(그런 것처럼 보인다). 여기서 중요한 점은 초깃값이 없으면 두개의 클래스(light, dark)가 한꺼번에 추가되고, 한꺼번에 삭제되기 때문에 초깃값을 무조건 설정해줘야지 위의 코드가 동작하게 된다.

 

아래의 코드는 react에 포함되어 있는 코드가 아니라 순수 js이다. 어쨌든 초기값을 설정하는 부분은 간단하다. 

위처럼 좀 이상한 방법으로 클래스를 추가하는 이유는 서버에서 ThemeProvider가 적용이 안되기 때문에 임시방편으로 코드를 작성했다.

솔직히 복잡하게 SSR, Deno를 안썼으면 테마 적용할 때 엄청 쉽게 했을 거고, Deno로 작성한 코드를 매번 번들링하는 시간 낭비도 안했을텐데 좀 아쉬운 부분이라면 아쉬운 부분이다...

그리고 ts는 솔직히 js를 컴파일러 하는 역할인데, 브라우저에서 타입검사되는 언어를 따로 만들어주면 안되나..

 

현재 프로젝트에서 네이버 클론 페이지를 불러오는 경로가 기존 React 페이지보다 복잡하다.

 

1. 사용자가 서버에 메인 경로를 요청한다. requset('/') !!!

2. 서버는 해당 경로에 맞는 함수(페이지를 로드 및 스타일을 설정하는 기능)를 실행한다.

2-1. 함수 내부에서 처리를 진행한 후에 기존 React 페이지(SSR 적용안했을 때)처럼 뼈대 HTML파일을 응답한다.

3. 브라우저는 응답받은 HTML파일의 뼈대를 기준으로 애셋(컴포넌트들로 구성된 JS 코드)들을 불러와서 화면에 출력한다.

 

정리해보자면 서버에서 사용자의 요청을 받아서 기존 React 페이지처럼 뼈대(root, style, public경로)를 구성한 후에 브라우저로 보내면 브라우저에서 필요한 애셋을 가져온 후에 렌더링을 수행한다. 대충 정리해보면 이렇게 되는 것 같다.

 

빨리 완성하고 싶다...