개발/Frontend

💻 시작하며요즘 개발하는 모던 웹 페이지에서 테마 기능을 빼놓을 수 없다.따라서 새로운 프로젝트에서도 테마 기능을 넣어보려고 한다. 테마 정보를 어디에 기록하면 좋을까 생각하다가 여러가지 이유로 글 제목처럼 피니아 스토어에 기록해야겠다는 생각이 들었다. 🛠️ 요구사항테마 기능을 구현할때 단순히 브라우저나 기기의 설정을 따라가기만 해도 좋지만 그와는 별도로 사용자 지정도 가능하게 하고 싶어서 요구사항을 비교적 복잡하게 지정했다.기본적으로 기기의 설정에 따라 설정되어야 함사용자가 테마를 변경시 기기의 설정과 별개로 동작해야 함테마 정보는 저장되어 있다가 다시 접근할때 복원되어야 함.테마를 변경할때 새로고침 등의 액션 없이 즉각적으로 반영되어야 함. ← 피니아를 사용하게 된 이유다.라이트 / 다크 모드 뿐..

🧐 다크모드에서 깜박하는 것 최근 웹 개발의 필수품 중 하나는 다크모드다. 여러가지 웹/앱을 사용하면서 다크모드가 지원되지 않는 서비스를 찾아보기 드물었다. 다크모드를 구현하는 방법에는 여러가지 기술이 있지만 공통점이 있다. 모든 컬러를 수동으로 작성해야 한다는 점이다. div, Button, Input, Textarea 등등 눈에보이는 모든 부분의 색상이 재정의 되어야 한다. 그러다보니 놓치기 쉬운 부분이 있는데 바로 스크롤바다. 브라우저에서 기본 css가 정의되어 있는 항목이 여럿 있지만 가장 대표적인 부분은 Input, Button, 스크롤 바 영역이다. 이 친구들은 브라우저마다 보이는 스타일이 다르다. 그래도 대부분의 서비스에서 input과 button은 스타일 요소로 취급해 디자인을 변경하여 모..

JavaScript에는 많은 정렬 함수가 있지만, 우리가 흔히 보는 파일 정렬 순서와는 결과가 좀 다르다. Electron으로 파일 관련 프로젝트를 개발하다 파일 정렬 때문에 골머리를 앓았다. 앞서 이야기한 것처럼JavaScript에는 많은 정렬 함수가 있지만 윈도우 탐색기에서 보는 정렬 순서와는 결과가 좀 다르다. JavaScript로는 이런 결과가 흔히 나타난다. var arr = ["filename 0.txt","filename 1.txt","filename 9.txt","filename 10.txt","filename 11.txt"]; arr.sort(); console.log(arr); // 0: "filename 0.txt" // 1: "filename 1.txt" // 2: "filename..