본문 바로가기

전체 글

 (334)
[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..
[React] 특정파일의 크기가 너무 커서 submit시 전송이 안되는 경우 : file의 사이즈에 문제가 있을 경우(Can't submit the file using S3, file size problem) 프로젝트 진행중 S3를 사용해야하기도 하는데, 저장공간을 개인이 감당하기 벅차기 때문에 많이 선호되는 듯하다. 때문에 발생하는 이슈가있는데 그 중 하나를 꺼내 보려한다. file을 submit하는 이벤트 실행시 버튼을 클릭했는데 실행이 안되는 경우가 종종 있다.개발자도구를 열어봐도 도무지 방법을 알수 없었는데, 첨부되는 파일의 크기 때문에 종종 있다는 이야기를 듣고 해당 내용을 정리해보았다.해당 이슈는 aws s3에서 파일 업로드를 진행할때 발생하였는데, 구글링하여 찾아본 결과 Amazon s3콘솔은 세션 초과로 인한 대규모 업로드시 제한시간을 초과할수 있다고 명시되어있다. 참고로 아마존의 S3 사용시 파일을 업로드 할수 있는 최대 크기는 160mb 이기 때문에 이보다 큰 파일을 업로드하려면 다른 방식을..
[react]useEffect 함수실행시 navigate , console.log is not working *useEffect 내 함수 미실행 되거나 상태가 업데이트 되지 않을때 간혹가다 useEffect에서 console.log가 찍히지 않을 때가 있다. 이 경우엔 다양한 경우의 수가 있겠지만, 나의 경우엔 비동기 처리가 올바르게 되지 않아서 문제가 발생했다.console.log 혹은 navgiate, 이외의 다른 함수들을 찍었을때 출력이 되지 않는 경우 useEffect 구문 내에 비동기 함수와 조건문이포함되었는지 확인해 보면 좋을 듯하다.내가 원하는 시점에 비동기처리가 들어오지 않아 상태값 혹은 원하는 구문의 console.log가 찍히지 않아 디버깅이 어려울수 있기 때문이다. 왜냐하면 비동기 처리시  기본으로 가지고 있는 state값이 빈배열이거나 빈 string 값일 경우가 많기 때문이다. 이와 같은..
[react]Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody> react-dom.development.js:67 Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of . Make sure you don't have any extra whitespace between tags on each line of your source code. =>react 내에서 테이블을 계속 컴퍼넌트화 하고 mapping 하다 보니 자꾸 생기는 오류이다.이전에는 좀 귀찮아서(어느부분인지 찾기가..) eslint 처리했지만, 가끔씩 발생하는 오류에 해결해야겠다싶어 코드를 뜯어봤다. 말 그대로 tbody 안에 공백이 들어가면 안된다 라는 warning 같은데 도무지 해결방법을 못찾다가 , tabl..
[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로 변경시 계속해서 비동기로 데이터..
[React]Error: Actions must be plain objects. Use custom middleware for async actions.(redux-toolkit unwrap 사용시 에러) redux-toolkit unwrap을 사용하는 도중 위와 같은 에러가 발생했다.unwrap을 사용하지 않아도 참고할수 있는 예제라고 생각한다.생각보다 바보 같은 실수였는데, 독자분들이 하단에서 이유를 찾을수도 있을 것 같다.오류 부분은 표시 해두었으니 직접 찾아보아도 되고 다음 블럭으로 넘어가도 좋다.///////1.오류발생import React from "react";import { useNavigate } from "react-router-dom";import { useDispatch, useSelector } from "react-redux";import { deletePosting, getPostingReadCount,} from "../../../../features/app/postingS..
[Vue vs React] 프론트엔드 프레임워크, 라이브러리 비교 1. 프레임워크와 라이브러리의 차이점결정적인 차이점은 애플리케이션 코드를 틀로써 사용하느냐, 아니면 라이브러리를 직접 호출하여 능동적인 코드 흐름을 만드느냐에 따라 다른 것 같다. 네이밍에서도 드러나듯이 프레임워크는 골격이라는 의미를 가지고 있으며, 보통 메모리관리, 이벤트루프, db연동 등과 같이 필수적으로 들어가야 하는 코드들의 집합을 묶어놓은 구조를 제공한다. 따라서 사용자는 해당 프레임워크 내에서 메서드를 구현할수 있다. 반대로 라이브러리의 경우 특정 기능을 모은 코드들을 자유자재로 불러내어 조금더 능동적인 코드의 흐름을 짤 수가 있다. 2.React.js vs Vue.js1)React.js란??ReactJS는 재사용이 가능한 사용자 정의 함수 및 구성요소를 만드는데 유용하며, 웹 페이지 내의 빠..

티스토리툴바