• react typescript eslint airbnb style 로 웹 개발을 하고 있는데,
• + 로 문자열 이어붙이기를 사용했는데, eslint룰에 따라 자동 포맷팅 되었다!
• eslint가 처음에는 불편하기만 했는데, 지금은 너무 좋다…

참고

• https://eslint.org/docs/rules/prefer-template

• number type 일 때, 기본으로 화살표가 나온다
• 이거를 없애보자

1
2
3
4

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

더 좋은 방법

• css all

참고

• https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

1
2
3
4

const clampNumber = (num, a, b) =>
  Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
console.log(clampNumber(-10, 0, 5)); // 0
console.log(clampNumber(10, 0, 5)); // 5

• 지정한 범위가 있고, 그 범위를 벗어나는 값이 들어왔을 때,
• 그 입력을 최소, 최대값 치환할 때 유용하다

참고

• https://www.w3resource.com/javascript-exercises/fundamental/javascript-fundamental-exercise-266.php

1
2
3
4

<input type="text" />
<button tabindex="-1">나는 탭 키를 눌러도 포커스 되지 않지.</button>
<button>나는 탭 키를 누르면 포커스 되지...</button>
<input type="text" />

1
2
3
4

<button
  type="button"
  tabIndex={-1}
>

• 입력폼 같은걸을 작성할 때, tab 키로 다음 칸을 넘어가서 작성하는 경우가 있는데,
• tab 키는 기본적으로 button에도 포커스가 간다
• 포커스가 가지 않도록 해보자

참고

• https://stackoverflow.com/questions/2757973/can-i-ignore-some-website-element-when-navigating-using-the-tab-key

~

• 오.. google search console에서 검색 실적을 메일로 알려준다 ㅋㅋ
• 깃헙 블로그도 어느덧 시작한 지 3달…
• 블로그 글은 개발하면서 새로 알게된 것들을 메모장같이 작성하고 있고,, 일부는 공략집처럼 작성하고 있다..(도움이 되길 바라며..)

Select elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled select element and remove one of these props.

1
2
3
4

<select value={state} defaultValue="kr" onChange={changeLang}>
  <option value="kr">한국어</option>
  <option value="en">English</option>
</select>

1
2
3
4

<select value={state} onChange={changeLang}>
  <option value="kr">한국어</option>
  <option value="en">English</option>
</select>

• defaultValue prop을 삭제하자

• Select elements는 컨트롤되거나 안되게 둘중 하나만 하라는 건데..
• value prop와 defaultValue prop는 같이 사용할 수 없다고 한다

참고

• https://reactjs.org/docs/forms.html#the-select-tag

• react typescript에서 tsconfig가 계속 자동수정되는 문제 해결하기

1
2
3
4
5
6

Cannot use JSX unless the '--jsx' flag is provided.ts(17004)

Specify JSX code generation: 'preserve', 'react', 'react-jsx', 'react-jsxdev' or'react-native'. Requires TypeScript version 2.2 or later.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

• .ts, .tsx 확장자의 아무 파일이나 열고,
• F1 > TypeScript 검색
• TypeScript: Select TypeScript Version... 선택
• 주의 : (타입스크립트 관련 파일이여야 위 명령이 검색된다)

• Use Workspace Version 을 선택해준다.

1
2
3
4

{
  // (...)
  "typescript.tsdk": "node_modules\\typescript\\lib"
}

• .vscode/settings.json 가보면 이렇게 업데이트 된것을 확인할 수 있다

TMI

상황

• react typescript eslint airbnb rule 로 개발하는데
• yarn start로 시작을 하면 자동으로 tsconfig.json의
• compilerOptions > jsx 가 자동으로 “react-jsx”로 업데이트 됬다
• 그런데 나는 “react-jsx”일 때 빨간줄이 마구 그어졌다
• 그래서 yarn start 이후에 수동으로 “react”로 변경해 주었었다…

해결

• 워크스페이스의 typescript가 사용되지 않아서 발생한 문제였다
• compilerOptions > jsx 가 “react-jsx” 여도 빨간줄이 안생긴다!

참고

• problem-with-visual-studio-code-using-react-jsx-as-jsx-value-with-create-react
• using-the-workspace-version-of-typescript

Fresh Background Gradients | WebGradients.com 💎

• 예쁜 그라디언트 복붙해 오는 곳
• png 이미지 또는
• css 쉽게 가져올 수 있다

1
2
3
4
5
6
7
8

.gradient {
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
}

• 오랜만에 블로그 이미지 들을 바꿨다
• 적용시키고 나니까 128x128 사이즈에 안어울리는 것 같아서
• 크기 제한을 풀었다

1
2
3

{/* <figure class="image is-128x128 mx-auto mb-2"> */}
<figure class="image mx-auto mb-2">

• is-128x128 을 없애준다
• 또는 자신의 고유한 클래스를 넣어주고 커스텀해도된다