전체 글 (432) 썸네일형 리스트형 [Node.js] 라우트 처리하기 app.route() get, post, put과 같은 라우트 메서드를 한 곳에 작성할 수 있다. app.route('/customer') .get((req, res) => { res.send('고객 정보 조회'); }) .post((req, res) => { res.send('신규 고객 추가'); }) .put((req, res) => { res.send('고객 정보 수정'); }) .delete((req, res) => { res.send('고객 정보 삭제'); }); express.Router() 라우트 처리를 여러 개 파일로 분리하여 구현할 수 있다. routes/customer.js const express = require('express'); const router = express.Rout.. Node.js + Express + TypeScript 환경 세팅하기 1) 폴더 생성하기 & 폴더로 이동 2) yarn init 3) yarn add express cors ~~body-parser~~ sequelize typescript cors Express의 미들 웨어 헤더를 변경해주어 cors를 허용하는 방법이 있음 (하지만 CORS 미들웨어를 사용하는 것이 더 간단하고 편함) app.all('/*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); }); CORS 설정하기 const cors = require('cors'); app.use.. TypeError: relativeURL.replace is not a function url을 넣어줘야하는 부분에 객체를 넣어줘서 생긴 문제였다. 객체에서 url을 꺼내서 다시 넣어주니 에러가 해결되었다. Uncaught TypeError: Cannot add property current, object is not extensible (feat. forwardRef) 문제점 이전의 PR들을 모두 merge하고, /@me 에 접속하였더니 에러가 뜬다. 오류의 원인을 찾아보니 useGetFriendList.tsx 부분이 문제였다. import { useQuery } from "@tanstack/react-query"; import friendApi from "@api/friend"; const useGetFriendList = (options: any = {}) => { const { data, isSuccess } = useQuery( ["friendList"], friendApi.getAll, options ); return { data: data?.data.data, isSuccess }; }; export default useGetFriendList; 여기서 re.. Lazy loading을 쓸 때는 Suspense를 사용합시다! !!!!!!!!!!! Lazy loading을 사용할 때, Suspense와 함께 사용해야 한다! 이걸 몰라서 에러 잡는데 시간 꽤 걸렸다.. lazy를 쓸때는 suspense 를 사용합시다.. 참고 자료 React.lazy 사용해보기 FE Lazy Loading 적용기 - 트렌비 기술블로그 useRef 란? (feat. RefObject) useRef useRef? React Hook의 일종 인자로 넘어온 초기값을 useRef 객체의 .current property에 저장한다. 사용 용도 DOM 객체에 직접 접근하여 내부 값을 변경할 때 focus() 메서드를 사용해야할 때 값이 변경되어도 컴포넌트에 리렌더링이 일어나지 않도록 할 때 useRef 는 내용이 변경되어도 변경되었다는 사실을 알려주지 않는다. .current property를 변경시키면 리렌더링을 발생시키지 않음. 그래서 로컬 변수 용도로도 사용할 수 있다. ex. Input과 같은 태그에서 값을 입력할 때마다 컴포넌트에 리렌더링이 일어나지 않도록 하고 싶은 경우 그저 함수의 초기값을 .current에 저장한다고 보면 된다. useRef의 반환 타입 종류인 MutableReOb.. useMutation 사용 시 컴포넌트 리렌더링 줄이기 문제점? 로그인페이지에서 로그인 버튼을 누르면 모든 컴포넌트가 리렌더링되는 문제가 발생한다. useMutation의 반환값들 export interface MutationResult { data?: TData | null; error?: ApolloError; loading: boolean; called: boolean; client: ApolloClient; } 이 중에서 loading 이 리렌더링을 발생시킨다. 따라서 useMutation을 작성한 컴포넌트 내에서 무조건 리렌더링이 발생한다. 컴포넌트의 리렌더링을 줄이고 싶다면, props를 전달해서 하위 컴포넌트에서 useMutation을 실행시키자. 프로젝트 적용하기 이전 코드 여기서 onLogin을 내려주는게 아니라, refs와 setErrorM.. forwardRef 사용법 (+여러 ref들 전달하기) 공부하게된 계기 커스텀 훅인 useInput을 사용하여 인풋을 관리하니 편하긴 하지만, value가 달라질 때마다 인풋 컴포넌트를 포함한 대부분의 모든 컴포넌트들이 리렌더링된다. 왜냐하면 로그인 페이지에서 header, body, footer로 나뉘는데 email, password 인풋의 value들을 header, body, footer를 묶어주는 로그인페이지 컴포넌트에서 관리하기 때문이다. header에서는 memo를 사용해서 리렌더링이 안되지만, body와 footer 그리고 modal, modal background는 인풋값을 입력할 때마다 리렌더링된다. 만약에 이 인풋들을 useInput으로 관리하지 않고 useRef로 관리하게 된다면, 로그인 버튼을 눌렀을 때만 useRef.current.va.. 이전 1 2 3 4 5 6 7 ··· 54 다음
