react study 썸네일형 리스트형 08_server 관련 babel - 최신스크립트 언어를 옛날 언어로 바꿔준다 polyfill - 특정기능이 지원되지 않는 브라우저를 위해 없는 함수들을 정의해준다 webpack - sass->css, html분리도 해주고 javascript내용도 바꿔주고 등등 - yarn add express - const express = require("express"); / babel 기능이 없어서 import로 표현 xxx - app.listen(7070, () => { console.log("server is ruuning !"); }) 이렇게만 해도 로컬호스트7070에 서버 생성! - yarn add nodemon 수정할때마다 서버를 자동으로 새로고침하는걸 도와주는 모듈 - yarn add cors cors 정책에 따름 접근에 따.. 더보기 07_ 비동기통신(TodoList) const result = () => { axios.get("url").then( (res) => {} ).catch( (err)=> {} ) } - get방식으로 url에 있는 데이터를 가져옴 - 요청이 성공하면 then을 이용하여 콜백 함수로 실행가능 - 요청이 실패하면 catch를 이용하여 콜백 함수로 실행가능 - 위 방식으로 사용하면 함수안에 또 함수가 들어가 있어서 불편한 점이 있음 const result = async () => { await axios.get("url").then( (res) => {} ).catch( (err)=> {} ) } - async, await으로 사용하면 위 방법에 단점을 극복할수 있다 - get방식으로 TodoList 정보를 받아온다 - 받아온 정보를 useSt.. 더보기 06_비동기 통신 (유저 리스트) 우선 axios를 깔아주자 yarn add axios 우선 get방식으로 서버에서 데이터를 요청해서 받아온다 그 값을 result 변수에 넣어주고 async, await 을 이용해서 블락을 걸어주어 비동기통신이 끝난뒤 코드가 진행될수 있게 해준다. 가져온 result값에서 data를 useState([]); 배열에다가 넣어준다! - axios.get("url") - async / await - [users, setUsers] = useState([]); 위 모든 값을 getUsers란 변수에 arrow함수로 넣어주었고 유저리스트보기 라는 div를 클릭하면 getUsers함수가 실행 될수 있도록 했다 함수를 사용할때 변수에 넣어두면 이벤트가 실행될때마다 함수가 생성되는걸 방지할수 있다 통신이 완료된 후 m.. 더보기 05_Popup 기능 만들기 popup 기능 만들기 - useState(false)활용해서 true, false로 만들기 - 팝업버튼 누르면 true로 바꿔주고 나오팝업을 누르면 false로 바꿔주기 더보기 04_Sidemenu 만들기 우선 Sidemenu.js 파일을 만든 뒤 스타일 작업을 해준다 원래 그룹화를 할때 Fragment태그를 사용해야 하지만 아래와 같이 단축해서 사용가능하다. - import {Fragment} from "react"; 메뉴버튼만들기 - yarn add react-icons - react icons 페이지에 들어가서 원하는 아이콘 선택 - import {아이콘이름} from "react-icons/(아이콘이름으로 유추해서 등록)"; - 나머지는 스타일로 수정하며 끝!! Sidemenu버튼 구현하기 - import {useState} from "react"; - const [value, setValue] = useState(기본값); value는 변수 setValue는 함수 - { value && } => .. 더보기 03_Router 설정해보기 우선 router를 설치한다 yarn add react-router-dom Router 사용법 index.js에 - import {BrowserRouter} from "react-router-dom"; - 로 감싸준다 App.js에 - import {Route} from "react-router-dom"; - - 위 태그에서 exact속성을 추가하면 경로값이랑 완전히 일치할때만 컴포넌트 출력 - 기본은 경로값을 포함하면 출력 Switch 사용법 - import {Switch} from "react-router-dom"; - 로 감싸준다 - 자바스크립트 switch case 문처럼 쭈우우우ㅜ우우우욱 하고 맨 밑에 Page404를 추가하여 다른경로로 들어갈시 Page404를 출력하게 설정 Link 사용법 -.. 더보기 02_ 비동기통신을 사용해보자 우선 jsonplaceholder 사이트에 들어가 데모 데이터들을 받아온다 그리고 비동기 통신툴을 설치 yarn add axios axios를 import한다 useEffect 를 import한다 - !!useEffect(함수, [조건]) 조건이 바뀔때마다 함수를 실행 useState를 users, setUsers로 작성 useEffect를 작성 get방식으로 데이터를 불러와서 불러온 데이터를 변수에 저장후 setUsers에 담는다 후 map()함수를 이용해서 뿌려준다! key값을 넣어줘야함 더보기 01_react 간단한 팝업 만들기 우선 components 디렉토리 생성 후 Popup.js 파일 생성 거기에 styled-components로 팝업 디자인 App.js에 팝업을 import 해서 불러온다 팝업 열기 버튼을 만들고 디자인한다 useState를 import한다. - !!여기서 useState 특징은 상태값이 변경되면 다시 랜더링을 하는 특징을 갖고있다. useState를 통해 popup, handlePopup을 만들고 팝업버튼을 누를때 handlePopup을 트루로 바꿔주고 popup이 true일때 이 나올수 있게 함수 작성 에 onClose라는 프로퍼티를만들어서 그안에 handlePopup을 받아온다 다시 Popup.js로 이동 onClose 값을 props로 받아온다 또한 팝업에 onClick함수를 작성하고 내용은 받아.. 더보기 이전 1 2 다음
