728x90 반응형 PROGRAMING📚229 [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. 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. 리액트(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. [WEB]동기/비동기처리 와 콜백함수 동기/비동기처리 동기식 처리 자바스크립트는 동기식 처리를 한다. 한번에 코드 한줄씩 차례로 실행 비동기식 처리 방법 실행이 오래 걸리는 함수들을 보통 비동기식으로 처리를 한다 처리하기 위해서는 함수들을 Web API로 이동시켜두고 작업을 완료하면 결과를 출력해준다 Web API 덕분에 작업을 기다리지 않고 빠르게 처리가 가능하다 setTimeout(()=>{},시간) 을 사용해서 1초 후에 timeout1 이 출력되도록 코드를 작성하였다. 다른언어와 다르게 자바스크립트는 기다려주지 않고 해당 줄을 실행하는 동시에 정지 하지않고 실행이 바로 된다. setTimeout()함수는 자바스크립트가 비동기식으로 처리를 하기 때문에 위와 같은결과가 출력된다. 비동기식 처리의 특징은 오래걸리는 작업이 있을 경우, 해당.. 2023. 10. 24. [WEB] JS-for,forEach 문 사용하기 변수 안에 여러가지 변수를 담아서 출력 해보려고 한다 var size = ["XL", "XXL", "XXXL"]; 다음과 같은 여러 문자가 담겨있는 배열을 출력 해보려고한다 배열을 출력하는 방법은 for 문을 사용해서 배열의 사이즈를 받아서 출력해주는 방법과 for (i = 0; i console.log(element)); forEach()를 사용해도 동일한 값을 출력한다 [ forEach 예시 ] size.forEach(function (e) { $(".form-select").append("" + e + ""); }); size.forEach(function (e) { $(".form-select").append(`${e}`);}); 2023. 9. 22. [WEB]JS-자바스크립트로 HTML 추가 생성하기 자바스크립트로 HTML 생성하기 여기안에 새로운 HTMl 생성 document.createElement("생성할 태그"); 스크립트를 넣어줄 div 태그를 하나 만들어 준다 생성할 태그 안에 p를 넣어주면 p태그로 생서이 되고 h1을 넣어주면 h1 태그의 형식으로 HTML이 만들어진다 document.querySelector("#container").appendChild(a); innerHTML은 문장을 덮어써서 기존에 있던 텍스트를 지우고 작성된다 insertAdjacentHTML 문자형으로 HTML 추가하기 var 변수 안에 문자열을 통째로 저장하고 insertAdjacentHTML 을 사용해서 HTML을 추가하는 방법과 jQuery에서는 append()를 사용해서 문자열을 추가 해주는 방법이 있다... 2023. 9. 22. [WEB]JS-이미지 슬라이드 만들기 이미지 슬라이드 만들기 위와 같이 동그라미 버튼을 누르면 다른 이미지가 변하는 슬라이드를 만들어 보려고 한다 사용할 이미지를 폴더 안에 넣어주고 body 태그 안에 이미지를 담아줄 큰그룹 (slide-container) 태그를 만들어주고 그 안에 이미지 태그를 3개를 들어서 넣어주었다 슬라이드를 만들어주기 위해서 세로로 정렬된 이미지를 가로로 정렬 시켜주어야한다 그러기 위해서 CSS 파일을 하나 만들어준다 .slide-container { width: 300vw; } .slide-card-bg { float: left; width: 100vw; } 반응형 웹에서 사용되어지는 크기의 단위 중 하나가 vw(Viewport Width), 그리고 vh (Viewport Height)가 있다 가로 사이즈에 대응하.. 2023. 9. 18. [WEB]JavaScript - setTimeout / setInterval 사용하기 setTimeout() / setInterval() 사용하기 자바스크립트에서 사용하는 타이머로 사용하는 대표적인 함수에는 seTimeout()와 setInterval() 함수를 사용한다 setTimeOut setTimeout 함수는 코드를 실행 할때 바로 시작하지 않고 기다렸다가 함수를 실행 할 때 사용하는 함수이다. 사용하는 방법은 setTimeout(function(){ // Code here}, 지연시간) 의 형식으로 적어주면 된다. setTimeout(funtion(){}) 이렇게 사용하지 않고 함수를 따로 만들었을 경우, 그 함수의 이름만 적어주면된다. 지연시간은 밀리세컨드 단위로 설정 해야한다. 예를들어 지연시간 1000은 1초, 10000은 10초를 의미한다. 위코드에서는 지연시간을 5000.. 2023. 9. 15. [WEB]JavaScript 변수(var, let, const) 사용하기 JavaScript 변수(var, let, const) 변수는 값이 변하는 것이 가능한 데이터를 말한다. JavaScript에서 데이터 값을 저장하기 위해서 보통 사용한다 JavaScript에서 사용하는 변수의 종류는 var(ES5), let(JS), const(JS)를 주로 사용한다 var 키워드는 1995~2015까지 모든 자바스크립트 코드에서 사용되었고 let, const 키워드는 2015년에 자바스크립트에 추가 되었다 대부분의 프로그래밍 언어는 블록 레벨 스코프를 따르지만 자바스크립트는 함수 레벨 스코프를 따른다 그래서 ES5 까지는 글로벌 스코프(Global Scope)와 기능 스코프(Function Scope) var를 사용해서 변수를 생성하였다 ES6부터 let그리고 const 블록 스코프(.. 2023. 9. 14. [WEB] form(폼) 태그 사용하는 방법과 속성 form(폼) 태그 사용하는 방법과 속성 서버로 유저의 정보를 전송하려고 사용한다 사용자 의견이나 정보를 알기 위해 입력 하는 틀을 폼이라고 생각하면된다 폼(form) 태그 속성에는 name, action, method, target 등 다양한 속성들이 있다 form 설명 action 폼 전송할 서버 쪽 스크립트 파일을 지정한다. name 폼을 식별하기 위한 이름을 지정한다 accept-charset 폼 전송에 사용할 문자 인코딩을 지정한다 taget:action action 에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다 method 폼을 서버에 전송할 http 메소드를 정한다. form을 구성하는 태그 요소 , 태그 태그는 폼(form)태그 안에 관련 있는 요소들을 그룹화 할.. 2023. 9. 14. [WEB]jQuery 응용 -Animation 만들기 Animation을 만들기 전에 어떤 디자인을 할지 미리 생각을 하고 시작 스타일과 최종 스타일에 대한 CSS 를 만들어 준다 그런다음 원하는 방식으로 Transition을 추가해서 동작을 구현해준다 jQuery 이용해서 Animation 만들기 jQuery에서 제공하는 다양한 라이브러리가 존재한다 jQuery 입문 | 이펙트(effect) 효과 개발 지식 공유 www.devkuma.com 애니메이션 효과 $(선택자).animate(스타일 [,지속시간] [,시간당속도함수] [,콜백 함수]); 더보기 backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidt.. 2023. 9. 12. [WEB]jQuery(라이브러리)설치&기본 함수 jQuery(라이브러리)설치 jQuery 를 사용하면 $ 은 쿼리 셀렉터를 의미 addEventListener = on 함수명을 짧게 사용 가능하다 https://releases.jquery.com/ jQuery CDN jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac releases.jquery.com .. 2023. 9. 12. 이전 1 2 3 4 5 ··· 8 다음 728x90 반응형
