728x90 반응형 PROGRAMING📚/React📑26 Progressive Web App 셋팅 & 앱 발행 방법 프로젝트 생성 방법 기존 프로젝트를 pwa 형식으로 변경하는 방법이 존재 하지 않기 때문에 새 프로젝트를 생성해주고 기존 코드를 복사 해주는 방식을 사용해야한다 터미널 안에서 다음 코드 작성후 세 프로젝트 생성 해준다 npx create-react-app '프로젝트 명' --template cra-template-pwa PWA 파일의 조건은 생성된 파일안에 manifest.json(앱 설정 파일)과 service-worker.js 파일이 들어있어야한다 시작할 때 PWA 형태로 파일을 생성해주면 자동으로 생성 되어있음 manifest.json 설정 앱의 설정 파일로 앱의 이름, 아이콘, 시작 url, 테마 색상, 배경 색상의 기본 설정을 다룰 수 있다 service-worker.js 설정 service-w.. 2024. 2. 2. [React] useTranstion ,useDeferredValue 사용하기 state 1,state 2, state 3 가 존재하는 경우, 변경할 때마다 재렌더링 되는 것이 아니라 마지막에 변경되는 state 값 이후에 재렌더링 해주는 것을 batching 이라고 한다 하지만 ajax, setTimeout 내부라면 baching이 일어나지 않는다 React 18 버전 이후부터는 이러한 성능 문제를 해결하기 위해서 useTranstion 과 useDeferredValue 기능이 나오면서 위의 문제를 해결가능하게 되었다 useTranstion import {useTransition} from 'react' 다음 코드는 10000개의 배열 안에 input 값을 출력 해준다 let a = new Array(10000).fill(0) function App() { let [name, s.. 2024. 2. 2. [React] memo / useMemo 사용하기 memo props가 변할 때만 렌더링을 해준다 memo를 사용하기 위해서는 import { memo } from "react"; 함수를 improt 해준다 그리고 필요할 때 재 렌더링 할 컴포넌트를 memo 함수를 사용해서 컴포넌트를 생성해주어야 한다 //memo 사용안함 function Child(){ console.log('다시불러와지나') return child } //memo 사용 const Child = memo(function Child(){ console.log('다시불러와지나') return child }) memo 사용하기 전 memo 사용하기 후 기존의 props와 신규 props를 비교해서 props의 값이 변했으면 재렌더링 해주는 기능으로 너무 많이 사용하면 비교를 계속 하게 되면.. 2024. 2. 2. [React] memo / useMemo 사용하기 memo props가 변할 때만 렌더링을 해준다 memo를 사용하기 위해서는 import { memo } from "react"; 함수를 improt 해준다 그리고 필요할 때 재 렌더링 할 컴포넌트를 memo 함수를 사용해서 컴포넌트를 생성해주어야 한다 //memo 사용안함 function Child(){ console.log('다시불러와지나') return child } //memo 사용 const Child = memo(function Child(){ console.log('다시불러와지나') return child }) memo 사용하기 전 memo 사용하기 후 기존의 props와 신규 props를 비교해서 props의 값이 변했으면 재렌더링 해주는 기능으로 너무 많이 사용하면 비교를 계속 하게 되면.. 2024. 2. 2. [React] memo / useMemo 사용하기 memo props가 변할 때만 렌더링을 해준다 memo를 사용하기 위해서는 import { memo } from "react"; 함수를 improt 해준다 그리고 필요할 때 재 렌더링 할 컴포넌트를 memo 함수를 사용해서 컴포넌트를 생성해주어야 한다 //memo 사용안함 function Child(){ console.log('다시불러와지나') return child } //memo 사용 const Child = memo(function Child(){ console.log('다시불러와지나') return child }) memo 사용하기 전 memo 사용하기 후 기존의 props와 신규 props를 비교해서 props의 값이 변했으면 재렌더링 해주는 기능으로 너무 많이 사용하면 비교를 계속 하게 되면.. 2024. 2. 1. [React]lazy import를 사용해 파일 나누기 lazy 파일을 나누는 이유는 React 는 Single Page Application으로 만든 파일들을 모두 HTML/CSS/JS 파일로 변환해서 사용하는데 리액트는 많은 파일들이 하나씩 만들어지기 떄문에 모든 데이터가 하나에 들어가 있기 때문에 파일 사이즈가 크다 파일 사이즈가 커지면 페이지를 열어 데이터를 불러오는데 느려지기 때문에 여는데 로딩속도가 느려진 가능성이 크다 위의 페이지는 다른 페이지에서 사용되는 js 파일이라서 메인 페이지에서 로드할 필요가 없기 때문에 lazy 속성을 추가 해서 필요할때 improt 할 수 있게 해줌으로써 메인 페이지의 속도를 개선 할 수 있다 import {lazy} from "react"; 다음과 같이 Lazy 함수를 이용하면 사이트를 내보낼 때도 js 파일로 분.. 2024. 2. 1. [React] React Developer Tools & Redux DevTools 사용하기 React Developer Tools https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 993c4d003 on 12/5/2023. chrome.google.com [ Components ] 설치를 하고 크롬 개발자 도구를 열면 다음과 같이 컴포넌트가 생긴것을 확인 할 수 있다 Components 박스 안에 있는 마우스 툴을 선택하면 선택한 박스에 대한 정보와 props 와 같은 속성들도 확인 할 수있다 .. 2024. 2. 1. [React] React Query 설치하기 실시간 데이터가 중요할 때 react-query 를 사용한다 서버를 사용하면서 ajax 성공했을 경우와 실패 했을 경우에 다른 html을 보여주고 싶은 경우 몇 초마다 자동으로 ajax 요청을 하고싶거나 실패시 몇 초후에 요청을 재시도 하고싶은 경우 실시간 데이터를 계속 가져와야하는 사이트들에서 사용하면 좋다 설치 하는 방법 npm i @tanstack/react-query https://tanstack.com/query/v4/docs/react/installation Installation | TanStack Query Docs React Query is compatible with React v16.8+ and works with ReactDOM and React Native. If you're no.. 2024. 1. 19. [React]Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions.Please use the error stack to find the culprit call. More info here: Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions. Please use the error stack to find the culprit call. More info here: react-query 공부하는데 진짜.. 강사님 보면서 따라하는데 버전이 다른건지 계속 문제가 생겨서 몇시간을 버리다가 드디어 문제를 해결함.. // let result = useQuery('useReactQuery',()=>{ // return axios.get('https://codingapple1.github.io/userdata.json') // .then((a)=>{ return a.. 2024. 1. 19. [React:Error] Cannot read properties of null (reading 'useRef') Cannot read properties of null (reading 'useRef') react-query를 설치하면서 index.js 를 수정하다가 문제가 생긴거같은데 인터넷에 검색을 해보니 뭐.. 경로가 맞지 않거나 버전이 호환되지 않아서 그런 문제라는 말이 많아서 혹시 몰라서 일단 react를 update를 해주었다 npm update를 했더니 뭔가 관련된 문제가 나온거 같긴한데 아직도 정확하게 뭔지는 모르겠다 Module build failed (from ./node_modules/source-map-loader/dist/cjs.js): Error: ENOENT: no such file or directory, open 'D:\Github\React\shopping-mall\node_modul.. 2024. 1. 19. [React] 로컬스토리지 사용하는 방법 새로고침 하면 state 초기값으로 돌아간다 초기값으로 돌아가지 않게 하기 위해서는 서버나 데이터베이스(DB)에 영구저장 해주어야 한다 서버나 DB가 없다면 localStroage를 사용해서 브라우저 안에 정보를 저장해서 사용할 수 있다 localStorage 들어가는 방법 크롬개발자 도구에서 Application 탭으로 들어간다 localStorage 는 최대 5MB 까지 저장이 가능하고 문자로만 저장이 가능하다 반영구적으로 데이터가 남아 있기 떄문에 삭제를 하기 위해서는 브라우저를 청소를 해야한다 localStorage 에 데이터 저장하기 localStorage.setItem('데이터 key 이름','데이터 value 값') localStorage 에서 데이터 출력하기 localStorage.getI.. 2024. 1. 17. 리액트(React) styled-components 설치 & 사용하기 styled-components 설치 & 사용 styled-comforts는 "CSS-in-JS"(JavaScript의 CSS)라는 기술을 사용하여 React 애플리케이션의 스타일을 지정하는데 사용되는 JavaScript 라이브러리이다 터미널을 열어서 다음 명령어를 실행해 라이브러리를 설치해준다 npm install styled-components styled-componets를 사용하기 위해서는 디자인 작업을 하는 폴더의 상단에 선언을 해주어야한다 import style from "styled-components"; 이렇게 하면 styled-componets를 사용할 수 있게 된다 styled. 기능을 이용해서 javascript 안에서 디자인 구현이 가능하도록 해준다 const StyledButton.. 2023. 11. 27. 리액트(React) 라우터 설치&셋팅 리액트에서 페이지 나누는 방법 리액트를 사용하지 않는 경우 페이지를 나눌 때 html 파일을 만들어서 상세페이지 내용을 채우고 사용자가 접속을 했을 때, html 파일을 보내 페이지를 보여주는 방식으로 되어있다 리액트에서는 html을 하나만 사용하기 때문에 컴포넌트를 만들어서 상세페이지 내용을 채워주고 사용자가 접속을 했을 때, 컴포넌트를 보여주는 방식으로 되어있다 리액트(React) 라우터 설치&셋팅 터미널 창을 열어서 npm install react-router-dom@6 라우터를 설치하는 명령어를 실행해 준다 그리고 폴더 안의 index.js 파일을 열어준다 태그를 하나 만들어서 App태그를 감싸 준다 태그를 사용하기 위해서 상단에 react-router-dom 라이브러리를 import 를 선언 해.. 2023. 11. 26. [React]리액트에서 이미지 넣는 방법(background-image/size/position) 리액트에서 이미지 넣는 방법 CSS 파일에서 이미지 불러오기 background-image: url("./path/to/your/image.jpg"); html 파일에서 이미지 불러오기 이미지를 넣어주기 위해서 상단에 이미지에 대한 경로를 설정해준다 import 사용할이름 from "./이미지파일 경로.jpg"; 원하는 이름안에 이미지의 경로를 작성해주고 이미지를 넣어줄 태그 안에 style 속성안에 CSS 파일과 마찬가지로 backgroundImage 를 넣어주면 이미지가 뜨는 것을 확인 할 수 있다 문자열 안에 변수를 넣어주기 위해서 + 연산자를 이용해서 다음과 같이 코드를 작성해주었다 이미지 사이즈 변경하기 background-image: url("./main-bg.jpg"); background-.. 2023. 11. 24. [React]리액트 부트스트랩(Bootstrap) 설치&사용 리액트(React) 부트 스트랩 사용하기 명령어는 변할 수 있기 때문에 항상 사이트로 들어가서 최신 버전의 명령어를 가져와야 한다 구글에 React Bootstrap 검색하면 나오는 최상단 사이트로 들어가준다 https://react-bootstrap.netlify.app/docs/getting-started/introduction Introduction | React Bootstrap Learn how to include React Bootstrap in your project. react-bootstrap.netlify.app Bootstrap 설치하기 터미널에서 해당 명령어를 입력해서 bootstrap을 설치해준다 css 스타일시트 설정하기 React bootstrap 에서 CSS를 사용하기 위해서.. 2023. 11. 24. [React]Github Pages 활성화 &리액트 build 올리기 Github Page 열기 열고자하는 프로젝트의 Repository 로 들어가준다 그리고 Setting 에 Pages 메뉴를 선택해준다 그리고 Branch에서 None을 Main으로 변경해준다 https://docs.github.com/ko/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site GitHub Pages 사이트에 대한 게시 원본 구성 - GitHub Docs 변경 내용이 특정 분기에 푸시될 때 게시하도록 GitHub Pages 사이트를 구성하거나 GitHub Actions 워크플로를 작성하여 사이트를 게시할 수 있습니다. GitHub Pages is available i.. 2023. 11. 22. [React]Error: Uncaught ReferenceError: React is not defined Uncaught ReferenceError: React is not defined 해당 메세지는 프로젝트에서 React 라이브러리를 올바르게 가져오지 못했거나 참조 하지 못했을 때 나타나는 버그이다 잘 사용하던 프로젝트 코드였는데 안 된다고 해서 개발자프롬프트로 확인을 했는데 다음과 같이 떠있었다 이 프로젝트는 Class 를 만드는 프로젝트였는데 프로젝트 파일을 생성하면서 React.Componet 에서 뭔가 문제가 생긴거 같다 뭔가 프로젝트가 충돌이 일어나면 react 를 업데이트를 한번 시켜주면 되는 경우가 있길래 이번에도 업데이트를 시켜주었다 npx update 그래도 리액트는 실행이 되는데 랜더링이 되지 않는... 이번에는 'React is not defined' 라서 리액트를 새로 설치해 보았다.. 2023. 11. 22. [React] useState([배열]) 요소 값 변경하기 useState([배열]) 요소 값 변경하기 let [Blog1, setBlog1] = useState([ "최저가 마우스", "당근 직거래", "일본 여행 패스", ]); let [Date, setDate] = useState(["2023-11-13", "2023-11-14", "2023-11-15"]); {Blog1[0]} {Date[0]} {Blog1[1]} {Date[1]} {Blog1[2]} {Date[2]} 위 UI는 useState([배열])를 사용해서 각 요소들 그려주고있다 이제 여기에서 [다음 페이지] 버튼을 누르면 Blog1의 값과 Date 값을 동시에 변경해주려고 한다 { 어떻게 동작할 것 인가 }} >새로고침 다음 onClick={ 이벤트 함수} 버튼안에 Blog1(state 객체).. 2023. 11. 15. 리액트(React) 터미널 경고 메시지안보이게 하는 방법 리액트(React) 터미널(TERMINAL) 경고 메시지 안보이게 하는 방법 리액트를 사용하다보면 프로젝트를 실행하거나 했을때 오류는 아니지만 다음과 같이 WARNING 이라는 경고가 뜬다 이 경고 메시지를 안뜨게 하는 코드가 있는데 Line 1:8: 'logo' is defined but never used no-unused-vars logo가 선언되었지만 사용된지 않고 있어서 나오는 경고 메시지이다 /*eslint-disable*/ 이 코드를 상단에 작성해주면 경고가 사라지는 것을 볼 수있다 WARNING 문제 코드보다 아래에 있는 코드에만 적용이 되기 때문에 상단에 적어주는 것이 좋다 2023. 11. 15. [React]훅/상태(state)/useState() 사용해서 상태 값 변경하는 법 훅(Hook) 훅(Hook)은 함수형 컴포넌트에서 상태(state : 컴포넌트의 상태를 나타내는 객체)와 다양한 리액트 기능을 사용할 수 있게 해주는 함수로 컴포넌트의 상태 관리, 생명주기 메서드 호출, 컨텍스트 사용 등과 같은 리액트의 핵심 기능을 함수형 컴포넌트에서 사용할 수 있게 해준다 상태(State) 상태(state)는 컴포넌트가 렌더링 될 때 변할 수 있는 값들을 말한다 useState 함수는 이런 상태(state)를 선언하고 업데이트 할 수있게 도와준다 useState() 사용해서 자료 보관/변경하기 상태 선언하기 useState()를 사용하기 위해서는 import React, { useState } from 'react'; 위의 코드를 선언이 되어있어야지 useState를 사용할 수있다 /.. 2023. 11. 15. [React]리액트 'JSX 문법' 사용하기 리액트 'JSX 문법' JSX 기본 구조 HTML과 유사한 구조를 가지면서 JavaScript 코드를 통합 해서 사용할 수 있는 확장 문법이다 리액트에서는 JSX( JavaScript의 확장 문법 ) 을 사용해서 UI를 구조를 선언한다 리액트 파일을 만들면 src 안에 기본적으로 포함되어있는 App.js는 위와 같이 생겼다 리액트에서 레이아웃을 만들기 위해서는 import logo from './logo.svg'; import './App.css'; function App() { return ( //여기에 코드 작성하기! ); } export default App; function App() 안에 있는 return() 문 안에 작성을 해주어야 한다 하지만 변수 같은 경우, return() 밖에 작성 해주.. 2023. 11. 15. [React]리액트의 핵심 특징 리액트(React)의 핵심 특징 선언적 UI 리액트는 선언적 UI를 지향하는 라이브러리로, 사용자 인터페이스를 어떻게 표현할지에 중점을 둔다 선언적 UI의 핵심 아이디어는 원하는 상태(데이터)를 정의하고, 리액트가 자동으로 UI를 업데이트하도록 하는 것이다 이는 코드를 직관적이고 예측 가능하게 만들어 유지보수와 개발을 용이하게 한다 JSX 문법 JSX는 JavaScript의 확장 문법으로, 리액트에서 UI 구조를 선언하는 데 사용한다 XML과 유사한 문법을 가지며, JavaScript 코드 안에서 UI 요소를 표현할 수 있도록 도와준다 JavaScript 코드 안에서 직관적으로 컴포넌트를 작성할 수 있어, 가독성과 유지보수성이 향상됨 가상 DOM (Virtual DOM) 가상 DOM은 리액트의 성능 최적.. 2023. 11. 15. [React]Error: 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결하기 Error: 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결하기 며칠전에 까지만 해도 문제 없던 부분이였는데 갑자기 문제가 생기면서 해당 에러를 해결하기 위해서 찾아보던 중에 평소에 깃허브 데스크탑으로 코드를 올려두는데 다른 작업공간에서 작업을 해서 올려둔 파일을 사용하려다 보니 push 과정에서 문제가 생긴 것 같다 해당 문제가 생겼을 경우 다음과 같이 해주었다 npm을 업데이트 후(npm update) 시작하기 (npm start) npm update 명령어 입력 업데이트가 완료 되면 npm start 오류가 해결 되고 React App이 정상적으로 실행 된 것을 확인 할 수 있다 react-scripts 설치하기 업데이트를 해주어.. 2023. 11. 13. [React: Error]no such file or directory, enoent This is related to npm not being able to find a file. 오류 해결하기 Error: no such file or directory, enoent This is related to npm not being able to find a file. 오류 해결하기 no such file or directory, lstat 'C:\Users\00\AppData\Roaming\npm'npm ERR! enoent This is related to npm not being able to find a file. 다음과 같은 오류가 발생했을 때 C:\Users\00\AppData\Roaming 이라는 폴더안에 npm이 존재하지 않아서 생기는 오류이다 해당 경로 들어가서 npm이라는 폴더를 하나 생성해 주면 문제가 해결된 것을 확인 할 수 있다 2023. 11. 10. 리액트(React) 프로젝트 폴더 분석하기 프로젝트 폴더 분석하기 리액트 프로젝트 폴더 구조에서 'node_modules', 'public', 'src' 디렉토리는 각자 다른 목적으로 구성된다 일반적으로 위와 같은 폴더 구조를 가지고 있고 프로젝트의 복잡성과 요구 사항에 맞추어 디렉토리 구조를 조정할 수 있다 node_modules [node_modules] 디렉토리는 npm(Node Package Manager)을 통해 프로젝트에 필요한 외부 패키지 및 의존성이 자동으로 설치된다 npm(Node Package Manager) 라이브러리 코드 보관함으로 프로젝트에서 사용하는 외부 라이브러리와 의존성이 저장된다 이 디렉토리는 npm에 의해 관리되며, 직접 수정하거나 관리할 필요가 없다 public 정적 자원과 리액트 애플리케이션을 렌더링하는 데 사.. 2023. 11. 9. 리액트(React) 설치 & 개발 환경 설정하기 리액트(React) 설치 개발 환경 설정 [ Node.js 설치하기 ] 구글에서 node js 검색하면 다운받을 수 있는 사이트가 나옵니다 https://nodejs.org/en/download Download | Node.js LTS Recommended For Most Users nodejs.org 사이트로 들어가서 LTS를 다운 받아준다 node.js 가 설치 되어있는지 확인하려면 명령 프롬프트(cmd)에서 확인을 해주어야한다 실행창(window키 + R)을 열어서 cmd를 열어준다 그리고 명령창에 node -v 를 작성해주면 현재 설치 되어있는 node.js 의 버전을 확인 할 수 있다 [ 개발 에디터(vscode) 설치하기 ] Visual Studio Code - Code Editing. Red.. 2023. 11. 9. 이전 1 다음 728x90 반응형
