(TIL 24일차) 프론트팀 스터디 및 백연동 데이터 가져오기

빡기·2020년 2월 20일

Fetch Sass Token bind export storage 비구조화 할당

TIL(Today I Learned)

목록 보기

19/43

4가지 주제

sass에서 자주 쓰는 팁 3개 이상
비구조화 할당이란
함수에서 bind란?
리액트 안에 export 할때 default 유무 차이

예리님 세션 짤막하게 정리

setInterval과 같이 계속 실행되는 부분은 componentWillUnMount로 삭제해줘야 한다.
안 해주면 페이지에서 벗어나도 브라우저가 계속 setInterval을 실행에 불필요한 동작을 하게 된다.
constructor안에 fetch를 해서 속도가 엄청 빨라 render 하기 전에 작동하면 문제가 발생해서 componentDidMount에서 fetch 작업을 함

sass에서 자주 쓰는 팁 3가지

속성 네스팅

축양형으로 묶일 수 있는 속성들 끼리도 네스팅이 가능
예를 들어 font의 경우 font-family, font-size, font-weight등이 있는데 다음과 같이 속성의 하위 사전 형태로 작성 가능

.div {
  p {
    color:skyblue;
  }
}
// css
.div p {color:skyblue}
///////////////////////////////
.entry-content {
  p {
    font: {
      family: "Noto Serif CJK KR", serif;
      size: 9.814rem;
      weight: 400;
    }
  }
}

상위요소 치환

글자 그대로 &가 상위의 글자 a로 치환되는 것이기 때문에 그 뒤로 '글자'를 이어서 써서 선택자 클래스명 이름을 완성 가능

a {
  color:#666;
  &:hover { color:yellow; } /* a:hover와 같다. */
}

변수

$foo: bar;
$fontsize: 12px;
$lineheight: 30p;

p {
  font: #{$fontsize}/#{$lineheight};
  &.#{$foo} { color: red; }
}

@import

@import 지시어를 이용해서 다른 css 파일을 임포트 가능

@import "../../Style/global";

@extend

확장은 이미 정의해둔 다른 셀렉터의 속성에 현재 셀렉터가 얹어가는 효과
특정한 클래스군에 대해서 베이스 클래스에서 공통 속성을 지정하여, 다른 클래스들이 베이스 클래스를 상속받는 효과 부여

// 베이스 클래스
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

@mixin

공통적으로 많이 쓰이는 CSS 선언값들을 묶어서 믹스인으로 만들어 재사용이 가능
변수는 단일 값을 담을 수 있는 것에 비해, 믹스인은 여러 속성의 정의 및 셀렉터에 대한 속성 전체등 블럭 단위로 재사용
인자가 필요없는 믹스인은 ($인자) 부분을 생략, 인자는 일반 변수처럼 정의

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box { @include border-radius(10px); }

// 인자 값을 default로 정의 하는 경우
.box { @incluxe dashed-box($width: 3px, $color: #eee) }

비구조화 할당

const [cat, dog, tiger] = ["CAT", "DOG", "TIGER"];
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER
// 위의 처럼 간편하게 작성 가능!

const animalList = ["CAT", "DOG", "TIGER"];
const [cat, ...restAnimalList] = animalList;
console.log(cat); // CAT
console.log(restAnimalList); // ["DOG", "TIGER"]
// 나머지 패턴, 전개연산자를 이용해 나머지 출력가능

// 오브젝트 형태 비구조화 할당
const animals = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
const cat = animals.cat;
const dog = animals.dog;
const tiger = animals.tiger;
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER


const { cat, dog, tiger, monkey = "monkey" } = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER
console.log(monkey); // MONKEY

// 자주 쓰는 비구조화 할당
const [data] = this.state, this.props

함수에서 bind란

함수에서 bind란 일반 함수와 화살표 함수에서의 문제를 말함
생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체를 가리킴
나의 블로그(this의 차이) 참고

리액트 안에서 export 할 때 default 유무 차이

export default - 파일 전체를 export
export named - 해당 named만 export

import 방법

export default - import 이름 from ‘경로’

default 가 있을 때는 import 되는 이름을 아무이름이나 작성

export named - import {named} from ‘경로’

default가 없을 경우에는 export했던 named 그대로 중괄호로 감싸서 작성
만약 named가 a라고 가정할 때, b로 변경하여 사용하고자 할때는 as를 사용해줄 수 있다.

import {a as b} from '경로'
// a 를 b로 변경한다.

import {namedA, namedB} from '경로'
// 여러 개의 named를 호출하고 싶을 때는 {namedA , namedB} 처럼 ‘,’콤마를 사용하여 작성

export default class NamedC extends Component{}
// 한번에 export 하기

백엔드랑 연동해서 인스타그램 로그인 및 댓글 구현

JWT(Json Web Token)

// 로그인정보를 통해 access token 로컬스토리지에 저장
fetch('http://localhost:8000/login/', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    'id': 'kim',
    'password': '1234'
  })
})
.then(response => response.json())
.then(response => {
  if (response.token) {
    localStorage.setItem('wtw-token', response.token);
  }
})

// access token으로 접근
let token = localStorage.getItem('wtw-token') || '';

fetch('http://localhost:8000/likes/', {
  headers: {
      'Authorization': token,
  }
})
.then(response => response.json())
.then(response => {
   console.log(response.data);
})

access 토근을 만드는 방법 중 하나
해당 user가 누구인지 식별하는 중요한 요소
localStroage에 저장하여 임의로 지우기 전까지 계속 유지(로그아웃 시 삭제)
페이지 이동할 때마다 매번 로그인 하기 힘들기 때문에 token으로 사용자 판별

예시

인스타에 좋아요 사진을 모아놓은 페이지에 들어가면?
1. token 유효 판단
2. user_id 5인걸 확인
3. user_id는 좋아요한 사진을 전송
4. 이 결과를 response함

Storage와 쿠키

Local Storage: 해당 도메인에 영구 저장하고 싶을 때
Session Storage: 해당 도메인의, 한 세션에서만 저장하고 싶을 때. 창을 닫으면 data가 사라짐(은행)
Cookie: 해당 도메인에 날짜를 설정하고 그 때까지만 저장하고 싶을 때(팝업)

비동기와 동기의 종류

비동기 : fetch, axios(백이랑 연동되는 부분), 이미지 로드
fetch 및 axios는 호출하면 Promise 객체가 반환되는에 이것을 기반으로 한 then메소를 이용해 그 다음동작을 파이프라인 처럼 input-output을 사용 가능
동기 : 비동기 이외의 것들 모두 포함