TIL no.30

sgyos000·2020년 9월 2일
0

wecode

목록 보기
13/26

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 태그는 외부의 사이트로 넘어갈때 사용한다
  1. 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": [요기다가 변환한 코드입력],
  1. gif 고르기
    용량 크지 않은 걸로
  2. 해당 링크로 들어가 gif 이미지 code 변환
profile
Hello World

1개의 댓글

comment-user-thumbnail
2020년 9월 2일

와..! 꿀팁 배워가요 병진님 👍🏻👍🏻👍🏻

답글 달기