게시 됨 업데이트 됨sql몇 초안에 읽기 (약 88 단어)

mysql 현재시간 구하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

-- 현재시간 구하기
SELECT
    curtime()
-- 07:35:51


-- 시간 값만 가져오기 ; %H ; 00~23
SELECT
    date_format(curtime(), '%H')
-- 07


-- 앞에 0 패딩 없애기 1 ; 숫자를 더해서 캐스팅
SELECT
    date_format(curtime(), '%H') + 0
-- 7


-- 앞에 0 패딩 없애기 2 ; k로 가져오면 0~23
SELECT
    date_format(curtime(), '%k')
-- 7
  • 현재 시간을 얻는 법

참고

 게시 됨 업데이트 됨git몇 초안에 읽기 (약 80 단어)

git alias로 명령어 줄이기

1
git config --global alias.rc 'rm -r --cached .'
  • windows의 경우 git bash를 열어서 위 명령을 실핸한다
  • 이미 원격 저장소에 올린 파일을 gitignore 할 때 쓰는 명령어인데
  • 항상 외우지 않고 복붙 했었는데,
  • 그것도 귀찮아서 이참에 git rc로 줄여버렸다
 게시 됨 업데이트 됨react2분안에 읽기 (약 374 단어)

ts react sass eslint prettier

  • react 시작할 때 편하게 하려고 만듦
  • 내가 사용하려고 만들어둔 템플릿
  • react + ts + eslint(airbnb) + prettier + sass
  • 필요 없는 테스트 코드 삭제 및 favicon 설정해두었다
  • 리액트로 만들 새로운 앱 초기 설정하는 김에 템플릿으로 만들었다

설정한 순서

1
2
3
4
5
6
7
8
9
10
npx create-react-app . --template typescript

// eslint, prettier
npx install-peerdeps --dev eslint-config-airbnb
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

// sass(scss)
yarn add node-sass
yarn add prettier-plugin-style-order
  • 필요 패키지 설치
package.json
1
2
3
4
5
6
{
  // ...
 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "eslint": "7.2.0",  // <-- 삭제
  • react-scripts에서 "eslint": "^7.11.0"를 사용한다고 수동으로 eslint를 설치하지 말라고 한다
1
yarn
  • package.json 에서 eslint를 삭제하고 yarn으로 종속성을 다시 설치한다
package.json
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
{
  // ...
  "eslintConfig": {
    "plugins": [
      "react",
      "@typescript-eslint"
    ],
    "extends": [
      "airbnb",
      "airbnb/hooks",
      "plugin:@typescript-eslint/recommended",
      "prettier",
      "prettier/react",
      "plugin:prettier/recommended"
    ],
    "env": {
      "browser": true,
      "node": true
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "rules": {
      "import/no-unresolved": "off",
      "import/extensions": "off",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "no-use-before-define": "off",
      "react/jsx-filename-extension": "off",
      "prettier/prettier": [
        "error",
        {
          "endOfLine": "auto",
          "singleQuote": true,
          "tabWidth": 2
        }
      ]
    }
  },
  • package.json 에서 eslint 관련 설정을 해준다
.vscode/settings.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "typescript.tsdk": "node_modules\\typescript\\lib",

  // 프리티어 확장도구로 인한 자동 포맷팅 비활성화
  "editor.formatOnSave": false,

  // 파일 저장시 자동으로 lint 및 포맷팅
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // css파일에서 저장시 자동으로 포맷팅
  "[scss]": {
    "editor.formatOnSave": true
  }
}
  • settings.json 을 설정한다
 게시 됨 업데이트 됨blog몇 초안에 읽기 (약 32 단어)

블로그 테마 업데이트

  • 배경색을 흰색으로 바꾸고, 깔끔하게 바꿔보았다
 게시 됨 업데이트 됨vscode1분안에 읽기 (약 125 단어)

Live Share

  • 같이 하나의 내용에 대해 프로그래밍 할 때, 킹갓 확장도구이다..
  • 웹개발 같은경우 세션의 호스트가 데브 서버를 열면,
  • 세션의 참가한 게스트들도 자동으로 포워딩이 되서
  • 각자 localhost에서 웹을 확인해 볼 수 있다
  • 수동으로도 포워드 해줄 수 있다
  • 이제 같이 코딩할 친구만 있으면된다

참고

 게시 됨 업데이트 됨react1분안에 읽기 (약 198 단어)

react에서 Map을 state로 사용할 때

맞는 예
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const [state, setState] = React.useState(new Map());

const add = (key, value) => {
  setState((prev) => new Map([...prev, [key, value]]));
};


const upsert = (key, value) => {
  setState((prev) => new Map(prev).set(key, value));
}

const delete = (key) => {
  setState((prev) => {
    const newState = new Map(prev);
    newState.delete(key);
    return newState;
  });
}

const clear = () => {
  setState((prev) => new Map(prev.clear()));
}
틀린 예
1
2
3
4
5
6
7
8
const [state, setState] = React.useState(new Map());

const add = (key, value) => {
  state.set(key, value);
  setState(state);
};

// ...
  • 원시 타입이 아닌 객체를 state로 다룰 때 실수하기 쉽다
  • 완전히 새로운 레퍼런스?를 넣어줘야 상태가 변경되었다고 판단하고 리렌더링 된다

배열

array-state-example.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// work
const add = (value) => {
  setState((prev) => {
    return [...prev, value];
  });
};

// not work
const add = (value) => {
  setState((prev) => {
    prev.push(value);
    return prev;
  });
};

참고

 게시 됨 업데이트 됨web몇 초안에 읽기 (약 54 단어)

scroll css

  • 이런 모양의 스크롤바를 만들 수 있다
index.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* scroll bar */
& {
  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

참고

 게시 됨 업데이트 됨typescript2분안에 읽기 (약 244 단어)

js bind

  • typescript 코드다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface myType {
  name: string;
  age: number;
}

const me: myType = {
  name: 'name',
  age: 99,
};

[1, 2, 3, 4, 5].forEach(function (this: myType, value, index) {
  console.log(this);
  console.log(value, index);
}, me);
// 0 1 { name: 'name', age: 11 }
// 1 2 { name: 'name', age: 11 }
// 2 3 { name: 'name', age: 11 }
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
41
class MyClass {
  me: Person;

  constructor(person: Person) {
    this.me = person;
  }

  someFunction() {
    [1, 2, 3].forEach(function (value) {
      console.log(value, this);
    });
  }

  someFunctionBindThis() {
    [1, 2, 3, 4].forEach(function (this: MyClass, value) {
      console.log(value, this);
    }, this);
  }

  someFunctionWithArrow() {
    [1, 2, 3].forEach((value) => {
      console.log(value, this);
    });
  }
}

const myclass = new MyClass(me);
myclass.someFunction();
// 1 undefined
// 2 undefined
// 3 undefined

myclass.someFunctionBindThis();
// 1 MyClass { me: { name: 'name', age: 11 } }
// 2 MyClass { me: { name: 'name', age: 11 } }
// 3 MyClass { me: { name: 'name', age: 11 } }

myclass.someFunctionWithArrow();
// 1 MyClass { me: { name: 'name', age: 11 } }
// 2 MyClass { me: { name: 'name', age: 11 } }
// 3 MyClass { me: { name: 'name', age: 11 } }
  • bind 함수를 배워보았다
  • bind를 배우면서 function과 arrow function 차이를 실감하게 되었다
  • arrow function은 this를 바인딩하지 않는다
  • 고로 arrow function은 bind를 사용할 수 없다
  • 이 함수 표현은 메서드 함수가 아닌 곳에 적합하다

참고

카테고리

아카이브

광고

×