12주 차까지 12문제 모두 풀었다!

• 1주 차는 그냥 생각 없이 풀고 제출했는데, 다른 사람 풀이를 보니까 너무 쇼킹했다
• 좋아요 한번 받아보려고 새로운 문제 오픈되자마자 빠르게도 풀어보고, 제출하기 전에 코드 최대한 압축해서 제출도 해보았다
• 근데 좋아요 한 개도 못 받았다 ㅋㅋ ㅠㅠ
• 나름 짧게 잘 푼 것 같아 제출해도 항상 더 쇼킹한 풀이를 보았다..
• 어려운 문제가 나오면 포기할까 싶었는데, 나중에 스샷 찍었을 때 풀었다는 표식을 남기고 싶어서 끝까지 한 것 같다

• 시간제한도 없고 편하게 할 수 있어서 재밌었다!

참고

• https://programmers.co.kr/learn/challenges

Cron syntax has five fields separated by a space, and each field represents a unit of time.

┌───────────── minute (0 - 59)
│ ┌───────────── hour (0 - 23)
│ │ ┌───────────── day of the month (1 - 31)
│ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
│ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
 *  *  *  *  *

• 크론 표현식 쓸 때마다 까먹는다
• 깃허브 액션 문서 보다가 잘 정리되어 있는 거 발견해서 스크랩한다

참고

• https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
• https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/services-cloudwatchevents-expressions.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

@REM cd
cd
cd..
cd,

@REM 줄바꿔서 계속 입력
echo 1 ^
2 ^
3

@REM 폴더 생성
mkdir a/b/c

@REM 폴더 삭제
rmdir /s /q folder1_name folder2_name

@REM 리네임
rename curName newName

@REM 프로세스 종료
taskkill /IM "helloWorld.exe" /F

@REM 새 파일 생성
copy con new_file.txt

@REM 파일 이동
@REM 상위 디렉터리로 파일 이동
move folder1_name ..

@REM 상위 디렉터리에 있는 폴더1을 현재 디렉터리로 이동
move ../folder1_name .

@REM 배치 파일 위치로 cd
pushd "%~dp0"

@REM 심볼릭 링크 생성 삭제
@REM mklink /d [원본] [링크]
mklink /d [링크위치] [링크위치를 기준으로 상대위치]
mklink /d [절대위치] [절대위치]
rmdir [링크]

참고

• https://chinsun9.github.io/categories/cmd/

1

cd ,

1

pwd

• 현재 워킹 디렉터리 확인하기

• 테마를 전환할 때 favicon url도 업데이트한다
• 2개의 favicon 파일이 있다

1
2
3
4
5
6

function setFaviconTheme(theme) {
  const href = `https://cdn.jsdelivr.net/gh/chinsun9/chinsun9.github.io@master/img/favicon-bold-color210928${
    theme === 'dark' ? '-dark' : ''
  }.svg?`;
  document.querySelector(`head > link[rel="icon"]`).href = href;
}

메모

• favicon으로 쓰이는 svg에 어떻게 색을 넘길까..?
• 그냥 svg 2개 만들어서 토글하기
• 기존 테마 파일 리팩토링

참고

• https://brunch.co.kr/@ultra0034/129

• 드디어 완벽히 채워진 화분

화면을 넘어갈 때 눈뽕(기본 테마가 잠깐 렌더링 됨)을 해결하기

상황

• 다크 모드에서 계속 새로고침하고 있는 상황이다
• 중간에 번쩍하고 흰색이 보였다
• 다크 모드 사용 중에 이렇게 새로고침이나 페이지가 넘어갈 때마다 종종 흰색 화면으로 뒤덮이는 문제가 있었다

• 디폴트 테마 ; 화이트
• 설정한 테마 ; 다크
• 다크 모드이면 body에 dark 클래스 추가
• 다크 모드에서 새로고침이나 화면을 넘어갈 때 잠깐 흰색 화면이 보인다

• 해결해보자

해결

• body 태그 바로 아래에 스크립트를 두어 렌더링을 막았다
• html에 백그라운드 css가 있다면 삭제

알아낸 점

• 페이지가 넘어갈 때 이전 화면의 백그라운드가 유지된다 (이전 화면의 html이나 body의 백그라운드 컬러)
• 렌더링은 완전히 파싱이 끝난 후에 이뤄진다
• 중간에 스크립트를 두어 렌더링을 막을 수 있다(블로킹)
• color-scheme css를 사용하면 스크롤바 다크 모드도 적용할 수 있다
• color-scheme css를 사용하면 기본 백그라운드가 생긴다 (dark일시 어두운 백그라운드)

다크 모드 체크리스트

• color-scheme css 사용하기
• html 또는 body 태그에 적용되는 백그라운드 색이 있다면 없애기
• 테마 초기화하는 블로킹 스크립트 넣기

참고

• https://www.joshwcomeau.com/react/dark-mode/
• https://github.com/joshwcomeau/dark-mode-minimal
• https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
• https://chinsun9.github.io/dark-theme-practice/ (다크 모드상태로 계속 새로고침 해도 눈뽕이 없다!)

• 커스텀 로딩 아이콘을 만들 수 있다
• gif, svg, css, png, apng 등 여러 형식을 지원한다

• css로 받으면 html, css 코드 스니펫을 주는데, 너무 신기하다 ㅋㅋㅋ

참고

• https://loading.io/

1

npx sort-package-json

• package.json를 수정하다가 문득 생각났다
• 어떤 걸 위에 작성하고, 아래 작성해야 하는지..
• 다른 npm 패키지 모듈을 참고해서 이런 순서로 적는 게 맞나 하다가
• package.json order 키워드로 검색했더니 바로 내가 찾는 게 나왔다

사용 방법

• 너무 간단하다
• 그냥 package.json이 있는 디렉터리에서 npx sort-package-json를 실행하면 정렬이 완료된다!

참고

• https://github.com/keithamus/sort-package-json

~