개발하는 망나뇽 개발하는 망나뇽

React

• Node+Express 와 React연동하기

  React 2022. 3. 28. 17:12

  우선 서버가 하는일은 누가 사이트에 접속하면 index.html을 보내주세요. 이렇게 html을 전송하는 기계다. 리액트는 html파일을 예쁘게 만드는 도구다. 리액트로 개발하면 html하나에 js로 여러 페이지를 갈아끼우는 구조인데, 이걸 누가 메인페이지에 접속했을 때 보내주면 연동하는 셋팅이 끝난다. 그리고 server.js라는 파일을 새로 만들어 아래의 내용을 적어주었다. 먼저, 서버를 띄우기위한 필수요소만 적으면 const express = require('express'); const path = require('path'); const app = express(); const http = require('http').createServer(app); http.listen(8080, functi..

  Read More
• localStorage

  React 2022. 3. 25. 17:17

  사이트를 새로고침/재접속하면 js파일도 처음부터 다시 읽기 때문에 초기화가 된다. 이때, state데이터를 기억하게 하려면 서버로 보내서 DB에 저장하던가 아니면 브라우저 저장공간에 저장을 하면 된다. 즉, DB없이 데이터를 저장하고 싶으면 localStorage를 사용하면 된다. Storage에는 Local과 Session이 있는데 Session은 새로고침하면 날라가지만 Local은 날라가지 않는다. localStorage 문법은 3개 정도가 있다. 1. setItem localStorage.setItem('name','Kim') 이렇게 key가 name 이고 value가 Kim인 자료를 저장할 수 있다. 2. getItem localStorage.getItem('name') 이렇게 자료의 이름만 입력..

  Read More
• PWA

  React 2022. 3. 25. 15:30

  PWA는 웹사이트를 모바일 앱처럼 설치해서 쓸 수 있게 하는 사기?라고 한다. PWA의 장점은 1. 설치 마케팅 비용이 적다. 2. 아날로그 유저들을 배려하기 쉽다. 3. html css js만으로 앱까기 가능하다. 4. 푸시알림, 센서등 앱으로만 처리가능한 것도 처리가능하다. 5. 오프라인에서도 사용가능하다. 6. 핸드폰에 내가 만든 웹을 설치가능하다. 그래서 웹사이트를 간지나게 만들었으면 PWA로 만들어서 앱처럼 쓸 수 있게 사용할 수 있다. 만드는 방법을 알아보자. 1. 우선, PWA가 셋팅된 리액트 프로젝트를 하나 생성해야 한다. npx create-react-app 프로젝트명 --template cra-template-pwa 작업폴더 터미널에 이렇게 입력해서 먼저 프로젝트를 생성해준다. 그 다음..

  Read More
• 성능잡기 (lazy loading, React devtools, 재렌더링을 막는 memo)

  React 2022. 3. 25. 14:28

  1. 함수나 오브젝트는 선언해서 쓰는게 낫다. 예를 들면, return ( {} }>버튼 ) //----------- function 버튼끄기() { } return ( 버튼 ) 위보단 아래처럼 함수를 선언해서 함수이름을 가져다 쓰는게 낫다. 오브젝트도 //-------------- var style = { color : 'white'} return ( ) 이런 식으로, 위보단 아래처럼 오브젝트 변수를 만들어놓고 사용하는게 낫다. 이유는 메모리할당 때문인데 이름없는 함수를 사용하면 메모리가 할당이 되기 때문이다. 2. 애니메이션을 줄 때 transform을 쓰는게 낫다 margin, width, padding 등 레이아웃 잡는 속성들을 변경하면 렌더링시간이 오래걸리기 때문에 transform을 써주는게 ..

  Read More
• state 변경함수 사용시 주의점 : async

  React 2022. 3. 24. 19:02

  자바스크립트는 코드를 작성하면 일반적으로 synchronous 하게 처리한다고 한다. 번역하면 동기적 이라고 하는데, 쉽게 말하면 위에서부터 순서대로 처리하는 것을 뜻한다. 하지만, 자바스크립트는 이상한 함수들을 사용하면 asynchronous 하게 코드실행이 가능하다. 번역하면 비동기적인데 ajax, 이벤트리스너, setTimeout 이런 함수들을 쓸 때 그런 현상이 일어난다고 한다. 예를 들어, ajax는 컴퓨터가 안좋으면 실행시간이 10초가 걸릴 수 있다. 그래서 이런 함수들로 실행되는 코드는 순차적으로 실행되지 않고, 완료되면 실행된다. console.log(1+1) axios로 get요청하고나서 console.log(1+2) 실행해주셈~ console.log(1+3) 이런 코드도, 2, 4, 3..

  Read More
• 리액트에서 자주쓰는 if문 작성패턴 5개

  React 2022. 3. 24. 18:37

  1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } //else {return null;} 이 부분은 return null;로 else생략가능 2. JSX안에서 쓰는 삼항 연산자 function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } 이렇게 사용하며, { 조건식 ? 참일 때 실행할 식 : 거짓일 대 실행할 식 }으로 코드를 짠다. 삼항연산자도 중복사용이 가능하지만 중복으로 사용하다보면 코드가 복잡해져서 잘 쓰지 않는다. 3. &&연산자로 if역할 대신하기 &&연산자는 처음 등장하는 falsy 값을 ..

  Read More
• Redux useSelector과 useDispatch

  React 2022. 3. 23. 17:56

  function state를props화(state) { return { state : state.reducer, alert : state.reducer2 } } export default connect(state를props화)(Cart) state를 가져다 쓸 때 이렇게 긴 function을 쓰고, export를 맞게 해줬다. 하지만, useSelector을 쓰면 간단하게 쓸 수 있다. import React from 'react'; import { Table } from 'react-bootstrap'; import { connect, useSelector } from 'react-redux'; function Cart(props) { let state = useSelector((state) => st..

  Read More
• Redux dispacth로 수정할 때 데이터보내기

  React 2022. 3. 23. 17:35

  dispatch()로 수정요청할 때 데이터를 보낼 수도 있다. dispatch({ type : 어쩌구, payload : 보낼데이터 })이게 기본형태이다. 보낸 자료는 액션 파라미터에 저장되어 있다. 액션 파라미터는 { type : 어쩌구, payload : 보낼데이터 }을 뜻하고, reducer에서 액션.payload이렇게 꺼낼 수 있다. 주문하기를 누르면 초기값 오브젝트에 상품이 담기는 것을 구현해보자 1. 데이터 수정되는 방법을 정의해야 한다. let 기본state = [ { id : 0, name : '멋진신발', quan : 2 }, { id : 1, name : '멋진신발2', quan : 1} ]; function reducer(state = 기본state, 액션) { if ( 액션.type..

  Read More