• 반복되지만 자주쓰이는 형태를 자동화한다는게 보일러플레이트의 핵심이다
• create-react-app, create-electron-app
• 이런 것들을 보일러 플레이트라고 부른다

참고

• 보일러 플레이트
• [boilerplate] boilerplate code (보일러플레이트 코드)
• yarn create

• 브라우저에서 js 코드 실행속도가 이상하게 느려져서 어떤 문제인가했는데,
• 개발자도구를 새창으로 열고(콘솔보는용도로)
• 탭을 백그라운드로 보내버렸더니 생긴문제였다
• setTimeout, setInterval 메서드의 경우 탭이 인액티브 상태이면 1초 이상으로 제한된다고 한다
• 인액티브 상태는 최소화하는 등 화면에서 사라지는 경우를 말하는 것 같다

1
2
3

setInterval(() => {
  log(1);
}, 100);

• 위코드를 작성하고 개발자도구 콘솔창을 새창으로 열고
• 탭을 최소화하면 1초 간격으로 실행되는 것을 확인 할 수 있다

참고

• WindowOrWorkerGlobalScope.setTimeout() - Web APIs | MDN
• Javascript performance when running in an unfocused tab

1

npm unpublish {패키지명} -f

• 내 패지키 디렉터리로 가서 위 명령을 실행

• 처음에 브라우저로 npm에 접속한다음에 패키지 > 세팅 에 딜리트가 있는줄 알았는데,
• cli로 지워야 했다

주의사항

• unpublish하면 24시간 동안 동일한 이름의 패키지를 publish 할 수 없다

삭제 조건

• 72 시간 이내에 게시된 패키지
• 새로 생성 된 패키지의 경우 npm Public Registry의 다른 패키지가 패키지에 종속되지 않는 한 게시 후 처음 72 시간 이내에 언제든지 게시를 취소할 수 있습니다

• 72 시간 이상 전에 게시된 패키지
  • 다른 패키지의 종속성이 아니어야 한다
  • 지난주에 다운로드 횟수가 300 회 미만
  • 단일 소유자

참고

• Unpublishing packages from the registry
• npm Unpublish Policy

1

git clone --depth 1 https://github.com/chinsun9/refactor-2019T1.git

• git clone을 통해 클론하게되면 .git 폴더도 같이 딸려온다
• .git 폴더없이 최신 상태만 가져오고싶을 때 어떻게 할까 찾아보다가
• --depth 옵션을 알게되었다

• --depth 1 하게되면 가장 마지막 상태만 클론하게된다

참고

• copy-a-git-repo-without-history

• icarus 테마를 적용하고 다 좋았지만,
• 커스텀하고 싶었던 것들이, 칼럼들의 비율과 가로 넓이가 너무 좁다는 것이였다
• 한번 커스텀해보자

themes 폴더에 icarus 테마깔기

• npm install hexo-theme-icarus ; npm으로 icarus 테마를 설치할 수 있는데,
• 이 방법으로 설치한 테마는 커스텀하여 사용하기에는 구조가 이상한 것 같아서(node_modules 안에서 icarus패키지를 수정..)
• 테마 설치는 /themes 디렉터리 아래에서 클론 방식으로 하는 것을 추천한다
• git clone --depth 1 https://github.com/ppoffice/hexo-theme-icarus.git
• 그냥 클론하게되면 커밋 내역까지 다 불러오느라 용량이 커진다
• --depth 1을 붙여 최신 상태만 받아 올 수 있다
• 필요없는 .git 폴더를 삭제해도된다

• 참고 ; git clone 커밋 히스토리없이 가볍게 클론하기

1

theme: icarus

• 위에서 설치한 테마 디렉터리명이랑 _config.yml 의 theme 항목의 값이랑 동일해야한다

themes
└── icarus

• 디렉터리 구조는 이렇다

칼럼 비율 조절하기

• 수정하기 용이하도록 themes/icarus 경로에서 vscode를 실행한다
• 지금부터 설명하는 파일의 경로는 themes/icarus 기준의 상대경로이다

1
2
3
4
5
6
7
8
9

function getColumnSizeClass(columnCount) {
  switch (columnCount) {
    case 2:
      return 'is-3-tablet is-3-desktop is-3-widescreen'; // 여기 수정
    case 3:
      return 'is-4-tablet is-4-desktop is-3-widescreen';
  }
  return '';
}

• layout/common/widgets.jsx 로 가보면 getColumnSizeClass라는 함수가 있다
• 여기에 자신의 columnCount 에 맞게 수정한다
• columnCount 의 기본값은 2라서 case 2인 경우를 수정한다
• 나는 is-3으로 수정했다

1
2
3
4
5
6
7
8
9
10
11

<div
  class={classname({
    column: true,
    'order-2': true,
    'column-main': true,
    'is-12': columnCount === 1,
    'is-9-tablet is-9-desktop is-9-widescreen': columnCount === 2, // 여기 수정
    'is-9-tablet is-9-desktop is-6-widescreen': columnCount === 3,
  })}
  dangerouslySetInnerHTML={{ __html: body }}
></div>

• layout/layout.jsx 하단을 보면 위 코드가 나오는데
• 나는 is-9로 수정해주었다

• 전체 12에서 기본값은 프로필이 들어있는 영역이 4, 게시글 영역이 8이였다
• 위처럼 수정하게되면 우선 그 비율을 3, 9로 변경해준 것이다
• 프로필 영역을 좁게, 게시글 영역은 크게 바뀐 것이다
• 이 12라는 것은 칼럼들의 상위에 있는 container의 크기를 기준으로 12등분한 것이다
• 그럼 이 container의 크기를 늘려보자

container 크기 늘리기

1
2
3
4
5

$gap ?= 16px
$tablet ?= 769px
$desktop ?= 1288px
$widescreen ?= 1480px
$fullhd ?= 1672px

• include/style/base.styl 로 가서 23라인 정도에 이런 코드가 보일 것이다
• 나는 $widescreen, $fullhd의 값을 각각 200px 씩 늘려주었다
• 그랬더니 container가 커졌다!

커스텀 css 적용하기

• 나는 보통 글을 쓸때, 그림을 먼저보고주고 그 아래에 그에 대한 설명을 하는 편이다
• 그래서 그림 위에있는 글이 아래 사진과 별로 관계가 없다는 것을 마진을 주어 표현하고 싶다
• 그런데 매번 그림이 나올 때 마다, <br>을 할 수도 없고…
• 그래서 아예 게시글 영역 안에 있는 이미지 태그에 대한 커스텀 css를 적용시킨다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

&.article
    .article-meta, .article-tags
        color: $text-light

    .article-meta
        overflow-x: auto
        margin-bottom: .5rem

    .article-more
        @extend .button.is-light

    .content
        word-wrap: break-word
        font-size: $article-font-size

        img                     // 여기 추가
            margin-top: 30px    // 여기 추가

• .styl 에 대한 문법은 잘모르지만,
• 들여쓰기로 셀렉터들의 관계가 정의되어있고
• 내가 원하는 게시글 영역의 이미지 태그가 적용되려면
• .article .content 아래에 img 태그에 대한 css를 정의해주었다

배포, 적용시키기

• 이렇게 변경하고 나고 배포를해야는데 그냥 배포하면 적용이 안된다
• public/css/default.css 를 삭제해준다
• 그리고 배포를 하면, hexo에서 default 파일이 없어짐을 감지하고 새로 생성하게 되는데,
• 그때 변경 내역이 적용된다!

1
2
3
4

const log = console.log;

log(12312313);
log('안녕');

• console. 쓰는 수고를 덜어준다
• log 까지지면 vscode의 경우 console.log(); 자동완성 시켜주는데
• 가끔 자동완성 우선순위가 첫번째가 아닌경우가 있다
• 그래서 그냥 별명을 붙여 쓰는게 맘편한 것 같다

clg (코드 스니펫)

• 오후 3:01 2021-04-28 추가
• https://chinsun9.github.io/2020/11/18/vscode-console-log-빨리치기/
• vscode 스니펫 익스텐션을 깔면 clg로 쉽게 자동완성 시 킬 수 있다

• 크롬 개발자 도구는 진짜 치트키
• 특히 이걸 알고시작하면 주먹구구식으로도 뭔가를 만들어낼 수 있다!
• F12 키로 개발자도구를 켠다

요소선택

• 개발자도구 상단에보면 네모에 호버하고 있는 마우스 아이콘을 클릭하거나
• Ctrl + Shift + C 키로 요소를 선택할 수 있는 모드로 들어갈 수 있다

• 이 모드가 켜지면 커서있는 곳의 html 요소를 선택할 수 있다

• 클릭을하면 개발자도구에 해당 html 요소가 있는 라인이 하일라이트되어 보여지며
• 원하는 요소를 더블클릭또는 f2를 눌러 html을 수정할 수 있다
• 여기서 수정한 내용은 화면에 바로 반영되어 보여진다
• 스타일도 적용해볼 수 있으며, 자동완성을 지원해서 속성명을 자세히 몰라도 이것저것 시험해볼 수 있다
• 당연하게도 새로고침하면 수정사항이 모두 날라간다
• 이렇게 저렇게 브라우저에서 시험삼아해보고 이게 좋다하면 에디터로 돌아와 코드에 추가해서 적용시켜볼 수 있겠다

Copy selector, Copy JS path

• 나는 이거를 정말 많이쓴다

Copy selector 결과
body > section > div > div > div.column.order-2.column-main.is-9-tablet.is-9-desktop.is-9-widescreen > div:nth-child(1) > article > h1 > a

• 내가 원하는 요소의 셀렉터를 찾아준다
• css를 적용하거나, 셀렉터를 쓸필요가있을 때 유용하다

Copy JS path 결과
document.querySelector("body > section > div > div > div.column.order-2.column-main.is-9-tablet.is-9-desktop.is-9-widescreen > div:nth-child(1) > article > h1 > a")

• Copy selector와 다른점은 document.querySelector로 감싸준다

debugger

• 이것도 신기한 기능이다

• 디버깅하고싶은 소스코드 중간에 debugger라는 키워드를 적어놓으면,
• 개발자도구가 열렸을 때, 코드가 실행되다가 debugger를 만나면 실행이 멈추고,
• 해당 위치에서 코드를 한줄씩 실행시켜 볼 수도 있고 그렇다

1
2
3
4
5
6
7

git clone --bare -b docker --single-branch  https://github.com/chinsun9/2020-web-test.git

cd 2020-web-test.git
git push --mirror https://github.com/chinsun9/2020-web-test-mirror.git

cd ..
rmdir /s 2020-web-test.git

• 우선 터미널에서 작업하기 전에 새로운 깃허브 저장소를 하나 생성한다.(복제될 저장소)
• 2020-web-test의 docker 브랜치를 bare clone 한다

• bare clone하게되면 소스코드가 보이지않고 이런 요상한 파일들이 보인다
• 평범히 클론했다면 .git 디렉터리에 있는 내용들이다

• cd 2020-web-test.git로 들어가주고
• git push --mirror https://github.com/chinsun9/2020-web-test-mirror.git
• 새로운 저장소로 mirror옵션을 주고 푸쉬하게되면 커밋내역까지 똑같이 저장소가 복제된다

• 오른쪽이 복제한 저장소이고, 복제한 저장소에서 하나의 커밋을 하였다

• rmdir /s 2020-web-test.git 이제 이 쓸모없는 디렉터리는 삭제하고
• 복제한 저장소를 git clone https://github.com/chinsun9/2020-web-test-mirror.git 클론해서 사용하면된다

용도?

• 퍼블릭 저장소에 올렸던 프로젝트를 계속 이어하는데
• dbconfig파일이나, 보여주고싶지않은 정보가 있을 수 있다
• 처음에는 비공개 브랜치? 이런 키워드로 찾아봤었는데, 그런 기능은 없었다
• 프로젝트를 통째로 복사해서 새롭게 git init 하는 방법도 있는데,
• 이 방법을 통해서 커밋내역을 유지하면서 복제할 수 있었다

참고

• Duplicating a repository

• 기존에 만들었었던 Nodejs Express WEB 프로젝트를 도커라이징 해보았다
• 얄팍한 코딩사전님의 가장 쉽게 배우는 도커를 보고 시도했다
• 도커가 이런거구나 하고 느낀 순간이였다.. 마치 신세계…
• 이번 도커라이징을 통해서 내 프로젝트를 도커가 설치되어있는 다른컴퓨터에서 매우 쉽게 돌려볼 수 있다는걸 알게되었다

기존 상태 설명

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.
├── node_modules/
├── web
│ ├── bin
│ │ └── www
│ ├── public/
│ ├── routes/
│ ├── utils/
│ ├── views/
│ └── app.js
├── .gitattributes
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── sqldump.sql

• 그냥 node express 서버와 db덤프 파일인 sqldump.sql 가 구분없이 한 디렉터리에 있었다

벡엔드와 데이터베이스로 분리하기

• backend, database 폴더를 만든다
• backend폴더로 sqldump.sql와 깃허브, 프리티어 세팅 등을 제외한 99.9999%의 소스파일들을 이동한다
• database폴더로 sqldump.sql을 이동

1
2
3

database
└── scripts
    └── sqldump.sql

• 이런식으로 node express 서버와 db를 분리할 수 있었다

Dockerfile 작성하기

backend

1
2
3
4
5
6
7
8

FROM node:12.18.3

WORKDIR /usr/src/app

COPY . .
RUN npm i

CMD ["npm", "start"]

• 내가 로컬에서 사용하는 환경을 토대로
• 내 앱에 맞는 노드버전을 가져와서
• /usr/src/app 라는 워크디렉터리에
• backend 아래있는 모든 파일들을 복사해오고
• RUN 명령어로 npm i로 종속성을 설치한다
• 그리고 CMD 명령으로 backend 서버를 실행시킨다

database

1
2
3
4
5
6
7
8

FROM mariadb:10.5

ENV MYSQL_USER mysql_user
ENV MYSQL_PASSWORD 1234
ENV MYSQL_ROOT_PASSWORD 1234
ENV MYSQL_DATABASE webtest

COPY ./scripts/ /docker-entrypoint-initdb.d/

• 내가 로컬에서 사용했던 마리아디비 버전 그대로 가져왔다
• 데이터베이스 관련 환경변수들을 정의해주고
• scripts 디렉터리에 있는 dump파일을 /docker-entrypoint-initdb.d/ 로 복사한다
• /docker-entrypoint-initdb.d/ 는 데이터베이스를 생성할 때,
• 하위 sql을 가지고 데이터베이스를 초기화해준다

후기

• 메모리 딸린다…
• 처음에는 좋아서 이것저것 다 도커라이징할려고 했는데,
• 하다보니까 메모리가 딸려서 마우스가 뚝뚝 끊겼다…

참고

• Nodejs Express WEB
• 가장 쉽게 배우는 도커

1
2
3
4
5
6
7
8
9
10

{
  // ...
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

• settings.json에 추가시켜준다
• 저장할 때마다 자동으로 포맷팅되는 것을 확인할 수 있다

일괄적으로 포맷팅하기

• prettier 없이 개발했다가 코드 포맷팅을 일괄적으로 하고싶을 때가 있다

1
2
3
4
5
6
7

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "printWidth": 120,
  "tabWidth": 2
}

• .prettierrc 파일을 생성한다

npx prettier -w **/*.tsx

• terminal에 위 명령을 치면
• prettier가 일회성으로 설치되면서 지정한 확장자에 대해 포맷팅을 일괄적으로 실행해준다
• .prettierrc prettier config file을 참고해서 실행되니
• 원하는 디렉터리만, 또는 무시할 디렉터리, 파일들을 설정해서 사용할 수 있다

참고

• Prettier Configuration File