도리쓰에러쓰

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 ..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux5 :: useSelector, useDispatch 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux4 :: dispatch로 데이터 보내기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux3 :: state와 reducer가 더 필요하다면? 저번.. dori-coding.tistory.com 1. 이미지 클릭 시 각각 상세페이지로 이동하기 - 아래 코드는 Card 컴포넌트입니다. function Card(props) { let inventory = useContext(inventoryContext); return( { props.products.title } { props...

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux4 :: dispatch로 데이터 보내기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux3 :: state와 reducer가 더 필요하다면? 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux2 :: reducer / dispatch로 데이터 수.. dori-coding.tistory.com 1. redux를 사용하는 이유 우선 글을 작성하기에 앞서, reducer를 사용하는 이유를 다시 작성하겠습니다. 1️⃣ 모든 Component가 props 없이도 state를 꺼내 사용할 수 있습니다. 2️⃣ state 버그 관리가 용이합니다. state를 수정하려면 수정 방법을 redu..