에이미의 성장기록

livedata.tistory.com/3

참고 블로그 axios 설치하기 yarn add axios axios 메쏘드 URL = API 주소 - GET: axios.get(url[, config]) - POST(추가): axios.post(url, data[, config]) - PUT(수정): axios.put(url, data[, config]) - DELETE(삭제): axios.delete(url[, config]) axios 기본 Params 1) Method 2) Url 3) Data (필수X) 4) Params (필수X) 기본사용법 post의 경우 url 밑에 data Object 추가 axios({ method: "get", url: "url", responseType: "type" }).then(function (response..

1) 프로젝트 만들때 yarn create-react-app 폴더명 2) 프로젝트 들어갈때 cd 폴더명 //나올때 cd .. 3) 리덕스 설치하기 //이건 리덕스와 리덕스 모듈 내에서 경로 이동까지 하게 해줄 히스토리, 라우터와 히스토리를 엮어줄 모듈까지 한번에 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 //불변성관리를 위한 immer 설치 yarn add immer redux-actions 4) 파이어베이스 설치 yarn add firebase 5) material UI 설치 yarn add @material-ui/core @material-ui/icons 6) loadsh ..

템플릿 리터럴 : 자바스크립트 ES6에서 새로 도입한 문자열 표기법. '' "" 로 표기하지 않고 백틱을 사용해 표현하는 방식 - 백틱(``)사용 - var/let/const로 정의한 값을 ${} 로 불러올 수 있음 let name = "amy"; //기존방법 let name = "Hello" + name ; //템플릿 리터럴 let name2 = "Hello `${name}`; - styled-component에서 사용

- 리액트 훅이란? life-cycle, state관리를 해주고 클래스형 컴포넌트의 기능을 사용할 수 있는 함수형 컴포넌트 -useState state(상탯값) 관리 가능 import React, {useState} from 'react'; const [name, setName] = useState(''); 배열에 두 값을 넣는다. 첫번째 원소는 상탯값 = state 두번째 원소는 상태값을 변경할 수 있는 함수 - useEffect 함수형 컴포넌트에서 life-cycle함수를 사용할 수 있게 해준다. 예시출처 import {useEffect} from 'react'; unction MyComponent() { const [count, setCount ] = useState(0); useEffect( ()..

1) 서버리스란? 서버를 신경쓸 필요가 없는 것. 누군가 구축해둔 서버의 일부분을 빌려서 쓰는 것(서버가 없다는 뜻이 아님!) 2) Firebase는? 흔히 백엔드 하면 떠올리는것을 빌려온다! 데이터베이스,소셜서비스연동/파일시스템 등을 API형태로 제공해주는 곳 3) Firestore는? realtime-database 제공하는 서비스, 실시간으로 데이터가 추가되고, 삭제되는것을 우리 클라이언트에게 알려준다. 리액트와는 react-firebase라는 패키지를 통해 연결할 수 있다. 4) 리액트에 파이어베이스 패키지 설치 yarn add firebase 5) src 폴더 아래에 firebase.js 파일 생성 파이어스토어에서 발급받은 SDK영역을 붙여넣어준다. import firebase from "fir..

1) 리덕스 개념과 용어 리덕스: 데이터 한군데 몰아넣고 여기저기에서 꺼내볼 수 있게 해줌! 전역에 저장한 데이터 모음들을 아무데서나 참조할 수 있다. - State: 리덕스에서 저장하고 있는 상태값=데이터, 딕셔너리 형태임 ({[key]: value}) - Action: 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할때) 발생하는 것. 액션은 객체, type은 이름 - ActionCreattor: 액션생성함수, 액션을 만들기 위해 사용! 액션을 리턴한다 - Reducer: 리덕스에 저장된 상태(데이터)를 변경하는 함수 컴포넌트의 액션생성함수 호출 -> 액션을 만들면 -> 리듀서가 현재상태(데이터)와 액션객체를 받아서 -> 새로운 데이터를 만들고 -> 리턴 - Store: 프로젝트에 리덕스를 적용..

1주차 수요일, 리액트 튜터님이 2시간동안 질문을 받아주셨다. 프론트엔드 개발자 지망생으로써 리액트가 너무 궁금하기도 했고, 나도 질문을 몇개 준비해서 갔다. 다들 리액트가 사실 무엇인지 잘 모른채로 질문해서 너무 기본적인 질문들 위주지만, 그래도 다시한번 기억하고자 기록하려한다! 나중에 FE 개발자가 되고 이 질문들을 읽으면 나도 답할 수 있는 실력이 되겠지? 그 때쯤 이 글을 되돌아보면 재밌겠다!! 1) React를 선택하신 계기와 장점은 무엇인가요? - 프론트엔드 라이브러리 중 가장 컴포넌트 친화적이며, 개발자가 자유롭게 이것저것 구현할 수 있다. 2) React native와의 차이점은 무엇인가요? - 문법은 거의 같지만 React는 웹, React native는 앱용으로 나온다. 보통 두개를 같..