전체 글 (334) 썸네일형 리스트형 [nestjs] typeorm 페이지네이션 만들기 (take, skip이용) typeorm의 take과 skip은 limit과 offset과 비슷하게 사용되며 페이징할때 더 효율적이다.복잡한 쿼리문이 들어갈 경우 (가장 단편적인 예를 들어 페이지네이션같은 작업의 경우)에는 limit, offset이 제대로 작동하지 않을 수 있다. 따라서 database의 조인문이나 쿼리문을 제대로 읽지 못할 수 있기 때문에 이를 대신하여 take,skip을 많이 사용한다. 하단 설명 및 코드는 javascript의 slice기능을 사용해서 작업해보았던 초기 작업 코드와, typeorm을 활용한 (take,skip) 간단한 구현코드이다. 혹시 나와 같은 초보 nestjs 사용자가 참고해보면 좋을 듯하여 부끄럽지만 비교 코드를 남긴다. **typeorm take skip 개념**skiip(n)의 경.. [React] 대분류,소분류 리스트 추가 및 delete 아직 전체적으로 정리가 된 코드는 아니지만 혹시, 프론트 단에서 리스트 추가가 어려운 분들이 참고하실수도 있을 듯하여 글을 남겨 본다.이번에 진행한 component는1.대분류 리스트 삭제 , 2.대분류 리스트 내에 소분류 데이터 추가 후 하단에 출력3.대분류 리스트 내 소분류 데이터 삭제 가 가능하며, 가상 배열을 초기값으로 지정하여 출력해놓았다.import React, { useState, useRef, useEffect } from "react";import { useNavigate } from "react-router-dom";const Lists = () => { const navigate = useNavigate(); const [smcategory, setSmCategory] = useS.. [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,tailwind사용) redux-toolkit을 활용한 자동로그인 설정하는 튜토리얼이다.기본적인 구조는 생략하고 메인이 되는 페이지 구현 및 함수만 간략하게 정리해보았다.1.로그인을 진행할 비동기함수를 설정하고, responsive값이 true일때 해당 유저 정보를 요청하여 initailState값에 넣는다.import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";import api from "../../common/api";export const adminLogin = createAsyncThunk("login/login", async (params) => { console.log(params) const res = await api.post("/admin/lo.. [React] input checkbox ui 변경하기 input checkbox의 ui를 변경하는 예제를 만들어보았다.1.먼저 input type checkbox인 default css 값과, check 되었을때 의 css 롤 설정해준다.background-image를 첨부할 수도 있다.//css코드input[type="checkbox"] { appearance: none; width: 1.5rem; height: 1.5rem; border: 1.5px solid gainsboro; border-radius: 50%;}input[type="checkbox"]:checked { border-color: transparent; background-repeat: no-repeat; background-color: limegreen;}2.해당 체크박.. [Javascript,React]스크롤이벤트(scrollEvent) - 해당위치(id)로 이동하기/ scroll시 animate /scroll시 하단이동 (scroll to id with javascript, react) 1.해당 id 로 위치 이동시키기 css 파일에 html scroll-behavior 값을 전체 설정해준후, 클릭시 이동할 버튼에 a 링크를 하단과 같이 해시 기호를 사용하여 걸어준다. 클릭시 부드럽게 스크롤 되기 원하는 위치에 해당되는 id값을 가진 div를 출력하면 간단하게 부드럽게 움직이는 scroll event 를 줄 수 있다.1. Make a move to Id(#)First of all you have to set a 'scroll-behavior' in to a css code.And If you want to make a move with scroll event, you need link with hash like the below code.//csshtml { scroll-behav.. [React] 애니메이션이 포함된 간단한 toggle 버튼 만들기 (make a toggle button using just react) 토글에 애니메이션을 넣어 동작시켜보았다. 이렇게 만들게 되면 따로 토글 버튼 모듈을 추가하지 않고도 간단하게 토글을 생성할 수 있으며, 다양한 애니메이션이나 옵션을 추가하여 사용할 수 있다.먼저 토글을 동작 시킬 parent div에 onClick 함수로 토글 형식을 넣어주고, toggle시 동작시킬 container와 circle의 클릭시 부여되는 css className을 각각 부여해준다. I generate a toggle button with simple animation. This Component is very useful to create and custom a new toggle button. You can use it with adding some other custom options. .. [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.. 이전 1 2 3 4 ··· 42 다음