[목차] (#을 클릭하면 해당 내용으로 이동)

• 자유게시판
  • ———————————————-
  • React 소개 (#)
  • 라이브러리 vs 프레임워크 (#)
  • React 설치(vscode-extension 및 기타 라이브러리 포함) (#)
  • React 폴더구조 (#)
  • 다른 폴더의 파일 불러오기 (import / export) (#)
  • HTML(JSX) (#)
  • CSS(CSS-IN-JS) - emotion (#)
  • React 코드 저장 및 협업 - Git (#)
  • ———————————————-
  • React를 배워야하는 이유 (#)
  • React 컴포넌트 (#)
  • 클래스형 컴포넌트 vs 함수형 컴포넌트 (#)
  • React-Hooks (#)
  • state, setState, useState (#)
  • React 디버깅 툴(React-Developer-Tools) (#)
  • ———————————————-
  • HTTP 통신 (#)
  • HTTP 요청 (Request)과 응답(Response) (#)
  • API (#)
  • API 종류 (rest-API vs graphql-API)
  • API와 CRUD (#)
  • API 명세서 (#)
  • API 요청 결과 타입(JSON) (#)
  • API 명세 및 요청 실습(playground) (#)
  • ———————————————-
  • apollo-client 셋팅하기 (#)
  • apollo-client 로 graphql 뮤테이션 실행 (#)
  • graphql 뮤테이션에 async / await 적용 (#)
  • graphql 뮤테이션에 try ~ catch 적용 (#)
  • ———————————————-
  • 라우터 객체와 라우팅 (#)
  • 정적라우팅과 동적라우팅 (#)
  • apollo-client 로 graphql 쿼리 실행 (#)
  • Apollo 디버깅 툴(Apollo-Client-Devtools) (#)
  • Apollo-Client Cache(Apollo state) (#)
  • 비동기통신과 리렌더링 (#)
  • ———————————————-

React 소개 (🔝)

**React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구**입니다.

대표적인 서비스로는 **페이스북, 인스타그램, 에어비앤비** 등이 있습니다.

수업을 시작하기에 앞서, 이러한 도구(라이브러리, 프레임워크)가 무엇인지 이해할 필요가 있습니다.

라이브러리 vs 프레임워크 (🔝)

1. 라이브러리

**라이브러리**는 도서관과 같습니다.

우리는 도서관에서 **이미 만들어져있는 정보**를 가져다가 우리의 것으로 만들고 사용합니다.

즉, 프로그래밍 세계에서의 **라이브러리는 누가 이미 만들어 놓은 기능**을 의미합니다.

아래의 그림은 캐러셀이미지 라고 부릅니다.

화살표 버튼을 누르면 이미지가 자연스럽게 이동됩니다.