분류 전체보기 썸네일형 리스트형 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 사용법 -.. 더보기 01_git 관리 작업방식은 우선 git-hub에 issue에 들어가서 리스트를 쭈루루루루루루루룩 올리고 이슈 하나씩 처리하는 방식 이슈를 처리하고 나서 closed 처리 위 처럼 브렌치를 새로만들어서 작업하고 master에 merge하는 방식으로 작업 작업이 끝난뒤에는 사용했던 feature브랜치들은 제거 모든작업이 끝난 뒤에는 로컬에 있는 master와 origin에 있는 master를 똑같이 해준다 분명 git-hub작업이 끝나면 로컬 master가 내려가있으니 origin master를 pull해서 로컬 master도 한단계 위로 올려준다. 더보기 00_ git 단축키 알아보기 git 처음에 만들기 or git 초기화 하기 git init .git 폴더 지우기 (디렉토리지우기 시크릿폴더인 .git폴더) rmdir /s .git github랑 연결하기 git remote add origin (github주소) github 연결확인 git remote -v git에 추가되지 않은 파일 전체 추가 git add . git 커밋하는법 (master 커밋) git commit -m "커밋내용" git push하기 (master브렌치를 origin에 push) git push origin master github에 올라온거 다운받기 git clone (github주소) gut pull 하기 git pull origin master 더보기 이전 1 2 3 4 5 다음
