[TIL] 2022-04-04

프론트엔드 개발자가 백엔드를 알아야 하는 이유

• 에러가 발생했을 때 백엔드 오류일 수도 있다.
• 처음에는 백/프론트 구분이 없이 퍼블리셔/개발자로 나뉘었다.
• 모바일 시장이 생기면서 리액트, 앵귤러, 뷰 등이 나오면서 프론트 시장이 커지고 프론트와 백이 나눠지게 되었다.
• 백/프론트가 나뉘면서 어느 부분에서 오류가 난건지 확인하기 어려워졌다.
• 백/프론트 개발자는 백과 프론트 모두 알고 깊이의 차이가 있을 뿐이다.
• 백엔드를 알아야 이미지 업로드 등이 수월해진다.
• 백엔드와의 커뮤니케이션을 위해서

이번주 주제(week4)

백엔드를 아라보쟈~!

1. 클래스 컴포넌트?? 근데, 클래스는 또 뭐야? >> Class-Component

2. 프론트엔드와 백엔드의 전체 숲을 구경하자! >> Architecture

3. 백엔드 API 만들기 체험해볼래?! >> Apollo-Server/GraphQL

4. 이미지 업로드를 부탁해! >> Cloud-Storage

5. 검색하기 버튼 없이 검색을 한다고?! >> Debouncing/Throtting

오늘의 TIL

1. 클래스 컴포넌트?? 근데, 클래스는 또 뭐야? >> Class-Component

• 클래스 컴포넌트 --> 함수형 컴포넌트로 변환

  클래스 컴포넌트는 Hook 없이 state와 lifeCycle을 구현할 수 있다.

2. this?! 뭔데 이게 자꾸 말썽인거야! >> this

• class component에는 this라는 게 있다. this는 클래스형 컴포넌트에서 선언한 메소드를 참조하기 위해서 사용한다.

  thie가 실행되는 환경이 다르기 때문에 클래스에서는 화살표 함수를 사용하거나 bind 명령으로 this를 통일시켜주어야 한다.
  최신 자바스크립트는 기본적으로 use strict 모드로 작동한다. use strict 모드에서는 this가 실행되는 환경이 변경될 때, window를 나타내지 않고 undefined를 가리키게 된다.
  마우스로 클릭했을 때, 키보드를 쳤을 때 등등 this를 실행하는 건 window(기본)이다.

3. 컴포넌트가 살아 숨쉬나?! 생명주기가 있대! >> Component-LifeCycle

• 컴포넌트가 언제 만들어지고 수정되고, 사라지는지
• useEffect가 실행되는 시점
• useEffect 주의사항: 불필요한 렌더, 무한루프
• useRef : 특정 태그를 조작하기 위해 선택할 때 사용하는 도구

  함수형 컴포넌트는 useEffect를 사용해서 컴포넌트의 생명주기를 그려준다.

  useEffect 실행 시점

  • useEffect는 처음 컴포넌트가 마운트 될 때 실행된다.
  • dependency array를 생략하면 모든 변경사항마다 실행된다.
  • dependency array를 작성하면 처음 마운트 될 때만 실행된다.
  • dependency array에 요소를 넣어주면 해당 요소가 변경될 때마다 실행된다.

self-study

• 포트폴리오 랜딩페이지 제작

• 포트폴리오 스프레드 연산자로 리팩토링