React14 react - node 서버와 연동 node 프로젝트 생성 npm init 기본 설정 const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.use('/favicon.ico', (req, res) => { res.status(204); }) app.use("/", (req, res) => { console.log("루트루트"); res.status(200).json({ result : "" }); }) app.listen(8989, () => { console.log("시작시작 8989"); }) node 프로젝트 안에 react.. 2021. 11. 12. local storage 브라우저 내의 저장공간 Local Storage : 비휘발성(청소하지 않는 이상), 5MB 텍스트 Session Storage : 휘발성(브라우저 껐다 키면 삭제) F12로 개발자 도구 오픈 Console 탭 진입 localStorage.setItem('키','밸류') localStorage.getItem('키') localStorage.remove('키') 기본적으로 문자만 가능 [1,2,3] 등의 배열이나 { "key" : "value" } 등의 오브젝트는 깨져서 들어감 그것을 위해 글자인것처럼 저장해야함 Json형 데이터를 저장하기 위해 localStorage.setItem('key', JSON.stringify({key: "value"})) 꺼낼 땐 var temp = localStorage.ge.. 2021. 11. 12. pwa로 앱처럼 설치하도록 하기 PWA장점 1. 설치 마케팅 비용 적음 2. 아날로그 유저들 배려 3. html, css, js 만으로 앱까지 4. 푸시알람, 센서 등 브라우저를 이용하여 사용 설치 명령어 npx create-react-app 프로젝트명 --template cra-template-pwa 기존 프로젝트를 pwa로 변경은 안됨 필수 파일 두 개 1. manifest.json - 앱 정보(public 폴더에 있음) 2. service-worker.js - src에 있는 파일은 설정 파일이며, 실제 파일은 빌드할 때 생성됨 - 웹사이트를 오프라인에서도 사용할 수 있도록 도와주는 것 // serviceWorkerRegistration.unregister(); // unregister를 register로 변경하면 자동 생성됨 se.. 2021. 11. 11. memo로 컴포넌트 재랜더링 막기 특정 props 값을 바꿔도 컴포넌트가 가지고 있는 하위 컴포넌트가 전부 재랜더링되는 것을 막기 위한 기술 function Parent(props) { return( ) } function Child1(props) { useEffect(() => { console.log("child1")}); return 111 } function Child2(props) { useEffect(() => { console.log("child2")}); return 222 } // Parent에 들어오는 props 내용 중 name 혹은 age 하나만 바뀌어도 Child1,2모두 재랜더링된다. Child2만 변경해보자 function Child1(props) { useEffect(() => { console.log("ch.. 2021. 11. 11. &&, enum 등등 if react에서 사용하는 몇가지 if 와 오브젝트를 활용한 if, enum을 활용한 if 등등 삼항연산자 중, 아닐 때가 null이라면 &&으로 생략 가능 { (1 < 3) ? : null } 위 구문을 { (1 < 3) && } 로 줄일 수 있다 object 자료형을 이용해서 선택적 if let state = 'view'; { { view : 뷰, noview : null, update : 수정뷰, }[state] } // 오브젝트인 {} 뒤에 [] 대괄호를 붙여 key값이 현재상태인 자료를 선택하겠다는 의미 var ui = { view : 뷰, noView : null, update : 수정뷰 } function Component() { var state = 'view'; return( { ui[sta.. 2021. 11. 10. redux 리덕스란, props문법 등을 사용하지 않고 모든 컴포넌트에서 글로벌하게 state에 접근하고 수정하기 위한, State의 관리 방법이다. 리듀서(reducer)는 리덕스에서 관리하는 state의 상태 변경을 관장하는 함수이다. 사용자는 특정 신호를 dispatch라는 문법을 통해 리덕스에게 전달하여 state를 수정해달라 요청하고, 리덕스에서 해당 state의 리듀서를 수행한 뒤 수정 결과를 반영한다. yarn add redux react-redux// 두 개 모듈 설치 더보기 Redux의 3가지 규칙 하나의 애플리케이션안에는 하나의 Store가 있다. store는 단 하나만을 생성해서 상태를 관리할 수 있다. (여러개의 store를 사용할 수는 있지만 리덕스에서 권장하는 방법은 아니다) 그 대신 re.. 2021. 11. 5. animation(CSSTransition) css의 transition 속성을 이용하여 css를 천천히 변하도록 한다. 아래 모듈 설치한다. yarn add react-transition-group 필요한 속성을 임포트한다. import { CSSTransition } from 'react-transition-group'; 애니메이션을 적용하고자 하는 컴포넌트를 아래처럼 감싼다. 각 파라미터의 의미는 in => 발동 조건(true or false) classNames => 애니메이션을 위한 css의 접두어 timeout => 최대 길이. timeout이 css에 설정된 transition값보다 작을 경우, timeout 시간이 지나면 자동으로 css 적용이 완료된다. 적용을 위한 css는 아래처럼 작성한다. classNames를 wow로 해놨기 .. 2021. 11. 4. Context API props문법을 사용하지 않고 하위 컴포넌트와 같은 값을 공유하는 방법 import { useContext } from 'react'; let stockContext = React.createContext(); // 범위 생성 문법 // 위에 context로 선언한 변수를 이용하여 아래처럼 작성한다. value라는 이름은 고정값이다. // 이렇게 작성하고 나면 해당 블록 안에서는 stock을 공통으로 공유한다. { shoes.map((data, index) => { return }) } function ShoesInfo(props) { // useContext라는 훅을 이용하여 stockContext를 변수에 담았다. 이제 사용 가능하다. let stock = useContext(stockContext).. 2021. 11. 3. ajax in react 방법 3가지 jQuery 설치해서 $.ajax() 사용 axios 설치해서 axios.get() 사용 자바스크립트 문법 중 fetch() 사용 axios 모듈 설치 yarn add axios or npm install axios -S 사용법 예제 import axios from 'axios'; function App() { // 요청주소로 get방식 요청 (promise) axios.get('요청 주소') .then((result) => { console.log(`성공시 결과값 : ${result}`); }) .catch((err) => { console.log(err)// catch문은 반드시 넣어야 하며, 요청 실패 시 해당 블록 실행 }) .finally(() => { console.log('용도는.. 2021. 11. 2. 이전 1 2 다음
