axios 사용과 영화 데이터 가져오기 1. 라이브러리 설치 npm install axios 데이터를 읽어올때 사용하는 라이브러리 설치 2. 영화데이터 제공 사이트 https://yts.mx/api#list_movies 3. 크롬 확장프로그램 : JSON 문서 확인 크롬 확장기능 json view 에서 API를 통해 받아올 수 있는 데이터, json 문서를 깔끔하게 확인 가능하다. 사용 가능한 데이터로 변경 https://yts-proxy.now.sh/list_movies.json 4. 프로젝트 적용 3-1. axios 적용 📑App.js import React from "react"; import axios from "axios"; class App extends React.Component { sta..

1. AWS 가입 및 가상 클라우드 서버 대여 1-1. AWS 가입 AWS 사이트 가입 결제 수단 등록 헤더 우측상단 지역 선택 (서울) [무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비스를 살펴보고 사용해 볼 수 있는 기능을 제공합니다. 프리 티어는 12개월 프리 티어, 상 aws.amazon.com](https://aws.amazon.com/ko/free/?trk=fa2d6ba3-df80-4d24-a453-bf30ad163af9&sc_channel=ps&ef_id=Cj0KCQjw84anBhCtARIsAISI-xfd6bmwhTcpE8XpQN2g-e0au-WR-BTLNUQ2bHozni2t..

React Hooks React Hooks란 2018년 발표된 class 없이 state를 사용할 수 있는 기능입니다. 기존 리액트는 주로 클래스 컴포넌트를 사용하였는데 리액트 혹스는 함수형 컴포넌트를 사용한다. 1. Class Component Vs Functional Component Class Component Functional Component 많은 기능 제공 적은 기능 제공 긴 코드양 짧은 코드양 복잡한 코드 심플한 코드 더딘 성능 빠른성능 1-1 생명주기 Functional Component 어떤 기능을 사용하지 못하는 걸까? => React Hooks가 없었을 때 생명주기 사용 불가 현제 React Hooks로 생명주기도 사용이 가능하다. 1-2. HOC (wrapper) 컴포넌트를 줄일 ..

1. CSR Client Side Rendering 클라이언트가 서버쪽에서 정보를 전달 클라이언트가 랜더링하여 화면에 보여준다. 즉 클라이언트는 서버와 요청,응답을 통해 페이지를 전환할 수 있다. 2. SPA Single Page Application 클라이언트가 처음만 서버 요청하고 이후 필요한 정보들은 응답 받았던 정보를 사용해 페이지를 전환한다. SPA 단점 : SEO 검색앤진 최적화 검색앤진 검색앤진은 사이트를 랜더링 하지 않고 META 정보만 가져간다. 3. SSR Server Side Rendering 클라이언트가 요청하면 서버에서 랜더링 하여 전달한다.

Promise - 비동기 패턴 객체 사용 1. 비동기 패턴 1-1. 콜백함수 callback 함수는 a라는 로직 이후에 실행 되는 로직을 말한다. 함수의 인수로 사용되는 함수를 콜백함수 실행 순서 보장 function a(callback){ // 1. 함수 setTimeout(()=>{ console.log("a"); callback() // 2. 콜백함수의 실행 위치 },1000) } function b() { console.log("b") } a (function (){ // 3. 콜백함수 = a 함수의 인수로 사용되는 function 함수 b() }); 1-2. 콜백지옥 (연이은 콜백함수의 사용) 순차적으로 콜백함수를 사용할때 > 이와 같은 모양이 나타나게 된다. 다음 순서를 보장은 하지만 관리가 ..