모듈 전체 목록 보기#

pip list

업데이트가 필요한 항목 보기#

pip list --outdated

업데이트가 필요하지 않은 최신 항목 보기#

pip list --uptodate

PIP 업데이트하기#

pip install --upgrade pip

sudo: unable to resolve host 에러 해결#

상황#

• sudo 명령어가 필요한 상황에서 sudo: unable to resolve host가 발생하는 상황

• hostname과 hosts의 정보가 달라서 생기는 문제

해결 방법#

• sudo vi /etc/hosts

  

• 127.0.0.1 localhost 뒤에 127.0.1.1 ip-{hostname} 를 추가

  

  
  

ssh를 이용하여 원격 서버와 양방향 파일 전송하기#

원격 → 로컬#

scp [옵션] [계정명]@[원격 IP 주소]:[원본 경로] [전송 받을 위치]

scp abc@111.222.333.444:/home/abc/index.html /home/me/

로컬 → 원격#

scp [옵션] [원본 경로 및 파일] [계정명]@[원격 IP 주소]:[전송할 경로]

scp /home/me/index.html abc@111.222.333.444:/home/abc/

권한 변경#

chown -R username.username folder/

명령어로 해당 폴더의 소유자를 username으로 바꿀 수 있다.

참고자료#

[기본] 리눅스의 퍼미션(권한)을 조정하기 (chmod, chown)

Crontab으로 매일 스크린샷 관리하기#

환경#

• MacOS + zsh

• Google Drive File Stream (무제한 용량)

목적#

• MacOS 용량 부족

• 찍은 스크린샷이나 동영상 보관

• 하루마다 스크린샷 폴더에 파일이 쌓이는 것 방지

• Dock에서 바로 사용할 수 있게 관리

스크린샷 설정#

• 스크린샷의 저장 위치를 구글 드라이브 파일 스트림의 특정 폴더로 지정

쉘 스크립트#

• screenshots 폴더에 파일이 있으면

  • 모두 prev-screenshots로 복사한다.

  • screenshots 폴더의 파일을 모두 지운다 (지울 때 confirm [y/n] 메시지 띄우지않게 옵션 설정)

• 없으면 에코

~/scripts/mv_screenshots.sh

#!/bin/zsh
target=/Volumes/GoogleDrive/내\ 드라이브/이미지/screenshotsarchive=/Volumes/GoogleDrive/내\ 드라이브/이미지/prev-screenshots
if find "$target" -mindepth 1 -print -quit 2>/dev/null | grep -q .; then    setopt localoptions rmstarsilent    cp -R "$target" "$archive/`date +\%Y-\%m-\%d`"    rm "$target"/*else    echo "Target '$target' is empty"fi

Bash checking if folder has contents

Why does rm -f ask me for confirmation on zsh?

크론탭 설정#

• 매일 오후 11:30에 쉘 스크립트를 실행하고 실행한 결과를 당일의 로그 파일로 기록한다.

crontab -e

30 23 * * * zsh ~/scripts/mv_screenshots.sh >> ~/log/job_`date +\%Y-\%m-\%d`.log 2>&1

작업 스케쥴러 크론(Cron) 간단 사용법

Crontab.guru - The cron schedule expression editor

Merge Options#

Merge#

기본적인 Merge 방법으로 하나의 브랜치의 변경 이력 전체를 합치는 방법이다.

두 변경 이력을 병합한 Merge commit이 새로 생성된다.

Squash and merge#

브랜치 상의 모든 커밋을 하나로 병합한 내용을 다른 브랜치에 추가하는 방법이다.

PR에 있는 commit log들을 한 개의 커밋으로 추려서 main 브랜치에 병합할 수 있기 때문에, 1 PR = 1 commit 처럼 사용할 수 있다.

참고자료#

[Git] Merge 이해하기 (Merge / Squash and Merge / Rebase and Merge)

6. Github으로 협업하는 법

GitHub의 Merge, Squash and Merge, Rebase and Merge 정확히 이해하기 : TOAST Meetup

Rebase and Merge#

브랜치 상의 모든 commit들을 합치지 않고 main 브랜치에 추가하는 방법이다.

GitHub과 GitLab의 Squash and merge 차이#

GitHub#

Github에서는 PR에 대한 머지 방법을 다음 사진과 같이 제공한다.

Squash and merge 기능을 사용할 경우, Merge commit이 따로 생성되지 않고, PR 타이틀을 커밋 제목으로 하고, 브랜치의 commit log들이 커밋 내용으로 생성된다.

GitLab#

반면, GitLab에서는 MR을 머지할 때, Squash commits의 옵션을 체크할 수 있도록 하는데, GitHub과 달리 기본적으로 Merge commit이 생성되도록 설정되어 있다.

Merge commit을 생성하지 않기 위해서는 Fast-forward merge를 사용해야 한다.

Fast-forward merge requests

Fast-Forward Merge를 사용하고 Squash commits 옵션을 체크하지 않으면, Rebase and Merge 처럼 동작한다.

Fast-Forward Merge를 사용하고 Squash commits 옵션을 체크하면 Squash and Merge 처럼 동작한다.

하지만 GitHub에서 자동적으로 커밋 메시지 body에 브랜치의 커밋 로그를 기록해주는반면, GitLab에서는 커밋 로그를 기록해주지 않는다. Merge Request의 내용이 있다면이 내용을 담을 수 있고, Modify commit message 버튼을 사용하여 직접 수정하는 것도가능하다.

참고자료#

Merging a pull request

Merge requests

TypeScript + React + Storybook으로 디자인 시스템 구축하기#

Design System vs Component Library#

☝ 디자인 시스템은 계속 진화하는 재사용 가능한 구성 요소 모음이고, 일관성과 속도를 보장하는 규칙을 따르는 모든 제품을 개발하기 위한 단일 진실 공급원(SSOT)이다.

• 디자인 시스템은 컴포넌트 라이브러리를 넘어서 디자인 원칙, 스타일 가이드, 패턴, 톤, 규칙과 명세서 등을 포함한다.

프로젝트 생성#

• .gitignore , package.json 생성

Storybook 설치하기#

npx -p @storybook/cli sb init --type react

• storybook 시작하기

yarn storybook

React peer dependencies#

@storybook/react 가 react , react-dom 을 peer-dependency로 가지므로 react, react-dom 을 설치해야 실행할 수 있다. 설치하지 않으면 다음의 에러가 발생한다.

Error: Cannot find module 'react-dom/package.json'

하지만, dependency 에 직접 추가하면, 개발한 라이브러리를 설치한 유저가 react , react-dom 역시 설치 받게 된다. (게다가 정해진 버전으로)

따라서 컴포넌트 라이브러리를 작성하는 작성자 입장에서는 storybook을 실행하는 개발 시에만 이 의존성이 필요하므로 devDependency에 명시해야한다.

또한, 이 컴포넌트 라이브러리를 사용하는 사용자 입장에서는 react , react-dom 과 함께 사용해야 하기 때문에 따라서 peerDependency에도 명시해야한다.

peerDependency는 이 의존성과 함께 사용해야 한다는 뜻이고, 유저가 직접 설치 해야하기 때문이다.

devDependency는 프로젝트의 로컬에만 설치되고 배포시에는 유저가 다운로드하지 않기때문에 peerDependency와 devDependency에 같은 라이브러리를 도 추가해도 무방하다.

yarn add -D react react-dom

// package.json"peerDependencies": {  "react": "17.0.1",  "react-dom": "17.0.1",  "styled-components": "5.2.1"}

storybookjs/storybook

Yarn

Duplicate same dependency in package.json devDependencies and peerDependencies?

TypeScript로 이전하기#

• typescript, react-docgen-typescript-loader 설치

  yarn add -D typescript react-docgen-typescript-loader

  복사

• stories typescript 버전으로 변경

  create-react-app typescript 템플릿에 sb init 으로 생성한 ts 버전 stories로 테스트

• .storybook/main.js 변경

  module.exports = {    stories: [        '../stories/**/*.stories.mdx',        '../stories/**/*.stories.@(js|jsx|ts|tsx)',    ],    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],    typescript: {        check: false,        checkOptions: {},        reactDocgen: 'react-docgen-typescript',        reactDocgenTypescriptOptions: {            shouldExtractLiteralValuesFromEnum: true,            propFilter: (prop) =>                prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,        },    },};

  복사

• tsconfig.json 추가

  {    "compilerOptions": {        "target": "es5",        "lib": ["dom", "dom.iterable", "esnext"],        "allowJs": true,        "skipLibCheck": true,        "esModuleInterop": true,        "allowSyntheticDefaultImports": true,        "strict": true,        "forceConsistentCasingInFileNames": true,        "noFallthroughCasesInSwitch": true,        "module": "esnext",        "moduleResolution": "node",        "resolveJsonModule": true,        "isolatedModules": true,        "noEmit": true,        "jsx": "react-jsx"    },    "include": ["stories"]}

  복사

TypeScript

Rollup으로 번들링하기#

☝ 웹팩이 애플리케이션을 위한 번들러라면, 롤업은 라이브러리를 위한 번들러다.

Webpack and Rollup: the same but different

Rollup 설정#

• 사용하는 플러그인

"devDependencies": {  "babel-preset-react-app": "10.0.0", // create-react-app에서 사용하는 babel 설정  "rollup": "2.35.1",  "rollup-plugin-babel": "4.4.0", // babel 사용을 위한 플로그인  "rollup-plugin-cleaner": "1.0.0", // build 전에 dist 폴더 삭제  "rollup-plugin-commonjs": "10.1.0", // CommonJS의 모듈 코드를 ES6로 변환하여 결과물에 포함  "rollup-plugin-node-resolve": "5.2.0", // 써드파티 모듈을 사용하기위한 용도  "rollup-plugin-peer-deps-external": "2.2.4", // peerDependencies를 번들링된 결과에 포함하지 않음}

• rollup.config.js

import commonjs from 'rollup-plugin-commonjs';import cleaner from 'rollup-plugin-cleaner';import resolve from 'rollup-plugin-node-resolve';import babel from 'rollup-plugin-babel';import external from 'rollup-plugin-peer-deps-external';import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import pkg from './package.json';
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
process.env.BABEL_ENV = 'production';
export default {    input: './src/index.ts',    plugins: [        cleaner({targets: ['./dist/']}),        peerDepsExternal(),        resolve({extensions}),        commonjs({            include: 'node_modules/**',        }),        babel({            extensions,            include: ['src/**/*'],            presets: [['react-app', {flow: false, typescript: true}]],            runtimeHelpers: true,        }),    ],    output: [        {            file: pkg.module,            format: 'es',        },    ],};

tsconfig.json & package.json 설정#

declaration이란, 컴포넌트들에서 사용하고 있는 타입 정보들을 지니고 있는 파일.

이는 다음 명령어로 생성을 할 수 있다.

tsc --emitDeclarationOnly

이 명령어를 실행하기 전에 tsconfig.json 을 수정해주어야 한다.

{    "compilerOptions": {        "target": "es5",        "lib": ["dom", "dom.iterable", "esnext"],        "skipLibCheck": true,        "esModuleInterop": true,        "allowSyntheticDefaultImports": true,        "strict": true,        "forceConsistentCasingInFileNames": true,        "module": "esnext",        "moduleResolution": "node",        "resolveJsonModule": true,        "jsx": "react",        "declaration": true,        "declarationDir": "dist/types"    },    "include": ["src"],    "exclude": ["**/*.stories.tsx"]}

• declaration 값을 true , declarationDir 경로를 "dist/types" 로,

• allowJs: 자바스크립트와 혼용을 하고 있다면 declaration 파일을 만들지 못하므로제거.

• noEmit: 결과물을 만들지 않는다는 옵션으로 제거.

• isolatedModules: 아무 값도 내보내지 않는 파일을 방지하는 옵션. 제거

stories.tsx 확장자는 모두 무시하도록 exclude 옵션을 설정

package.json에는 Build 커맨드를 추가한다.

"build": "rollup -c && tsc --emitDeclarationOnly",

package.json에서 module, types, files 를 추가한다. name은 scope를 사용한다.

{    "name": "@younho9/design-system",    "module": "dist/index.js",    "types": "dist/types/index.d.ts",    "files": ["/dist"]}

배포 명령어

# npm publishnpm publish --access public # scope를 사용할 때

참고자료#

Do you think your component library is your design system? Think again

TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기

디자인 시스템 소개

storybookjs/design-system

storybookjs/storybook

How to create a react component library with TypeScript, rollup.js and Storybook

Building a Design System Package With Storybook, TypeScript, and React in 15 Minutes

Creating and publishing scoped public packages | npm Docs