분류 전체보기69 [React] PWA 세팅해서 앱으로 발행하기 PWA(Progressive Web App)- 웹 사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹 개발 기술- React를 이용해 만든 웹 사이트를 모바일 앱으로 발행해서 쓰는데, iOS/안드로이드 앱을 발행하는 게 아니라 웹 사이트 자체를 스마트폰 홈 화면에 설치하는 것 PWA 장점1. 스마트폰, 태블릿 바탕화면에 웹 사이트 설치가 가능하다.설치된 앱 누르면 상단 URL바가 제거된 크롬 브라우저가 뜬다. 일반 사용자는 앱이랑 구분 못 함.2. 오프라인에서도 동작할 수 있다.serice-worker.js라는 파일과 브라우저의 Cache stroage로 오프라인에서도 동작할 수 있다. 그래서 자바스크립트로 게임 만들 때 유용하다.3. 설치 유도 비용이 매우 적다.앱 설치를 유도.. 2024. 9. 10. [React] 성능 개선 : batching, useTransition, useDeferredValue 리액트 18 버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 기능이 추가되었다. 1. 일관된 batching (automatic batching)setCount(1)setName(2)setValue(3) // 여기서만 1번 재렌더링 됨state 변경 함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야 하지만, 리액트는 재렌더링을 마지막에 1회만 처리해 준다. 이렇게 일종의 쓸데없는 재렌더링을 방지해 주는 기능을 batching이라고 한다. fetch().then(() => { setCount(1) //재렌더링됨 setName(2) //재렌더링됨})리액트 17 버전까지는 ajax 요청, setTimeout 안에 state 변경 함수가 있는 경우에는 batching.. 2024. 9. 10. [React] 성능 개선 : 재렌더링 막는 memo, useMemo 컴포넌트가 재렌더링되면 그 안에 있는 자식 컴포넌트도 항상 함께 재렌더링 된다.이런 경우 자식 컴포넌트가 렌더링 시간이 오래 걸리는 무거운 컴포넌트라면 부모 컴포너트의 렌더링 시간이 문제가 될 수 있다. (예를 들어 자식 컴포넌트가 렌더링 시간이 10초나 걸리는 무거운 컴포넌트라면 부모 컴포넌트에 있는 버튼을 누를 때마다 10초 버벅이는 불상사가 발생한다.)그럴 때는 자식을 memo로 감싸 놓으면 된다. 테스트용으로 자식 컴포넌트를 하나 만들어 보자.(Cart.js)import { useState } from 'react';function Child(){ console.log('재렌더링됨'); return 자식 컴포넌트임}function Cart(){ let [count, setCou.. 2024. 9. 9. [React] 성능 개선 : 개발자 도구, lazy import props를 보냈는데 출력이 안 된다거나, 이미지를 넣었는데 안 보인다거나 등 버그 같은 게 생기면 개발자 도구를 켜서 Elements 탭을 살펴 보면 된다. 여기에서는 작성했던 코드가 실제 html, css로 변환되어서 보여진다. 그런데 컴포넌트로 미리 보고 싶으면 리액트 개발자 도구를 설치해서 보면 된다. 크롬 확장 프로그램 : React Developer Toolshttps://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi크롬 웹스토어에서 확장 프로그램 설치가 가능하다. React Developer Tools을 설치하면 Components 탭이 생기는데, 개발 중인 리액트 사이트를 .. 2024. 9. 9. [React] react-query ajax 요청을 하다 보면 이런 기능이 필요해질 때가 있다.몇 초마다 자동으로 데이터 다시 가져오게 하려면?요청 실패시 몇 초 간격으로 재시도하고 싶으면?다음 페이지를 미리 가져오고 싶으면?ajax 성공/실패시 각각 다른 html을 보여 주려면?직접 개발하는 방법도 있지만 react-query라는 라이브러리를 설치해서 사용해도 된다.SNS, 코인거래소 같은 실시간 데이터를 보여 줘야 하는 사이트 만들 때 유용하지만 ajax 요청을 몇 초마다 계속 날려서 가져오는 방식이라 http1을 쓰는 서버나 브라우저라면 비효율적일 수 있다.그래서 react-query는 ajax 관련 기능 개발을 편하게 할 수 있는 데에 의의가 더 있다. react-query 설치&세팅npm install react-query@3.. 2024. 9. 9. [JavaScript] 정규식, 이메일 형식 검증해 보기 에 입력한 값이 이메일 형식이 맞는지 검사하려면 어떻게 해야 할지 알아보자. .includes()문자열이나 배열에 특정 값이 포함되어 있는 확인하는데 사용되는 메서드. 1. 문자열에서의 .includes()string.includes(substring, start);substring : 찾고자 하는 부분 문자열.start(선택 사항) : 검색을 시작할 위치. 기본값은 0.const sentence = "안녕하세요, 만나서 반갑습니다.";// '안녕'라는 단어가 포함되어 있는지 확인console.log(sentence.includes("안녕")); // true// '헬로'라는 단어가 포함되어 있는지 확인console.log(sentence.includes("헬로")); // false// 인덱스 10.. 2024. 9. 6. [JavaScript] setTimeout(), setInterval(), clearTimeout() 타이머 주는 법 setTimeout()지정된 시간이 지난 후 한 번 실행되는 타이머를 설정하는 함수. 지정된 시간이 지나면 전달된 함수가 실행된다.setTimeout(function(){ 실행할 코드 }, delay)function(){} : 지연 시간 지나면 실행할 함수delay : 지연 시간 (밀리초 단위, 1000ms = 1초)setTimeout(function(){ console.log('안녕');}, 1000)위 코드는 1초(1000ms) 후에 콘솔에 '안녕'이라는 메시지를 출력한다. 5초 이내 구매시 사은품 증정!위 코드는 페이지 방문시 5초 후에 '5초 이내 구매시 사은품 증정'이라는 메시지가 사라진다. clearTimeout()setTimeout()으로 설정한 타이머를 취소할 때 사용되는 함수.즉.. 2024. 9. 6. [React] 실습- 쇼핑몰 프로젝트 보호되어 있는 글 입니다. 2024. 9. 3. [React] localStorage localStorage새로고침 하면 모든 state 데이터는 리셋된다.왜냐하면 새로고침 하면 브라우저는 html, css, js 파일들을 처음부터 다시 읽기 때문이다.이게 싫다면 state 데이터를 서버로 보내서 DB에 저장하거나 하면 된다.서버나 DB 지식이 없다면 loaclStorage를 이용해도 된다.유저의 브라우저에 몰래 정보를 저장하고 싶을 때 쓰는 공간이다. ▲ 크롬 개발자 도구에서 Application 탭 들어가면 왼쪽에서 많은 저장 공간들을 볼 수 있다. Local Stroage key : value 형태로 저장 가능사이트마다 5MB 정도의 문자 데이터만 저장 가능사이트를 재접속해도 남아 있음(브라우저 청소하면 삭제됨), 반영구적임Session Storage Local Stroage랑 똑같.. 2024. 8. 29. 리액트에서 자주 쓰는 if문 작성 패턴 보호되어 있는 글 입니다. 2024. 8. 29. [React] Redux : state가 object/array일 경우 변경하는 법, 파일 분할 Redux state가 object/array일 경우 변경하는 법(Store.js)let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ return {name : 'park', age : 20} } }}) {name : 'kim', age: 20} 인 자료를 state를 만들었다.여기에서 'kim' → 'park' 이렇게 변경하고 싶으면 state 변경 함수인 changeName()을 사용하면 된다. 그런데 array, object 자료의 경우의 state변경은 state를 직접 수정도 가능하다.(Store.js)let user .. 2024. 8. 27. [React] Redux : store의 state 변경하는 법 Redux store의 state 변경하는 법Redux의 state 변경은 state 수정해 주는 함수를 만들어 두고 컴포넌트에서 원할 때 그 함수를 실행해 달라고 요청하는 방식.1. store.js에 state 변경해 주는 함수 생성2. export 하기3. 필요할 때 import 해서 dispatch()로 감싸서 사용 1. store.js에 state 변경해 주는 함수 생성 (Store.js)let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ return 'john ' + state } }}) createSlice() 안에 reducers : { } 열고 .. 2024. 8. 27. 이전 1 2 3 4 5 6 다음
