프론트엔드 개발자 엄성준

React가 아닌 Jsp 환경에서 함수 작성 중 변수로 받은 값들이 console.log()에는 잘 출력되는데 변수를 활용할 때는 값이 제대로 출력되지 않는 어려움을 겪었다. 이때 회사 선배분이 해결법을 알려주셔서 아래와 같이 적용했더니 해결할 수 있었다. function markPosition(mark, target){ let markBox = document.querySelector(`.markBox\${target}`); }

ScrollToTop.tsx 생성 import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; const ScrollToTop = () => { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; }; export default ScrollToTop; 이후 main.tsx 즉 최상위 component에서 페이지 component들을 감싸게 삽입하면 완료 import ScrollToTop from './shared/ScrollToTop'; ReactDOM.createRoot(docum..

Don't use `Number` as a type. Use number insteadeslint@typescript-eslint/ban-types 위와 같이 오류가 발생해서 Number와 number에 차이점에 대해서 검색하게 되었다. TypeScript에서 number는 숫자 값을 나타내는 기본 유형을 참조하는 반면, Number는 수학 연산을 수행하고 숫자 값을 조작하는 데 사용할 수 있는 전역 개체를 참조합니다. Type number let age: number = 30; function add(a: number, b: number): number { return a + b; } Type Number const x: Number = new Number(10); const y: Number = ne..

const { data } = useQuery( ['todos', id], () => fetchTodoById(id), { enabled: !!id, } ); 만약 id 값이 undefined or null이라면 API 호출을 하지 않는 옵션!

Excel 파일을 다 그리고 난 뒤 a4사이즈 보다 크게 그리게 되어서 인쇄할 때마다 페이지 레이아웃을 통해 너비를 1페이지로 설정해야 하는 번거로움이 생겼다. 이 문제점을 해결하기 위해 방법을 찾아봤는데 worksheet.pageSetup.pageSize로 접근하려 하니까 지정된 사이즈 내에서 바꾸기만 가능해서 다른 방법을 찾았는데 바로 아래의 코드와 같다 const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet'); worksheet.pageSetup.fitToPage = true; // 가로 너비 요소에 맞게 설정 worksheet.pageSetup.fitToHeight = 0; // 세로 높이 자동..

먼저 cell을 쉽게 생성하기 위한 함수를 만들었습니다. import ExcelJS from 'exceljs'; export default function ExcelText( worksheet: ExcelJS.Worksheet, cell: string, text: string, fontSize: number, vertical: any, horizontal: any, color: string = '', bold: boolean = false, ) { const cellRef = worksheet.getCell(cell); // 텍스트 추가 cellRef.value = { richText: [ { text: text, font: { size: fontSize, bold, color: { argb: color..

저 같은 경우는 Textarea에서 줄 바꿈 즉 \n으로 표현된 문자열을 replace를 통해서 /\n/g으로 인식한 뒤 ' ' 문자로 변경하였습니다. console.log(bookingRequestDetail?.data.memo?.content.replace(/\n/g, ' '));

import { Document, Font, Page, PDFViewer, StyleSheet, Text, } from '@react-pdf/renderer'; import React from 'react'; Font.register({ family: 'SpoqaHanSans', src: 'https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@01ff0283e4f36e159ffbf744b36e16ef742da6d8/Subset/SpoqaHanSans/SpoqaHanSansLight.ttf', }); const styles = StyleSheet.create({ viewer: { flex: 1, }, korean: { fontFamily: 'SpoqaHanSans', },..

PiTemplate.ts import ExcelJS from 'exceljs'; import { PiType } from '../types/pi'; import { format } from 'date-fns'; import base64Img from '../../actions/utils/base64Img'; import logoImgURL from '../../assets/images/common/ExcelLogoImg.png'; export default async function piTemplate(piDetail: PiType, language: string) { const download = async (workbook: ExcelJS.Workbook, fileName: string) => { c..

클로저란? 내부 함수에서 외부 함수에 맥락에 접근할 수 있는 권한입니다. 그렇다면 일반적인 함수에서 전역 변수를 가리키는 것도 모두 클로저일까요? - 당연히 아닙니다. 외부 함수 안에 내부함수가 묶여있는 느낌과 같이 폐쇄적인 느낌을 주는 것이 클로저입니다. 다음은 클로저 예제입니다. function outer() { const x = 0; function inner() { console.log(`inside inner: ${x}`); // closures라는 특성 때문에 외부 함수의 변수에 접근할 수 있음 } return inner; } const func = outer(); // inner함수만 할당 받는 것이 아닌 외부 함수의 렉시컬 환경까지 참조 받음 func(); func라는 변수에 outer()..