CodeKata💢

split, join

var str = 'hello, world!'; 
var strArr = str.split(','); // 특정 값을 기준으로 문자열을 나누어 배열로 재생성
console.log(strArr); //strArr = ['hello', ' world!'];

var arr = ['My', 'name', 'is', 'SeHee', ', Kim']; 
var str = arr.join(' '); // 특정 값을 기준으로 배열을 문자열로 재생성
console.log(str); // str = My name is SeHee ,Kim;

reverse

var arr = [1,2,3,4];
arr.reverse();
console.log(arr); // [4,3,2,1]

number, parseInt, parsefloat

let test = "45.5";
test = Number(test);
console.log(typeof test);// number
console.log(parseInt(test));// 45
console.log(parseFloat(test));// 45.5

toString, String

var num = 15;
console.log(typeof String(num)); // string
// string 일반 문자열 변환
console.log(num.toString()); // 15
console.log(num.toString(2)); // 1111
console.log(num.toString(8)); // 17
console.log(num.toString(16)); // f
// toString 진수에 따른 변환

shift, unshift

• 배열에 값을 추가하는 함수
  • push : 맨 끝에 추가
  • unshift: 맨 앞에 추가
• 배열의 값을 제거하는 함수
  • pop : 맨 끝을 제거
  • shift : 맨 앞을 제거

var test = ["a", "h", "f", "e", "g"];

test.push("el");
console.log(test); //[ 'a', 'h', 'f', 'e', 'g', 'el' ]

test.unshift("el");
console.log(test); //[  'el', 'a', 'h',  'f',  'e', 'g',  'el']

test.pop();
console.log(test); //[ 'el', 'a', 'h', 'f', 'e', 'g' ]

test.shift();
console.log(test); //[ 'a', 'h', 'f', 'e', 'g' ]

---

Router⛳

라우팅(라우터)

사용자가 어떤 주소로 들어왔을 때 그 주소에 해당하는 적당한 페이지를 사용자에게 보내주는 것
URL에 따라서 적당한 콘텐츠를 전송해주는 것을 Routing이라고 합니다.

• 라이브러리(하나의 기능을 묶어 놓은 것)로 분류되는 이유
• third party library : 외부 라이브러리
• 두가지 방법

1. Link
   누르자마자 페이지 이동하는 아이콘
   중간에 실행해야 하는 함수가 없는 경우
   to 속성의 값은 Routes.js 에서 설정한 경로
   JSX 에서의 Link 태그는 html 넘어가면서 a 태그로 compile 된다

• 그렇다면 왜 a 를 쓰지 않을까?
  a 태그는 외부의 사이트로 넘어갈때 사용한다

2. HOC

• 중간에 실행해야 하는 함수가 있는 경우(ex 로그인 페이지)

기억해야할 특징

• 패키지를 추가로 설치하면 package.json 저장된다
• Route 컴포넌트 path 속성
  지정된 각각의 컴포넌트를 보여주는 url 경로를 설정
• 사용자에게 보여주고 싶은 경로 path(url 설정)
  default 경로는 '/'

---

SASS🍒

sass 왜 사용하는가

• css 단점을 보완하기 위한 기술

Nesting

• 최상단 css 태그를 접었을 때 아무것도 없어야 한다

추가 기능

• 태그:속성 -> &:속성
  바꿔서 표현할 수 있다
  ex. input:focus{} -> &:focus{}
• @import '../../styles/common.scss'
  common.scss 변수를 사용할 수 있다
• @mixin -> @include
  미리 지정해놓은 css 속성을 지정된 변수로 설정 가능

---

오늘의 CSS🎨

• grdient
  그라데이셔으로 배경색을 줄 수 있다

background: radial-gradient(
  circle at 30% 107%,
  #fdf497 0%,
  #fdf497 5%,
  #fd5949 45%,
  #d6249f 60%
);

• -webkit-scrollbar

&::-webkit-scrollbar {
  width: 6px;

&-thumb {
  background: lightgray;
  border-radius: 5px;
}

• text-overflow

p {
  margin: 5px auto;
  width: 160px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: bold;
}

---

꿀Tip 🧀

react img src

• JSX 코드에서는 "./파일경로" 가능
• BUT
  css 코드에서는 "./파일경로" 불가능
  "http://localhost:3000/파일경로" 으로 수정해야 한다
  앞쪽 주소는 public 폴더를 의미한다
• JSX 코드에서는 되는 이유
  왜냐하면 index.html 넘어가는 코드이기 때문에 그 위치에서는 "./" 상대경로 인식 가능하다

prettier 적용

• F1 + open setting.JSON
  vscode 코드 정렬 등의 여러 옵션에 대한 설정 값을 넣을 수 있다
  그리고 나서 파일을 수정하고 저장 (Ctrl + s) 하면
  해당 설정값으로 변환된다

{
  "workbench.colorTheme": "Material Theme Darker",
  "workbench.iconTheme": "material-icon-theme",
  "editor.formatOnSave": true,
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "editor.renameOnType": true,
  "launch": {
    "configurations": [],
    "compounds": []
  },
  "editor.tokenColorCustomizations": {
    "comments": "#2EDB93"
  },
  "json.schemas": [],
  "editor.semanticTokenColorCustomizations": null,
  "window.zoomLevel": -1,
  "liveshare.connectionMode": "relay",
  "editor.tabSize": 2,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "editor.wordWrap": "on",
  "editor.fontFamily": "JetBrains Mono"
  // "editor.tokenColorCustomizations": {
  //   "comments": "#FFC2C2"
  // }
}

vscode powermode extension

1. power mode extension 다운로드
   
2. open setting 에서 해당 코드 삽입하고

"powermode.enabled": true,
  "powermode.enableShake": false,
  "powermode.backgroundMode": "image",
  "powermode.maxExplosions": 1,
  "powermode.explosionSize": 30,
  "powermode.customCss": {
    "top": "-90px"
  },
  "powermode.customExplosions": [요기다가 변환한 코드입력],

3. gif 고르기
   용량 크지 않은 걸로
4. 해당 링크로 들어가 gif 이미지 code 변환