728x90 반응형 HOME🏠310 [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. [PROJECT]보자마자-시티투어 부산(BOJAMAJA-CYTYTOUR BUSAN)작업 보호되어 있는 글 입니다. 2023. 12. 26. [PROJECT]보자마자 브레인(BOJAMAJA-BRAIN) 작업 보호되어 있는 글 입니다. 2023. 12. 26. [PROJECT]보자마자 피트니스 - 보자마자 케어(Bojamaja-Care) 작업 보호되어 있는 글 입니다. 2023. 12. 26. [PROJECT]보자마자 피트니스 - 어메이징 코어(Amazing Core) 작업 보호되어 있는 글 입니다. 2023. 12. 26. [PROJECT]보자마자 피트니스 -런투더문(RunToTheMoon) 작업 보호되어 있는 글 입니다. 2023. 12. 22. [PROJECT]보자마자 피트니스 - 사이클링 투어 작업 보호되어 있는 글 입니다. 2023. 12. 22. [PROJECT]보자마자 PLAY2 리얼모션 제작 작업 보호되어 있는 글 입니다. 2023. 12. 22. [PROJECT] (외주)JBListen 전북 설문조사 데모 앱 제작 보호되어 있는 글 입니다. 2023. 12. 21. [PROJECT] 보자마자 PLAY 2 모바일 작업 보호되어 있는 글 입니다. 2023. 12. 20. [PROJECT](외주)복둥이의 시간 여행 작업 보호되어 있는 글 입니다. 2023. 12. 20. error CS0433: The type 'IPurchaseReceipt' exists in both 'Security, Version=1.0.7698.24420, Culture=neutral, PublicKeyToken=null' and 'UnityEngine.Purchasing.SecurityCore, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null' 오류 해결하기 1. Removed In App Purchasing package (from Window -> Package Manager) 2. Deleted Plugins/UnityPurchasing from my project (from Project viewer) 3. Quit and relaunched Unity 4. Reinstalled In App Purchasing (from Window -> Package Manager) 5. Imported In-App Purchasing (from Window -> General -> Services, In-App Purchasing) 6. Quit and relaunched Unity 7. (important!) Commented out all lines of IA.. 2023. 12. 20. [유럽 패키지 여행✈] 2023.08.26 3일차 파리(Paris) 여행 3일차✈ 호텔➡️개선문➡️샹들리제 거리➡️파리 에펠탑➡️베르사유 궁전➡️루브르 박물관➡️파리에펠탑 전망대➡️세느강 유람선 오늘은 9시부터 일정이 시작되고 10시에 일정이 끝난다고 했다 벌써부터 얼마나 돌아다닐지 기대된다 파리에서의 첫날 조식은 8시부터 시작! 오늘도 날씨가 꾸리꾸리..🌥 벌써부터 다들 한식이 그리운지 다들 라면을 하나씩 들고 아래로 내려왔다 진짜 새삼 외국에 왔구나 느꼈다 빵이 주식이 되는 식사 8박 10일 여행 중에서 식사가 가장 잘 나오는 곳이 런던이랑 밀라노 숙소라고는 했지만 그저 웃음이 났다 그리고 항상 아이스아메리카노만 먹었었는데 아이스 아메리카노를 안 파는 동네라서 아침에 뜨.아를 마시기 시작했는데 여기 커피가 진짜 맛있었다... 엄청 부드럽다해 야하나? 홀짝홀짝하다 보니.. 2023. 11. 28. [유럽 패키지 여행✈] 2023.08.25 2일차 런던(London) 여행 2일 차✈ 호텔➡️ 버킹엄궁전 ➡️ 웨스트민스터사원 ➡️빅벤➡️템즈강유람선➡️영국대영박물관➡️파리 어제 호텔 들어가기 전에 인솔자분이 분명 새벽 2시에 눈뜬다고 했는데 진짜 귀신처럼 몇 시지 하고 일어났을 때 새벽 2시였다 🤣🤣🤣🤣 원래라면 나는 아침을 먹는 거보다 잠을 자는 게 중요한 사람인데 같은 팀원들이랑 밥을 먹기로 약속을 해서 아침 7시에 아침을 먹기 위해서 일찍 일어나서 준비를 했다 어제는 비행기를 타고 온다고 진짜 거지처럼 입고 다녔는데 오늘부터 진짜 여행의 시작이라고 생각해서 한 시간 전부터 준비를 하고 밖으로 나왔다 유럽이 너무 덥다고 해서 엄청 걱정했는데 일단 날씨는 선선한데 하늘이 흐린 게..☁ 사진이 예쁘게 안 나올까 봐 걱정이 됐다 ㅎㅎ 일어나서 준비를 마치고 오늘만 생활하는.. 2023. 11. 28. 리액트(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. [유럽 패키지 여행✈] 2023.08.24 1일차 여행 1일차 서울역➡️ 공항철도 ➡️ 인천공항🛫 서울역에서 8시에 출발하는 공항철도를 타러 왔다 서울역에는 자주 왔지만 공항철도를 타는건 이번이 처음였다 서울역 안에서 공항철도로 연결되는 곳이 있어서 화살표를 잘 따라가면 직통열차를 타는 곳으로 쉽게 갈 수 있었다 공항철도 내부는 이렇게 생겼었다 생각보다 너무 깔끔하고 KTX느낌? 나는 AREX 를 앱을 통해서 결제를 해서 좌석을 미리 지정해서 왔는데 앱에서 한자리가 있는 곳이 있어서 예매를 했다 근데 자리를 찾으려고 하는데 내 좌석이 안보이는 것.. 그래서 주변사람들 한테 물어봤는데 입구 바로 앞에 있는 좌석이였던 ㅋㅋㅋ 생각보다 아늑하고 옆에 벽으로 되어 있어서 아주 좋았다 충전기도 꽂을수 있어서 45분? 40분? 정도 이동하는데 편하게 이동했다 그러.. 2023. 11. 24. [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. 이전 1 2 3 4 5 ··· 11 다음 728x90 반응형
