전체 글 (397) 썸네일형 리스트형 [잔소리] TailwindCSS 를 이용한 다크모드 구현 TailwindCSS 를 이용한 다크모드우선 현 프로젝트는 대시보드 형태로 만들기 때문에, 다크 모드 테마 기능을 지원하여 사용자로 하여금 콘텐츠에 집중할 수 있는 환경을 제공해주는 것이 좋다고 판단하여 추가된 기능입니다. tailwindCSS 에는 다크모드를 구현하기 위한 예제를 제공해주고 있습니다. 기본이 되는 예제는 다음과 같습니다.// On page load or when changing themes, best to add inline in `head` to avoid FOUCif (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matche.. [잔소리 프로젝트] CHAPTER03 | 개발 환경 설정 이전 이야기 | 프로젝트 계획 [잔소리 프로젝트] CAHTER 02 | 프로젝트 계획이전 이야기 [잔소리 프로젝트] CHAPTER 01 | 프로젝트의 필요성들어가는 말그저 정보공유에 초점을 맞추고, 그저그런 프로그램이 아니라 현재 불편함을 경험하고 있는 사례를 토대로 프로그램duklook.tistory.com 들어가는 말이번 챕터에서는 잔소리 프로젝트을 진행하기 전 개발 환경을 설정하는 시간을 가져볼까 합니다. 사실 기본적인 환경 설정이 절반이상이고, 이전에 환경 설정 시 다루었던 부분이 대부분이기 때문에 참고한 링크나 참고할 몇 가지 정보만 제공하는 형식이 될 것 같습니다. 그래도 중요한 자료들은 모두 첨부해 두었으니 참고하셔서 본인의 상황에 맞는 프로젝트 환경을 구성해보시길 바랍니다. 개발 환경 .. 하나의 상태에 의존하는 다수의 컴포넌트에 벌어진 일 이게 무슨 일인가 싶었다.NextJS 를 이용해 만든 명언 웹 사이트를 방문하여 TTS 를 동작시키니 다수의 카드가 동시에 실행되는 문제가 있었습니다. 문제를 인지하지 못하고 있었는데, 구글폼을 통해서 건의를 해주신 사용자분이 계셔서, 발견할 수 있었습니다. 정말 감사하다는 말을 여기서나마 다시 전해봅니다. 문제의 발단이 되었던 사건과 코드 구조 분석본론으로 와서 분명 해당 문제는 이전에 테스트했을 때는 발견되지 않았던 문제였습니다. 다만 최근에 통합테스트에 대해 학습하면서 이를 적용 해보면 좋을 것 같은 컴포넌트를 건드리긴 했습니다. 이 때, 최대한 prop 을 줄이고, 상태를 최상위에서 관리하기 위해 리팩터링 작업을 시도하였는데, 이 작업으로 괜히 잘 돌아가던 기능에 버그를 발생시킨 것으로 보입니.. 처음으로 돌아가기 | 웹팩 개발 환경 설정 https://webpack.kr/guides/development/ 오늘 참고하는 공식 문서 링크입니다. 이전 포스트 | Output 다루기 처음으로 돌아가기 | 번들 파일의 종착지, Output 관리하기https://webpack.kr/guides/output-management/ 해당 문서를 참고하여 작성됩니다. 제가 이해 한대로 작성하는 부분이 많기 때문에, 정석대로 가실거라면 공식문서를 참고해보세요. 이전 포스트 | 애샛 설duklook.tistory.com 들어가는 말웹팩는 번들러 이지만, 개발 환경에서 웹팩을 보다 쉽게 활용할 수 있는 몇 가지 기능들을 지원합니다. 보통 번들러를 통해서 하나의 소스파일로 합쳐지는 경우, 에러가 발생한다면, 각 파일별로 구분하여 알려주는 것이 아니라 하나.. [잔소리 프로젝트] CAHTER 02 | 프로젝트 계획 이전 이야기 | 프로젝트의 필요성 [잔소리 프로젝트] CHAPTER 01 | 프로젝트의 필요성들어가는 말그저 정보공유에 초점을 맞추고, 그저그런 프로그램이 아니라 현재 불편함을 경험하고 있는 사례를 토대로 프로그램을 만들어 보고 싶다는 생각을 많이 했습니다. 현재 내가 알고duklook.tistory.com 들어가는 말오늘은 프로젝트를 어떤 방향으로 구성해 나갈지에 대해서 정리해보는 시간을 가져볼까 합니다. 계획이라고 해봤자 단순하고, 누락된 부분이 많습니다. 아직 덜 구체화된 부분도 있고, 빈약하죠. 하지만 이렇게 정리해보는 시간을 가짐으로써 동기부여가 되기도 하니 한번 시도해 봅니다. 프로젝트 계획목적과 목표 정의 일단 해당 프로젝트의 목적은 단 한가지 입니다. "수익 계산 자동화" (->가능하다면.. [잔소리 프로젝트] CHAPTER 01 | 프로젝트의 필요성 들어가는 말그저 정보공유에 초점을 맞추고, 그저그런 프로그램이 아니라 현재 불편함을 경험하고 있는 사례를 토대로 프로그램을 만들어 보고 싶다는 생각을 많이 했습니다. 따라서 현재 내가 알고 있는 것에서 조금의 지식을 더 추가해서 만들 수 있는 프로그램이면서, 현재 불편함을 경험하고 있으며, 개선하고 싶은 문제는 광고 수익 부분이었습니다. 해당 문제를 개선하여 삶의 질을 높이기 위한 도전이 잔소리 프로젝트이며, 그리고 오늘 이 시간은 해당 프로젝트가 왜 필요했는가에 대한 포스트가 되겠습니다.잔소리 프로젝트의 필요성해당 프로젝트가 왜 필요할까요? 순전히 저의 기준으로 몇 가지가 있습니다. 매년 수익를 계산해서 신청하기 귀찮음현재 저는 애드센스를 적용한 블로그가 2개 있고, 네이버 애드포스트를 적용한 블로.. 처음으로 돌아가기 | 번들 파일의 종착지, Output 관리하기 https://webpack.kr/guides/output-management/ 해당 문서를 참고하여 작성됩니다. 제가 이해 한대로 작성하는 부분이 많기 때문에, 정석대로 가실거라면 공식문서를 참고해보세요. 이전 포스트 | 애샛 설정, Data 다루기 처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 json/xml/csv참고한 자료는 webpack 공식 문서를 사용하였습니다. 애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러duklook.tistory.com 들어가는 말이번시간에는 Output 경로에 대해서 다룰 겁니다. 번들링된 결과가 dist/ 경로에.. 처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 '데이터'(애샛 파트 마지막) 참고한 자료는 webpack 공식 문서를 사용하였습니다. 애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러와도 정상적으로 import 되어 사용할 수 있습니다. 하지만, xml 이나 csv 파일 의 경우에는 지원해주지 않기 때문에, json 과 동일한 방식으로 import 하려고 하면 문제가 발생합니다. 따라서 웹팩에서는 이 문제를 해결할 수 있는 로더를 제공해주는데 그것이 csv-loader 와 xml-loder 입니다. 이번 포스트는 해당 로더를 설정해서 번들링하는 방법을 언급하고 그 결과를 살펴보는 과정을 서술합니다. loader 설치 및 구성 설정 후 번들링 순.. 이전 1 2 3 4 5 6 7 8 ··· 50 다음
