A.개발관련자료 (41) 썸네일형 리스트형 [React] redux-toolkit을 활용한 탭만들기 (how to make a tab menu with react and redux-toolkit) 1.페이지 내에서 탭 클릭시 보여줄 이벤트 ( 필자는 클릭시 비동기함수를 각각 불렀다)로 페이지에서 보여줄 데이터를 매핑하는 코드를 만들어보았다.탭을 클릭시 탭명이 postingSlice의 mainTab으로 상태가 변경 되고,1.I made a onClick tab code which appears when you click the tab. You can find the mapping data when the click event runs. You must to concentrate to onClickToggle Function which i made. Inside of the code, there is a param and dispatch function. you can put param inside .. [React] redux-toolkit의 slice 비동기함수 내에서 navigate 쓸수 없을때( To solve createAsyncThunk asynchronous function can't navigate) 해당 이슈는 redux-toolkit 비동기 함수 호출시 사용시 사용되는 createAsyncThunk에서 발생된 이슈이다.필자는 비동기 함수가 실행된 후 response값이 true로 들어올때 다른 페이지로 이동을 위해 useNavigate을 해당 함수에 호출하여 사용하였으나 작동하지 않았다. 이유는 정확하게 알수 없었지만, 다양한 해결방안들을 둘러보면서 몇가지 대안들을 찾았다.하단 코드는 우선 navigate 가 실행되지 않는 slice 구문이다.This issue is made from the createAsyncThunk when you are trying to use the asynchrounus function inside it.Especially navigate can't work almos.. [React] increment , decrement button using react-redux, redux toolkit redux-toolkit으로 작업을 하게 될 경우가 많아 사용방법 이해에 혹시 도움이 될까하여redux-toolkit 내의 slice 구문을 활용하여 간단한 increment, decrement 버튼 예제를 만들어보았다. 우선 vsc(visual studio code)를 사용하여 파일 트리구조를 살펴보자면 하단과 같다.redux-toolkit과 관련된 직접적인 코드는 features의 slice형태로 작성되었다. npm install @reduxjs/toolkit react-redux redux 1. redux-toolkit과 react-redux, redux를 npm으로 인스톨해준다.2.기본 create-react-app으로 생성한 index.js의 내부에 Provider로 App.js를 감싸주고 re.. [nestjs] typeorm AND OR BETWEEN typeorm 사용시 where 조건문에서 and 나 or 조건문을 쓸 경우가 다수 존재한다.그래서 간단한 코드로 하단에 정리를 해 보았다, 1.typeorm에서의 AND 와 ORAND연산의 경우 where 조건문에 object 형식으로 해당 repository에서 찾아야할 value값을 넣어줄 수 있으며,OR연산의 경우 where 조건문에 배열 형식으로 조건 object들을 다수 나열 할 수 있다.생각보다 간편하지만 많이 헷갈리는 부분이라 간단하게 정리하길 원하는 nestjs 초보자 분들이 계시다면 도움이 되었으면 좋겠다.//기존 query문 andSELECT * FROM "user"WHERE "name" = 'pei' AND "hobby" = 'reading'//기존 query문 orSELECT *.. [React]Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. -원인: input tag에 readOnly를 사용하거나, value를 defaultValue로 사용하도록 권장하는 warning 인것 같다.1.때문에 readOnly를 사용했더니 input value가 읽기만 가능한 형태로 수정 되어 input 내 value를 수정할수가 없고,2.defaultValue로 변경시 계속해서 비동기로 데이터.. [Vue vs React] 프론트엔드 프레임워크, 라이브러리 비교 1. 프레임워크와 라이브러리의 차이점결정적인 차이점은 애플리케이션 코드를 틀로써 사용하느냐, 아니면 라이브러리를 직접 호출하여 능동적인 코드 흐름을 만드느냐에 따라 다른 것 같다. 네이밍에서도 드러나듯이 프레임워크는 골격이라는 의미를 가지고 있으며, 보통 메모리관리, 이벤트루프, db연동 등과 같이 필수적으로 들어가야 하는 코드들의 집합을 묶어놓은 구조를 제공한다. 따라서 사용자는 해당 프레임워크 내에서 메서드를 구현할수 있다. 반대로 라이브러리의 경우 특정 기능을 모은 코드들을 자유자재로 불러내어 조금더 능동적인 코드의 흐름을 짤 수가 있다. 2.React.js vs Vue.js1)React.js란??ReactJS는 재사용이 가능한 사용자 정의 함수 및 구성요소를 만드는데 유용하며, 웹 페이지 내의 빠.. [React]Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React js 프로젝트 작업중 위 스크린샷의 경고가 표시되었다.이 경고의 경우 ReactDOM.render가 React 18에서 더 이상 지원되지 않을 경우를 의미한다.때문에 나는 App.js의 초기 세팅이 이전 스타일로 되어있어 변경해주었다.하단 코드는 react-redux 및 persist 를 사용한 app.js에서 오류코드를 해결한 방식이다.context-api나 다른 라이브러리를 사용할 경우는 그 다음 블럭 코드를 참고하면 유용할 듯 하다.//오류난 코드import React from "react";import "./index.css";import App from "./App";import { Provider } from "react-redux";import store from "./featur.. [React]git stash - 병합충돌 해결 **git pull commit push 과정에서 병합충돌이 발생하여 git stash 명령어를 사용하여 해결해 보았다.동시다발적으로 코드를 변경하는 경우 발생하는 병합충돌을 해결하기 위해서, 충돌 발생 시점에서 '임시저장'의 용도로 stash를 사용할 수 있다.git stash//stash stack에 임시저장git stash list//임시저장한 stash 내용 보기git stash apply//최근 stash 가져오기git stash drop//가장 최근 stash 지우기git stash drop stash@{indexNumber}//특정 stash 가지고 오기git stash clear//모든 stash stack에서 지우기git stash pop//최근 stash를 불러오고 stack에서 지움g.. 이전 1 2 3 4 ··· 6 다음
