도리쓰에러쓰

이번 게시물에선 유저가 메인페이지 접속하면 서버가 리액트로 만든 html 파일을 보내주는 것을 해보겠습니다. 서버만들 때 Express + MongoDB를 사용하면 JS만으로도 풀스택 개발을 할 수 있는데, 여기에 React를 더할 수 있습니다. 1️⃣ express 라이브러리를 설치합니다. 1) 작업 폴더를 오픈한 상태에서 터미널에 npm init 입력 후 선택하라고 뜨는 것들을 끝날 때까지 Enter합니다. 2) npm install express 입력합니다. 3) server.js 파일을 만들고 아래 코드를 작성합니다. const express = require('express'); const path = require('path'); const app = express(); const http =..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] shop 홈페이지 기능 완성하기 가이드 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux5 :: useSelector, useDispatch 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux4 :: dispatch로 데이터 보내기 저번 게시물에.. dori-coding.tistory.com state 데이터를 기억하게 하려면 2가지 방법이 있습니다. 1️⃣ 서버로 보내서 DB에 저장하기 2️⃣ 브라우저 저장공간인 localStorage에 저장하기 저는 localStorage에 데이터를 저장해보도록 하겠습니다. localStorage에 대해서 알고 싶은 분들은 아래 게시물을 참고해주시면 ..

1. 개발자도구에서의 localStorage - localStorage는 개발자도구 - Application - Local Storage 에서 데이터 확인이 가능합니다. * Local Storage · 브라우저 청소하지 않는 이상 브라우저에 데이터가 남아있습니다. · Key, Value 각각 텍스트 5MB 정도 저장이 가능합니다. * Session Storage : 브라우저 끄면 데이터가 날아갑니다. 2. localStorage 문법 - JS 에서 다음 문법을 쓰면 localStorage의 데이터를 입출력 할 수 있습니다. localStorage.setItem('Key', 'Value'); localStorage.getItem('Key'); localStorage.removeItem('Key'); * l..

PWA(Progressive Web App) : 웹사이트를 모바일 앱처럼 설치해서 쓸 수 있습니다. 📌 PWA 장점 1️⃣ 모바일에 웹사이트 설치 가능 - 설치된 앱 접속하면 상단 URL바가 제거된 브라우저가 뜹니다. 2️⃣ 오프라인에서도 동작 가능 - service-worker.js라는 파일과 브라우저의 Cache storage 덕분에 가능합니다. - JavaScript로 게임만들 때 유용합니다. 3️⃣ 설치 유도 비용이 매우 적음 - 앱설치를 유도하는 마케팅 비용이 적게 듭니다. ( 구글플레이 스토어나 앱스토어 방문해서 앱 설치하고 다운받게 하는 것은 항상 매우 높은 마케팅 비용이 들기 때문입니다. ) 1. PWA 프로젝트 설치 1️⃣ PWA 세팅이 완료된 프로젝트를 생성합니다. 터미널에 npx cr..

예시를 위해 Component 3개를 만들어봤습니다. * useEffect() : Component가 로드/재렌더링이 되면 useEffect()가 실행됩니다. function Parent(props) { return ( ) } function Child1(props) { useEffect(()=>{ console.log('렌더링됨1') }); return 1111 } function Child2(props) { useEffect(()=>{ console.log('렌더링됨2') }); return 2222 } 그리고 아래 코드처럼 return() 안에 Component를 넣어 props를 전달합니다. 그럼 콘솔창에 아래 사진과 같이 잘 출력되고 있습니다. 근데 갑자기 여기 전송하고 있는 props를 "존박..

1. lazy loading - React도 Component의 로딩속도 등을 향상시킬 수 있는 방법이 존재합니다. 지금처럼 간단한 사이트 만들 땐 체감이 안되지만 사이트가 크면 클수록 꼭 필요합니다. 1️⃣ 함수나 오브젝트는 변수에 담아쓰는 것이 좋습니다. - 아래 코드처럼 이름 없는 콜백함수나 오브젝트를 작성하지 않고, function Cart() { return ( ) } - 아래 코드처럼 Component 바깥에 있는 변수에 저장해서 사용합시다. let 스타일 = {color : 'red'}; function Cart() { return ( ) } : 왜냐 하면, Component가 재렌더링될 때 변수에 저장되지 않은 이름없는 오브젝트나 함수 류의 자료형들은 매번 새로운 메모리 영역을 할당해줘야하..

💡 2022년 이후 React 18.0ver batching 업데이트 나오면 async 몰라도 됩니다 ! 1. JavaScript의 sync / async 관련 상식 JavaScript는 일반적인 코드를 작성하면 동기(Synchronous) 처리가 됩니다. 동기(Synchronous) 처리는 코드 윗줄부터 차례대로 코드가 실행된다는 뜻입니다. 아래 코드는 콘솔창에 2, 3, 4 순으로 출력되고 있습니다. console.log(1+1);// 2 console.log(1+2);// 3 console.log(1+3);// 4 하지만 JavaScript는 비동기(Asynchronous) 하게 코드 실행이 가능한 함수들이 있습니다. ajax, 이벤트리스너, setTimeout 이런 함수들을 쓸 때 비동기 처리가 ..

1. Component 안에서 쓰는 if-else문 function Component() { if(true) { return true일 때 보이는 HTML; } else { return null; } } 💡 위 코드처럼 쓰려면 else 생략이 가능합니다. function Component() { if(true) { return true일 때 보이는 HTML; } return null; }​ : JavaScript function 안에선 return 이라는 키워드를 만나면 return 밑에 있는 코드는 더 이상 실행되지 않습니다. 2. JSX 안에서 사용하는 삼항연산자 삼항연산자(ternary operator) 형식 조건문 ? 조건문 참일 때 실행할 코드 : 조건문 거짓일 때 실행할 코드 function ..