다크모드 포트폴리오 개발 정리 뭔가 개성있는 포폴 페이지가 만들고 싶었다. 요즘 뉴모피즘 다음으로 클레이모피즘이 유행이라고 해서 그리고 단순하게 클레이모피즘이 예쁘고 맘에 들었기 때문에 클레이모피즘을 적용해 포폴 페이지를 만들고 싶었다. 그래서 먼저 Figma로 만들고 싶은 페이지를 구상해봤다. 모니터 크기별로 대응할 수 있도록 width를 (위 사진의 빨간 영역) 1000px~1100px을 넘지 않게 구상했어야했는데, ... figmaaosImage Sprite클레이모피즘github pages포폴vue다크모드Image Sprite [블로그만들기] 다크모드 구현(typescript) 다크모드 기능을 적용할 것이다. 라이트모드(밝은 배경의 어두운 텍스트)와 다크모드(어두운 배경의 밝은 텍스트)로 스타일을 분리한다. 사용자가 버튼을 클릭하여 원하는 테마로 변경할 수 있다. 페이지를 이동해도 적용한 테마가 유지된다. 먼저 라이트모드와 다크모드 스타일을 지정한다. 이 때 mainFont, subFont 등 객체의 key값이 같아야 한다. 이 때typeof 를 쓰면, 지정한 객체... typescript다크모드emotionjsemotionjs 리액트 다크모드 - styled-components 이 글은 시리즈로 구성될 예정이며 아래와 같이 진행될 예정입니다. styled-components 사용 SSR의 경우 그 특성상, FOIT(flash of incorrect theme) 현상이 발생할 수 있어서 별도로 다루겠습니다. 우선 styled-components 입니다. styled-components를 사용하는 경우에는 context api를 사용하는 것보다 styled-compon... Reacttypescript다크모드styled componentsReact React Recoil을 이용한 다크모드 적용하기 💽 오늘은 TypeScript React에서 Recoil을 이용한 다크모드 적용하기를 주제로 작성해보도록 하겠습니다. 흔히 다크모드는 네이버, 유튜브, 페이스북 등에서 다양하게 지원되고 있는 테마 방식입니다. 이 다크모드를 이번 글에서 구현해볼것이며, 전역 상태관리 도구로는 Recoil을 사용하도록 하겠습니다. 프로젝트를 생성한다음, src/styles 폴더 안에다가 colors.scss 파일을... Reacttypescript다크모드RecoilReact
포트폴리오 개발 정리 뭔가 개성있는 포폴 페이지가 만들고 싶었다. 요즘 뉴모피즘 다음으로 클레이모피즘이 유행이라고 해서 그리고 단순하게 클레이모피즘이 예쁘고 맘에 들었기 때문에 클레이모피즘을 적용해 포폴 페이지를 만들고 싶었다. 그래서 먼저 Figma로 만들고 싶은 페이지를 구상해봤다. 모니터 크기별로 대응할 수 있도록 width를 (위 사진의 빨간 영역) 1000px~1100px을 넘지 않게 구상했어야했는데, ... figmaaosImage Sprite클레이모피즘github pages포폴vue다크모드Image Sprite [블로그만들기] 다크모드 구현(typescript) 다크모드 기능을 적용할 것이다. 라이트모드(밝은 배경의 어두운 텍스트)와 다크모드(어두운 배경의 밝은 텍스트)로 스타일을 분리한다. 사용자가 버튼을 클릭하여 원하는 테마로 변경할 수 있다. 페이지를 이동해도 적용한 테마가 유지된다. 먼저 라이트모드와 다크모드 스타일을 지정한다. 이 때 mainFont, subFont 등 객체의 key값이 같아야 한다. 이 때typeof 를 쓰면, 지정한 객체... typescript다크모드emotionjsemotionjs 리액트 다크모드 - styled-components 이 글은 시리즈로 구성될 예정이며 아래와 같이 진행될 예정입니다. styled-components 사용 SSR의 경우 그 특성상, FOIT(flash of incorrect theme) 현상이 발생할 수 있어서 별도로 다루겠습니다. 우선 styled-components 입니다. styled-components를 사용하는 경우에는 context api를 사용하는 것보다 styled-compon... Reacttypescript다크모드styled componentsReact React Recoil을 이용한 다크모드 적용하기 💽 오늘은 TypeScript React에서 Recoil을 이용한 다크모드 적용하기를 주제로 작성해보도록 하겠습니다. 흔히 다크모드는 네이버, 유튜브, 페이스북 등에서 다양하게 지원되고 있는 테마 방식입니다. 이 다크모드를 이번 글에서 구현해볼것이며, 전역 상태관리 도구로는 Recoil을 사용하도록 하겠습니다. 프로젝트를 생성한다음, src/styles 폴더 안에다가 colors.scss 파일을... Reacttypescript다크모드RecoilReact