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

pks787·2020년 2월 20일
0

TIL(Today I Learned)

목록 보기
19/42

4가지 주제

  1. sass에서 자주 쓰는 팁 3개 이상
  2. 비구조화 할당이란
  3. 함수에서 bind란?
  4. 리액트 안에 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을 사용 가능
  • 동기 : 비동기 이외의 것들 모두 포함

profile
Front End. Dev

0개의 댓글