본문 바로가기

전체 글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.

티스토리툴바