7일간의 부트스트랩: 1일차

8월 9일 월요일, 나는 7일간의 휴가 동안 사업을 시작하기 위해 나 자신을 위한 도전을 시작했습니다. 리마커블 사이드킥에 대한 이유와 자세한 내용을 확인할 수 있습니다.

오늘의 수업

제가 리팩토링을 너무 일찍 했어요… 개발자가 얼굴을 찡그리며 말합니다.

개발에 도움이 되었지만 하루가 끝날 무렵 상당한 시간을 낭비했습니다.

이른 아침

해골

나는 아침에 Tailwind 자산을 활용하여 베어본 스켈레톤을 제자리에 배치하는 목표를 달성했습니다. 이것은 매우 간단한 것으로 판명되었고 Tailwind CSS를 사용하면 Bootstrap 구성 요소의 시대로 되돌아갔습니다.
스타일 아이디어를 빠르게 반복할 수 있는 CSS 클래스의 방대한 라이브러리를 갖는 데에는 다소 강력한 무언가가 있습니다. 가져올 UI 예제 카탈로그에 들어가지 않아도 됩니다. 전반적으로 Tailwind UI에 대한 제 경험은 좋았습니다. 사용자 정의 UI 라이브러리를 구축하는 디자이너 팀을 갖는 것이 더 낫습니까? 전혀 그렇지는 않지만 신속한 프로토타이핑에는 훌륭하게 작동했습니다.

메일침프

기술적으로 이것은 제가 마케팅 사이트를 구성할 때 일요일에 나왔지만 저는 이것이 다소 흥미롭다고 생각했습니다. 미국의 CAN-SPAM 법은 모든 이메일 구독에 구독 취소 링크가 있어야 하며 회사가 도달 가능한 실제 주소를 제공하도록 강제하는 것입니다.
소비자로서 이것은 꽤 굉장합니다. 솔로 개발자로서 마지막 부분은 짜증납니다.

로고

나는 아침이 끝날 무렵 로고를 받았는데, 전반적으로 30달러에 나쁘지 않았고 Fiverr에서 급하게 작업했습니다. 그들이 단기간에 꽤 좋은 일을 했기 때문에 판매자에게 연결합니다.

정오

FontAwesome + Styled Components + Tailwind

Glyphicons 라이브러리에 액세스할 수 있도록 FontAwesome을 프로젝트에 통합하여 오후를 시작했습니다. 처음에는 적절한 classNames로 아이콘 태그를 인라인하는 것으로 시작했지만 Tailwind 라이브러리에서 가져온 꽤 멋진 추상화에 정착했습니다.
아래 스니펫은 React FunctionComponent에서 간단한 Icon 스타일 구성 요소를 래핑하고 전달된 classNames를 적절한 FontAwesomeclassName과 병합하는 간단한 유틸리티 함수를 사용합니다. 이것은 구성 가능한 아이콘 구성 요소를 제공하고 FontAwesome과의 통합을 한 곳으로 격리합니다.

function fontAwesomeLookup(name: string): string {
    switch(name) {
        case "home":
            return "fa-home"
        case "search":
            return "fa-search"
        case "exchange":
            return "fa-exchange"
        case "random":
            return "fa-random"
        default:
            return "fa-home"
    }
}
export const SolidIcon : React.FunctionComponent<IconComponentProps> = (props) => {
    let className = mergeClassNames("fas", fontAwesomeLookup(props.name))

    if (props.className) {
        className = mergeClassNames(props.className, className)
    }

    return (
        <Icon className={className} fontSize={props.fontSize}/>
    )
}

상호작용이 가능한 놀라운 모델

오후에는 로컬 잠금 화면 이미지를 업로드하기 위한 상호 작용 모델을 시작했습니다. Electron이 onMouseOver 이벤트를 처리하는 방식과 CSS를 활용하려는 나의 초기 시도로 인해 예상보다 약간 더 오래 걸렸습니다.

마운트 해제 중에 이벤트 리스너를 제거했음에도 불구하고 여전히 메모리 누수 오류가 발생합니다. 그래서 아이디어가 있다면 듣고 싶습니다. 오류는 아래와 같으며 관련 코드here를 찾을 수 있습니다.

두려운 리팩터링

오후 어느 시점에서 나는 electron-webpack을 우연히 발견했고 핫 리로딩 부족으로 인한 모든 문제에 대한 해답이 될 것이라고 생각했습니다. 당시 저는 Chrome 브라우저에서 모든 것을 테스트한 다음 Electron 앱을 시작하기 전에 번들로 묶었습니다.

Electron Webpack은 Electron 앱에 적합한 프로젝트 구조, 즉 렌더러와 기본 폴더를 소개했습니다. 이러한 초기 변경을 수행한 후 React, Electron, Typescript 및 Webpack이 서로 잘 작동하도록 노력하면서 토끼 구멍으로 보내졌습니다.
몇 시간을 허비한 후, 마침내 적절한 상용구 설정을 발견했고 하루가 끝날 무렵 마이그레이션을 마쳤습니다.

진전

전반적으로 오늘은 많은 잡일을 처리한 다소 생산적인 날이었습니다. 나는 내일 내 첫 번째 오프라인 기능을 시작하고 IDE 외부에서 놀기 시작할 수 있는 Remarkable Sidekick의 다운로드 가능한 사본을 이상적으로 가지고 있기를 바라고 있습니다.
다른 리팩터링으로 인해 곁길로 가지 않기를 바랍니다. 😄

RemarkableSidekick |

페이튼캐스퍼 / 주목할만한 조수