아이템 선택영역 코드 개선

첫 시도

<div class="flex-grow relative">
    <div class="flex w-full h-full absolute">
        <div class="flex-grow"></div>
        <div class="flex-grow w-6 rounded-lg bg-blue-300"></div>
        <div class="flex-grow"></div>
    </div>
    <div class="flex flex-col text-white relative">
        <div>수</div>
        <div>25</div>
    </div>
</div>
<div class="flex-grow relative">
    <div class="flex w-full h-full absolute justify-center">
        <div class="w-8 rounded-lg bg-blue-300"></div>
    </div>
    <div class="flex flex-col text-white relative">
        <div>수</div>
        <div>25</div>
    </div>
</div>

.justify-center 를 사용하여 flex 콘텐츠를 중앙정렬 할 수 있기 때문에 3개의 div를 만들고 가운데를 사용하는 형태의 코드를 피할 수 있었다. ㅎ

더 좋은 아이디어

<div class="flex-grow mx-2">
    <div class="flex flex-col">
        <div>화</div>
        <div>24</div>
    </div>
</div>
<div class="flex-grow mx-2 bg-blue-300 rounded-lg">
    <div class="flex flex-col text-white">
        <div>수</div>
        <div>25</div>
    </div>
</div>
<div class="flex-grow mx-2">
    <div class="flex flex-col">
        <div>목</div>
        <div>26</div>
    </div>
</div>

선택 영역을 표현하기 위한 별도의 div를 추가하던 방식을 요일을 담는 div를 활용하여 배경을 표현하는 방식으로 수정했다. 덕분에 배경을 표현하던 div와 position 관련 코드를 제거할 수 있었다.

다른 요일과 div가 붙어 보이지 않도록 요일마다 .mx-2 마진을 추가했다.

상단 이미지처럼 스크린 사이즈가 늘어났을 때 선택영역도 같이 늘어나는 차이가 생겼지만 더 좋아보인다.

결론

역시 잠을 자야…

명상 앱 개발

초 단순 프로토타이핑.

<div class="flex text-center">
    <div class="flex-grow">
        <div class="flex flex-col">
            <div>일</div>
            <div>22</div>
        </div>
    </div>
    <div class="flex-grow relative">
        <div class="flex w-full h-full absolute">
            <div class="flex-grow"></div>
            <div class="flex-grow w-6 rounded-lg bg-blue-300"></div>
            <div class="flex-grow"></div>
        </div>
        <div class="flex flex-col text-white relative">
            <div>수</div>
            <div>25</div>
        </div>
    </div>
    <div class="flex-grow">
        <div class="flex flex-col">
            <div>토</div>
            <div>28</div>
        </div>
    </div>
</div>

하늘색 선택 영역은 오늘을 나타낸다. 이 하늘색 배경은 요일 한 칸의 넓이보다 얇고 중앙에 배치돼야 하기에 3cols divs를 넣고 가운데 div에 배경색을 칠했다. 매우 변태적.

slack-cleaner

특정 채널의 슬랙 메세지를 모두 지우고 싶을 때가 있다. slack-cleaner 라는 툴을 사용하면 되는데 자주 안 쓰다보니 설치할 때마다 실행 방법을 잊어서 적어본다.

핵심은 이렇다.

  • Your Apps의 OAuth & Permissions 메뉴에서 Scopes를 잘 줘야 한다
  • OAuth Access Token의 xoxp-…로 시작하는 token을 사용해야 한다

스코프

Slack 봇을 개발하던 중이라 봇과 대화가 많이 쌓였는데 퍼미션 문제로 삭제가 안돼서 chat:write:bot을 추가하니 삭제가 됐다. 봇과의 대화는 –direct 옵션 다음에 무엇을 넣어야 하는지 애매한데 앱 이름(appname)을 넣으니 잘 된다.

slack-cleaner –token “xoxp-…” –message –direct appname –bot –rate=1 –perform
slack-cleaner –token “xoxp-…” –message –direct appname –user “*” –rate=1 –perform

토큰

xoxb- 토큰이 아닌 xoxp- 토큰을 사용하니 된다.

토큰이 스코프 변경이나 앱을 재설치 할 때 바뀌는 것 같은 느낌이 있다. 사용한 토큰이 슬랙 사이트의 토큰과 달라진 것을 경험했다. 복사를 잘못한 것인지는 모르겠으나 아무튼 설정 변경 후 토큰을 잘 살펴보자.

기타

스코프는 삭제해도 남아있는 것처럼 작동한다. 앱을 재설치 해도 마찬가지다.

Laravel Nova 화면 호출

  • Nova blade가 있는 resources 디렉토리 root에 다음 파일들이 있음
    • layout.blade.php
    • dashboard.blade.php
    • router.blade.php
  • 전체 view 중에 dashboard.blade.php, router.blade.php 두 개만 layout.blade.php를 확장한다.
  • router.blade.php는 RouterController의 show()에서 읽는다.
  • RouterController의 show()는 PendingRouteRegistration의 register()에서 등록된다.
  • PendingRouteRegistration의 register()는 NovaServiceProvider의 routes()에서 호출된다.

Laravel mix PostCSS 사용 시 Tailwind config 설정

지난 에서 PostCSS의 Tailwind 플러그인에 config 넣는 방법을 과제로 남겨놨는데 방법을 찾은 것 같다.

// https://tailwindcss.com/docs/configuration/#using-a-different-file-name

mix.postCss('resources/css/test01.css', 'public/css', [
    require('tailwindcss') ('./tailwind-test01.config.js'),
]);

위처럼 require() 다음에 다시 괄호를 열어 설정파일 path를 넘기는 방식. Laravel mix 설정이 아니라서 미처 알아보지 못했지만 비슷한 코드를 포함하는 문서도 찾았다. 아무튼 이거 하려는 게 아니라 Tailwind 공부가 목적이라 얼렁뚱땅 요상한 학습 중.

Tailwind CSS + Laravel 세팅

Laravel 프로젝트에 Tailwind CSS 개발환경을 세팅해보자.

@tailwind 사용

/* resources/css/test01.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
// webpack.mix.js

// https://tailwindcss.com/docs/installation/#laravel-mix 1번
mix.postCss('resources/css/test01.css', 'public/css', [
    require('tailwindcss'),
]);

@import 사용

// resources/css/test02.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// tailwind-test02.config.js

module.exports = {
    theme: {},
    variants: {},
    plugins: [],
}
// webpack.mix.js

mix.sass('resources/css/test02.scss', 'public/css')
    // https://tailwindcss.com/docs/installation#laravel-mix 3번
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('tailwind-test02.config.js')],
    });

빠른 결론

Tailwind CSS 세팅을 해봤다. 공식 문서에는 @tailwind directive를 사용하는 방법과 @import를 사용하는 방법이 문서1, 문서2에 나뉘어 설명되어 있다. 관계가 있어 보이는 설정끼리 묶어서 적어봤다. 두 설정 환경을 섞으면 뭔가 에러가 나므로 그룹은 잘 나눈 것으로 보인다.

PostCSS라는 것이 두 설정에 모두 나타나서 찾아보니 새로운 CSS 변환 툴로 보인다. 다만 Sass처럼 언어를 갖고있지는 않고 플러그인을 통해 특정 언어를 쓸 수 있게 확장이 되나보다.

과제

@tailwind directive 사용방식에서 tailwind.config.js 를 설정하는 방법을 찾아보지는 않았다. 과제로…