6. Error

[ ActiveReportsJs ] PDF 다운로드 구현과정 getDocument 매서드 문제

구현하고자 하는 기능Reort를 PDF로 저장하는 기능 (공통으로 사용하는 기능으로, props로 받아서 공통화함)문제Viewer의 getDocument매서드를 불러오는데, 없다는 에러가 뜬다import React from 'react';import { Viewer } from '@grapecity/activereports-react';import { PdfExport, HtmlExport, TabularDataExport } from '@grapecity/activereports';// DownloadButtonProps 인터페이스 정의interface DownloadButtonProps { reportUrl: string; // 보고서 URL viewerRef: React.RefObject; //..

2024. 9. 4. 16:44

6. Error

[ ActiveReportsJs ] PDF 다운로드 구현과정 모듈 에러문제

구현하고자 했던 기능 Report를 PDF로 다운로드 하는 기능문제https://demo.mescius.co.kr/activereportsjs/docs/DeveloperGuide/api/printing-and-exporting-the-report-output ActiveReportsJS: 소개 demo.mescius.co.kr공식문서를 참고하여 PDF 다운로드 버튼 구현하는 과정에서 모듈 에러문제가 발생했다모듈 에러는 정말 난감한게....내가 잘못한거없고ㅠ 내부적 문제로 하나하나 찾아봐야한다는 점이다에러 문구ERROR in ./src/components/Report/pdfUtils.ts 19:23-38export 'Core' (imported as 'Core') was not found in '@mesc..

2024. 9. 4. 16:30

6. Error

[ Active Reports JS ] React내에서 렌더링 안되는 404 에러

1. 에러 현상 및 원인이거를 토대로 따하하는데, 아래와 같은 에러가 난다…|https://demo.mescius.co.kr/activereportsjs/docs/GettingStarted/QuickStart/QuickStart-Vitejs ActiveReportsJS: 소개 demo.mescius.co.krmessage:"Report \"/trade.rdlx-json\" is not available: Failed to fetch"activereports를 사용하고 있는데 위와같이 에러가 뜨고 레포트 렌더링이 안되고있음  2. 해결현재 경로가 http://localhost:3000/config/business/bond-type-registration 으로 들어가고 있는데, 이거에 맞춰서 public파일..

2024. 9. 2. 10:48

2. FrontEnd/LeetCode

[LeetCode] 1. 두 개의 합

# 문제정수 배열 nums 과 정수가 주어지면 target, 두 숫자의 인덱스를 반환하여 두 숫자의 합이target . 가 되도록 합니다.각 입력에 대한 해답은 정확히 하나만 있다고 가정할 수 있으며 , 같은 요소를 두 번 사용할 수 없습니다 . 어떤 순서로든 답변을 제출할 수 있습니다.예시 1:입력: nums = [2,7,11,15], target = 9 출력: [0,1] 설명: nums[0] + nums[1] == 9이므로 [0, 1]을 반환합니다.예시 2:입력: nums = [3,2,4], target = 6 출력: [1,2]예시 3:입력: nums = [3,3], target = 6 출력: [0,1] 제약사항:2 -109 -109 유효한 답은 오직 하나뿐입니다.후속 질문:  시간 복잡도 보다 낮은..

2024. 8. 28. 11:32

2. FrontEnd

[ActiveReportsJS] 레포팅 솔루션이란?

▪️ 레포팅 솔루션이란?레포팅 솔루션은 File, DBMS 등에서 제공한 정량적 데이터를 그래프, 차트, 표 등의 다양한 문서로 시각화하여 사용자에게 보여주는 도구입니다.정부24 사이트에서 등본을 출력하거나, 쿠팡에서 결제한 내역을 영수증으로 출력하는 경우들이 우리가 일상에서 레포트 솔루션을 사용하는 사례입니다.시스템 프로세스 관점으로 본다면 다음과 같이 생각할 수 있습니다.1. 쿠팡 서비스를 이용하는 사용자가 결제 영수증 출력을 위해 영수증 출력 화면에 접근합니다.2. 사용자에게 보여지는 영역을 담당하는 Presentation Service는 Report Service로 레포트 생성 요청을 전송합니다.3. Report Service에서는 라우터에서 해당 요청을 받은 뒤에 데이터 가공 및 레포트를 생성하..

2024. 8. 12. 16:05

2. FrontEnd/Ag-Grid

[AG-Grid] gridOptions 공통사용 가능하게 커스텀 하는 방법

원래 코드로 아래와 같이 작성하고 AG-Grid에서 사용할때 가져와서 사용을 했었다export const gridOptions: GridOptions = { // Column에 넣어야할 설정들은 setState로 넣어야함 => 아래에 있는것들은 반영안됨 columnDefs: [ { headerCheckboxSelection: true, checkboxSelection: true }, // 날짜 필터 설정하는거 (https://www.ag-grid.com/javascript-data-grid/filter-date/) { field: 'date', filter: 'agDateColumnFilter', filterParams: { // ToDo : 날..

2024. 7. 24. 15:01

6. Error

[eslint] is defined but never used

개발 환경 : typescript + React eslint 설정을 해뒀는데, 자꾸 에러가 떠서 뭐지 하고 찾다가 해결하여 작성함발생 이유에러를 미리 작성해놓고 적용하지 않았을 때 등장, 이외에도 선언만 하고 사용, 호출하지 않은 변수나 함수들도 no-unused-vars 규칙에 걸리게 됨기존에 있던 eslint{ "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "extends": ["plugin:@typescript-eslint/recommended"], "parserOptions": { "ecmaVersion": 2021, "sourceType": "module", "ecmaFeatures": ..

2024. 6. 13. 14:55

2. FrontEnd/State Management

[Zustand] 사용방법

1. 설치하기npm i zustandyarn add zustand2. store 만들기import create from 'zustand';import { TUser } from '../../types/auth';interface UserState { user: TUser | null; setUser: (user: TUser | null) => void;}const useUserStore = create((set) => ({ user: null, setUser: (user) => set({ user })}));export default useUserStore;위와같이 Zustand의 store를 만드는 코드는 간단하다Provider로 감쌀필요도 없이 state 와 action을 한 객체 안에서 같이..

2024. 6. 13. 14:05

2. FrontEnd/React

[React] AuthContext를 사용하여 로그인 관리하기

프로젝트에 로그인 기능을 넣던 도중에, 매번 페이지마다 useEffect로 로그인 관리하기엔 반복되는 코드가 많고 귀찮아서 chat GPT랑 어떻게 하는게 더 효율적인지 이야기하다가 AuthContext를 사용하여 하는 방법으로 리팩토링 하였다 로그인 관련 로직 고민 ⇒ AuthContext를 사용해서 로그인하는걸로 리팩토링useEffect를 사용하는 방법:장점:간단하고 직관적인 방법컴포넌트가 마운트될 때, 혹은 로그인 상태가 변경될 때마다 감지하여 적절한 동작을 수행단점:여러 컴포넌트에서 동일한 로직을 반복해서 사용컴포넌트 간의 의존성이 높아지고, 유지보수가 어려움AuthContext를 사용하는 방법:장점:전역적으로 인증 정보를 관리할 수 있으므로 여러 컴포넌트에서 쉽게 접근코드 중복을 줄이고, 유지보..

2024. 6. 11. 16:49

2. FrontEnd/React

[React] CRA(create-react-app) + TypeScript 세팅 +.eslintrc +.prettierrc

이제 React 프로젝트에 TypeScript를 적용하지 않은 케이스를 만나는 게 어려운 시대가 되었다. 프로젝트 생성할 때마다 매번 공식 문서를 확인하고 검색하는 나 자신을 위해서 기록용으로 소소하게 남겨두려고 한다.우선 해야 할 작업들은 다음과 같다.CRA(create-react-app)에 TypeScript 템플릿을 적용하여 프로젝트를 생성하기eslint, prettier를 적용하여 코드 컨벤션 보장하기typescript가 필요한 라이브러리 세팅tsconfig.json에 src 절대 경로 세팅index.css 초기화 1️⃣ CRA(create-react-app) + TypeScriptTypeScript 로 새로운 Create React App 프로젝트를 생성하려면 원하는 디렉터리에서 아래 명령어를 ..

2024. 6. 10. 17:39

6. Error

[CORS] The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

에러 내용Access to XMLHttpRequest at 'https://api.app.com/scm/v1/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated b..

2024. 5. 30. 16:08

2. FrontEnd/Javascript

[JS] MVC패턴 & Flux패턴

MVC패턴 (Model, View, Controller) : 양방향 데이터 바인딩 Model, View, Controller 의 약자이다 Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)합니다 Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여짐 사용자가 View를 통해 데이터를 입력하면, View역시 Model을 업데이트 할 수 있다는 점 즉, 데이터가 양방향으로 흐를 수 있다는 것 만약 여기서 규모가 커지면 Model과 View가 많아져 View가 다양한 상호작용을 위해 여러개의 Model을 동시에 업데이트하고 Model역시 여러개의 View에 데이터를 전달하는 상황이 발생한다. 한 Model이 업데이트되면 View가 업데이트되고, 업데..

2024. 4. 3. 17:17

2. FrontEnd/React

[React] JSX(JavaScriptXML)은 JavaScript의 일종일까?

JSX Javascript + XML 의 약자로써 자바스크립트와 XML이 합쳐진 문법 ❓ XML이란? XML(eXtensible Markup Language) 은 HTML과 같은 마크업 언어의 일종이지만, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다. 예를 들어 HTML에서는 h1, p 같은 이미 만들어진 태그를 사용해야 하지만, XML은 정의된 부분을 제외하고는 사용자가 태그를 임의로 만들 수 있다. 엄밀히 말하자면 XML은 마크업 언어라기 보다 마크업 언어를 정의하기 위한 언어라고 할 수있다. JavaScript는 웹 브라우저에서 동적인 웹 페이지를 만들기 위해 사용되는 프로그래밍 언어이고, 웹 페이지의 동적인 부분을 다루는 데 사용된다 XML은 마크업 언어의 일..

2024. 3. 26. 11:42

2. FrontEnd/CSS

[CSS] display 개념 및 속성

display display 속성은 요소의 표시 방법을 지정하여 웹 페이지의 레이아웃을 제어하는 데 중요한 역할을 합니다. 적절한 display 속성 값을 사용하여 요소를 올바르게 배치하고 웹 페이지의 디자인을 제어할 수 있습니다. display 속성의 개념 display 속성은 CSS에서 요소의 표시 방법을 지정하는 데 사용되는 속성입니다. display 속성은 요소를 블록(block), 인라인(inline), 인라인-블록(inline-block), 그리드(grid), 플렉스(flex)가 있다. display 속성의 속성값 block : 요소를 블록 수준 상자로 표시합니다. 요소는 새로운 줄에서 시작하며, 가능한 최대 가로 너비를 차지하고 수직으로 쌓입니다. 블록 요소는 width, height, ma..

2024. 3. 25. 15:50

6. Error

[Next] window is not defined

암장예약?하는 사이드 프로젝트에서 next.js 를 사용하고, 카카오맵을 사용한다. 기능으로 현재 위치를 파악하고 위치표시를 하는데 navigator.geolocation을 사용하면 된다는 것을 알게 됨 아래와 같이 Location을 불러오는 함수를 만들고 카카오맵쪽에서 불러오는 방식으로 사용함 /* eslint-disable lines-around-directive */ 'use client'; import { useEffect, useState } from 'react'; export default function Location() { const [location, setLocation] = useState..

2024. 3. 19. 15:55

3. Backend/NestJS

[코드팩토리 NestJS 강의] Typeorm 사용해보기

NestJS에 Typeorm 설정하기 yarn add @nestjs/typeorm typeorm 설치하기 // app.module.ts import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { PostsModule } from './posts/posts.module'; import { TypeOrmModule } from '@nestjs/typeorm'; @Module({ imports: [ PostsModule, TypeOrmModule.forRoot({ // 데이터베이스 타입 // VS코드에서 postg..

2024. 3. 14. 19:22

3. Backend/NestJS

[코드팩토리 NestJS 강의] SQL & Docker

SQL 기본기 SQL을 알아야 지속가능한 데이터를 저장하는 방법을 알 수 있다 Q. 데이터는 왜 초기화되는가? (NestJS를 실행할때, 코드를 변경할때마다 서버가 재시작이 되었음. 재시작이 될 때마다 API를 통신하면서 원래 NestJS에 선언되어 있던 변수들만 그대로 사용할 수 있었음. A. 하드웨어적인 이유 (HDD/SSD부터 RAM으로) 코드를 작성하게 되면, 코드는 SSD에 저장이 됨 → NestJS코드를 실행하게 되면 SSD에 있던 코드가 RAM으로 이동함 → RAM에 위치해있는 데이터가 실행이 되어 NestJS서버를 실행함 → RAM에 올라간 데이터는 프로그램이 재시작되면 리셋됨 → 그렇기에 실행도중 생성,변경된 변수들을 유지가 안됨 (* RAM : 데이터를 영구적 저장이 불가능) (* SS..

2024. 3. 14. 13:48