All Day Tired

리액트 상태는 크게 3가지로 구분된다.1. 지역: useState로 관리2. 전역: store로 상태관리3. 서버: API통신할때 필요한 상태 리액트쿼리는 특히 서버상태관리를 하는데 유용한 라이브러리이다.그러면 리액트쿼리를 사용하기위해 기본세팅하는 방법을 알아보자. 1. react query 설치(버전 5로 설치함)npm i @tanstack/react-query 2. index.js 또는 main.jsx에서 import 해주고 기본 세팅하기import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'import { QueryClient, QueryClientProvider } from '@tanst..

코딩알려주는 누나 강의를 듣고 쓰는 글입니다. Zutand는 상태관리를 위해 만들어진 라이브러리다.상태관리가 필요한 이유는 이미 간단히 포스팅 해두었다.리액트 redux 상태관리 리액트 redux 상태관리코딩알려주는 누나 강의를 보고 쓰는 글입니다. 리액트를 사용하면서 문제점이 있다.이렇게 부모에서 자식으로만 state가 전달된다는 문제!이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리yj-dev.tistory.com 근데 확실히 Zustand 쓰는게 편하긴 한듯... Zustand를 사용하는 방법은 아래와 같다.1. Zustand를 설치한다.npm install zustand2. store를 만들자. src > stores > personStore.js 파일을 만들어준다. 3. Store.js에..

코딩알려주는 누나 강의를 보고 쓰는 글입니다. 리액트를 사용하면서 문제점이 있다.이렇게 부모에서 자식으로만 state가 전달된다는 문제!이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리하기도 힘들어지는데이것을 해결하는 것이 상태관리! store라는 공간에 state들을 넣어주어서 어느 컴포넌트든 사용할 수 있게 해주는 것!이러한 상태관리를 도와주는 것이 바로 redux이다.redux는 라이브러리로 구조는 아래와 같다.Reducer는 단순히 함수로 그 아래에는 if문이나 switch문으로 action의 type들이 나열되어서 각각 하는 기능을 구현한 것이다.Action은 type과 payload로 이루어진 객체로 type은 액션의 이름, payload는 매개변수라고 생각하면 된다. redux를 사용..

코딩알려주는 누나 강의 듣고 정리한 글입니다. state가 변하면 UI를 바꾼다state 형태는 아래와 같다.const [변수, setState] = useState(초기값);state값을 변경하기 위해서는 setState 함수를 통해서 바꿔야한다 state가 바뀌면 UI가 랜더링 됨 그래서 setState 함수를 실행한다고 바로 실행되지 않고 비동기적으로 실행이 됨 setState 함수를 감싼 함수가 끝나야 setState가 실행된다 코드와 함께 설명하면import { useState } from 'react'import './App.css'function App() { const [count, setCount] = useState(0); const increase = () => { setC..

코딩알려주는 누나 강의를 듣고 정리하는 글 입니다. url을 넘길 때 많은 정보를 넘기곤 한다.http://www.yj-dev.com/history 이런식으로 pathVariable로 history라는 정보를 넘기던가http://www.yj-dev.com?id=1&num=23 이런식으로 쿼리파라미터로 id와 num이라는 정보를 넘기던가 먼저 pathVariable을 하려면 history같은 값은 변해야하는 값인데 Router에 어떻게 지정을 해줘야할까?mport { useState } from 'react'import './App.css'import PageA from './page/PageA'import { Routes, Route, Navigate } from 'react-router-dom'//i..

코딩알려주는 누나 강의를 들으면서 정리하는 글 입니다! 보통 웹사이트를 보면 여러 페이지를 이동하면서 사용하게 되는데 이 때 리액트에서 필요한 것이 Router Router를 사용하기 위해서는 가장 먼저 리액트 프로젝트에 Router를 설치하는 것이다.아래 명령어를 터미널에 치면 Router 6버전이 설치 된다.npm install react-router-dom@6 그럼 진짜로 Router를 사용해주기 위해서는 main.jsx 파일에서 BrowserRouter를 사용해주자import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'impor..

리액트 첨 해보는데 진심 개빡침난 이걸 왜 쓰는지 모르겠다... swiper 쓰는데도 구글링으로 나온 글 다 하라는대로 했는데몽땅 다 안돼서 개빡쳤음 진심 레알...이걸로 2시간 삽질함 거지같아 일단 나는 swiper 9.3.2 버전을 사용했다. 1. npm으로 swiper 다운로드 하기나는 인텔리제이를 사용하고 있어서 인텔리제이 터미널에 가서npm install swiper@9.3.2명령어로 swiper 9.3.2 버전을 다운로드 했다.확인하려면 리액트 다운 받은 디렉토리에 package.json을 보면 swiper 몇버전을 받았는지 알 수 있고node_modules에 swiper 디렉토리가 있는 것을 확인할 수 있다. 2. 필요한 기능들 import 하기나는 아래와 같이 import 했다.import..

조금 찡찡거리자면...로딩이미지가 사업단에서 기본적으로 설정한게 있는데그걸 하필 내가 만든 페이지 중 특정 부분에서만 다른 이미지로 바꾸고 싶다 함...그래 어찌저찌 이미지는 바꿈... 근데 여기도 또 문제가 터졌으니...내 로딩바는 단계별로 진행순서를 알려주는 gif파일인데예를 들어 여러개 리스트 중 한 개씩 클릭하는데 처음껀 제대로 로딩 gif이미지가 처음부터 잘 나옴...근데 두번, 세번, 네번 누를때 로딩이미지가 로딩 끝낸 직전 이미지부터 모이는 것...즉, 처음 클릭 -> 로딩이미지가 '조회하고있습니다' 보여주고 '조회를 마쳤습니다' 여기서 끝났다면 -> 다음 클릭 -> 로딩이미지는 '조회를 마쳤습니다' 여기서 부터 보여는 것....아 진짜 돌겠네...그러나 해결 완.... 문제gif로 사용한 ..

아 진짜 5시 반 넘어서 수정해달라고 한 공무원이나 그걸 시키는 상사... 매우 빡쳤다... 문제상황넥사크로 환경파일(environment.xml)에 loadingimage에 설정된 로딩이미지를 특정 화면에서만 다른 이미지로 변경하고 싶음특정 트랜젝션을 태울 경우만 로딩이미지 변경되었으면 함 진짜... 엄청 찾아봄... 다른 회사분한테도 물어보고 구글링해보고 ai한테도 물어보고...하지만 답은 가이드에 있었다...넥사크로 가이드에서 loadingimage를 검색하면Description에서 "데이터 로딩 시 화면에 표시될 이미지를 설정하는 속성입니다." 라고 써있다.설정!!!! 그럼 이미지 변경도 되겠구나 싶어서 활용 해결해당 화면 script에서 트랜젝션 function을 태우기 직전에nexacro.ge..

진짜 너무너무너무너무너무 빡쳐서 남김... col0              col1row0 row1 row2row3('그리드 원본'이라 칭함) 그리드를 만들 때 그리드 형태는 저런식으로 밑에 2줄만 병합하고 row0의 row size는 0으로 안보이게 처리함즉, 아래와 같은 그리드 형태가 됨(row0은 row size가 0이라서 안보이게 됨)col0              col1row1 row2row3('그리드 수정'이라 칭함) 시나리오사용자가 input(edit사용)에 질문을 입력하고 [검색] 버튼을 누르면사용자가 입력한 질문이 (col1, row0)에 써지면서 row0의 높이를 늘린다.그리고 나머지 subrow(row1, row2, row3)들의 높이를 0으로 처리해서 안보이게 처리  (여기까지가 ..