코딩병원

AxiosError: Request failed with status code 500 해결 방법

사이드 프로젝트를 진행하다가 아래와 같이 에러가 발생하였습니다. 에러 status는 500이면 여러개의 에러형태가 있을 수 있어 정확한 원인은 로그를 봐야 알 것입니다. 이번 글에서는 제가 발생한 현상을 기준으로 에러가 발생한 이유와 해결 방법을 공유드립니다. 저와 같은 에러가 발생해서, 저처럼 하다가 막히지 마시고 이 글을 보고 시간 절약하며 빠르게 해결하셨으면 좋겠습니다. [에러 원인] axios 라이브러리를 이용하여 post 방식으로 api를 호출하였는데 호출이 제대로 되지 않아 에러가 발생하였습니다. 에러를 로그로 찍어서 확인해 보니 'Uncaught (in promise) Error: AxiosError: Request failed with status code 500' 이었습니다. 더 자세히 ..

2022. 12. 17.

[React] Debounce와 Throttle 사용법 및 예제

[이벤트 핸들러를 효율적으로 처리해야 하는 이유] input 태그 같은 곳에서 값을 입력할 때마다 이벤트 핸들러에 비즈니스 로직 혹은 API가 포함된 로직이 호출하게 되면 비용적인 문제도 발생하고, 유료 API 같은 경우 호출할 때마다 비용이 발생하게 됩니다. 간단한 예제를 통해 이벤트 핸들러가 보통 어떻게 호출되는지 확인해 보겠습니다. export default function App() { const onChange = e => { console.log(e.target.value); } return onChange(e)} />; } '안녕하세요'를 입력하면 'ㅇ', '아', '안', '안ㄴ', '안녀', '안녕' ... 입력할 때마다 불필요하게 이벤트가 실행되는 것을 확인할 수 있습니다. 이렇게 연속..

2022. 10. 27.

[React] React.lazy()란?

[React.lazy란?] React에서 컴포넌트 파일을 코드의 최상단에 import로 정의하고 동적으로 불러오기를 사용하면 에러가 발생합니다. 따라서 컴포넌트를 동적으로 불러오기 위해서는 React.lazy()를 사용해야 합니다. React.lazy() 메서드를 사용하면 동적 가져오기를 사용하여 구성 요소 수준에서 React 애플리케이션을 쉽게 코드 분할할 수 있습니다. [React.lazy를 사용하는 이유] 일반적으로 규모가 큰 React 애플리케이션은 많은 요소, 라이브러리 등으로 구성됩니다. 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 Javascript 번들이 사용자에게 전송됩니다. 이는 페이지 성능에 상당한 영향을 줄 수 있..

2022. 9. 9.

[React] 리액트를 선택하는 이유

[React란?] React는 UI 구축을 위한 자바스크립트 라이브러리입니다. facebook에서 제공해주는 라이브러리로서 주로 SPA(Single Page Application)을 만들 때 사용됩니다. React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있습니다. 컴포넌트를 레고처럼 다루어 레고를 조립하듯이 컴포넌트를 조립하여 UI를 개발하여서 유지 보수하기에 유리합니다. React를 사용하면 페이지 전체를 렌더링 하지 않고 렌더링이 필요한 부분만 렌더링 할 수 있습니다. [React 등장 배경] 리액트의 등장 이전에도 많은 라이브러리/프레임워크가 존재했습니다. (jQuery, Vue.js, Angular.js 등) jQuery의 경우, 여러 종류의 웹브라우저들마다 JS를 불러오는 방식이 달..

2022. 9. 7.

[React] 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)

렌더링이란? 서버로부터 HTML 파일을 받아 브라우저에 보여주는 과정입니다. 여기서 서버 사이드 렌더링과 클라이언트 사이드 렌더링은 어떻게 화면을 렌더링 하는지 차이가 있습니다. 클라이언트 사이드 렌더링(CSR) 클라이언트가 서버에서 HTML, CSS, JS 파일을 내려 받습니다. 서버는 단지 JSON 파일만 보내주는 역할을 하며 HTML을 그리는 역할은 클라이언트의 JS에서 수행합니다. 즉, 사용자의 행동에 따라 필요한 부분만 불러옵니다. 분명 빈 HTML 문서를 불러왔는데 화면에서는 이쁘게 잘 나오고 있는 것을 볼 수 있습니다. 화면의 요소들은 어디서 만들어졌을까요? 바로 bundle.js 파일을 통해 만들어진 것입니다. React에서는 빌드를 할 때 코드를 전부 하나의 JS 파일로 만들어 줍니다. ..

2022. 8. 24.

[React] 제어 컴포넌트 VS 비제어 컴포넌트

[제어 컴포넌트와 비제어 컴포넌트란?] React에 의해서 값이 제어되는 컴포넌트를 제어 컴포넌트, React에 의해서 값이 제어되지 않는 컴포넌트를 비제어 컴포넌트라고 합니다. 우리는 보통 , 등의 입력 요소의 태그를 다룰 때, 요소에 입력되는 값을 state로 관리하거나 DOM API를 통해서 관리할 수 있습니다. 어렵게 말하자면, state로 DOM 요소의 값을 다루는 컴포넌트가 제어 컴포넌트, 후자가 비제어 컴포넌트입니다. 이렇게만 말하면 무슨 말인지 모를 수 있지만 간단한 코드랑 같이 확인한다면 이해하는데 훨씬 더 쉬울 것입니다. 바로 코드로 살펴보도록 하겠습니다. [제어 컴포넌트] 아래의 코드는 의 값이 바뀔 때 마다 changeName을 통해 state의 값을 업데이트해주는 제어 컴포넌트입니..

2022. 8. 7.

Frontend/Javascript

[Javascript] Generator(제너레이터) 사용법 및 예제

[Generator란?] Generator Function는 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있고 내부 상태도 관리할 수 있습니다. 단 한 번의 실행으로 함수의 끝까지 혹은 return까지 실행이 완료되는 일반 함수와는 달리, Generator 함수는 사용자의 요구에 따라 일시적으로 정지될 수도 있고, 다시 시작될 수도 있습니다. 또한 Generator 함수의 반환으로는 Generator가 반환됩니다. 함수에서 값을 여러 번에 걸쳐서 반환하는 것은 불가능합니다. 따라서 이 함수는 호출할 때마다 무조건 1을 반환하게 됩니다. function returnFunc() { return 1; return 2; return 3; return 4; return 5; } 하지만 제너레이터..

2022. 7. 31.

[Next.js] rewrites로 API 키 숨기는 방법

rewrites (URL 변경되지 않음) rewrites를 사용하면 들어오는 요청 경로를 다른 대상 경로에 매핑할 수 있습니다. rewrites를 사용하면 들어오는 request 경로를 다른 destination 경로에 매핑할 수 있습니다. rewrites는 URL 프록시 역할을 하고 destination 경로를 mask 하여 사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게 합니다. 따라서 API 키를 숨길 수도 있습니다. 이와 반대로 redirects는 새 페이지로 reroute 되고 URL 변경 사항을 표시하여 API 키를 숨길 수는 없습니다. [index.tsx] import React, { useState, useEffect } from 'react'; import Seo from "../..

2022. 7. 18.

[Next.js] redirects로 경로 변경해서 연결하는 방법

redirects (URL 변경됨) redirect를 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect 할 수 있습니다. 즉, redirect를 이용해서 한 페이지에서 다른 페이지로 이동하게 할 수도 있고, 아예 다른 URL의 웹사이트로 이동하게 할 수 있습니다. redirect를 사용하려면 next.config.js에서 redirects 키를 이용하면 됩니다. [next.config.js] /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async redirects() { return [ { source: "/content", destination: "/abou..

2022. 7. 17.

[Next.js] getServerSideProps 사용법 및 예제

[서버로부터 데이터 불러오기] 기본적으로 Next.js는 모든 페이지를 미리 렌더링 합니다. 이렇게 미리 렌더링을 하여 html을 생성하게 되면 더 나은 성능과 SEO 이점을 얻을 수 있습니다. Next에는 두 가지 형태의 사전 렌더링이 존재합니다. 정적 생성: 빌드 시에 페이지를 HTML로 만들어 요청 시 제공합니다. 서버 사이드 렌더링: 페이지 요청 시 서버 사이드 렌더링을 통하여 HTML을 제공합니다. 외부 데이터를 필요로 하지 않는다면 서버 사이드 렌더링을 통하여 외부 데이터를 이용하여 렌더링을 한 후 HTML을 제공하게 됩니다. 이때 서버 사이드 렌더링에 대하여 Next는 옵션을 제공합니다. 정적 생성에 관한 옵션에 대해서는 다음에 다루도록 하겠습니다. [getServerSideProps] Ne..

2022. 7. 7.

page /fetch getServerSideProps can not be attached to a page's component and must be exported from the page 해결 방법

Next JS로 프로젝트를 진행하다가 아래와 같은 에러가 발생하였습니다. page /fetch getServerSideProps can not be attached to a page's component and must be exported from the page [에러 원인] 에러 코드를 읽어보시면 확실히 알 수 있지만 번역해보면 page/fetch 스크립트는 getServerSideProps는 페이지 구성 요소에 연결할 수 없으므로 페이지에서 export 해야 한다고 합니다. 아래 코드가 에러가 발생한 코드인데 자세히 보면 export default fetchPanel이 없는 것을 확인할 수 있습니다. import fetch from 'isomorphic-unfetch'; const fetchPan..

2022. 7. 6.

Next.js란?

Next를 사용하는 이유React는 페이스북에서 개발한 오픈소스 라이브러리로, '컴포넌트'를 사용하여 UI(User Interface)를 효율적으로 만들기 위한 프레임워크입니다. 그리고 Next는 React 기반 프레임워크로 개발자에게 뛰어난 생산성과 편의성을 제공합니다. React 기반 프레임워크이기 때문에 React에 대한 기본적인 지식을 필요로 합니다. React만으로도 프론트엔드 개발을 할 수 있는데, 왜 Next를 사용해야 할까요? 그 이유는 React의 단점에서 찾아볼 수 있습니다.React의 단점(SPA의 단점)React는 싱글 페이지 애플리케이션(SPA으로서 사이트에 접속할 때 하나의 페이지를 불러옵니다. 페이지를 불러올 때 필요한 모든 자바스크립트 파일을 한 번에 불러옵니다. SPA는 페..

2022. 7. 4.

Operator '<' cannot be applied to types 'boolean' and 'RegExp' 해결 방법

Next JS로 프로젝트를 진행하다가 아래와 같은 컴파일 에러가 발생하였습니다. Operator '

2022. 6. 28.

The default export is not a React Component in page: "/" 해결 방법

Next JS를 공부하던 중에 아래와 같은 에러가 발생하였습니다. The default export is not a React Component in page: "/" [디렉토리 구조] [에러 원인] index.ts 파일에 아래와 같이 코드를 입력하고 실행해서 확인하니 The default export is not a React Component in page: "/" 에러가 발생하였습니다. 에러를 읽어보면 default export가 React Component가 아니라고 합니다. Next JS에서는 default로 export하지 않는다면 사이트에 접속했을 때 에러가 발생하게 되어있습니다. 따라서 default export를 하지 않아 발생한 에러입니다. export function Home() { ..

2022. 6. 26.

Frontend/Javascript

[Javascript] BOM이란?

브라우저 객체 모델(BOM)이란? Javascript를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있습니다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)입니다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아닙니다. 하지만 이 모델은 Javascript가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 줍니다. 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체로 사용할 수 있습니다. Browser 객체 window 모든 객체가 소속된 객체이며, 브라우저 창을 의미합니다. document 현재문서에 대한 정보를 갖고 있는 객체입니다. histo..

2022. 6. 25.