분류 전체보기 검색 결과

해당 글 442건

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..
1. 웹개발/1_1_8 Error Handling 2022. 7. 6. 22:17

Next.js란?

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

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() { ..
1. 웹개발/1_1_8 Error Handling 2022. 6. 26. 19:42

[Javascript] BOM이란?

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

[React] 로컬에 있는 json으로 url을 설정하는 방법

Front-end 개발자는 주로 개발을 편하게 하기 위해 로컬 환경에서는 서버에 데이터를 직접 호출하지 않고, 로컬에 dummy 데이터를 저장하여 그 값을 불러와 개발 시간을 단축하고는 합니다. 이번 글에서는 어떻게 로컬에 있는 json 데이터를 axios를 통해 불러올 수 있는지 확인해 보도록 하겠습니다. [axios 다운로드] 테스트를 위해 axios를 먼저 설치합니다. yarn add axios npm i axios [json 파일 생성] axios로 받을 json 파일은 root > public 폴더 내에 위치시킵니다. 저는 전국에 있는 축구장을 json으로 다운 받아 public > dummy > StadiumInfo.json에 저장시켜보았습니다. [json 파일 조회] axios의 url 파라..
1. 웹개발/1_1_5 React JS 2022. 5. 15. 15:16

[Javascript] Mobile인지 PC인지 확인하는 함수

가끔 코딩을 하다 보면 사용자가 PC이냐 Mobile이냐에 따라 다르게 분기 처리를 해야 할 때가 있습니다. 따라서 이번 글에서는 현재 사용자가 Mobile로 접근하고 있는지 PC로 접근하는지 확인하는 함수를 구현해보겠습니다. 정말 간단합니다. navigator라는 객체를 통해서 손쉽게 브라우저 정보를 확인할 수 있고 navigator는 전역 객체여서 개발자 도구를 켜시고 console에 navigator를 입력하면 바로 확인이 가능합니다. navigator에는 다양한 프로퍼티들이 있지만 저는 userAgent라는 프로퍼티를 이용해서 현재 pc에서 사용 중인지 mobile에서 사용 중인지 구분해 봤습니다. userAgent에 'iPhone'이라는 문구가 포함되어있다면 아이폰으로 접속했다는 것입니다. 마찬..
1. 웹개발/1_1_1 JavaScript 2022. 5. 12. 17:27

useRoutes() may be used only in the context of a <Router> component. 해결 방법

토이 프로젝트에서 Route를 사용할 일이 있어 사용하는데 아래와 같은 에러가 발생하였습니다. Uncaught Error: useRoutes() may be used only in the context of a component. [에러 원인] Uncaught Error: useRoutes() may be used only in the context of a component.라는 에러를 해석해보면 useRoutes는 로 감싸야한다고 합니다. 저는 감싸지 않고 사용해서 에러가 발생한 거였습니다. root.render( ); [해결 방법] 먼저 BrowserRouter as Router를 추가해주고 Route를 Router로 감싸주시면 에러가 해결될 것입니다. import { BrowserRouter as..
1. 웹개발/1_1_8 Error Handling 2022. 5. 11. 09:58

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. 해결 방법

토이 프로젝트를 진행하던 중 아래와 같은 에러가 발생하였습니다. Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. [에러 원인] Header 태그가 children을 prop으로 전달하는 과정을 생략해 발생한 타입 에러입니다. Header가 마치 props로 Router에게 넘겨지는 구조로 코드가 작성이 되어있습니다. 넘겨지는 props가 없는데 말이죠. [에러 원인] Header 태그의 자식 컴포넌트들이 props를 넘김 받지 않도록 수정해 주시면 됩니다. root.render( );
1. 웹개발/1_1_8 Error Handling 2022. 5. 10. 17:46

[Javascript] Set 정리 및 예제

Set은 흔히 집합이라고도 합니다. Set(집합)의 개념은 간단합니다. 유한하고 구분되는 객체들의 그룹입니다. 즉, 유일한(중복되지 않는) 항목들의 그룹입니다. 집합은 O(1) 상수 시간에 유일한 항목을 확인하고 추가할 수 있기 때문에 굉장히 중요합니다. 집합이 상수 시간 연산이 가능한 이유는 집합의 구현이 해시 테이블의 구현을 기초로 하기 때문입니다. 다음과 같이 자바스크립트에서는 Set이 기본으로 지원됩니다. 기본 Set 객체에는 속성이 하나만 존재하는 데 size라는 정수 속성입니다. 해당 속성은 집합 내 항목들의 현재 개수를 나타냅니다. const exampleSet = new Set(); [삽입] Set의 주요 특징은 유일함을 확인한다는 것입니다. Set은 항목들을 추가할 수 있지만 중복되는 항..
1. 웹개발/1_1_1 JavaScript 2022. 5. 5. 15:43

[Javascript] 빅오 표기법 정리 및 예제

알고리즘의 시간 복잡도를 f(n)이라고 표현했을 때, n은 입력의 개수를 나타내고 f(n)time은 필요한 시간을 나타내고 f(n)space는 필요한 공간(추가적인 메모리)을 나타냅니다. 알고리즘 분석의 목표는 f(n)을 계산함으로써 알고리즘의 효율성을 이해하는 것입니다. 하지만 f(n)을 계산하는 것은 어려울 수 있습니다. 이런 계산을 하는데 도움이 되는 빅오 표기법의 기본적인 규칙이 있습니다. [계수 법칙] 계수 법칙은 가장 이해하기 쉬운 법칙입니다. 단순히 입력 크기와 연관되지 않은 상수를 전부 무시하면 됩니다. 빅오에서 입력 크기가 클 때 계수를 무시할 수 있습니다. 상수 K>0인 경우 f(n)이 O(g(n))이면 kf(n)은 O(g(n))이다. 즉, 5f(n)과 f(n)이 모두 동일한 O(f(n..
1. 웹개발/1_1_1 JavaScript 2022. 4. 28. 21:54